mirror of
https://github.com/servo/servo.git
synced 2025-08-06 06:00:15 +01:00
Update web-platform-tests to revision 332b7c4e711d75ead4c0dfbf7f6f0b683206756d
This commit is contained in:
WPT Sync Bot
parent
46611b012e
commit
b60afa18f5
389 changed files with 7767 additions and 2421 deletions
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Grid Layout Test: dynamic minimum contribution</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-contribution">
|
||||
<meta name="assert" content="This test checks that grid items are sized correctly when their minimum contribution is dynamically changed with JavaScript." />
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<div id="log"></div>
|
||||
<div id="grid">
|
||||
<div id="item"></div>
|
||||
</div>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
const tests = [
|
||||
["auto", "100px"],
|
||||
["0%", "100px"],
|
||||
["100%", "100px"],
|
||||
["200%", "200px"],
|
||||
["300%", "300px"],
|
||||
["400px", "400px"],
|
||||
["500px", "500px"],
|
||||
];
|
||||
const item = document.getElementById("item");
|
||||
for (let [minSize, expectedSize] of tests) {
|
||||
test(() => {
|
||||
item.style.minHeight = item.style.minWidth = minSize;
|
||||
let cs = getComputedStyle(item);
|
||||
assert_equals(cs.height, expectedSize, "height");
|
||||
assert_equals(cs.width, expectedSize, "width");
|
||||
}, `Minimum size: ${minSize}`);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid items with percentage margins</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
|
||||
<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
.container {
|
||||
font: 25px/1 Ahem;
|
||||
width: 100px;
|
||||
}
|
||||
.child {
|
||||
margin: 50px;
|
||||
color: red;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background: green;
|
||||
height: 100px;
|
||||
}
|
||||
.grid {
|
||||
background: none;
|
||||
}
|
||||
#item {
|
||||
margin: 50%;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="container ref"><div class="child">X</div></div>
|
||||
<div class="container grid"><div class="child" id="item">X</div></div>
|
||||
<script>
|
||||
item.offsetLeft;
|
||||
item.style.width = "0px";
|
||||
item.offsetLeft;
|
||||
item.style.width = "auto";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid items with percentage margins</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
|
||||
<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
}
|
||||
.child {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: 50px;
|
||||
background: red;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background: green;
|
||||
height: 100px;
|
||||
}
|
||||
.grid {
|
||||
background: none;
|
||||
}
|
||||
#item {
|
||||
margin: 50%;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="container ref"><div class="child"></div></div>
|
||||
<div class="container grid"><div class="child" id="item"></div></div>
|
||||
<script>
|
||||
item.offsetLeft;
|
||||
item.style.width = "0px";
|
||||
item.offsetLeft;
|
||||
item.style.width = "25px";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid items with percentage margins</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
|
||||
<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
}
|
||||
.child {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: 50px;
|
||||
background: red;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background: green;
|
||||
height: 100px;
|
||||
}
|
||||
.grid {
|
||||
background: none;
|
||||
}
|
||||
#item {
|
||||
margin: 50%;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="container ref"><div class="child"></div></div>
|
||||
<div class="container grid"><div class="child" id="item"></div></div>
|
||||
<script>
|
||||
item.offsetLeft;
|
||||
item.style.margin = "100%";
|
||||
item.offsetLeft;
|
||||
item.style.margin = "50%";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid items with percentage margins</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
|
||||
<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
}
|
||||
.child {
|
||||
min-width: 25px;
|
||||
min-height: 25px;
|
||||
margin: 50px;
|
||||
background: red;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background: green;
|
||||
height: 100px;
|
||||
}
|
||||
.grid {
|
||||
background: none;
|
||||
}
|
||||
#item {
|
||||
margin: 50%;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="container ref"><div class="child"></div></div>
|
||||
<div class="container grid"><div class="child" id="item"></div></div>
|
||||
<script>
|
||||
item.offsetLeft;
|
||||
item.style.margin = "100%";
|
||||
item.offsetLeft;
|
||||
item.style.margin = "50%";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid items with percentage margins</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
|
||||
<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
.container {
|
||||
font: 25px/1 Ahem;
|
||||
width: 100px;
|
||||
}
|
||||
.child {
|
||||
margin: 0px 50px;
|
||||
color: red;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background: green;
|
||||
height: 100px;
|
||||
}
|
||||
.grid {
|
||||
background: none;
|
||||
grid-template-rows: 100px;
|
||||
}
|
||||
#item {
|
||||
margin: 0px 50%;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="container ref"><div class="child">X</div></div>
|
||||
<div class="container grid"><div class="child" id="item">X</div></div>
|
||||
<script>
|
||||
item.offsetLeft;
|
||||
item.style.width = "0px";
|
||||
item.offsetLeft;
|
||||
item.style.width = "auto";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid items with percentage margins</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
|
||||
<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
}
|
||||
.child {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: 0px 50px;
|
||||
background: red;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background: green;
|
||||
height: 100px;
|
||||
}
|
||||
.grid {
|
||||
background: none;
|
||||
grid-template-rows: 100px;
|
||||
}
|
||||
#item {
|
||||
margin: 0px 50%;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="container ref"><div class="child"></div></div>
|
||||
<div class="container grid"><div class="child" id="item"></div></div>
|
||||
<script>
|
||||
item.offsetLeft;
|
||||
item.style.width = "0px";
|
||||
item.offsetLeft;
|
||||
item.style.width = "25px";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid items with percentage margins</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
|
||||
<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
}
|
||||
.child {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: 0px 50px;
|
||||
background: red;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background: green;
|
||||
height: 100px;
|
||||
}
|
||||
.grid {
|
||||
background: none;
|
||||
grid-template-rows: 100px;
|
||||
}
|
||||
#item {
|
||||
margin: 0px 50%;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="container ref"><div class="child"></div></div>
|
||||
<div class="container grid"><div class="child" id="item"></div></div>
|
||||
<script>
|
||||
item.offsetLeft;
|
||||
item.style.margin = "0px 100%";
|
||||
item.offsetLeft;
|
||||
item.style.margin = "0px 50%";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid items with percentage margins</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
|
||||
<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
}
|
||||
.child {
|
||||
min-width: 25px;
|
||||
min-height: 25px;
|
||||
margin: 0px 50px;
|
||||
background: red;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background: green;
|
||||
height: 100px;
|
||||
}
|
||||
.grid {
|
||||
background: none;
|
||||
grid-template-rows: 100px;
|
||||
}
|
||||
#item {
|
||||
margin: 0px 50%;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="container ref"><div class="child"></div></div>
|
||||
<div class="container grid"><div class="child" id="item"></div></div>
|
||||
<script>
|
||||
item.offsetLeft;
|
||||
item.style.margin = "0px 100%";
|
||||
item.offsetLeft;
|
||||
item.style.margin = "0px 50%";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid items with percentage margins</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
|
||||
<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
.container {
|
||||
font: 25px/1 Ahem;
|
||||
width: 100px;
|
||||
}
|
||||
.child {
|
||||
margin: 50px 0px;
|
||||
color: red;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background: green;
|
||||
height: 100px;
|
||||
}
|
||||
.grid {
|
||||
background: none;
|
||||
}
|
||||
#item {
|
||||
margin: 50% 0px;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="container ref"><div class="child">X</div></div>
|
||||
<div class="container grid"><div class="child" id="item">X</div></div>
|
||||
<script>
|
||||
item.offsetLeft;
|
||||
item.style.width = "0px";
|
||||
item.offsetLeft;
|
||||
item.style.width = "auto";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid items with percentage margins</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
|
||||
<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
}
|
||||
.child {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: 50px 0px;
|
||||
background: red;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background: green;
|
||||
height: 100px;
|
||||
}
|
||||
.grid {
|
||||
background: none;
|
||||
}
|
||||
#item {
|
||||
margin: 50% 0px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="container ref"><div class="child"></div></div>
|
||||
<div class="container grid"><div class="child" id="item"></div></div>
|
||||
<script>
|
||||
item.offsetLeft;
|
||||
item.style.width = "0px";
|
||||
item.offsetLeft;
|
||||
item.style.width = "25px";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid items with percentage margins</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
|
||||
<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
}
|
||||
.child {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: 50px 0px;
|
||||
background: red;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background: green;
|
||||
height: 100px;
|
||||
}
|
||||
.grid {
|
||||
background: none;
|
||||
}
|
||||
#item {
|
||||
margin: 50% 0px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="container ref"><div class="child"></div></div>
|
||||
<div class="container grid"><div class="child" id="item"></div></div>
|
||||
<script>
|
||||
item.offsetLeft;
|
||||
item.style.margin = "100% 0px";
|
||||
item.offsetLeft;
|
||||
item.style.margin = "50% 0px";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid items with percentage margins</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
|
||||
<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
}
|
||||
.child {
|
||||
min-width: 25px;
|
||||
min-height: 25px;
|
||||
margin: 50px 0px;
|
||||
background: red;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background: green;
|
||||
height: 100px;
|
||||
}
|
||||
.grid {
|
||||
background: none;
|
||||
grid-template-columns: 100px;
|
||||
}
|
||||
#item {
|
||||
margin: 50% 0px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="container ref"><div class="child"></div></div>
|
||||
<div class="container grid"><div class="child" id="item"></div></div>
|
||||
<script>
|
||||
item.offsetLeft;
|
||||
item.style.margin = "100% 0px";
|
||||
item.offsetLeft;
|
||||
item.style.margin = "50% 0px";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
|
||||
<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
.container {
|
||||
font: 80px/1 Ahem;
|
||||
width: 100px;
|
||||
}
|
||||
.child {
|
||||
padding: 10px;
|
||||
color: red;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background: red;
|
||||
height: 100px;
|
||||
}
|
||||
.grid {
|
||||
background: green;
|
||||
}
|
||||
#item {
|
||||
padding: 10%;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="container ref"><div class="child">X</div></div>
|
||||
<div class="container grid"><div class="child" id="item">X</div></div>
|
||||
<script>
|
||||
item.offsetLeft;
|
||||
item.style.width = "0px";
|
||||
item.offsetLeft;
|
||||
item.style.width = "auto";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
|
||||
<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
}
|
||||
.child {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
padding: 10px;
|
||||
background: red;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background: none;
|
||||
height: 100px;
|
||||
}
|
||||
.grid {
|
||||
background: none;
|
||||
}
|
||||
#item {
|
||||
padding: 10%;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="container ref"><div class="child"></div></div>
|
||||
<div class="container grid"><div class="child" id="item"></div></div>
|
||||
<script>
|
||||
item.offsetLeft;
|
||||
item.style.width = "0px";
|
||||
item.offsetLeft;
|
||||
item.style.width = "80px";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
|
||||
<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
}
|
||||
.child {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
padding: 10px;
|
||||
background: red;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
height: 100px;
|
||||
}
|
||||
.grid {
|
||||
background: none;
|
||||
}
|
||||
#item {
|
||||
padding: 10%;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="container ref"><div class="child"></div></div>
|
||||
<div class="container grid"><div class="child" id="item"></div></div>
|
||||
<script>
|
||||
item.offsetLeft;
|
||||
item.style.padding = "50%";
|
||||
item.offsetLeft;
|
||||
item.style.padding = "10%";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
|
||||
<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
}
|
||||
.child {
|
||||
min-width: 80px;
|
||||
min-height: 80px;
|
||||
padding: 10px;
|
||||
background: red;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
height: 100px;
|
||||
}
|
||||
.grid {
|
||||
background: none;
|
||||
}
|
||||
#item {
|
||||
padding: 10%;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="container ref"><div class="child"></div></div>
|
||||
<div class="container grid"><div class="child" id="item"></div></div>
|
||||
<script>
|
||||
item.offsetLeft;
|
||||
item.style.padding = "50%";
|
||||
item.offsetLeft;
|
||||
item.style.padding = "10%";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
|
||||
<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
.container {
|
||||
font: 80px/1 Ahem;
|
||||
width: 100px;
|
||||
}
|
||||
.child {
|
||||
padding: 0px 10px;
|
||||
color: red;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background: red;
|
||||
height: 100px;
|
||||
}
|
||||
.grid {
|
||||
background: green;
|
||||
grid-template-rows: 100px;
|
||||
}
|
||||
#item {
|
||||
padding: 0px 10%;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="container ref"><div class="child">X</div></div>
|
||||
<div class="container grid"><div class="child" id="item">X</div></div>
|
||||
<script>
|
||||
item.offsetLeft;
|
||||
item.style.width = "0px";
|
||||
item.offsetLeft;
|
||||
item.style.width = "auto";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
|
||||
<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
}
|
||||
.child {
|
||||
width: 80px;
|
||||
height: 100px;
|
||||
padding: 0px 10px;
|
||||
background: red;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background: none;
|
||||
height: 100px;
|
||||
}
|
||||
.grid {
|
||||
background: none;
|
||||
grid-template-rows: 100px;
|
||||
}
|
||||
#item {
|
||||
padding: 0px 10%;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="container ref"><div class="child"></div></div>
|
||||
<div class="container grid"><div class="child" id="item"></div></div>
|
||||
<script>
|
||||
item.offsetLeft;
|
||||
item.style.width = "0px";
|
||||
item.offsetLeft;
|
||||
item.style.width = "80px";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
|
||||
<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
}
|
||||
.child {
|
||||
width: 80px;
|
||||
height: 100px;
|
||||
padding: 0px 10px;
|
||||
background: red;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
height: 100px;
|
||||
grid-template-rows: 100px;
|
||||
}
|
||||
.grid {
|
||||
background: none;
|
||||
grid-template-rows: 100px;
|
||||
}
|
||||
#item {
|
||||
padding: 0px 10%;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="container ref"><div class="child"></div></div>
|
||||
<div class="container grid"><div class="child" id="item"></div></div>
|
||||
<script>
|
||||
item.offsetLeft;
|
||||
item.style.padding = "0px 50%";
|
||||
item.offsetLeft;
|
||||
item.style.padding = "0px 10%";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
|
||||
<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
}
|
||||
.child {
|
||||
min-width: 80px;
|
||||
min-height: 100px;
|
||||
padding: 0px 10px;
|
||||
background: red;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
height: 100px;
|
||||
}
|
||||
.grid {
|
||||
background: none;
|
||||
grid-template-rows: 100px;
|
||||
}
|
||||
#item {
|
||||
padding: 0px 10%;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="container ref"><div class="child"></div></div>
|
||||
<div class="container grid"><div class="child" id="item"></div></div>
|
||||
<script>
|
||||
item.offsetLeft;
|
||||
item.style.padding = "0px 50%";
|
||||
item.offsetLeft;
|
||||
item.style.padding = "0px 10%";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
|
||||
<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
.container {
|
||||
font: 80px/1 Ahem;
|
||||
width: 100px;
|
||||
}
|
||||
.child {
|
||||
padding: 10px 0px;
|
||||
color: red;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background: red;
|
||||
height: 100px;
|
||||
}
|
||||
.grid {
|
||||
background: green;
|
||||
}
|
||||
#item {
|
||||
padding: 10px 0px;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="container ref"><div class="child">X</div></div>
|
||||
<div class="container grid"><div class="child" id="item">X</div></div>
|
||||
<script>
|
||||
item.offsetLeft;
|
||||
item.style.width = "0px";
|
||||
item.offsetLeft;
|
||||
item.style.width = "auto";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
|
||||
<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
}
|
||||
.child {
|
||||
width: 100px;
|
||||
height: 80px;
|
||||
padding: 10px 0px;
|
||||
background: red;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background: none;
|
||||
height: 100px;
|
||||
}
|
||||
.grid {
|
||||
background: none;
|
||||
}
|
||||
#item {
|
||||
padding: 10% 0px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="container ref"><div class="child"></div></div>
|
||||
<div class="container grid"><div class="child" id="item"></div></div>
|
||||
<script>
|
||||
item.offsetLeft;
|
||||
item.style.height = "0px";
|
||||
item.offsetLeft;
|
||||
item.style.height = "80px";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
|
||||
<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
}
|
||||
.child {
|
||||
width: 100px;
|
||||
height: 80px;
|
||||
padding: 10px 0px;
|
||||
background: red;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
height: 100px;
|
||||
}
|
||||
.grid {
|
||||
background: none;
|
||||
}
|
||||
#item {
|
||||
padding: 10% 0px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="container ref"><div class="child"></div></div>
|
||||
<div class="container grid"><div class="child" id="item"></div></div>
|
||||
<script>
|
||||
item.offsetLeft;
|
||||
item.style.padding = "50% 0px";
|
||||
item.offsetLeft;
|
||||
item.style.padding = "10% 0px";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
|
||||
<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
}
|
||||
.child {
|
||||
min-width: 100px;
|
||||
min-height: 80px;
|
||||
padding: 10px 0px;
|
||||
background: red;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
height: 100px;
|
||||
}
|
||||
.grid {
|
||||
background: none;
|
||||
}
|
||||
#item {
|
||||
padding: 10% 0px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="container ref"><div class="child"></div></div>
|
||||
<div class="container grid"><div class="child" id="item"></div></div>
|
||||
<script>
|
||||
item.offsetLeft;
|
||||
item.style.padding = "50% 0px";
|
||||
item.offsetLeft;
|
||||
item.style.padding = "10% 0px";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: grid-area sets longhands</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-area">
|
||||
<meta name="assert" content="grid-area supports the full grammar '<grid-line> [ / <grid-line> ]{0,3}'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/shorthand-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_shorthand_value('grid-area', 'auto', {
|
||||
'grid-row-start': 'auto',
|
||||
'grid-column-start': 'auto',
|
||||
'grid-row-end': 'auto',
|
||||
'grid-column-end': 'auto'
|
||||
});
|
||||
|
||||
// <custom-ident>
|
||||
test_shorthand_value('grid-area', '--a', {
|
||||
'grid-row-start': '--a',
|
||||
'grid-column-start': '--a',
|
||||
'grid-row-end': '--a',
|
||||
'grid-column-end': '--a'
|
||||
});
|
||||
|
||||
test_shorthand_value('grid-area', 'a / b', {
|
||||
'grid-row-start': 'a',
|
||||
'grid-column-start': 'b',
|
||||
'grid-row-end': 'a',
|
||||
'grid-column-end': 'b'
|
||||
});
|
||||
|
||||
test_shorthand_value('grid-area', 'a / b / c', {
|
||||
'grid-row-start': 'a',
|
||||
'grid-column-start': 'b',
|
||||
'grid-row-end': 'c',
|
||||
'grid-column-end': 'b'
|
||||
});
|
||||
|
||||
test_shorthand_value('grid-area', 'a / b / c / d', {
|
||||
'grid-row-start': 'a',
|
||||
'grid-column-start': 'b',
|
||||
'grid-row-end': 'c',
|
||||
'grid-column-end': 'd'
|
||||
});
|
||||
|
||||
// <integer> && <custom-ident>?
|
||||
// span && [ <integer> || <custom-ident> ]
|
||||
test_shorthand_value('grid-area', '+90 -a- / 2 i span', {
|
||||
'grid-row-start': '90 -a-',
|
||||
'grid-column-start': 'span 2 i',
|
||||
'grid-row-end': 'auto',
|
||||
'grid-column-end': 'auto'
|
||||
});
|
||||
|
||||
test_shorthand_value('grid-area', '1 / 2 / 3 / 4', {
|
||||
'grid-row-start': '1',
|
||||
'grid-column-start': '2',
|
||||
'grid-row-end': '3',
|
||||
'grid-column-end': '4'
|
||||
});
|
||||
|
||||
|
||||
test_shorthand_value('grid-row', 'auto', {
|
||||
'grid-row-start': 'auto',
|
||||
'grid-row-end': 'auto'
|
||||
});
|
||||
|
||||
test_shorthand_value('grid-row', 'one / 2', {
|
||||
'grid-row-start': 'one',
|
||||
'grid-row-end': '2'
|
||||
});
|
||||
|
||||
test_shorthand_value('grid-row', '1 two / four 3', {
|
||||
'grid-row-start': '1 two',
|
||||
'grid-row-end': '3 four'
|
||||
});
|
||||
|
||||
|
||||
test_shorthand_value('grid-column', '5 span', {
|
||||
'grid-column-start': 'span 5',
|
||||
'grid-column-end': 'auto'
|
||||
});
|
||||
|
||||
test_shorthand_value('grid-column', '1 / two', {
|
||||
'grid-column-start': '1',
|
||||
'grid-column-end': 'two'
|
||||
});
|
||||
|
||||
test_shorthand_value('grid-column', 'span 1 two / four 3 span', {
|
||||
'grid-column-start': 'span 1 two',
|
||||
'grid-column-end': 'span 3 four'
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -32,7 +32,8 @@ test_invalid_value("grid-auto-columns", "fit-content(1px auto)");
|
|||
// <track-size>+
|
||||
test_invalid_value("grid-auto-columns", "2em / 3em");
|
||||
test_invalid_value("grid-auto-columns", "auto, 10%");
|
||||
test_invalid_value("grid-auto-rows", "1px [a] 1px");
|
||||
test_invalid_value("grid-auto-columns", "1px [a] 1px");
|
||||
test_invalid_value("grid-auto-columns", "[] 1px []");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ test_invalid_value("grid-auto-rows", "fit-content(1px auto)");
|
|||
test_invalid_value("grid-auto-rows", "2em / 3em");
|
||||
test_invalid_value("grid-auto-rows", "auto, 10%");
|
||||
test_invalid_value("grid-auto-rows", "1px [a] 1px");
|
||||
test_invalid_value("grid-auto-rows", "[] 1px []");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ test_valid_value("grid-template-columns", 'fit-content(calc(30% + 40vw))');
|
|||
// 'repeat(1, 10px)' in Firefox
|
||||
// '[] 10px' in Safari
|
||||
// '10px' in Edge 18
|
||||
test_valid_value("grid-template-columns", 'repeat(1, [] 10px)', ['repeat(1, 10px)', 'repeat(1, [] 10px)']);
|
||||
test_valid_value("grid-template-columns", 'repeat(1, [] 10px [])', 'repeat(1, 10px)');
|
||||
|
||||
// 'repeat(1, [one two] 20%)' in Blink, Firefox
|
||||
// '[one two] 20%' in Safari, Edge 18
|
||||
|
|
@ -61,6 +61,7 @@ test_valid_value("grid-template-columns", 'repeat(2, fit-content(20%) [three fou
|
|||
|
||||
// <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
|
||||
test_valid_value("grid-template-columns", 'min-content repeat(5, minmax(10px, auto))');
|
||||
test_valid_value("grid-template-columns", '[] 150px [] 1fr []', '150px 1fr');
|
||||
|
||||
// <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
|
||||
test_valid_value("grid-template-columns", 'repeat(auto-fill, 10px)');
|
||||
|
|
|
|||
|
|
@ -43,11 +43,7 @@ test_valid_value("grid-template-rows", 'fit-content(calc(30% + 40vw))');
|
|||
|
||||
// <track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
|
||||
|
||||
// 'repeat(1, [] 10px)' in Blink
|
||||
// 'repeat(1, 10px)' in Firefox
|
||||
// '[] 10px' in Safari
|
||||
// '10px' in Edge 18
|
||||
test_valid_value("grid-template-rows", 'repeat(1, [] 10px)', ['repeat(1, 10px)', 'repeat(1, [] 10px)']);
|
||||
test_valid_value("grid-template-rows", 'repeat(1, [] 10px [])', 'repeat(1, 10px)');
|
||||
|
||||
// 'repeat(1, [one two] 20%)' in Blink, Firefox
|
||||
// '[one two] 20%' in Safari, Edge 18
|
||||
|
|
@ -61,6 +57,7 @@ test_valid_value("grid-template-rows", 'repeat(2, fit-content(20%) [three four]
|
|||
|
||||
// <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
|
||||
test_valid_value("grid-template-rows", 'min-content repeat(5, minmax(10px, auto))');
|
||||
test_valid_value("grid-template-rows", '[] 150px [] 1fr []', '150px 1fr');
|
||||
|
||||
// <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
|
||||
test_valid_value("grid-template-rows", 'repeat(auto-fill, 10px)');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: grid-template sets longhands</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template">
|
||||
<meta name="assert" content="grid-template supports the full grammar 'none | [ <grid-template-rows> / <grid-template-columns> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/shorthand-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_shorthand_value('grid-template', 'none', {
|
||||
'grid-template-rows': 'none',
|
||||
'grid-template-columns': 'none',
|
||||
'grid-template-areas': 'none'
|
||||
});
|
||||
|
||||
// <grid-template-rows> / <grid-template-columns>
|
||||
test_shorthand_value('grid-template', '10px / 20%', {
|
||||
'grid-template-rows': '10px',
|
||||
'grid-template-columns': '20%',
|
||||
'grid-template-areas': 'none'
|
||||
});
|
||||
|
||||
test_shorthand_value('grid-template', 'fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))', {
|
||||
'grid-template-rows': 'fit-content(calc(-0.5em + 10px))',
|
||||
'grid-template-columns': 'fit-content(calc(0.5em + 10px))',
|
||||
'grid-template-areas': 'none'
|
||||
});
|
||||
|
||||
// [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
|
||||
test_shorthand_value('grid-template',
|
||||
'[header-top] "a a a" [header-bottom]' +
|
||||
' [main-top] "b b b" 1fr [main-bottom]' +
|
||||
' / auto 1fr auto', {
|
||||
'grid-template-rows': '[header-top] auto [header-bottom main-top] 1fr [main-bottom]',
|
||||
'grid-template-columns': 'auto 1fr auto',
|
||||
'grid-template-areas': '"a a a" "b b b"'
|
||||
});
|
||||
|
||||
test_shorthand_value('grid-template',
|
||||
' "a a a"' +
|
||||
' "b b b" 1fr' +
|
||||
'/ auto 1fr auto', {
|
||||
'grid-template-rows': 'auto 1fr',
|
||||
'grid-template-columns': 'auto 1fr auto',
|
||||
'grid-template-areas': '"a a a" "b b b"'
|
||||
});
|
||||
|
||||
test_shorthand_value('grid-template',
|
||||
' [] "a a a" []' +
|
||||
' [] "b b b" 1fr []' +
|
||||
' / [] auto 1fr [] auto []', {
|
||||
'grid-template-rows': 'auto 1fr',
|
||||
'grid-template-columns': 'auto 1fr auto',
|
||||
'grid-template-areas': '"a a a" "b b b"'
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue