Bug 1690443 [wpt PR 27450] - [GridNG] Resolve both min-length & max-length for auto repetitions., a=testonly

Automatic update from web-platform-tests
[GridNG] Resolve both min-length & max-length for auto repetitions.

As above. This also considers transferred sizes from the aspect-ratio.
The new tests are for dynamic changes which were previously untested
(and for some cases not working), and for aspect-ratio.

Bug: 1045599
Change-Id: I061e97a15190225616ceb18c031029f8c0791641
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2664997
Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: Ethan Jimenez <ethavar@microsoft.com>
Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#853613}

--

wpt-commits: 333c487de3e5912deb80dc55c31bf467f97df6d2
wpt-pr: 27450
This commit is contained in:
Ian Kilpatrick 2021-02-16 03:22:37 +00:00 коммит произвёл moz-wptsync-bot
Родитель e4e120da54
Коммит 843423e62c
5 изменённых файлов: 52 добавлений и 0 удалений

Просмотреть файл

@ -0,0 +1,6 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="Checks that the min-height is reflected through the aspect-ratio for determining auto repeat tracks.">
<p>Test passes if there is a filled green square.</p>
<div style="display: inline-grid; background: green; aspect-ratio: 1/1; min-height: 60px; grid-template-columns: repeat(auto-fill, 50px);"></div>

Просмотреть файл

@ -0,0 +1,10 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="Checks that the min-height is reflected through the aspect-ratio for determining auto repeat tracks.">
<p>Test passes if there is a filled green square.</p>
<div style="width: min-content; height: 100px; background: green;">
<div style="height: 100%;">
<div style="display: grid; aspect-ratio: 1/1; min-height: 60%; grid-template-columns: repeat(auto-fill, 50px);"></div>
</div>
</div>

Просмотреть файл

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="Checks that a dynamic change in containing block width changes the number of auto repeat columns.">
<p>Test passes if there is a filled green square.</p>
<div id="target" style="width: 0px; height: 100px;">
<div style="display: inline-grid; background: green; height: 100px; min-width: 60%; grid-template-columns: repeat(auto-fill, 50px);"></div>
</div>
<script>
document.body.offsetTop;
document.getElementById('target').style.width = '100px';
</script>

Просмотреть файл

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="Checks that a dynamic change in containing block height changes the number of auto repeat rows.">
<p>Test passes if there is a filled green square.</p>
<div id="target" style="width: 100px; height: 0px;">
<div style="display: inline-grid; background: green; width: 100px; min-height: 60%; grid-template-rows: repeat(auto-fill, 50px);"></div>
</div>
<script>
document.body.offsetTop;
document.getElementById('target').style.height = '100px';
</script>

Просмотреть файл

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="Checks that a dynamic change in containing block height changes the number of auto repeat columns.">
<p>Test passes if there is a filled green square.</p>
<div id="target" style="width: 100px; height: 0px;">
<div style="display: inline-grid; background: green; min-height: 60%; grid-template-columns: repeat(auto-fill, 50px); grid-template-rows: 100px; aspect-ratio: 1/1;"></div>
</div>
<script>
document.body.offsetTop;
document.getElementById('target').style.height = '100px';
</script>