- Revision
- 280024
- Author
- [email protected]
- Date
- 2021-07-19 07:25:38 -0700 (Mon, 19 Jul 2021)
Log Message
[css-grid] Images as grid items should use the overridingLogicalHeight when defined to compute the logical width
https://bugs.webkit.org/show_bug.cgi?id=227984
Reviewed by Javier Fernandez.
LayoutTests/imported/w3c:
* web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-011-expected.txt:
* web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-012-expected.txt:
* web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-013-expected.txt:
* web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-014-expected.txt:
* web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-017-expected.txt:
* web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-018-expected.txt:
Source/WebCore:
As discussed in https://github.com/w3c/csswg-drafts/issues/5713, for images as grid items, when
stretch alignment is only applied in one axis we should respect aspect-ratio on the other.
When computing the logical width using an intrinsic aspect ratio, RenderReplaced should use the
overridingLogicalHeight whenever defined just as how it does for flex items. This change is to
replace the use of intrinsic (non-stretched) logical height in current code with the overridingLogicalHeight.
This allows us to pass an additional of 9 grid WPT tests.
* rendering/RenderReplaced.cpp:
(WebCore::RenderReplaced::computeReplacedLogicalWidth const):
LayoutTests:
9 grid WPT tests are now passing.
* TestExpectations:
Modified Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (280023 => 280024)
--- trunk/LayoutTests/ChangeLog 2021-07-19 13:55:23 UTC (rev 280023)
+++ trunk/LayoutTests/ChangeLog 2021-07-19 14:25:38 UTC (rev 280024)
@@ -1,5 +1,16 @@
2021-07-19 Ziran Sun <[email protected]>
+ [css-grid] Images as grid items should use the overridingLogicalHeight when defined to compute the logical width
+ https://bugs.webkit.org/show_bug.cgi?id=227984
+
+ Reviewed by Javier Fernandez.
+
+ 9 grid WPT tests are now passing.
+
+ * TestExpectations:
+
+2021-07-19 Ziran Sun <[email protected]>
+
[CSS-grid] Ignore the aspect-ratio of a replaced element if stretch alignments are applied to both axes
https://bugs.webkit.org/show_bug.cgi?id=227573
Modified: trunk/LayoutTests/TestExpectations (280023 => 280024)
--- trunk/LayoutTests/TestExpectations 2021-07-19 13:55:23 UTC (rev 280023)
+++ trunk/LayoutTests/TestExpectations 2021-07-19 14:25:38 UTC (rev 280024)
@@ -1432,14 +1432,10 @@
imported/w3c/web-platform-tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-015.html [ Pass Failure ]
webkit.org/b/216146 imported/w3c/web-platform-tests/css/css-grid/alignment/grid-baseline-align-001.html [ ImageOnlyFailure ]
webkit.org/b/216146 imported/w3c/web-platform-tests/css/css-grid/alignment/grid-baseline-justify-001.html [ ImageOnlyFailure ]
-imported/w3c/web-platform-tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-001.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-002.html [ ImageOnlyFailure ]
-imported/w3c/web-platform-tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-006.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-007.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-008.html [ ImageOnlyFailure ]
-imported/w3c/web-platform-tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-009.html [ ImageOnlyFailure ]
-
imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-aspect-ratio-001.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-aspect-ratio-002.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-dynamic-001.html [ ImageOnlyFailure ]
Modified: trunk/LayoutTests/imported/w3c/ChangeLog (280023 => 280024)
--- trunk/LayoutTests/imported/w3c/ChangeLog 2021-07-19 13:55:23 UTC (rev 280023)
+++ trunk/LayoutTests/imported/w3c/ChangeLog 2021-07-19 14:25:38 UTC (rev 280024)
@@ -1,5 +1,19 @@
2021-07-19 Ziran Sun <[email protected]>
+ [css-grid] Images as grid items should use the overridingLogicalHeight when defined to compute the logical width
+ https://bugs.webkit.org/show_bug.cgi?id=227984
+
+ Reviewed by Javier Fernandez.
+
+ * web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-011-expected.txt:
+ * web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-012-expected.txt:
+ * web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-013-expected.txt:
+ * web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-014-expected.txt:
+ * web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-017-expected.txt:
+ * web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-018-expected.txt:
+
+2021-07-19 Ziran Sun <[email protected]>
+
[css-grid] Use correct block-size to resolve min-content
https://bugs.webkit.org/show_bug.cgi?id=227167
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-011-expected.txt (280023 => 280024)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-011-expected.txt 2021-07-19 13:55:23 UTC (rev 280023)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-011-expected.txt 2021-07-19 14:25:38 UTC (rev 280024)
@@ -1,7 +1,5 @@
-FAIL .before 1 assert_equals:
-<img id="item" src="" class=" before" data-expected-width="200" data-expected-height="200">
-width expected 200 but got 100
+PASS .before 1
PASS .after 2
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-012-expected.txt (280023 => 280024)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-012-expected.txt 2021-07-19 13:55:23 UTC (rev 280023)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-012-expected.txt 2021-07-19 14:25:38 UTC (rev 280024)
@@ -1,7 +1,5 @@
PASS .before 1
-FAIL .after 2 assert_equals:
-<img id="item" src="" class=" before after" data-expected-width="200" data-expected-height="200">
-width expected 200 but got 100
+PASS .after 2
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-013-expected.txt (280023 => 280024)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-013-expected.txt 2021-07-19 13:55:23 UTC (rev 280023)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-013-expected.txt 2021-07-19 14:25:38 UTC (rev 280024)
@@ -1,7 +1,5 @@
-FAIL .before 1 assert_equals:
-<img id="item" src="" class=" before" data-expected-width="200" data-expected-height="200">
-width expected 200 but got 100
+PASS .before 1
PASS .after 2
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-014-expected.txt (280023 => 280024)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-014-expected.txt 2021-07-19 13:55:23 UTC (rev 280023)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-014-expected.txt 2021-07-19 14:25:38 UTC (rev 280024)
@@ -1,7 +1,5 @@
PASS .before 1
-FAIL .after 2 assert_equals:
-<img id="item" src="" class=" before after" data-expected-width="200" data-expected-height="200">
-width expected 200 but got 100
+PASS .after 2
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-017-expected.txt (280023 => 280024)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-017-expected.txt 2021-07-19 13:55:23 UTC (rev 280023)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-017-expected.txt 2021-07-19 14:25:38 UTC (rev 280024)
@@ -1,7 +1,5 @@
PASS .before 1
-FAIL .after 2 assert_equals:
-<img id="item" src="" class=" before after" data-expected-width="80" data-expected-height="80">
-width expected 80 but got 100
+PASS .after 2
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-018-expected.txt (280023 => 280024)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-018-expected.txt 2021-07-19 13:55:23 UTC (rev 280023)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-alignment-implies-size-change-018-expected.txt 2021-07-19 14:25:38 UTC (rev 280024)
@@ -1,7 +1,5 @@
-FAIL .before 1 assert_equals:
-<img id="item" src="" class=" before" data-expected-width="80" data-expected-height="80">
-width expected 80 but got 100
+PASS .before 1
PASS .after 2
Modified: trunk/Source/WebCore/ChangeLog (280023 => 280024)
--- trunk/Source/WebCore/ChangeLog 2021-07-19 13:55:23 UTC (rev 280023)
+++ trunk/Source/WebCore/ChangeLog 2021-07-19 14:25:38 UTC (rev 280024)
@@ -1,5 +1,24 @@
2021-07-19 Ziran Sun <[email protected]>
+ [css-grid] Images as grid items should use the overridingLogicalHeight when defined to compute the logical width
+ https://bugs.webkit.org/show_bug.cgi?id=227984
+
+ Reviewed by Javier Fernandez.
+
+ As discussed in https://github.com/w3c/csswg-drafts/issues/5713, for images as grid items, when
+ stretch alignment is only applied in one axis we should respect aspect-ratio on the other.
+
+ When computing the logical width using an intrinsic aspect ratio, RenderReplaced should use the
+ overridingLogicalHeight whenever defined just as how it does for flex items. This change is to
+ replace the use of intrinsic (non-stretched) logical height in current code with the overridingLogicalHeight.
+
+ This allows us to pass an additional of 9 grid WPT tests.
+
+ * rendering/RenderReplaced.cpp:
+ (WebCore::RenderReplaced::computeReplacedLogicalWidth const):
+
+2021-07-19 Ziran Sun <[email protected]>
+
[css-grid] Use correct block-size to resolve min-content
https://bugs.webkit.org/show_bug.cgi?id=227167
Modified: trunk/Source/WebCore/rendering/RenderReplaced.cpp (280023 => 280024)
--- trunk/Source/WebCore/rendering/RenderReplaced.cpp 2021-07-19 13:55:23 UTC (rev 280023)
+++ trunk/Source/WebCore/rendering/RenderReplaced.cpp 2021-07-19 14:25:38 UTC (rev 280024)
@@ -550,11 +550,10 @@
bool hasIntrinsicWidth = constrainedSize.hasIntrinsicWidth || constrainedSize.width() > 0;
bool hasIntrinsicHeight = constrainedSize.hasIntrinsicHeight || constrainedSize.height() > 0;
- // For flex items where the logical height has been overriden then we should use that size to compute the replaced width as long as the flex item has
- // an intrinsic size. It is possible (indeed, common) for an SVG graphic to have an intrinsic aspect ratio but not to have an intrinsic width or height.
- // There are also elements with intrinsic sizes but without intrinsic ratio (like an iframe). We cannot apply this rule to grid items because the grid
- // container can distort aspect ratios in case of "align-self: stretch" for example (see https://drafts.csswg.org/css-grid/#grid-item-sizing).
- if (intrinsicRatio && isFlexItem() && hasOverridingLogicalHeight() && hasIntrinsicWidth && hasIntrinsicHeight)
+ // For flex or grid items where the logical height has been overriden then we should use that size to compute the replaced width as long as the flex or
+ // grid item has an intrinsic size. It is possible (indeed, common) for an SVG graphic to have an intrinsic aspect ratio but not to have an intrinsic
+ // width or height. There are also elements with intrinsic sizes but without intrinsic ratio (like an iframe).
+ if (intrinsicRatio && (isFlexItem() || isGridItem()) && hasOverridingLogicalHeight() && hasIntrinsicWidth && hasIntrinsicHeight)
return computeReplacedLogicalWidthRespectingMinMaxWidth(roundToInt(round(overridingContentLogicalHeight() * intrinsicRatio)), shouldComputePreferred);
// If 'height' and 'width' both have computed values of 'auto' and the element also has an intrinsic width, then that intrinsic width is the used value of 'width'.
