mirror of
https://github.com/servo/servo.git
synced 2025-08-09 15:35:34 +01:00
Update web-platform-tests to revision 9064a51d4e4c177bf4b629031c3ac8010c910132
This commit is contained in:
WPT Sync Bot
parent
026dc7485f
commit
0eedd13bef
215 changed files with 1862 additions and 897 deletions
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
|
||||
<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid's height changes.">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
background: grey;
|
||||
grid-template-rows: 40% 60%;
|
||||
height: 500px;
|
||||
width: 300px;
|
||||
}
|
||||
#grid div {
|
||||
margin: auto 0px auto 0px;
|
||||
}
|
||||
#item1 {
|
||||
background: green;
|
||||
width: 25px;
|
||||
height: 50px;
|
||||
}
|
||||
#item2 {
|
||||
background: blue;
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<div id="grid">
|
||||
<div id="item1"></div>
|
||||
<div id="item2"></div>
|
||||
</div>
|
||||
<script>
|
||||
item1.setAttribute("data-offset-y", "75");
|
||||
item2.setAttribute("data-offset-y", "300");
|
||||
checkLayout('#grid');
|
||||
|
||||
grid.style.height = "300px";
|
||||
|
||||
item1.setAttribute("data-offset-y", "35");
|
||||
item2.setAttribute("data-offset-y", "160");
|
||||
checkLayout('#grid');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
|
||||
<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid item's height changes.">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
background: grey;
|
||||
grid-template-rows: 40% 60%;
|
||||
height: 500px;
|
||||
width: 300px;
|
||||
}
|
||||
#grid div {
|
||||
margin: auto 0px auto 0px;
|
||||
}
|
||||
#item1 {
|
||||
background: green;
|
||||
width: 25px;
|
||||
height: 50px;
|
||||
}
|
||||
#item2 {
|
||||
background: blue;
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<div id="grid">
|
||||
<div id="item1"></div>
|
||||
<div id="item2"></div>
|
||||
</div>
|
||||
<script>
|
||||
item1.setAttribute("data-offset-y", "75");
|
||||
item2.setAttribute("data-offset-y", "300");
|
||||
checkLayout('#grid');
|
||||
|
||||
item1.style.height = "100px";
|
||||
|
||||
item1.setAttribute("data-offset-y", "50");
|
||||
item2.setAttribute("data-offset-y", "300");
|
||||
checkLayout('#grid');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
|
||||
<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid items's height changes.">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
background: grey;
|
||||
grid-template-columns: 300px;
|
||||
grid-template-rows: 40% 60%;
|
||||
height: 500px;
|
||||
width: 300px;
|
||||
}
|
||||
#grid div {
|
||||
margin: auto 0px auto 0px;
|
||||
}
|
||||
#item1 {
|
||||
background: green;
|
||||
width: 25px;
|
||||
height: 50px;
|
||||
}
|
||||
#item2 {
|
||||
background: blue;
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<div id="grid">
|
||||
<div id="item1"></div>
|
||||
<div id="item2"></div>
|
||||
</div>
|
||||
<script>
|
||||
item1.setAttribute("data-offset-y", "75");
|
||||
item2.setAttribute("data-offset-y", "300");
|
||||
checkLayout('#grid');
|
||||
|
||||
item1.style.height = "100px";
|
||||
|
||||
item1.setAttribute("data-offset-y", "50");
|
||||
item2.setAttribute("data-offset-y", "300");
|
||||
checkLayout('#grid');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
|
||||
<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid's height changes.">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
background: grey;
|
||||
grid-template-columns: 300px;
|
||||
grid-template-rows: 40% 60%;
|
||||
height: 500px;
|
||||
width: min-content;
|
||||
}
|
||||
#grid div {
|
||||
margin: auto 0px auto 0px;
|
||||
}
|
||||
#item1 {
|
||||
background: green;
|
||||
width: 25px;
|
||||
height: 50px;
|
||||
}
|
||||
#item2 {
|
||||
background: blue;
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<div id="grid">
|
||||
<div id="item1"></div>
|
||||
<div id="item2"></div>
|
||||
</div>
|
||||
<script>
|
||||
item1.setAttribute("data-offset-y", "75");
|
||||
item2.setAttribute("data-offset-y", "300");
|
||||
checkLayout('#grid');
|
||||
|
||||
grid.style.height = "300px";
|
||||
|
||||
item1.setAttribute("data-offset-y", "35");
|
||||
item2.setAttribute("data-offset-y", "160");
|
||||
checkLayout('#grid');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
|
||||
<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid item's height changes.">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
background: grey;
|
||||
grid-template-rows: 40% 60%;
|
||||
height: 500px;
|
||||
width: 300px;
|
||||
}
|
||||
#grid div {
|
||||
margin: auto 0px auto 0px;
|
||||
}
|
||||
#item1 {
|
||||
font: 20px/1 Ahem;
|
||||
color: green;
|
||||
}
|
||||
#item2 {
|
||||
font: 10px/1 Ahem;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<div id="grid">
|
||||
<div id="item1">XXXXX</div>
|
||||
<div id="item2">XXXXX</div>
|
||||
</div>
|
||||
<script>
|
||||
item1.setAttribute("data-offset-y", "90");
|
||||
item2.setAttribute("data-offset-y", "345");
|
||||
checkLayout('#grid');
|
||||
|
||||
item2.style.fontSize = "40px";
|
||||
|
||||
item1.setAttribute("data-offset-y", "90");
|
||||
item2.setAttribute("data-offset-y", "330");
|
||||
checkLayout('#grid');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
|
||||
<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid item's height changes.">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
background: grey;
|
||||
font: 10px/1 Ahem;
|
||||
grid-template-columns: 100px;
|
||||
grid-template-rows: 40% 60%;
|
||||
height: 500px;
|
||||
width: 300px;
|
||||
}
|
||||
#grid div {
|
||||
margin: auto 0px auto 0px;
|
||||
}
|
||||
#item1 {
|
||||
color: green;
|
||||
}
|
||||
#item2 {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<div id="grid">
|
||||
<div id="item1">XXXXX</div>
|
||||
<div id="item2">XXXXX</div>
|
||||
</div>
|
||||
<script>
|
||||
item1.setAttribute("data-offset-y", "95");
|
||||
item2.setAttribute("data-offset-y", "345");
|
||||
checkLayout('#grid');
|
||||
|
||||
grid.style.fontSize = "40px";
|
||||
|
||||
item1.setAttribute("data-offset-y", "80");
|
||||
item2.setAttribute("data-offset-y", "330");
|
||||
checkLayout('#grid');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
|
||||
<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid's height changes.">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
background: grey;
|
||||
grid-template-rows: 40% 60%;
|
||||
height: 500px;
|
||||
width: 200px;
|
||||
}
|
||||
#grid div {
|
||||
margin: auto 0px auto 0px;
|
||||
}
|
||||
#item1 {
|
||||
background: green;
|
||||
width: 25px;
|
||||
height: 50px;
|
||||
}
|
||||
#item2 {
|
||||
background: blue;
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<div id="grid">
|
||||
<div id="item1"></div>
|
||||
<div id="item2"></div>
|
||||
</div>
|
||||
<script>
|
||||
item1.setAttribute("data-offset-y", "75");
|
||||
item2.setAttribute("data-offset-y", "300");
|
||||
checkLayout('#grid');
|
||||
|
||||
grid.style.height = "300px";
|
||||
|
||||
item1.setAttribute("data-offset-y", "35");
|
||||
item2.setAttribute("data-offset-y", "160");
|
||||
checkLayout('#grid');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
|
||||
<link rel="match" href="../reference/grid-block-axis-alignment-auto-margins-008-ref.html">
|
||||
<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed after the grid's intrinsic size is determined.">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
background: grey;
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: 40% 60%;
|
||||
height: 50vh;
|
||||
width: auto;
|
||||
}
|
||||
#grid div {
|
||||
margin: auto 0px auto 0px;
|
||||
}
|
||||
#item1 {
|
||||
font: 20px/1 Ahem;
|
||||
color: green;
|
||||
}
|
||||
#item2 {
|
||||
font: 40px/1 Ahem;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<p>The test passes if it has the same visual effect as reference.</p>
|
||||
<div id="grid">
|
||||
<div id="item1">XXX</div>
|
||||
<div id="item2">XXXXX</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
|
||||
<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid's width changes.">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
background: grey;
|
||||
grid-template-columns: 40% 60%;
|
||||
height: 30vh;
|
||||
width: 500px;
|
||||
}
|
||||
#grid div {
|
||||
margin: 0px auto 0px auto;
|
||||
}
|
||||
#item1 {
|
||||
background: green;
|
||||
width: 50px;
|
||||
height: 25px;
|
||||
}
|
||||
#item2 {
|
||||
background: blue;
|
||||
width: 100px;
|
||||
height: 25px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<div id="grid">
|
||||
<div id="item1"></div>
|
||||
<div id="item2"></div>
|
||||
</div>
|
||||
<script>
|
||||
item1.setAttribute("data-offset-x", "75");
|
||||
item2.setAttribute("data-offset-x", "300");
|
||||
checkLayout('#grid');
|
||||
|
||||
grid.style.width = "300px";
|
||||
|
||||
item1.setAttribute("data-offset-x", "35");
|
||||
item2.setAttribute("data-offset-x", "160");
|
||||
checkLayout('#grid');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
|
||||
<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid item's width changes.">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
background: grey;
|
||||
grid-template-columns: 40% 60%;
|
||||
height: 30vh;
|
||||
width: 500px;
|
||||
}
|
||||
#grid div {
|
||||
margin: 0px auto 0px auto;
|
||||
}
|
||||
#item1 {
|
||||
background: green;
|
||||
width: 50px;
|
||||
height: 25px;
|
||||
}
|
||||
#item2 {
|
||||
background: blue;
|
||||
width: 100px;
|
||||
height: 25px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<div id="grid">
|
||||
<div id="item1"></div>
|
||||
<div id="item2"></div>
|
||||
</div>
|
||||
<script>
|
||||
item1.setAttribute("data-offset-x", "75");
|
||||
item2.setAttribute("data-offset-x", "300");
|
||||
checkLayout('#grid');
|
||||
|
||||
item1.style.width = "100px";
|
||||
|
||||
item1.setAttribute("data-offset-x", "50");
|
||||
item2.setAttribute("data-offset-x", "300");
|
||||
checkLayout('#grid');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
|
||||
<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid items's width changes.">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
background: grey;
|
||||
grid-template-columns: 40% 60%;
|
||||
grid-template-rows: 300px;
|
||||
height: 400px;
|
||||
width: 500px;
|
||||
}
|
||||
#grid div {
|
||||
margin: 0px auto 0px auto;
|
||||
}
|
||||
#item1 {
|
||||
background: green;
|
||||
width: 50px;
|
||||
height: 25px;
|
||||
}
|
||||
#item2 {
|
||||
background: blue;
|
||||
width: 100px;
|
||||
height: 25px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<div id="grid">
|
||||
<div id="item1"></div>
|
||||
<div id="item2"></div>
|
||||
</div>
|
||||
<script>
|
||||
item1.setAttribute("data-offset-x", "75");
|
||||
item2.setAttribute("data-offset-x", "300");
|
||||
checkLayout('#grid');
|
||||
|
||||
item1.style.width = "100px";
|
||||
|
||||
item1.setAttribute("data-offset-x", "50");
|
||||
item2.setAttribute("data-offset-x", "300");
|
||||
checkLayout('#grid');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
|
||||
<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid's width changes.">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
background: grey;
|
||||
grid-template-columns: 40% 60%;
|
||||
grid-template-rows: 300px;
|
||||
height: auto;
|
||||
width: 500px;
|
||||
}
|
||||
#grid div {
|
||||
margin: 0px auto 0px auto;
|
||||
}
|
||||
#item1 {
|
||||
background: green;
|
||||
width: 50px;
|
||||
height: 25px;
|
||||
}
|
||||
#item2 {
|
||||
background: blue;
|
||||
width: 100px;
|
||||
height: 25px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<div id="grid">
|
||||
<div id="item1"></div>
|
||||
<div id="item2"></div>
|
||||
</div>
|
||||
<script>
|
||||
item1.setAttribute("data-offset-x", "75");
|
||||
item2.setAttribute("data-offset-x", "300");
|
||||
checkLayout('#grid');
|
||||
|
||||
grid.style.width = "300px";
|
||||
|
||||
item1.setAttribute("data-offset-x", "35");
|
||||
item2.setAttribute("data-offset-x", "160");
|
||||
checkLayout('#grid');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
|
||||
<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid items's width changes.">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
background: grey;
|
||||
grid-template-columns: 40% 60%;
|
||||
grid-template-rows: 100px;
|
||||
height: 200px;
|
||||
width: 500px;
|
||||
align-items: start;
|
||||
}
|
||||
#grid div {
|
||||
margin: 0px auto 0px auto;
|
||||
}
|
||||
#item1 {
|
||||
font: 20px/1 Ahem;
|
||||
color: green;
|
||||
}
|
||||
#item2 {
|
||||
font: 10px/1 Ahem;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<div id="grid">
|
||||
<div id="item1">XXXXX</div>
|
||||
<div id="item2">XXXXX</div>
|
||||
</div>
|
||||
<script>
|
||||
item1.setAttribute("data-offset-x", "50");
|
||||
item2.setAttribute("data-offset-x", "325");
|
||||
checkLayout('#grid');
|
||||
|
||||
item2.style.fontSize = "30px";
|
||||
|
||||
item1.setAttribute("data-offset-x", "50");
|
||||
item2.setAttribute("data-offset-x", "275");
|
||||
checkLayout('#grid');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
|
||||
<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid items's width changes.">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
background: grey;
|
||||
font: 10px/1 Ahem;
|
||||
grid-template-columns: 40% 60%;
|
||||
grid-template-rows: 100px;
|
||||
height: auto;
|
||||
width: 500px;
|
||||
align-items: start;
|
||||
}
|
||||
#grid div {
|
||||
margin: 0px auto 0px auto;
|
||||
}
|
||||
#item1 {
|
||||
color: green;
|
||||
}
|
||||
#item2 {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<div id="grid">
|
||||
<div id="item1">XXXX</div>
|
||||
<div id="item2">XX</div>
|
||||
</div>
|
||||
<script>
|
||||
item1.setAttribute("data-offset-x", "80");
|
||||
item2.setAttribute("data-offset-x", "340");
|
||||
checkLayout('#grid');
|
||||
|
||||
grid.style.fontSize = "25px";
|
||||
|
||||
item1.setAttribute("data-offset-x", "50");
|
||||
item2.setAttribute("data-offset-x", "325");
|
||||
checkLayout('#grid');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
|
||||
<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid's width changes.">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
background: grey;
|
||||
grid-template-columns: 40% 60%;
|
||||
height: 200px;
|
||||
width: 500px;
|
||||
}
|
||||
#grid div {
|
||||
margin: 0px auto 0px auto;
|
||||
}
|
||||
#item1 {
|
||||
background: green;
|
||||
width: 50px;
|
||||
height: 25px;
|
||||
}
|
||||
#item2 {
|
||||
background: blue;
|
||||
width: 100px;
|
||||
height: 25px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<div id="grid">
|
||||
<div id="item1"></div>
|
||||
<div id="item2"></div>
|
||||
</div>
|
||||
<script>
|
||||
item1.setAttribute("data-offset-x", "75");
|
||||
item2.setAttribute("data-offset-x", "300");
|
||||
checkLayout('#grid');
|
||||
|
||||
grid.style.width = "300px";
|
||||
|
||||
item1.setAttribute("data-offset-x", "35");
|
||||
item2.setAttribute("data-offset-x", "160");
|
||||
checkLayout('#grid');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
|
||||
<link rel="match" href="../reference/grid-inline-axis-alignment-auto-margins-008-ref.html">
|
||||
<meta name="assert" content="The 'left' and 'right' margins must be recomputed after the grid's intrinsic size is determined.">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
background: grey;
|
||||
grid-template-columns: 40% 60%;
|
||||
grid-template-rows: 100px;
|
||||
height: 200px;
|
||||
width: auto;
|
||||
align-items: start;
|
||||
}
|
||||
#grid div {
|
||||
margin: 0px auto 0px auto;
|
||||
}
|
||||
#item1 {
|
||||
font: 20px/1 Ahem;
|
||||
color: green;
|
||||
}
|
||||
#item2 {
|
||||
font: 40px/1 Ahem;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<p>The test passes if it has the same visual effect as reference.</p>
|
||||
<div id="grid">
|
||||
<div id="item1">XXX</div>
|
||||
<div id="item2">XXXXX</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue