- Revision
- 164265
- Author
- d...@apple.com
- Date
- 2014-02-17 18:31:18 -0800 (Mon, 17 Feb 2014)
Log Message
Constrain replaced element layout to from-intrinsic aspect ratio if specified
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.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (164264 => 164265)
--- trunk/LayoutTests/ChangeLog 2014-02-18 02:03:49 UTC (rev 164264)
+++ trunk/LayoutTests/ChangeLog 2014-02-18 02:31:18 UTC (rev 164265)
@@ -1,3 +1,24 @@
+2014-02-17 Dean Jackson <d...@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 <bfulg...@apple.com>
[Win] Unreviewed gardening.
Added: trunk/LayoutTests/fast/css/aspect-ratio/badchess-tall.png
(Binary files differ)
Added: svn:mime-type
Added: trunk/LayoutTests/fast/css/aspect-ratio/badchess-wide.png
(Binary files differ)
Added: svn:mime-type
Added: trunk/LayoutTests/fast/css/aspect-ratio/columns-expected.html (0 => 164265)
--- trunk/LayoutTests/fast/css/aspect-ratio/columns-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css/aspect-ratio/columns-expected.html 2014-02-18 02:31:18 UTC (rev 164265)
@@ -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=""
+ <div><img id="b" src=""
+ <div><img id="c" src=""
+ <div><img id="d" src=""
+ <div><img id="e" src=""
+ <div><img id="f" src=""
+ <div><img id="g" src=""
+ </div>
+</div>
\ No newline at end of file
Property changes on: trunk/LayoutTests/fast/css/aspect-ratio/columns-expected.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:keywords
Added: svn:eol-style
Added: trunk/LayoutTests/fast/css/aspect-ratio/columns.html (0 => 164265)
--- trunk/LayoutTests/fast/css/aspect-ratio/columns.html (rev 0)
+++ trunk/LayoutTests/fast/css/aspect-ratio/columns.html 2014-02-18 02:31:18 UTC (rev 164265)
@@ -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=""
+
+ <!-- specified sizing within constrained bounds and aspect ratio -->
+ <div><img id="b" src=""
+
+ <!-- specified sizing within constrained bounds and aspect ratio -->
+ <div><img id="c" src=""
+
+ <!-- sizing with min/max constraints -->
+ <div><img id="d" src=""
+
+ <!-- sizing with min/max constraints and aspect ratio -->
+ <div><img id="e" src=""
+
+ <!-- auto sizing with min constraints -->
+ <div><img id="f" src=""
+
+ <!-- auto sizing with min constraints and aspect ratio -->
+ <div><img id="g" src=""
+
+ </div>
+</div>
\ No newline at end of file
Property changes on: trunk/LayoutTests/fast/css/aspect-ratio/columns.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:keywords
Added: svn:eol-style
Added: trunk/LayoutTests/fast/css/aspect-ratio/containers-expected.html (0 => 164265)
--- trunk/LayoutTests/fast/css/aspect-ratio/containers-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css/aspect-ratio/containers-expected.html 2014-02-18 02:31:18 UTC (rev 164265)
@@ -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=""
+<div><img id="b" src=""
+<div><img id="c" src=""
+<div><img id="d" src=""
+<div><img id="e" src=""
+<div><img id="f" src=""
+<div><img id="g" src=""
Property changes on: trunk/LayoutTests/fast/css/aspect-ratio/containers-expected.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:keywords
Added: svn:eol-style
Added: trunk/LayoutTests/fast/css/aspect-ratio/containers.html (0 => 164265)
--- trunk/LayoutTests/fast/css/aspect-ratio/containers.html (rev 0)
+++ trunk/LayoutTests/fast/css/aspect-ratio/containers.html 2014-02-18 02:31:18 UTC (rev 164265)
@@ -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=""
+
+<!-- auto sizing within constrained bounds and aspect ratio -->
+<div><img id="b" src=""
+
+<!-- auto sizing within constrained bounds and aspect ratio -->
+<div><img id="c" src=""
+
+<!-- specified sizing with min/max constraints -->
+<div><img id="d" src=""
+
+<!-- specified sizing with min/max constraints and aspect ratio -->
+<div><img id="e" src=""
+
+<!-- auto sizing with min constraints -->
+<div><img id="f" src=""
+
+<!-- auto sizing with min constraints and aspect ratio -->
+<div><img id="g" src=""
Property changes on: trunk/LayoutTests/fast/css/aspect-ratio/containers.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:keywords
Added: svn:eol-style
Added: trunk/LayoutTests/fast/css/aspect-ratio/simple-expected.html (0 => 164265)
--- trunk/LayoutTests/fast/css/aspect-ratio/simple-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css/aspect-ratio/simple-expected.html 2014-02-18 02:31:18 UTC (rev 164265)
@@ -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=""
+<div><img id="b" src=""
+<div><img id="c" src=""
+<div><img id="d" src=""
+<div><img id="e" src=""
+<div><img id="f" src=""
+<div><img id="g" src=""
Property changes on: trunk/LayoutTests/fast/css/aspect-ratio/simple-expected.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:keywords
Added: svn:eol-style
Added: trunk/LayoutTests/fast/css/aspect-ratio/simple.html (0 => 164265)
--- trunk/LayoutTests/fast/css/aspect-ratio/simple.html (rev 0)
+++ trunk/LayoutTests/fast/css/aspect-ratio/simple.html 2014-02-18 02:31:18 UTC (rev 164265)
@@ -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=""
+
+<!-- intrinsic aspect ratio wide -->
+<div><img id="b" src=""
+
+<!-- intrinsic aspect ratio tall -->
+<div><img id="c" src=""
+
+<!-- specified sizing with min/max constraints -->
+<div><img id="d" src=""
+
+<!-- specified sizing with min/max constraints and aspect ratio -->
+<div><img id="e" src=""
+
+<!-- auto sizing with max constraints -->
+<div><img id="f" src=""
+
+<!-- auto sizing with max constraints and aspect ratio -->
+<div><img id="g" src=""
Property changes on: trunk/LayoutTests/fast/css/aspect-ratio/simple.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:keywords
Added: svn:eol-style
Modified: trunk/Source/WebCore/ChangeLog (164264 => 164265)
--- trunk/Source/WebCore/ChangeLog 2014-02-18 02:03:49 UTC (rev 164264)
+++ trunk/Source/WebCore/ChangeLog 2014-02-18 02:31:18 UTC (rev 164265)
@@ -1,3 +1,29 @@
+2014-02-17 Dean Jackson <d...@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 <s...@webkit.org>
Fix build.
Modified: trunk/Source/WebCore/rendering/RenderImage.cpp (164264 => 164265)
--- trunk/Source/WebCore/rendering/RenderImage.cpp 2014-02-18 02:03:49 UTC (rev 164264)
+++ trunk/Source/WebCore/rendering/RenderImage.cpp 2014-02-18 02:31:18 UTC (rev 164265)
@@ -323,7 +323,9 @@
|| 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();
Modified: trunk/Source/WebCore/rendering/RenderReplaced.cpp (164264 => 164265)
--- trunk/Source/WebCore/rendering/RenderReplaced.cpp 2014-02-18 02:03:49 UTC (rev 164264)
+++ trunk/Source/WebCore/rendering/RenderReplaced.cpp 2014-02-18 02:31:18 UTC (rev 164265)
@@ -99,6 +99,18 @@
updateLogicalWidth();
updateLogicalHeight();
+ // Now that we've calculated our preferred layout, we check to see
+ // if we should further constrain sizing to the intrinsic aspect ratio.
+ if (style().aspectRatioType() == AspectRatioFromIntrinsic && !m_intrinsicSize.isEmpty()) {
+ float aspectRatio = m_intrinsicSize.aspectRatio();
+ LayoutSize frameSize = size();
+ float frameAspectRatio = frameSize.aspectRatio();
+ if (frameAspectRatio < aspectRatio)
+ setHeight(computeReplacedLogicalHeightRespectingMinMaxHeight(frameSize.height() * frameAspectRatio / aspectRatio));
+ else if (frameAspectRatio > aspectRatio)
+ setWidth(computeReplacedLogicalWidthRespectingMinMaxWidth(frameSize.width() * aspectRatio / frameAspectRatio, ComputePreferred));
+ }
+
clearOverflow();
addVisualEffectOverflow();
updateLayerTransform();
