Diff
Modified: trunk/LayoutTests/imported/w3c/ChangeLog (258734 => 258735)
--- trunk/LayoutTests/imported/w3c/ChangeLog 2020-03-19 22:18:30 UTC (rev 258734)
+++ trunk/LayoutTests/imported/w3c/ChangeLog 2020-03-19 22:27:06 UTC (rev 258735)
@@ -1,3 +1,45 @@
+2020-03-19 Javier Fernandez <jfernan...@igalia.com>
+
+ [css-grid] Changes in grid or elements inside the grid affects margin on other elements in the grid
+ https://bugs.webkit.org/show_bug.cgi?id=209203
+
+ Reviewed by Darin Adler.
+
+ Imported new Web Platform tests to detect regressions in the auto-margins logic durignn relayouts.
+
+ * web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001-expected.txt: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.html: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002-expected.txt: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.html: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003-expected.txt: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.html: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004-expected.txt: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.html: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005-expected.txt: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.html: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006-expected.txt: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.html: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007-expected.txt: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.html: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-008-expected.html: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-008.html: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-001-expected.txt: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-001.html: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-002-expected.txt: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-002.html: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-003-expected.txt: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-003.html: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-004-expected.txt: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-004.html: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-005-expected.txt: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-005.html: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-006-expected.txt: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-006.html: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-007-expected.txt: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-007.html: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-008-expected.html: Added.
+ * web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-008.html: Added.
+
2020-03-19 Myles C. Maxfield <mmaxfi...@apple.com>
Update imported/w3c/web-platform-tests/css/css-text/line-break/line-break-{strict,normal}-015.xht
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001-expected.txt (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001-expected.txt 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,4 @@
+
+PASS #grid 1
+PASS #grid 2
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.html (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.html 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,50 @@
+<!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=""
+<link rel="help" title="10.2 Aligning with auto margins" href=""
+<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=""
+<script src=""
+<script src=""
+<div id="grid">
+ <div id="item1"></div>
+ <div id="item2"></div>
+</div>
+<script>
+document.fonts.ready.then(() => {
+ item1.setAttribute("data-offset-y", "75");
+ item2.setAttribute("data-offset-y", "300");
+ checkLayout('#grid', false);
+
+ grid.style.height = "300px";
+
+ item1.setAttribute("data-offset-y", "35");
+ item2.setAttribute("data-offset-y", "160");
+
+ checkLayout('#grid', true);
+});
+</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002-expected.txt (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002-expected.txt 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,4 @@
+
+PASS #grid 1
+PASS #grid 2
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.html (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.html 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,49 @@
+<!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=""
+<link rel="help" title="10.2 Aligning with auto margins" href=""
+<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=""
+<script src=""
+<script src=""
+<div id="grid">
+ <div id="item1"></div>
+ <div id="item2"></div>
+</div>
+<script>
+document.fonts.ready.then(() => {
+ item1.setAttribute("data-offset-y", "75");
+ item2.setAttribute("data-offset-y", "300");
+ checkLayout('#grid', false);
+
+ item1.style.height = "100px";
+
+ item1.setAttribute("data-offset-y", "50");
+ item2.setAttribute("data-offset-y", "300");
+ checkLayout('#grid', true);
+});
+</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003-expected.txt (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003-expected.txt 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,4 @@
+
+PASS #grid 1
+PASS #grid 2
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.html (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.html 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,50 @@
+<!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=""
+<link rel="help" title="10.2 Aligning with auto margins" href=""
+<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=""
+<script src=""
+<script src=""
+<div id="grid">
+ <div id="item1"></div>
+ <div id="item2"></div>
+</div>
+<script>
+document.fonts.ready.then(() => {
+ item1.setAttribute("data-offset-y", "75");
+ item2.setAttribute("data-offset-y", "300");
+ checkLayout('#grid', false);
+
+ item1.style.height = "100px";
+
+ item1.setAttribute("data-offset-y", "50");
+ item2.setAttribute("data-offset-y", "300");
+ checkLayout('#grid', true);
+});
+</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004-expected.txt (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004-expected.txt 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,4 @@
+
+PASS #grid 1
+PASS #grid 2
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.html (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.html 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,50 @@
+<!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=""
+<link rel="help" title="10.2 Aligning with auto margins" href=""
+<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=""
+<script src=""
+<script src=""
+<div id="grid">
+ <div id="item1"></div>
+ <div id="item2"></div>
+</div>
+<script>
+document.fonts.ready.then(() => {
+ item1.setAttribute("data-offset-y", "75");
+ item2.setAttribute("data-offset-y", "300");
+ checkLayout('#grid', false);
+
+ grid.style.height = "300px";
+
+ item1.setAttribute("data-offset-y", "35");
+ item2.setAttribute("data-offset-y", "160");
+ checkLayout('#grid', true);
+});
+</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005-expected.txt (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005-expected.txt 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,6 @@
+XXXXX
+XXXXX
+
+PASS #grid 1
+PASS #grid 2
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.html (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.html 2020-03-19 22:27:06 UTC (rev 258735)
@@ -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=""
+<link rel="help" title="10.2 Aligning with auto margins" href=""
+<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid item's height changes.">
+<link rel="stylesheet" type="text/css" href="" />
+<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=""
+<script src=""
+<script src=""
+<div id="grid">
+ <div id="item1">XXXXX</div>
+ <div id="item2">XXXXX</div>
+</div>
+<script>
+document.fonts.ready.then(() => {
+ item1.setAttribute("data-offset-y", "90");
+ item2.setAttribute("data-offset-y", "345");
+ checkLayout('#grid', false);
+
+ item2.style.fontSize = "40px";
+
+ item1.setAttribute("data-offset-y", "90");
+ item2.setAttribute("data-offset-y", "330");
+ checkLayout('#grid', true);
+});
+</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006-expected.txt (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006-expected.txt 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,6 @@
+XXXXX
+XXXXX
+
+PASS #grid 1
+PASS #grid 2
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.html (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.html 2020-03-19 22:27:06 UTC (rev 258735)
@@ -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=""
+<link rel="help" title="10.2 Aligning with auto margins" href=""
+<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid item's height changes.">
+<link rel="stylesheet" type="text/css" href="" />
+<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=""
+<script src=""
+<script src=""
+<div id="grid">
+ <div id="item1">XXXXX</div>
+ <div id="item2">XXXXX</div>
+</div>
+<script>
+document.fonts.ready.then(() => {
+ item1.setAttribute("data-offset-y", "95");
+ item2.setAttribute("data-offset-y", "345");
+ checkLayout('#grid', false);
+
+ grid.style.fontSize = "40px";
+
+ item1.setAttribute("data-offset-y", "80");
+ item2.setAttribute("data-offset-y", "330");
+ checkLayout('#grid', true);
+});
+</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007-expected.txt (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007-expected.txt 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,4 @@
+
+PASS #grid 1
+PASS #grid 2
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.html (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.html 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,49 @@
+<!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=""
+<link rel="help" title="10.2 Aligning with auto margins" href=""
+<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=""
+<script src=""
+<script src=""
+<div id="grid">
+ <div id="item1"></div>
+ <div id="item2"></div>
+</div>
+<script>
+document.fonts.ready.then(() => {
+ item1.setAttribute("data-offset-y", "75");
+ item2.setAttribute("data-offset-y", "300");
+ checkLayout('#grid', false);
+
+ grid.style.height = "300px";
+
+ item1.setAttribute("data-offset-y", "35");
+ item2.setAttribute("data-offset-y", "160");
+ checkLayout('#grid', true);
+});
+</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-008-expected.html (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-008-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-008-expected.html 2020-03-19 22:27:06 UTC (rev 258735)
@@ -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=""
+<link rel="stylesheet" type="text/css" href="" />
+<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>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-008.html (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-008.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-008.html 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,35 @@
+<!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=""
+<link rel="help" title="10.2 Aligning with auto margins" href=""
+<link rel="match" href=""
+<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed after the grid's intrinsic size is determined.">
+<link rel="stylesheet" type="text/css" href="" />
+<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>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-001-expected.txt (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-001-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-001-expected.txt 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,4 @@
+
+PASS #grid 1
+PASS #grid 2
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-001.html (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-001.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-001.html 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,51 @@
+<!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=""
+<link rel="help" title="10.2 Aligning with auto margins" href=""
+<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=""
+<script src=""
+<script src=""
+<div id="grid">
+ <div id="item1"></div>
+ <div id="item2"></div>
+</div>
+<script>
+document.fonts.ready.then(() => {
+ item1.setAttribute("data-offset-x", "75");
+ item2.setAttribute("data-offset-x", "300");
+ checkLayout('#grid', false);
+
+ grid.style.width = "300px";
+
+ item1.setAttribute("data-offset-x", "35");
+ item2.setAttribute("data-offset-x", "160");
+ checkLayout('#grid', true);
+
+ done();
+});
+</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-002-expected.txt (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-002-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-002-expected.txt 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,4 @@
+
+PASS #grid 1
+PASS #grid 2
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-002.html (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-002.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-002.html 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,49 @@
+<!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=""
+<link rel="help" title="10.2 Aligning with auto margins" href=""
+<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=""
+<script src=""
+<script src=""
+<div id="grid">
+ <div id="item1"></div>
+ <div id="item2"></div>
+</div>
+<script>
+document.fonts.ready.then(() => {
+ item1.setAttribute("data-offset-x", "75");
+ item2.setAttribute("data-offset-x", "300");
+ checkLayout('#grid', false);
+
+ item1.style.width = "100px";
+
+ item1.setAttribute("data-offset-x", "50");
+ item2.setAttribute("data-offset-x", "300");
+ checkLayout('#grid', true);
+});
+</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-003-expected.txt (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-003-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-003-expected.txt 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,4 @@
+
+PASS #grid 1
+PASS #grid 2
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-003.html (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-003.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-003.html 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,50 @@
+<!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=""
+<link rel="help" title="10.2 Aligning with auto margins" href=""
+<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=""
+<script src=""
+<script src=""
+<div id="grid">
+ <div id="item1"></div>
+ <div id="item2"></div>
+</div>
+<script>
+document.fonts.ready.then(() => {
+ item1.setAttribute("data-offset-x", "75");
+ item2.setAttribute("data-offset-x", "300");
+ checkLayout('#grid', false);
+
+ item1.style.width = "100px";
+
+ item1.setAttribute("data-offset-x", "50");
+ item2.setAttribute("data-offset-x", "300");
+ checkLayout('#grid', true);
+});
+</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-004-expected.txt (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-004-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-004-expected.txt 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,4 @@
+
+PASS #grid 1
+PASS #grid 2
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-004.html (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-004.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-004.html 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,50 @@
+<!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=""
+<link rel="help" title="10.2 Aligning with auto margins" href=""
+<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=""
+<script src=""
+<script src=""
+<div id="grid">
+ <div id="item1"></div>
+ <div id="item2"></div>
+</div>
+<script>
+document.fonts.ready.then(() => {
+ item1.setAttribute("data-offset-x", "75");
+ item2.setAttribute("data-offset-x", "300");
+ checkLayout('#grid', false);
+
+ grid.style.width = "300px";
+
+ item1.setAttribute("data-offset-x", "35");
+ item2.setAttribute("data-offset-x", "160");
+ checkLayout('#grid', true);
+});
+</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-005-expected.txt (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-005-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-005-expected.txt 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,6 @@
+XXXXX
+XXXXX
+
+PASS #grid 1
+PASS #grid 2
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-005.html (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-005.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-005.html 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,50 @@
+<!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=""
+<link rel="help" title="10.2 Aligning with auto margins" href=""
+<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid items's width changes.">
+<link rel="stylesheet" type="text/css" href="" />
+<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=""
+<script src=""
+<script src=""
+<div id="grid">
+ <div id="item1">XXXXX</div>
+ <div id="item2">XXXXX</div>
+</div>
+<script>
+document.fonts.ready.then(() => {
+ item1.setAttribute("data-offset-x", "50");
+ item2.setAttribute("data-offset-x", "325");
+ checkLayout('#grid', false);
+
+ item2.style.fontSize = "30px";
+
+ item1.setAttribute("data-offset-x", "50");
+ item2.setAttribute("data-offset-x", "275");
+ checkLayout('#grid', true);
+});
+</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-006-expected.txt (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-006-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-006-expected.txt 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,6 @@
+XXXX
+XX
+
+PASS #grid 1
+PASS #grid 2
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-006.html (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-006.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-006.html 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,49 @@
+<!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=""
+<link rel="help" title="10.2 Aligning with auto margins" href=""
+<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid items's width changes.">
+<link rel="stylesheet" type="text/css" href="" />
+<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=""
+<script src=""
+<script src=""
+<div id="grid">
+ <div id="item1">XXXX</div>
+ <div id="item2">XX</div>
+</div>
+<script>
+document.fonts.ready.then(() => {
+ item1.setAttribute("data-offset-x", "80");
+ item2.setAttribute("data-offset-x", "340");
+ checkLayout('#grid', false);
+
+ grid.style.fontSize = "25px";
+
+ item1.setAttribute("data-offset-x", "50");
+ item2.setAttribute("data-offset-x", "325");
+ checkLayout('#grid', true);
+});
+</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-007-expected.txt (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-007-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-007-expected.txt 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,4 @@
+
+PASS #grid 1
+PASS #grid 2
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-007.html (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-007.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-007.html 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,49 @@
+<!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=""
+<link rel="help" title="10.2 Aligning with auto margins" href=""
+<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=""
+<script src=""
+<script src=""
+<div id="grid">
+ <div id="item1"></div>
+ <div id="item2"></div>
+</div>
+<script>
+document.fonts.ready.then(() => {
+ item1.setAttribute("data-offset-x", "75");
+ item2.setAttribute("data-offset-x", "300");
+ checkLayout('#grid', false);
+
+ grid.style.width = "300px";
+
+ item1.setAttribute("data-offset-x", "35");
+ item2.setAttribute("data-offset-x", "160");
+ checkLayout('#grid', true);
+});
+</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-008-expected.html (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-008-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-008-expected.html 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,31 @@
+<!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=""
+<link rel="stylesheet" type="text/css" href="" />
+<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>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-008.html (0 => 258735)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-008.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-008.html 2020-03-19 22:27:06 UTC (rev 258735)
@@ -0,0 +1,36 @@
+<!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=""
+<link rel="help" title="10.2 Aligning with auto margins" href=""
+<link rel="match" href=""
+<meta name="assert" content="The 'left' and 'right' margins must be recomputed after the grid's intrinsic size is determined.">
+<link rel="stylesheet" type="text/css" href="" />
+<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>
Modified: trunk/Source/WebCore/ChangeLog (258734 => 258735)
--- trunk/Source/WebCore/ChangeLog 2020-03-19 22:18:30 UTC (rev 258734)
+++ trunk/Source/WebCore/ChangeLog 2020-03-19 22:27:06 UTC (rev 258735)
@@ -1,3 +1,33 @@
+2020-03-19 Javier Fernandez <jfernan...@igalia.com>
+
+ [css-grid] Changes in grid or elements inside the grid affects margin on other elements in the grid
+ https://bugs.webkit.org/show_bug.cgi?id=209203
+
+ Reviewed by Darin Adler.
+
+ We should ignore the previously computed auto margins wheneven a relayout is performed.
+
+ Tests: imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.html
+ imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.html
+ imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.html
+ imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.html
+ imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.html
+ imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.html
+ imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.html
+ imported/w3c/web-platform-tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-008.html
+ imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-001.html
+ imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-002.html
+ imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-003.html
+ imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-004.html
+ imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-005.html
+ imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-006.html
+ imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-007.html
+ imported/w3c/web-platform-tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-008.html
+
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::updateAutoMarginsInRowAxisIfNeeded):
+ (WebCore::RenderGrid::updateAutoMarginsInColumnAxisIfNeeded):
+
2020-03-19 Andres Gonzalez <andresg...@apple.com>
Remove caching of isOnScreen since it is not used.
Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (258734 => 258735)
--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2020-03-19 22:18:30 UTC (rev 258734)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2020-03-19 22:27:06 UTC (rev 258735)
@@ -1172,13 +1172,22 @@
{
ASSERT(!child.isOutOfFlowPositioned());
- LayoutUnit availableAlignmentSpace = child.overrideContainingBlockContentLogicalWidth().value() - child.logicalWidth() - child.marginLogicalWidth();
+ const RenderStyle& parentStyle = style();
+ Length marginStart = child.style().marginStartUsing(&parentStyle);
+ Length marginEnd = child.style().marginEndUsing(&parentStyle);
+ LayoutUnit marginLogicalWidth;
+ // We should only consider computed margins if their specified value isn't
+ // 'auto', since such computed value may come from a previous layout and may
+ // be incorrect now.
+ if (!marginStart.isAuto())
+ marginLogicalWidth += child.marginStart();
+ if (!marginEnd.isAuto())
+ marginLogicalWidth += child.marginEnd();
+
+ LayoutUnit availableAlignmentSpace = child.overrideContainingBlockContentLogicalWidth().value() - child.logicalWidth() - marginLogicalWidth;
if (availableAlignmentSpace <= 0)
return;
- const RenderStyle& parentStyle = style();
- Length marginStart = child.style().marginStartUsing(&parentStyle);
- Length marginEnd = child.style().marginEndUsing(&parentStyle);
if (marginStart.isAuto() && marginEnd.isAuto()) {
child.setMarginStart(availableAlignmentSpace / 2, &parentStyle);
child.setMarginEnd(availableAlignmentSpace / 2, &parentStyle);
@@ -1194,13 +1203,22 @@
{
ASSERT(!child.isOutOfFlowPositioned());
- LayoutUnit availableAlignmentSpace = child.overrideContainingBlockContentLogicalHeight().value() - child.logicalHeight() - child.marginLogicalHeight();
+ const RenderStyle& parentStyle = style();
+ Length marginBefore = child.style().marginBeforeUsing(&parentStyle);
+ Length marginAfter = child.style().marginAfterUsing(&parentStyle);
+ LayoutUnit marginLogicalHeight;
+ // We should only consider computed margins if their specified value isn't
+ // 'auto', since such computed value may come from a previous layout and may
+ // be incorrect now.
+ if (!marginBefore.isAuto())
+ marginLogicalHeight += child.marginBefore();
+ if (!marginAfter.isAuto())
+ marginLogicalHeight += child.marginAfter();
+
+ LayoutUnit availableAlignmentSpace = child.overrideContainingBlockContentLogicalHeight().value() - child.logicalHeight() - marginLogicalHeight;
if (availableAlignmentSpace <= 0)
return;
- const RenderStyle& parentStyle = style();
- Length marginBefore = child.style().marginBeforeUsing(&parentStyle);
- Length marginAfter = child.style().marginAfterUsing(&parentStyle);
if (marginBefore.isAuto() && marginAfter.isAuto()) {
child.setMarginBefore(availableAlignmentSpace / 2, &parentStyle);
child.setMarginAfter(availableAlignmentSpace / 2, &parentStyle);
