mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue