Skip to content

Commit

Permalink
[wpt] Fix grid-item (no) aspect-ratio tests.
Browse files Browse the repository at this point in the history
Renaming scheme got lost, however basically:

grid-item-no-aspect-ratio-stretch-4.html -> grid-item-aspect-ratio-stretch-1.html
grid-item-no-aspect-ratio-stretch-5.html -> grid-item-aspect-ratio-stretch-2.html
grid-item-no-aspect-ratio-stretch-6.html -> grid-item-aspect-ratio-stretch-3.html
grid-item-no-aspect-ratio-stretch-7.html -> grid-item-aspect-ratio-stretch-4.html

These tests all had a viewBox defining a valid aspect-ratio. Due to:
w3c/csswg-drafts#6286 (comment)
These tests *should* have an aspect-ratio, and when stretched in one
dimension, should reflect to the other dimension (if unconstrained). See:
w3c/csswg-drafts#5713 (comment)

The below two tests basically just got renamed:
grid-item-no-aspect-ratio-stretch-8.html -> grid-item-no-aspect-ratio-stretch-4.html
grid-item-no-aspect-ratio-stretch-9.html -> grid-item-no-aspect-ratio-stretch-5.html
grid-item-no-aspect-ratio-stretch-10.html -> grid-item-no-aspect-ratio-stretch-6.html


But tests updated to correctly assert that the natural size would still
be respected.

To all these test-cases I also added "grid-template: 100% / 100%;" as
there is further complexity when inside an auto row/column which is
tested elsewhere.
(Transferred minimum size for replaced elements with an aspect-ratio).

Bug: 1114013
Change-Id: I062f67e291cc62fa63a53370595780dae16abf3b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3003564
Reviewed-by: David Grogan <dgrogan@chromium.org>
Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com>
Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/master@{#898351}
  • Loading branch information
bfgeek authored and Chromium LUCI CQ committed Jul 2, 2021
1 parent e24d133 commit fa1b4b9
Show file tree
Hide file tree
Showing 17 changed files with 209 additions and 82 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,10 @@ crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-alignment-implies-siz
crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-035.html [ Failure ]
crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-036.html [ Failure ]
crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-baseline-004.html [ Failure ]
crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1.html [ Failure ]
crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2.html [ Failure ]
crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3.html [ Failure ]
crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4.html [ Failure ]
crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html [ Failure ]
crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html [ Failure ]
crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html [ Failure ]
Expand Down
19 changes: 4 additions & 15 deletions third_party/blink/web_tests/TestExpectations
Original file line number Diff line number Diff line change
Expand Up @@ -3926,9 +3926,6 @@ crbug.com/1160916 external/wpt/css/css-backgrounds/box-shadow-radius-001.html [

# [css-grid]
crbug.com/1045599 external/wpt/css/css-grid/abspos/grid-abspos-staticpos-align-self-safe-001.html [ Failure ]
crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4.html [ Failure ]
crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6.html [ Failure ]
crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-7.html [ Failure ]
crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html [ Failure ]
crbug.com/1045599 external/wpt/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003.html [ Failure ]
crbug.com/759665 external/wpt/css/css-grid/animation/grid-template-columns-001.html [ Failure ]
Expand Down Expand Up @@ -3959,6 +3956,10 @@ virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implie
virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-035.html [ Failure ]
virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-alignment-implies-size-change-036.html [ Failure ]
virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-baseline-004.html [ Failure ]
virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1.html [ Failure ]
virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2.html [ Failure ]
virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3.html [ Failure ]
virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4.html [ Failure ]
virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html [ Failure ]
virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html [ Failure ]
virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html [ Failure ]
Expand Down Expand Up @@ -4008,18 +4009,6 @@ virtual/layout-ng-grid/fast/css-grid-layout/grid-item-spanning-and-orthogonal-fl
virtual/layout-ng-grid/fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html [ Failure ]
virtual/layout-ng-grid/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html [ Failure ]

# Bad stretching of svgs without aspect-ratio.
crbug.com/1114013 external/wpt/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5.html [ Failure ]
crbug.com/1114013 external/wpt/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-8.html [ Failure ]
crbug.com/1114013 external/wpt/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-9.html [ Failure ]
crbug.com/1114013 external/wpt/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-10.html [ Failure ]

# Open discussion of SVG aspect ratios at https://github.com/w3c/csswg-drafts/issues/6286
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4.html [ Failure ]
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5.html [ Failure ]
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6.html [ Failure ]
crbug.com/1045599 virtual/layout-ng-grid/external/wpt/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-7.html [ Failure ]

# The 'last baseline' keyword is not implemented yet
crbug.com/885175 external/wpt/css/css-grid/alignment/grid-item-self-baseline-001.html [ Skip ]
crbug.com/885175 external/wpt/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-001.html [ Skip ]
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!doctype html>
<meta charset="utf-8">
<title>Reference: stretching works for replaced items with a fallback aspect ratio</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<style>
body {
line-height: 0;
}

div {
display: inline-block;
height: 250px;
width: 350px;
background: grey;
margin: 10px;
vertical-align: top;
}

img {
display: block;
}

.justify {
width: 350px;
}
.align {
height: 250px;
}
</style>
<div>
<img class="align justify">
</div>
<div>
<img class="align">
</div>
<div>
<img class="justify">
</div>
<div>
<img style="width:10px; height:20px">
</div>

<script>
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
var imgs = document.querySelectorAll('img');
for (var i = 0; i < imgs.length; ++i) {
var img = imgs[i];
img.src = url;
}
</script>
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
<!doctype html>
<meta charset="utf-8">
<title>stretching works for replaced items with no aspect ratio</title>
<title>stretching works for replaced items with a fallback aspect ratio</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-grid">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
<link rel="match" href="grid-item-no-aspect-ratio-stretch-8-ref.html">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544">
<link rel="match" href="grid-item-aspect-ratio-stretch-1-ref.html">
<style>
body {
line-height: 0;
}

div {
display: inline-grid;
grid-template: 100% / 100%;
height: 250px;
width: 350px;
background: grey;
Expand Down Expand Up @@ -41,7 +43,7 @@
</div>

<script>
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="20px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
var imgs = document.querySelectorAll('img');
for (var i = 0; i < imgs.length; ++i) {
var img = imgs[i];
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!doctype html>
<meta charset="utf-8">
<title>Reference: stretching works for replaced items with a fallback aspect ratio</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<style>
body {
line-height: 0;
}

div {
display: inline-block;
height: 250px;
width: 350px;
background: grey;
margin: 10px;
vertical-align: top;
}

img {
display: block;
}

.justify {
width: 350px;
}
.align {
height: 250px;
}
</style>
<div>
<img class="align justify">
</div>
<div>
<img class="align">
</div>
<div>
<img class="justify">
</div>
<div>
<img style="width:20px; height:40px">
</div>

<script>
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
var imgs = document.querySelectorAll('img');
for (var i = 0; i < imgs.length; ++i) {
var img = imgs[i];
img.src = url;
}
</script>
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
<!doctype html>
<meta charset="utf-8">
<title>stretching works for replaced items with no aspect ratio</title>
<title>stretching works for replaced items with a fallback aspect ratio</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-grid">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
<link rel="match" href="grid-item-no-aspect-ratio-stretch-8-ref.html">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544">
<link rel="match" href="grid-item-aspect-ratio-stretch-2-ref.html">
<style>
body {
line-height: 0;
}

div {
display: inline-grid;
grid-template: 100% / 100%;
height: 250px;
width: 350px;
background: grey;
Expand Down Expand Up @@ -41,7 +43,7 @@
</div>

<script>
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
var imgs = document.querySelectorAll('img');
for (var i = 0; i < imgs.length; ++i) {
var img = imgs[i];
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!doctype html>
<meta charset="utf-8">
<title>Reference: stretching works for replaced items with a fallback aspect ratio</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<style>
body {
line-height: 0;
}

div {
display: inline-block;
height: 250px;
width: 350px;
background: grey;
margin: 10px;
vertical-align: top;
}

img {
display: block;
background: blue;
}

.justify {
width: 350px;
}
.align {
height: 250px;
}
</style>
<div>
<img class="align justify">
</div>
<div>
<img class="align">
</div>
<div>
<img class="justify">
</div>
<div>
<img style="width:0px; height:20px">
</div>

<script>
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"></svg>'
var imgs = document.querySelectorAll('img');
for (var i = 0; i < imgs.length; ++i) {
var img = imgs[i];
img.src = url;
}
</script>
Original file line number Diff line number Diff line change
@@ -1,24 +1,27 @@
<!doctype html>
<meta charset="utf-8">
<title>stretching works for replaced items with no aspect ratio</title>
<title>stretching works for replaced items with a fallback aspect ratio</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-grid">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
<link rel="match" href="grid-item-no-aspect-ratio-stretch-8-ref.html">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544">
<link rel="match" href="grid-item-aspect-ratio-stretch-3-ref.html">
<style>
body {
line-height: 0;
}

div {
display: inline-grid;
grid-template: 100% / 100%;
height: 250px;
width: 350px;
background: grey;
margin: 10px;
vertical-align: top;
}
img { background: blue; }

.justify {
justify-self: stretch;
Expand All @@ -41,7 +44,7 @@
</div>

<script>
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="20px" viewBox="0 0 50 100"></svg>'
var imgs = document.querySelectorAll('img');
for (var i = 0; i < imgs.length; ++i) {
var img = imgs[i];
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!doctype html>
<meta charset="utf-8">
<title>Reference: stretching works for replaced items with no aspect ratio</title>
<title>Reference: stretching works for replaced items with a fallback aspect ratio</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<style>
Expand All @@ -19,8 +19,6 @@

img {
display: block;
width: 300px;
height: 150px;
background: blue;
}

Expand All @@ -35,17 +33,17 @@
<img class="align justify">
</div>
<div>
<img class="align" style="width:20px">
<img class="align">
</div>
<div>
<img class="justify" style="height:0px">
<img class="justify">
</div>
<div>
<img style="width:20px; height:0px">
</div>

<script>
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"></svg>'
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"></svg>'
var imgs = document.querySelectorAll('img');
for (var i = 0; i < imgs.length; ++i) {
var img = imgs[i];
Expand Down
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
<!doctype html>
<meta charset="utf-8">
<title>stretching works for replaced items with no aspect ratio</title>
<title>stretching works for replaced items with a fallback aspect ratio</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-grid">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
<link rel="match" href="grid-item-no-aspect-ratio-stretch-7-ref.html">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544">
<link rel="match" href="grid-item-aspect-ratio-stretch-4-ref.html">
<style>
body {
line-height: 0;
}

div {
display: inline-grid;
grid-template: 100% / 100%;
height: 250px;
width: 350px;
background: grey;
Expand Down
Loading

0 comments on commit fa1b4b9

Please sign in to comment.