Constrain replaced element layout to from-intrinsic aspect ratio if s…

…pecified

https://bugs.webkit.org/show_bug.cgi?id=128629

Reviewed by Simon Fraser.

Source/WebCore:

First pass at implementing -webkit-aspect-ratio: from-instrinsics;

After RenderReplaced has done layout, attempt to update the
resulting size to match the desired aspect ratio. This step
will only reduce the size of an element, and never below the
minimum dimensions.

Tests: fast/css/aspect-ratio/columns.html
       fast/css/aspect-ratio/containers.html
       fast/css/aspect-ratio/simple.html

* rendering/RenderImage.cpp:
(WebCore::RenderImage::imageDimensionsChanged): If we get an update
to our intrinsic dimensions, and layout depends on this, trigger
another layout pass.
* rendering/RenderReplaced.cpp:
(WebCore::RenderReplaced::layout): Implement the step described
above.

LayoutTests:

Three new tests that exercise aspect ratio on:
- normal content
- content that is constrained within a parent container
- content in columns (pages)

* fast/css/aspect-ratio/badchess-tall.png: Added.
* fast/css/aspect-ratio/badchess-wide.png: Added.
* fast/css/aspect-ratio/columns-expected.html: Added.
* fast/css/aspect-ratio/columns.html: Added.
* fast/css/aspect-ratio/containers-expected.html: Added.
* fast/css/aspect-ratio/containers.html: Added.
* fast/css/aspect-ratio/simple-expected.html: Added.
* fast/css/aspect-ratio/simple.html: Added.

Canonical link: https://commits.webkit.org/146987@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@164265 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog

@@ -1,3 +1,24 @@
+2014-02-17  Dean Jackson  <dino@apple.com>
+
+        Constrain replaced element layout to from-intrinsic aspect ratio if specified
+        https://bugs.webkit.org/show_bug.cgi?id=128629
+
+        Reviewed by Simon Fraser.
+
+        Three new tests that exercise aspect ratio on:
+        - normal content
+        - content that is constrained within a parent container
+        - content in columns (pages)
+
+        * fast/css/aspect-ratio/badchess-tall.png: Added.
+        * fast/css/aspect-ratio/badchess-wide.png: Added.
+        * fast/css/aspect-ratio/columns-expected.html: Added.
+        * fast/css/aspect-ratio/columns.html: Added.
+        * fast/css/aspect-ratio/containers-expected.html: Added.
+        * fast/css/aspect-ratio/containers.html: Added.
+        * fast/css/aspect-ratio/simple-expected.html: Added.
+        * fast/css/aspect-ratio/simple.html: Added.
+
 2014-02-17  Brent Fulgham  <bfulgham@apple.com>
 
         [Win] Unreviewed gardening.

LayoutTests/fast/css/aspect-ratio/columns-expected.html

@@ -0,0 +1,58 @@
+<style>
+.column-container {
+    max-width: 180px;
+}
+
+.columns {
+    box-sizing: border-box;
+    -webkit-column-width: 100px;
+    height: 300px;
+}
+
+img {
+    max-width: 100%;
+    max-height: 100%;
+    margin-bottom: 10px;
+}
+
+#b {
+    width: 180px;
+    height: 90px;
+}
+
+#c {
+    width: 150px;
+    height: 300px;
+}
+
+#e, #g {
+    width: 300px;
+    height: 300px;
+}
+
+#d, #e {
+    min-width: 20px;
+    max-width: 20px;
+    min-height: 20px;
+    max-height: 20px;
+}
+
+#f, #g {
+    width: auto;
+    height: auto;
+    min-width: 30px;
+    min-height: 30px;
+}
+</style>
+
+<div class="column-container">
+    <div class="columns">
+        <div><img id="a" src="badchess-wide.png"></div>
+        <div><img id="b" src="badchess-wide.png"></div>
+        <div><img id="c" src="badchess-tall.png"></div>
+        <div><img id="d" src="badchess-wide.png"></div>
+        <div><img id="e" src="badchess-wide.png"></div>
+        <div><img id="f" src="badchess-wide.png"></div>
+        <div><img id="g" src="badchess-wide.png"></div>
+    </div>
+</div>

LayoutTests/fast/css/aspect-ratio/columns.html

@@ -0,0 +1,71 @@
+<style>
+.column-container {
+    max-width: 180px;
+}
+
+.columns {
+    box-sizing: border-box;
+    -webkit-column-width: 100px;
+    height: 300px;
+}
+
+img {
+    max-width: 100%;
+    max-height: 100%;
+    margin-bottom: 10px;
+}
+
+#b, #c, #e, #g {
+    width: 300px;
+    height: 300px;
+    -webkit-aspect-ratio: from-intrinsic;
+}
+
+#d, #e {
+    min-width: 20px;
+    max-width: 20px;
+    min-height: 20px;
+    max-height: 20px;
+}
+
+#f, #g {
+    width: auto;
+    height: auto;
+    min-width: 30px;
+    min-height: 30px;
+}
+
+#results {
+    width: initial;
+    height: initial;
+    max-width: initial;
+    max-height: initial;
+}
+</style>
+
+<div class="column-container">
+    <div class="columns">
+
+        <!-- auto sizing within constrained bounds -->
+        <div><img id="a" src="badchess-wide.png"></div>
+
+        <!-- specified sizing within constrained bounds and aspect ratio -->
+        <div><img id="b" src="badchess-wide.png"></div>
+
+        <!-- specified sizing within constrained bounds and aspect ratio -->
+        <div><img id="c" src="badchess-tall.png"></div>
+
+        <!-- sizing with min/max constraints -->
+        <div><img id="d" src="badchess-wide.png"></div>
+
+        <!-- sizing with min/max constraints and aspect ratio -->
+        <div><img id="e" src="badchess-wide.png"></div>
+
+        <!-- auto sizing with min constraints -->
+        <div><img id="f" src="badchess-wide.png"></div>
+
+        <!-- auto sizing with min constraints and aspect ratio -->
+        <div><img id="g" src="badchess-wide.png"></div>
+
+    </div>
+</div>

LayoutTests/fast/css/aspect-ratio/containers-expected.html

@@ -0,0 +1,44 @@
+<style>
+div {
+    position: relative;
+    width: 50px;
+    height: 50px;
+    margin-bottom: 5px;
+}
+img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+#b {
+    width: 50px;
+    height: 25px;
+}
+
+#c {
+    width: 25px;
+    height: 50px;
+}
+
+#d, #e {
+    min-width: 20px;
+    max-width: 20px;
+    min-height: 20px;
+    max-height: 20px;
+}
+
+#f, #g {
+    width: auto;
+    height: auto;
+    min-width: 30px;
+    min-height: 30px;
+}
+</style>
+
+<div><img id="a" src="badchess-wide.png"></div>
+<div><img id="b" src="badchess-wide.png"></div>
+<div><img id="c" src="badchess-tall.png"></div>
+<div><img id="d" src="badchess-wide.png"></div>
+<div><img id="e" src="badchess-wide.png"></div>
+<div><img id="f" src="badchess-wide.png"></div>
+<div><img id="g" src="badchess-wide.png"></div>

LayoutTests/fast/css/aspect-ratio/containers.html

@@ -0,0 +1,58 @@
+<style>
+div {
+    position: relative;
+    width: 50px;
+    height: 50px;
+    margin-bottom: 5px;
+}
+img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+#b, #c, #e, #g {
+    -webkit-aspect-ratio: from-intrinsic;
+}
+
+#d, #e {
+    min-width: 20px;
+    max-width: 20px;
+    min-height: 20px;
+    max-height: 20px;
+}
+
+#f, #g {
+    width: auto;
+    height: auto;
+    min-width: 30px;
+    min-height: 30px;
+}
+
+#results {
+    width: initial;
+    height: initial;
+    max-width: initial;
+    max-height: initial;
+}
+</style>
+
+<!-- auto sizing within constrained bounds -->
+<div><img id="a" src="badchess-wide.png"></div>
+
+<!-- auto sizing within constrained bounds and aspect ratio -->
+<div><img id="b" src="badchess-wide.png"></div>
+
+<!-- auto sizing within constrained bounds and aspect ratio -->
+<div><img id="c" src="badchess-tall.png"></div>
+
+<!-- specified sizing with min/max constraints -->
+<div><img id="d" src="badchess-wide.png"></div>
+
+<!-- specified sizing with min/max constraints and aspect ratio -->
+<div><img id="e" src="badchess-wide.png"></div>
+
+<!-- auto sizing with min constraints -->
+<div><img id="f" src="badchess-wide.png"></div>
+
+<!-- auto sizing with min constraints and aspect ratio -->
+<div><img id="g" src="badchess-wide.png"></div>

LayoutTests/fast/css/aspect-ratio/simple-expected.html

@@ -0,0 +1,43 @@
+<style>
+div {
+    margin-bottom: 5px;
+}
+
+img {
+    width: 300px;
+    height: 10px;
+}
+
+#b {
+    width: 20px;
+    height: 10px;
+}
+
+#c {
+    width: 5px;
+    height: 10px;
+}
+
+#d, #e {
+    min-width: 20px;
+    max-width: 20px;
+    min-height: 20px;
+    max-height: 20px;
+}
+
+#f, #g {
+    width: auto;
+    height: auto;
+    max-width: 30px;
+    max-height: 30px;
+}
+
+</style>
+
+<div><img id="a" src="badchess-wide.png"></div>
+<div><img id="b" src="badchess-wide.png"></div>
+<div><img id="c" src="badchess-tall.png"></div>
+<div><img id="d" src="badchess-wide.png"></div>
+<div><img id="e" src="badchess-wide.png"></div>
+<div><img id="f" src="badchess-wide.png"></div>
+<div><img id="g" src="badchess-wide.png"></div>

LayoutTests/fast/css/aspect-ratio/simple.html

@@ -0,0 +1,49 @@
+<style>
+div {
+    margin-bottom: 5px;
+}
+img {
+    width: 300px;
+    height: 10px;
+}
+
+#b, #c, #e, #g {
+    -webkit-aspect-ratio: from-intrinsic;
+}
+
+#d, #e {
+    min-width: 20px;
+    max-width: 20px;
+    min-height: 20px;
+    max-height: 20px;
+}
+
+#f, #g {
+    width: auto;
+    height: auto;
+    max-width: 30px;
+    max-height: 30px;
+}
+
+</style>
+
+<!-- specified sizing -->
+<div><img id="a" src="badchess-wide.png"></div>
+
+<!-- intrinsic aspect ratio wide -->
+<div><img id="b" src="badchess-wide.png"></div>
+
+<!-- intrinsic aspect ratio tall -->
+<div><img id="c" src="badchess-tall.png"></div>
+
+<!-- specified sizing with min/max constraints -->
+<div><img id="d" src="badchess-wide.png"></div>
+
+<!-- specified sizing with min/max constraints and aspect ratio -->
+<div><img id="e" src="badchess-wide.png"></div>
+
+<!-- auto sizing with max constraints -->
+<div><img id="f" src="badchess-wide.png"></div>
+
+<!-- auto sizing with max constraints and aspect ratio -->
+<div><img id="g" src="badchess-wide.png"></div>

Source/WebCore/ChangeLog

@@ -1,3 +1,29 @@
+2014-02-17  Dean Jackson  <dino@apple.com>
+
+        Constrain replaced element layout to from-intrinsic aspect ratio if specified
+        https://bugs.webkit.org/show_bug.cgi?id=128629
+
+        Reviewed by Simon Fraser.
+
+        First pass at implementing -webkit-aspect-ratio: from-instrinsics;
+
+        After RenderReplaced has done layout, attempt to update the
+        resulting size to match the desired aspect ratio. This step
+        will only reduce the size of an element, and never below the
+        minimum dimensions.
+
+        Tests: fast/css/aspect-ratio/columns.html
+               fast/css/aspect-ratio/containers.html
+               fast/css/aspect-ratio/simple.html
+
+        * rendering/RenderImage.cpp:
+        (WebCore::RenderImage::imageDimensionsChanged): If we get an update
+        to our intrinsic dimensions, and layout depends on this, trigger
+        another layout pass.
+        * rendering/RenderReplaced.cpp:
+        (WebCore::RenderReplaced::layout): Implement the step described
+        above.
+
 2014-02-17  Sam Weinig  <sam@webkit.org>
 
         Fix build.

Source/WebCore/rendering/RenderImage.cpp

@@ -323,7 +323,9 @@ void RenderImage::imageDimensionsChanged(bool imageSizeChanged, const IntRect* r
             || style().logicalMaxWidth().isPercent()
             || style().logicalMinWidth().isPercent();
 
-        if (imageSizeChanged || hasOverrideSize || containingBlockNeedsToRecomputePreferredSize) {
+        bool layoutSizeDependsOnIntrinsicSize = style().aspectRatioType() == AspectRatioFromIntrinsic;
+
+        if (imageSizeChanged || hasOverrideSize || containingBlockNeedsToRecomputePreferredSize || layoutSizeDependsOnIntrinsicSize) {
             shouldRepaint = false;
             if (!selfNeedsLayout())
                 setNeedsLayout();