mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update web-platform-tests to revision b'ee6da9d71d0268d7fdb04e8e5b26858f46ee0cc4'
This commit is contained in:
WPT Sync Bot
cybai
parent
4401622eb1
commit
b77ad115f6
16832 changed files with 270819 additions and 87621 deletions
|
|
@ -34,10 +34,10 @@
|
|||
display: block;
|
||||
}
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
.big .alignCenter { margin-top: 12px; }
|
||||
.big .alignEnd { margin-top: 24px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -6px; }
|
||||
.small .alignCenter { margin-top: -7px; }
|
||||
.small .alignEnd { margin-top: -14px; }
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -33,12 +33,8 @@
|
|||
.container > * {
|
||||
display: block;
|
||||
}
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
.big .alignEnd { margin-top: 26px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -6px; }
|
||||
.small .alignEnd { margin-top: -12px; }
|
||||
.big .alignEnd { margin-top: 24px; }
|
||||
.small .alignEnd { margin-top: -14px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -34,8 +34,8 @@
|
|||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignEnd { margin-top: 26px; }
|
||||
.small .alignEnd { margin-top: -2px; }
|
||||
.big .alignEnd { margin-top: 24px; }
|
||||
.small .alignEnd { margin-top: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -37,12 +37,8 @@
|
|||
.big > .container > * { margin-left: 14px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
.big .alignEnd { margin-top: 26px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -1px; }
|
||||
.small .alignEnd { margin-top: -2px; }
|
||||
.big .alignEnd { margin-top: 24px; }
|
||||
.small .alignEnd { margin-top: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -37,12 +37,8 @@
|
|||
.big > .container > * { margin-left: 14px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
.big .alignEnd { margin-top: 26px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -1px; }
|
||||
.small .alignEnd { margin-top: -2px; }
|
||||
.big .alignEnd { margin-top: 24px; }
|
||||
.small .alignEnd { margin-top: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -36,10 +36,10 @@
|
|||
height: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 24px; }
|
||||
.big .alignCenter { margin-left: 11px; }
|
||||
.big .alignCenter { margin-left: 12px; }
|
||||
.big .alignEnd { margin-left: 0px; }
|
||||
.small .alignStart { margin-left: -4px; }
|
||||
.small .alignCenter { margin-left: -3px; }
|
||||
.small .alignCenter { margin-left: -2px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -36,10 +36,10 @@
|
|||
height: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 24px; }
|
||||
.big .alignCenter { margin-left: 11px; }
|
||||
.big .alignCenter { margin-left: 12px; }
|
||||
.big .alignEnd { margin-left: 0px; }
|
||||
.small .alignStart { margin-left: -4px; }
|
||||
.small .alignCenter { margin-left: -3px; }
|
||||
.small .alignCenter { margin-left: -2px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -35,12 +35,8 @@
|
|||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 24px; }
|
||||
.big .alignCenter { margin-left: 11px; }
|
||||
.big .alignEnd { margin-left: -2px; }
|
||||
.small .alignStart { margin-left: -4px; }
|
||||
.small .alignCenter { margin-left: -3px; }
|
||||
.small .alignEnd { margin-left: -2px; }
|
||||
.big .alignEnd { margin-left: 0px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -35,12 +35,8 @@
|
|||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 24px; }
|
||||
.big .alignCenter { margin-left: 11px; }
|
||||
.big .alignEnd { margin-left: -2px; }
|
||||
.small .alignStart { margin-left: -4px; }
|
||||
.small .alignCenter { margin-left: -3px; }
|
||||
.small .alignEnd { margin-left: -2px; }
|
||||
.big .alignEnd { margin-left: 0px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -34,10 +34,10 @@
|
|||
display: block;
|
||||
}
|
||||
.big .alignStart { margin-left: 0px; }
|
||||
.big .alignCenter { margin-left: 17px; }
|
||||
.big .alignCenter { margin-left: 16px; }
|
||||
.big .alignEnd { margin-left: 32px; }
|
||||
.small .alignStart { margin-left: 0px; }
|
||||
.small .alignCenter { margin-left: -2px; }
|
||||
.small .alignCenter { margin-left: -3px; }
|
||||
.small .alignEnd { margin-left: -6px; }
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
margin-right: 9px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
|
@ -33,12 +33,8 @@
|
|||
.container > * {
|
||||
display: block;
|
||||
}
|
||||
.big .alignStart { margin-left: 0px; }
|
||||
.big .alignCenter { margin-left: 17px; }
|
||||
.big .alignEnd { margin-left: 34px; }
|
||||
.small .alignStart { margin-left: 0px; }
|
||||
.small .alignCenter { margin-left: -2px; }
|
||||
.small .alignEnd { margin-left: -4px; }
|
||||
.big .alignEnd { margin-left: 32px; }
|
||||
.small .alignEnd { margin-left: -6px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
margin-right: 9px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
|
|
|||
|
|
@ -35,12 +35,8 @@
|
|||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 0px; }
|
||||
.big .alignCenter { margin-left: 13px; }
|
||||
.big .alignEnd { margin-left: 26px; }
|
||||
.small .alignStart { margin-left: 0px; }
|
||||
.small .alignCenter { margin-left: -1px; }
|
||||
.small .alignEnd { margin-left: -2px; }
|
||||
.big .alignEnd { margin-left: 24px; }
|
||||
.small .alignEnd { margin-left: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -35,12 +35,8 @@
|
|||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 24px; }
|
||||
.big .alignCenter { margin-left: 11px; }
|
||||
.big .alignEnd { margin-left: -2px; }
|
||||
.small .alignStart { margin-left: -4px; }
|
||||
.small .alignCenter { margin-left: -3px; }
|
||||
.small .alignEnd { margin-left: -2px; }
|
||||
.big .alignEnd { margin-left: 0px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -35,12 +35,8 @@
|
|||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 24px; }
|
||||
.big .alignCenter { margin-left: 11px; }
|
||||
.big .alignEnd { margin-left: -2px; }
|
||||
.small .alignStart { margin-left: -4px; }
|
||||
.small .alignCenter { margin-left: -3px; }
|
||||
.small .alignEnd { margin-left: -2px; }
|
||||
.big .alignEnd { margin-left: 0px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -38,10 +38,10 @@
|
|||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
.big .alignCenter { margin-top: 12px; }
|
||||
.big .alignEnd { margin-top: 24px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -1px; }
|
||||
.small .alignCenter { margin-top: -2px; }
|
||||
.small .alignEnd { margin-top: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -38,10 +38,10 @@
|
|||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
.big .alignCenter { margin-top: 12px; }
|
||||
.big .alignEnd { margin-top: 24px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -1px; }
|
||||
.small .alignCenter { margin-top: -2px; }
|
||||
.small .alignEnd { margin-top: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -37,12 +37,8 @@
|
|||
.big > .container > * { margin-left: 14px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
.big .alignEnd { margin-top: 26px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -1px; }
|
||||
.small .alignEnd { margin-top: -2px; }
|
||||
.big .alignEnd { margin-top: 24px; }
|
||||
.small .alignEnd { margin-top: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -37,12 +37,8 @@
|
|||
.big > .container > * { margin-left: 14px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
.big .alignEnd { margin-top: 26px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -1px; }
|
||||
.small .alignEnd { margin-top: -2px; }
|
||||
.big .alignEnd { margin-top: 24px; }
|
||||
.small .alignEnd { margin-top: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid positioned item dynamic change.</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos">
|
||||
<style>
|
||||
.reference {
|
||||
display: grid;
|
||||
background: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if it matches the reference.</p>
|
||||
<div class="reference">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid positioned item dynamic change.</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos">
|
||||
<link rel="match" href="grid-positioned-item-dynamic-change-006-ref.html">
|
||||
<meta name="assert" content="This test checks that positioned items update upon dynamic changes.">
|
||||
<style>
|
||||
.absolute {
|
||||
background: green;
|
||||
position: absolute;
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if it matches the reference.</p>
|
||||
<div style="display: grid; position: relative; width: 100px;">
|
||||
<div style="background: green;">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
<div style="background: red; height: 25px;"></div>
|
||||
<div class="absolute"></div>
|
||||
</div>
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
document.getElementById('target').style.height = '75px';
|
||||
document.documentElement.classList.remove('reftest-wait');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid positioned item dynamic change</title>
|
||||
<link rel="author" title="Filipp Riabchun" href="mailto:talpa@yandex.ru">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<meta name="assert" content="This test checks that positioned items react to grid track size changes.">
|
||||
<style>
|
||||
.green {
|
||||
background: green;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
border: 3px solid blue;
|
||||
box-sizing: border-box;
|
||||
background: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green rectangle on top and a green square with blue border on bottom.</p>
|
||||
|
||||
<div class="green"></div>
|
||||
<div class="blue"></div>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid positioned item dynamic change</title>
|
||||
<link rel="author" title="Filipp Riabchun" href="mailto:talpa@yandex.ru">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
|
||||
<link rel="match" href="grid-positioned-item-dynamic-change-007-ref.html">
|
||||
<meta name="assert" content="This test checks that positioned items react to grid track size changes.">
|
||||
<style>
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
grid-gap: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.green {
|
||||
background: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
position: absolute;
|
||||
border: 3px solid blue;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green rectangle on top and a green square with blue border on bottom.</p>
|
||||
|
||||
<div class="grid">
|
||||
<div class="green" id="item"></div>
|
||||
<div class="green"></div>
|
||||
<div class="blue"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.body.offsetLeft;
|
||||
|
||||
var item = document.getElementById("item");
|
||||
item.style.height = '50px';
|
||||
|
||||
document.documentElement.classList.remove('reftest-wait');
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: dynamic content alignment with abspos elements.</title>
|
||||
<link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1248940">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<meta name="assert" content="Test that dynamically changing alignment for abspos grid items works as expected." />
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0px;
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.a {
|
||||
width: 140px;
|
||||
height: 60px;
|
||||
border: 1px solid purple;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script>
|
||||
function updateAlignmentAndCheckLayout() {
|
||||
let item = document.getElementById("item");
|
||||
item.style.alignSelf = "center";
|
||||
item.style.justifySelf = "center";
|
||||
checkLayout('.grid');
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="updateAlignmentAndCheckLayout()">
|
||||
|
||||
<div class="grid" data-expected-width="800" data-expected-height="600">
|
||||
<div class="a" id="item" data-offset-x="329" data-offset-y="269" data-expected-width="142" data-expected-height="62"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=943013">
|
||||
<link rel="match" href="../reference/grid-inline-baseline-ref.html">
|
||||
<p>Test passes if the text is aligned.</p>
|
||||
<div style="writing-mode: vertical-lr; text-orientation: sideways;">
|
||||
before
|
||||
<div style="display: inline-grid;">
|
||||
<div style="background: green; width: 100px; height: 50px;">grid</div>
|
||||
</div>
|
||||
after
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Sizing of an empty grid within a flexbox</title>
|
||||
<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"/>
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1246609">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="Checks that the intrisic sizes of an empty grid are correctly computed.">
|
||||
<style>
|
||||
.flex {
|
||||
display: flex;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.flex-item {
|
||||
width: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.empty-grid {
|
||||
display: grid;
|
||||
grid-gap: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div class="flex">
|
||||
<div class="flex-item"></div>
|
||||
<div class="empty-grid"></div>
|
||||
<div class="flex-item"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=973906">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div style="display: grid; width: 100px; grid-template: 50px 50px / repeat(auto-fill, minmax(50px, 25px));">
|
||||
<div style="background: green;"></div>
|
||||
<div style="background: green;"></div>
|
||||
<div style="background: green;"></div>
|
||||
<div style="background: green;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview">
|
||||
<meta name="assert" content="An element with an aspect-ratio resolves its percentage against the definite row and the track sizes get updated.">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
|
||||
<style>
|
||||
body { overflow: hidden; }
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div style="display: inline-grid; grid-template-rows: 50px 50px; background: red; height: 100px;">
|
||||
<div style="grid-row: 1; background: green; aspect-ratio: 2/1; height: 100%;"></div>
|
||||
<div style="grid-row: 2; background: green;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Grid: Grid item intrinsic maximum sizes</title>
|
||||
<link rel="author" title="Serio Villar" href="mailto:svillar@igalia.com">
|
||||
<link href="/css/support/grid.css" rel="stylesheet">
|
||||
<link href="/css/support/width-keyword-classes.css" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
|
||||
<style>
|
||||
|
||||
.item {
|
||||
font: 10px/1 Ahem;
|
||||
background: cyan;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.abs {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.grid {
|
||||
border: 2px solid black;
|
||||
display: grid;
|
||||
position: relative;
|
||||
padding-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
width: 100px;
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.col1 { grid-column: 1 / 2; background: orange; }
|
||||
.col2 { grid-column: 2 / 3; background: indigo; }
|
||||
.col3 { grid-column: 3 / 4; background: green; }
|
||||
|
||||
</style>
|
||||
|
||||
<div class="float">
|
||||
|
||||
<div class="grid" style="grid-template: 20px / 35px 5px;">
|
||||
<div class="item" style="min-width: 15px;">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template: 20px / 50px 5px;">
|
||||
<div class="item" style="min-width: 55px;">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template: 20px / 85px 5px;">
|
||||
<div class="item min-width-max-content">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template: 20px / 5px 85px;">
|
||||
<div class="item" style="min-width: 15px;">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template: 20px / 5px 85px;">
|
||||
<div class="item" style="min-width: 55px;">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template: 20px / 5px 85px;">
|
||||
<div class="item min-width-max-content">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="float">
|
||||
|
||||
<div class="grid" style="grid-template: 20px / 17.5px 5px 67.5px;">
|
||||
<div class="item" style="min-width: 15px;">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
<div class="abs col3"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template: 20px / 25px 5px 60px;">
|
||||
<div class="item" style="min-width: 55px;">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
<div class="abs col3"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template: 20px / calc(85px / 2) 5px calc(85px / 2);">
|
||||
<div class="item min-width-max-content">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
<div class="abs col3"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template: 20px / 77.5px 5px 17.5px;">
|
||||
<div class="item" style="min-width: 15px;">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
<div class="abs col3"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template: 20px / 70px 5px 25px;">
|
||||
<div class="item" style="min-width: 55px;">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
<div class="abs col3"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template: 20px / calc(105px/2) 5px calc(85px/2);" style="justify-items: start">
|
||||
<div class="item min-width-max-content">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
<div class="abs col3"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="float">
|
||||
|
||||
<div class="grid" style="grid-template: 20px / calc(10px + (90px - 15px)/2) 5px calc((90px - 15px)/2 + 10px);">
|
||||
<div class="item" style="min-width: 15px;">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
<div class="abs col3"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template: 20px / calc(50px + (90px - 55px)/2) 5px calc((90px - 55px)/2 + 10px);">
|
||||
<div class="item" style="min-width: 55px;">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
<div class="abs col3"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template: 20px / 85px 5px 10px;">
|
||||
<div class="item min-width-max-content">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
<div class="abs col3"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Grid: Grid item intrinsic maximum sizes</title>
|
||||
<link rel="author" title="Serio Villar" href="mailto:svillar@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items">
|
||||
<link href="/css/support/grid.css" rel="stylesheet">
|
||||
<link href="/css/support/width-keyword-classes.css" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<link rel="match" href="grid-intrinsic-maximums-ref.html">
|
||||
|
||||
<style>
|
||||
|
||||
.item {
|
||||
font: 10px/1 Ahem;
|
||||
background: cyan;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.abs {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.grid {
|
||||
border: 2px solid black;
|
||||
display: grid;
|
||||
position: relative;
|
||||
padding-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
width: 100px;
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
.float {
|
||||
float: left;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.col1 { grid-column: 1 / 2; background: orange; }
|
||||
.col2 { grid-column: 2 / 3; background: indigo; }
|
||||
.col3 { grid-column: 3 / 4; background: green; }
|
||||
|
||||
.gridMinContent { grid-template: 20px / minmax(0px, min-content) 5px; }
|
||||
.gridMaxContent { grid-template: 20px / 5px minmax(0px, max-content); }
|
||||
.gridMinMaxContent { grid-template: 20px / minmax(0px, min-content) 5% minmax(0px, max-content); }
|
||||
.gridAutoMinContent { grid-template: 20px / minmax(0px, auto) 5px minmax(0px, min-content); }
|
||||
.gridFitContentAuto { grid-template: 20px / fit-content(100px) 5px minmax(0px, auto); }
|
||||
|
||||
</style>
|
||||
|
||||
<div class="float">
|
||||
|
||||
<div class="grid gridMinContent">
|
||||
<div class="item" style="min-width: 15px;">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMinContent">
|
||||
<div class="item" style="min-width: 55px;">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMinContent">
|
||||
<div class="item min-width-max-content">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMaxContent">
|
||||
<div class="item" style="min-width: 15px;">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMaxContent">
|
||||
<div class="item" style="min-width: 55px;">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMaxContent">
|
||||
<div class="item min-width-max-content">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="float">
|
||||
|
||||
<div class="grid gridMinMaxContent">
|
||||
<div class="item" style="min-width: 15px;">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
<div class="abs col3"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMinMaxContent">
|
||||
<div class="item" style="min-width: 55px;">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
<div class="abs col3"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMinMaxContent">
|
||||
<div class="item min-width-max-content">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
<div class="abs col3"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoMinContent">
|
||||
<div class="item" style="min-width: 15px;">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
<div class="abs col3"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoMinContent">
|
||||
<div class="item" style="min-width: 55px;">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
<div class="abs col3"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoMinContent" style="justify-items: start">
|
||||
<div class="item min-width-max-content">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
<div class="abs col3"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="float">
|
||||
|
||||
<div class="grid gridFitContentAuto">
|
||||
<div class="item" style="min-width: 15px;">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
<div class="abs col3"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridFitContentAuto">
|
||||
<div class="item" style="min-width: 55px;">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
<div class="abs col3"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridFitContentAuto">
|
||||
<div class="item min-width-max-content">XXXX XXXX</div>
|
||||
<div class="abs col1"></div>
|
||||
<div class="abs col2"></div>
|
||||
<div class="abs col3"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=650273">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div id="target" style="display: inline-grid; background: green;">
|
||||
<div style="writing-mode: vertical-lr; line-height: 0;">
|
||||
<span style="display: inline-block; height: 100px; width: 50px;"></span>
|
||||
<span style="display: inline-block; height: 50px; width: 50px;"></span>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
document.getElementById('target').style.height = '100px';
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1126609">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div id="target" style="display: grid; width: 100px; height: 200px; background: green;">
|
||||
<div style="margin: 50%; color: green;">FAIL</div>
|
||||
</div>
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
document.getElementById('target').style.height = '100px';
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1055095">
|
||||
<link rel="match" href="../reference/replaced-element-015-ref.html">
|
||||
<p>Test passes if it matches the reference.</p>
|
||||
<div style="display: inline-grid; width: 100px;">
|
||||
<div id="target" style="height: 100%; margin-bottom: 50px;">
|
||||
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='green'/></svg>"
|
||||
style="height: 100%">
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const target = document.getElementById('target');
|
||||
document.body.offsetTop;
|
||||
target.style.marginBottom = '';
|
||||
document.body.offsetTop;
|
||||
target.style.marginBottom = '50px';
|
||||
document.body.offsetTop;
|
||||
target.style.marginBottom = '';
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1029371">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div style="display: grid;">
|
||||
<div style="height: 100px;">
|
||||
<div style="float: left; width: 50%; height: 400px; background: hotpink;"></div>
|
||||
</div>
|
||||
<div id="target" style="height: 100px; background: cyan;"></div>
|
||||
</div>
|
||||
<script>
|
||||
test(() => {
|
||||
assert_equals(document.elementFromPoint(150, 150), document.getElementById('target'));
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1740702">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
}
|
||||
|
||||
#initiallyHidden {
|
||||
display: none;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div id="grid">
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div id="initiallyHidden">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
const grid = document.getElementById("grid");
|
||||
const initiallyHidden = document.getElementById("initiallyHidden");
|
||||
document.documentElement.offsetHeight; // Flush layout
|
||||
|
||||
// Fails in buggy Firefox build because it prevents reflows from happening
|
||||
getComputedStyle(grid).getPropertyValue("grid-template-columns");
|
||||
|
||||
document.documentElement.offsetHeight; // Flush layout again
|
||||
|
||||
initiallyHidden.style.display = "block"; // This should trigger a reflow.
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1740702">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
width: 100px;
|
||||
height: 90px;
|
||||
background: red;
|
||||
}
|
||||
|
||||
#initiallyHidden {
|
||||
display: none;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div id="grid">
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div id="initiallyHidden">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
const grid = document.getElementById("grid");
|
||||
const initiallyHidden = document.getElementById("initiallyHidden");
|
||||
document.documentElement.offsetHeight; // Flush layout
|
||||
|
||||
// Fails in buggy Firefox build because it prevents reflows from happening
|
||||
grid.style.paddingBottom = "10px";
|
||||
|
||||
document.documentElement.offsetHeight; // Flush layout again
|
||||
|
||||
initiallyHidden.style.display = "block"; // This should trigger a reflow.
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE HTML>
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1127715">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div style="display: grid; width: 100px;">
|
||||
<div style="display: grid; margin: auto;">
|
||||
<img id="target" style="max-width: 100%; max-height: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
document.getElementById('target').src = 'data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="green"></rect></svg>';
|
||||
</script>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1111799">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div style="display: flex; width: 100px; overflow: hidden;">
|
||||
<div style="display: grid; height: 100px;"> <!-- min-content is 100px -->
|
||||
<div style="writing-mode: vertical-rl; line-height: 0;">
|
||||
<span style="display: inline-block; width: 50px; height: 100px; background: green;"></span>
|
||||
<span style="display: inline-block; width: 50px; height: 100px; background: green;"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background: red;">text</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Expand flexible tracks with a fractional size</title>
|
||||
<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-flex-tracks" title="12.7. Expand Flexible Tracks">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1249750">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="Checks that flexible tracks correctly distribute fractional shares of a grid's available size">
|
||||
<style>
|
||||
.grid {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
display: grid;
|
||||
background: red;
|
||||
}
|
||||
.grid > div {
|
||||
background: green;
|
||||
}
|
||||
#cols {
|
||||
grid-template-rows: auto 0px;
|
||||
grid-template-columns: repeat(973, 1fr);
|
||||
}
|
||||
#rows {
|
||||
grid-auto-flow: column;
|
||||
grid-template-columns: auto 0px;
|
||||
grid-template-rows: repeat(973, 1fr);
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="cols" class="grid">
|
||||
<div style="grid-column: 1 / -1"></div>
|
||||
</div>
|
||||
<div id="rows" class="grid">
|
||||
<div style="grid-row: 1 / -1"></div>
|
||||
</div>
|
||||
<script>
|
||||
var cols_grid = document.getElementById("cols");
|
||||
var rows_grid = document.getElementById("rows");
|
||||
for (var i = 0; i < 973; ++i) {
|
||||
cols_grid.appendChild(document.createElement("div"));
|
||||
rows_grid.appendChild(document.createElement("div"));
|
||||
}
|
||||
document.documentElement.classList.remove('reftest-wait');
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=719441">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div id="target">
|
||||
<div style="display: inline-grid; height: 100%; background: green;">
|
||||
<canvas width=60 height=60 style="height: 100%; min-width: 0;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
document.getElementById('target').style.height = '100px';
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1149627">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<style>
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
position: relative;
|
||||
grid-template-columns: minmax(0, .5fr);
|
||||
grid-template-rows: minmax(0, .5fr);
|
||||
}
|
||||
.item {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: linear-gradient(green, green) no-repeat;
|
||||
background-size: 100px 100px;
|
||||
}
|
||||
.abspos {
|
||||
grid-area: 1 / 1 / 2 / 2;
|
||||
position: absolute;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: red;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="grid">
|
||||
<span class="item"></span>
|
||||
<span class="abspos"></span>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<style>
|
||||
.container {
|
||||
list-style: none;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
img {
|
||||
block-size: 55vw;
|
||||
aspect-ratio: 2/1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul class="container">
|
||||
<li>
|
||||
<img src="support/colors-8x16.png">
|
||||
</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<link rel="author" title="Sean Feng" href="mailto:sefeng@mozilla.com">
|
||||
<title>CSS Grid Test: Nested grid contains an item that overflows the viewport</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid">
|
||||
<link rel="match" href="nested-grid-item-block-size-001-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
list-style: none;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
img {
|
||||
block-size: 55vw;
|
||||
aspect-ratio: 2/1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul class="container">
|
||||
<li>
|
||||
<div style="display: inline-block;">
|
||||
<div style="display: grid;">
|
||||
<img src="support/colors-8x16.png">
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -12,20 +12,22 @@
|
|||
<div id="target"></div>
|
||||
<script>
|
||||
// auto
|
||||
test_computed_value("grid-area", "auto / auto / auto / auto");
|
||||
test_computed_value("grid-row", "auto / auto");
|
||||
test_computed_value("grid-area", "auto / auto / auto / auto",
|
||||
["auto", "auto / auto / auto / auto"]);
|
||||
test_computed_value("grid-row", "auto / auto", ["auto", "auto / auto"]);
|
||||
test_computed_value("grid-column-end", "auto");
|
||||
|
||||
// <custom-ident>
|
||||
test_computed_value("grid-row", "-zπ", "-zπ / -zπ");
|
||||
test_computed_value("grid-row", "-zπ", [ "-zπ", "-zπ / -zπ"]);
|
||||
test_computed_value("grid-row-start", "AZ");
|
||||
test_computed_value("grid-column-start", "-_π");
|
||||
test_computed_value("grid-row-end", "_9");
|
||||
|
||||
|
||||
// <integer> && <custom-ident>?
|
||||
test_computed_value("grid-area", "1 / 90 -a- / auto / auto");
|
||||
test_computed_value("grid-row", "2 az / auto");
|
||||
test_computed_value("grid-area", "1 / 90 -a- / auto / auto",
|
||||
["1 / 90 -a-", "1 / 90 -a- / auto / auto"]);
|
||||
test_computed_value("grid-row", "2 az / auto", ["2 az", "2 az / auto"]);
|
||||
test_computed_value("grid-column", "9 / -19 zA");
|
||||
test_computed_value("grid-row-start", "-19");
|
||||
test_computed_value("grid-row-start", "9 -Z_");
|
||||
|
|
@ -34,19 +36,22 @@ test_computed_value("grid-row-end", "1 -πA");
|
|||
test_computed_value("grid-column-end", "5 π_");
|
||||
|
||||
// span && [ <integer> || <custom-ident> ]
|
||||
test_computed_value("grid-area", "span 2 i / auto / auto / auto");
|
||||
test_computed_value("grid-row", "span 2 / auto");
|
||||
test_computed_value("grid-area", "span 2 i / auto / auto / auto",
|
||||
["span 2 i", "span 2 i / auto / auto / auto"]);
|
||||
test_computed_value("grid-row", "span 2 / auto", ["span 2", "span 2 / auto"]);
|
||||
test_computed_value("grid-column-start", "span 1 i");
|
||||
test_computed_value("grid-row-end", "span 2 i");
|
||||
test_computed_value("grid-column-end", "span 2");
|
||||
|
||||
// https://github.com/w3c/csswg-drafts/issues/3448
|
||||
test_computed_value("grid-row-start", "span i");
|
||||
test_computed_value("grid-row", "span i / auto");
|
||||
test_computed_value("grid-row", "span i / auto", ["span i", "span i / auto"]);
|
||||
|
||||
// <grid-line> [ / <grid-line> ]{0,3}
|
||||
test_computed_value("grid-area", "auto / i / auto / i");
|
||||
test_computed_value("grid-area", "auto / i / 2 j", "auto / i / 2 j / i");
|
||||
test_computed_value("grid-area", "auto / i / auto / i",
|
||||
["auto / i", "auto / i / auto / i"]);
|
||||
test_computed_value("grid-area", "auto / i / 2 j",
|
||||
["auto / i / 2 j", "auto / i / 2 j / i"]);
|
||||
test_computed_value("grid-area", "auto / i / 2 j / span 3 k");
|
||||
test_computed_value("grid-row", "auto / i");
|
||||
test_computed_value("grid-column", "2 j / span 3 k");
|
||||
|
|
|
|||
|
|
@ -42,7 +42,10 @@ test_invalid_value("grid", '"a" / none');
|
|||
test_invalid_value("grid", 'none / [] "a"');
|
||||
test_invalid_value("grid", 'none / "a" []');
|
||||
test_invalid_value("grid", 'none / "a" [] 10px');
|
||||
|
||||
test_invalid_value("grid", 'auto-flow 100px');
|
||||
test_invalid_value("grid", 'auto-flow / auto-flow');
|
||||
test_invalid_value("grid", 'auto-flow 1fr / auto-flow 1fr');
|
||||
test_invalid_value("grid", 'dense auto-flow / dense auto-flow');
|
||||
// FIXME: add more values to test full syntax
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ test_valid_value("grid", '[] "a" 10px', '"a" 10px');
|
|||
test_valid_value("grid", '[a] "a" 10px [a]');
|
||||
test_valid_value("grid", '"a"');
|
||||
test_valid_value("grid", '"a" auto', '"a"');
|
||||
test_valid_value("grid", '"a a a"', '"a a a"');
|
||||
test_valid_value("grid", '"a" / 10px');
|
||||
test_valid_value("grid", '"a" / 20%');
|
||||
test_valid_value("grid", '"a" / 5fr');
|
||||
|
|
@ -51,6 +52,17 @@ test_valid_value("grid", '[a] "a" [a] "b" [a]');
|
|||
test_valid_value("grid", '"a" "a" [a] "b" [a]');
|
||||
test_valid_value("grid", '"a" [a] "b" [a] / 0', '"a" [a] "b" [a] / 0px');
|
||||
test_valid_value("grid", '"a" "a" [a] [a] "b" / auto', '"a" "a" [a a] "b" / auto');
|
||||
test_valid_value("grid", '100px / auto-flow dense 100px');
|
||||
test_valid_value("grid", 'auto-flow dense 1fr / 100px');
|
||||
test_valid_value("grid", '100px / dense auto-flow 100px', '100px / auto-flow dense 100px');
|
||||
test_valid_value("grid", 'dense auto-flow 1fr / 100px', 'auto-flow dense 1fr / 100px');
|
||||
test_valid_value("grid", '100px / auto-flow 100px');
|
||||
test_valid_value("grid", 'auto-flow 1fr / 100px');
|
||||
test_valid_value("grid", 'none / auto-flow 100px');
|
||||
test_valid_value("grid", 'auto-flow 1fr / none');
|
||||
test_valid_value("grid", 'auto / auto-flow 100px');
|
||||
test_valid_value("grid", 'auto-flow 1fr / auto');
|
||||
test_valid_value("grid", '1fr / 1fr');
|
||||
|
||||
// FIXME: add more values to test full syntax
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: grid-template and grid-template-areas</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template">
|
||||
<meta name=assert content="grid-template and grid-template-areas parsing is valid.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
function testValidGridTemplate(valueGridTemplate, valueGridAreas, serializedGridTemplateValue) {
|
||||
if (arguments.length < 3)
|
||||
serializedGridTemplateValue = valueGridTemplate;
|
||||
|
||||
test(()=>{
|
||||
const root = document.children[0];
|
||||
root.style.gridTemplate = "";
|
||||
root.style.gridTemplate = valueGridTemplate;
|
||||
root.style.gridTemplateAreas = "";
|
||||
root.style.gridTemplateAreas = valueGridAreas;
|
||||
assert_equals(root.style.gridTemplate, serializedGridTemplateValue);
|
||||
assert_equals(root.style.gridTemplateAreas, valueGridAreas);
|
||||
}, `grid-template: ${valueGridTemplate} and "grid-template-areas: ${valueGridAreas};" should be valid.`);
|
||||
}
|
||||
|
||||
testValidGridTemplate("none / 1px", "\"a\"");
|
||||
testValidGridTemplate("none / none", "\"a\"", "none");
|
||||
testValidGridTemplate("auto / 1px", "\"a a a\"", "\"a a a\" / 1px");
|
||||
testValidGridTemplate("auto / auto", "\"a a a\"", "\"a a a\" / auto");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -28,6 +28,7 @@ test_valid_value("grid-template", '[] "a" 10px', '"a" 10px');
|
|||
test_valid_value("grid-template", '[a] "a" 10px [a]');
|
||||
test_valid_value("grid-template", '"a"');
|
||||
test_valid_value("grid-template", '"a" auto', '"a"');
|
||||
test_valid_value("grid-template", '"a a a"', '"a a a"');
|
||||
test_valid_value("grid-template", '"a" / 10px');
|
||||
test_valid_value("grid-template", '"a" / 20%');
|
||||
test_valid_value("grid-template", '"a" / 5fr');
|
||||
|
|
|
|||
|
|
@ -2,16 +2,19 @@
|
|||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Placement of grid items spanning multiple rows</title>
|
||||
<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#auto-placement-algo" title="8.5. Grid Item Placement Algorithm">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1237036">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<style>
|
||||
.grid {
|
||||
width: 100px;
|
||||
display: grid;
|
||||
background: red;
|
||||
grid-auto-rows: 25px;
|
||||
grid-template-columns: 50px 50px;
|
||||
}
|
||||
.grid > div {
|
||||
background: green;
|
||||
min-height: 25px;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Placement of grid items spanning multiple rows</title>
|
||||
<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#auto-placement-algo" title="8.5. Grid Item Placement Algorithm">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255298">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<style>
|
||||
.grid {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: grid;
|
||||
background: red;
|
||||
grid-auto-rows: 5px;
|
||||
grid-template-columns: repeat(4, 25px);
|
||||
}
|
||||
.grid > div {
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="grid">
|
||||
<div style="grid-row: span 7"></div>
|
||||
<div style="grid-row: span 9"></div>
|
||||
<div style="grid-row: span 11"></div>
|
||||
<div style="grid-row: span 10"></div>
|
||||
<div style="grid-row: span 10"></div>
|
||||
<div style="grid-row: span 9"></div>
|
||||
<div style="grid-row: span 10"></div>
|
||||
<div style="grid-row: span 9"></div>
|
||||
<div style="grid-row: span 3"></div>
|
||||
<div style="grid-row: span 2"></div>
|
||||
</div>
|
||||
|
|
@ -6,7 +6,6 @@ body {
|
|||
}
|
||||
.item1 {
|
||||
width: fit-content;
|
||||
width: -moz-fit-content;
|
||||
margin: 0px auto;
|
||||
}
|
||||
.item2 {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@
|
|||
background: green;
|
||||
}
|
||||
.fit-content {
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<p>Test passes if the text is aligned.</p>
|
||||
<div style="writing-mode: vertical-lr; text-orientation: sideways;">
|
||||
before
|
||||
<div style="display: inline-block; background: green; width: 100px; height: 50px;">grid</div>
|
||||
after
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<p>Test passes if it matches the reference.</p>
|
||||
<div style="display: inline-grid; width: 100px;">
|
||||
<div id="target" style="height: 100%;">
|
||||
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='green'/></svg>"
|
||||
style="height: 100%">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid with a subgridded axis and an auto repeater as line name list</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
grid-template-columns: subgrid repeat(auto-fill, [b]);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="grid">
|
||||
<div style="grid-column: b"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid with a subgridded axis and an auto repeater as line name list</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
grid-template-columns: subgrid repeat(auto-fill, [b]);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="grid">
|
||||
<div style="position: absolute; grid-column: b"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: parsing 'grid' with invalid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<meta name="assert" content="grid-template supports the grammar `none | <track-list> | <auto-track-list> | subgrid <line-name-list>?`.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
// <'grid-template'> invalid values
|
||||
test_invalid_value("grid-template-rows", 'subgrid subgrid');
|
||||
test_invalid_value("grid-template-rows", 'subgrid none');
|
||||
test_invalid_value("grid-template-rows", 'subgrid 1px');
|
||||
test_invalid_value("grid-template-rows", 'subgrid [a] 1px');
|
||||
test_invalid_value("grid-template-rows", 'subgrid repeat(auto-fill, 1px)');
|
||||
test_invalid_value("grid-template-rows", 'subgrid repeat(auto-fill, line)');
|
||||
test_invalid_value("grid-template-rows", 'subgrid repeat(2, 1px)');
|
||||
test_invalid_value("grid-template-rows", 'subgrid repeat(2, line)');
|
||||
test_invalid_value("grid-template-rows", 'subgrid repeat(2,');
|
||||
|
||||
test_invalid_value("grid-template-columns", 'subgrid subgrid');
|
||||
test_invalid_value("grid-template-columns", 'subgrid none');
|
||||
test_invalid_value("grid-template-columns", 'subgrid 1px');
|
||||
test_invalid_value("grid-template-columns", 'subgrid [a] 1px');
|
||||
test_invalid_value("grid-template-columns", 'subgrid repeat(auto-fill, 1px)');
|
||||
test_invalid_value("grid-template-columns", 'subgrid repeat(auto-fill, line)');
|
||||
test_invalid_value("grid-template-columns", 'subgrid repeat(2, 1px)');
|
||||
test_invalid_value("grid-template-columns", 'subgrid repeat(2, line)');
|
||||
test_invalid_value("grid-template-columns", 'subgrid repeat(2,');
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: parsing 'grid' with valid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
|
||||
<meta name="assert" content="grid-template supports the grammar `none | <track-list> | <auto-track-list> | subgrid <line-name-list>?`.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
// <'grid-template'> values
|
||||
test_valid_value("grid-template-rows", 'subgrid');
|
||||
test_valid_value("grid-template-rows", 'subgrid [a]');
|
||||
test_valid_value("grid-template-rows", 'subgrid [a] [b]');
|
||||
test_valid_value("grid-template-rows", 'subgrid [a] [b] [c]');
|
||||
test_valid_value("grid-template-rows", 'subgrid []');
|
||||
test_valid_value("grid-template-rows", 'subgrid [a] [b] [] [c]');
|
||||
test_valid_value("grid-template-rows", 'subgrid [] [] [] [c]');
|
||||
test_valid_value("grid-template-rows", 'subgrid [] [] [] []');
|
||||
test_valid_value("grid-template-rows", 'subgrid repeat(auto-fill, [a])');
|
||||
test_valid_value("grid-template-rows", 'subgrid [a] repeat(auto-fill, [b])');
|
||||
test_valid_value("grid-template-rows", 'subgrid [a] repeat(auto-fill, [b]) [c]');
|
||||
test_valid_value("grid-template-rows", 'subgrid [] repeat(auto-fill, []) []');
|
||||
test_valid_value("grid-template-rows", 'subgrid repeat(2, [a])');
|
||||
test_valid_value("grid-template-rows", 'subgrid repeat(2, [a] [b])');
|
||||
test_valid_value("grid-template-rows", 'subgrid [a] repeat(2, [b])');
|
||||
test_valid_value("grid-template-rows", 'subgrid [a] repeat(2, [b]) [c]');
|
||||
test_valid_value("grid-template-rows", 'subgrid [] repeat(2, []) []');
|
||||
test_valid_value("grid-template-rows", 'subgrid [a] repeat(2, [b]) repeat(auto-fill, [c]) [d]');
|
||||
|
||||
test_valid_value("grid-template-columns", 'subgrid');
|
||||
test_valid_value("grid-template-columns", 'subgrid [a]');
|
||||
test_valid_value("grid-template-columns", 'subgrid [a] [b]');
|
||||
test_valid_value("grid-template-columns", 'subgrid [a] [b] [c]');
|
||||
test_valid_value("grid-template-columns", 'subgrid []');
|
||||
test_valid_value("grid-template-columns", 'subgrid [a] [b] [] [c]');
|
||||
test_valid_value("grid-template-columns", 'subgrid [] [] [] [c]');
|
||||
test_valid_value("grid-template-columns", 'subgrid [] [] [] []');
|
||||
test_valid_value("grid-template-columns", 'subgrid repeat(auto-fill, [a])');
|
||||
test_valid_value("grid-template-columns", 'subgrid [a] repeat(auto-fill, [b])');
|
||||
test_valid_value("grid-template-columns", 'subgrid [a] repeat(auto-fill, [b]) [c]');
|
||||
test_valid_value("grid-template-columns", 'subgrid [] repeat(auto-fill, []) []');
|
||||
test_valid_value("grid-template-columns", 'subgrid repeat(2, [a])');
|
||||
test_valid_value("grid-template-columns", 'subgrid repeat(2, [a] [b])');
|
||||
test_valid_value("grid-template-columns", 'subgrid [a] repeat(2, [b])');
|
||||
test_valid_value("grid-template-columns", 'subgrid [a] repeat(2, [b]) [c]');
|
||||
test_valid_value("grid-template-columns", 'subgrid [] repeat(2, []) []');
|
||||
test_valid_value("grid-template-columns", 'subgrid [a] repeat(2, [b]) repeat(auto-fill, [c]) [d]');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 92 B |
Loading…
Add table
Add a link
Reference in a new issue