зеркало из https://github.com/mozilla/gecko-dev.git
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:
Родитель
e4e120da54
Коммит
843423e62c
|
@ -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>
|
Загрузка…
Ссылка в новой задаче