зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1575674 [wpt PR 18599] - [css-grid] Ignore previously computed auto margins when relayout, a=testonly
Automatic update from web-platform-tests [css-grid] Ignore previously computed auto margins when relayout This new NG layout engine implements a different approach for margin calculation, giving the containing block the responsibility of its children's margin computation. However, in legacy layout this is children's responsibility; this is the reason why the issue this patch tries to fix is only only reproducible using layout-ng. The grid code assumed this legacy behavior when computing the 'auto' margins of the grid items. So, in order to fix the bug, this patch just ignores any previously computed 'auto' margin when performing a a relayout of a grid cntainer. Bug: 994300 Change-Id: I44658876f7c2f2067202e45c6a552593bddfe6c9 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1763749 Commit-Queue: Javier Fernandez <jfernandez@igalia.com> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Cr-Commit-Position: refs/heads/master@{#692108} -- wpt-commits: fb9b5a1d816ab6e90f20534d6f3282f82075e460 wpt-pr: 18599
This commit is contained in:
Javier Fernandez
moz-wptsync-bot
Родитель
df6616fe2a
Коммит
57a7a0ea8a
|
|
@ -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>
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Grid Layout Reference: Aligning grid items using 'auto' margins</title>
|
||||||
|
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||||
|
<style>
|
||||||
|
#grid {
|
||||||
|
display: grid;
|
||||||
|
position: relative;
|
||||||
|
background: grey;
|
||||||
|
grid-template-columns: 100px;
|
||||||
|
grid-template-rows: 40% 60%;
|
||||||
|
height: 50vh;
|
||||||
|
width: auto;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
#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,30 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Grid Layout Reference: Aligning grid items using 'auto' margins</title>
|
||||||
|
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||||
|
<style>
|
||||||
|
#grid {
|
||||||
|
display: grid;
|
||||||
|
position: relative;
|
||||||
|
background: grey;
|
||||||
|
grid-template-columns: 40% 60%;
|
||||||
|
grid-template-rows: 100px;
|
||||||
|
height: 200px;
|
||||||
|
width: auto;
|
||||||
|
justify-items: center;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
#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>
|
||||||
Загрузка…
Ссылка в новой задаче