mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

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 2019-09-02 13:44:35 +00:00 коммит произвёл moz-wptsync-bot
Родитель df6616fe2a
Коммит 57a7a0ea8a
18 изменённых файлов: 785 добавлений и 0 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

47
testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.html Normal file
Просмотреть файл

@ -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>

47
testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.html Normal file
Просмотреть файл

@ -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>

48
testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.html Normal file
Просмотреть файл

@ -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>

48
testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.html Normal file
Просмотреть файл

@ -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>

45
testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.html Normal file
Просмотреть файл

@ -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>

45
testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.html Normal file
Просмотреть файл

@ -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>

47
testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.html Normal file
Просмотреть файл

@ -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>

34
testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-008.html Normal file
Просмотреть файл

@ -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>

47
testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-001.html Normal file
Просмотреть файл

@ -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>

47
testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-002.html Normal file
Просмотреть файл

@ -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>

48
testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-003.html Normal file
Просмотреть файл

@ -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>

48
testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-004.html Normal file
Просмотреть файл

@ -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>

47
testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-005.html Normal file
Просмотреть файл

@ -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>

46
testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-006.html Normal file
Просмотреть файл

@ -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>

47
testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-007.html Normal file
Просмотреть файл

@ -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>

35
testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-008.html Normal file
Просмотреть файл

@ -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>

29
testing/web-platform/tests/css/css-grid/reference/grid-block-axis-alignment-auto-margins-008-ref.html Normal file
Просмотреть файл

@ -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>

30
testing/web-platform/tests/css/css-grid/reference/grid-inline-axis-alignment-auto-margins-008-ref.html Normal file
Просмотреть файл

@ -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>