Bug 1488291 [wpt PR 12816] - [css-grid] Performance optimizations in the Baseline alignment code, a=testonly
authorJavier Fernandez <jfernandez@igalia.com>
Fri, 28 Sep 2018 09:54:07 +0000
changeset 494486 557a989b9ef788d50008720c20e5423086fe3ac9
parent 494485 725e07fa06ebf57387781bd20104439e35b82e19
child 494487 2ee6cf2cb1dc314a59594fc4e63123607f0248cf
push id9984
push userffxbld-merge
push dateMon, 15 Oct 2018 21:07:35 +0000
treeherdermozilla-beta@183d27ea8570 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1488291, 12816, 873452, 1179897, 593552
milestone64.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1488291 [wpt PR 12816] - [css-grid] Performance optimizations in the Baseline alignment code, a=testonly Automatic update from web-platform-tests[css-grid] Performance optimizations in the Baseline alignment code Since we integrated the baseline alignment logic in the grid tracks sizing algorithm, its impact on performance has grown considerably. The analysis of the new logic added and its overhead, due to different operations, shows that evaluating the item's participation in the baseline alignment context is the most expensive one. It's specially demanding the evaluation of the grid item's alignment properties. Considering that currently we are doing this for every grid item, this CL propose to reuse the loop we already have to clear the grid item's override size to cache the items with a baseline value in their alignment CSS properties. Thanks to this cache we can determine the item's participation in a baseline alignment context in the different phases of the track sizing algorithm, with almost no cost (compared to the current logic). It may be possible to share the cache with the algorithm run for computing the grid's intrinsic size; however, if the intrinsic size logic is run before the grid's layout, we'll end up duplicating the cache. Additionally, this cache is also used in the alignment phase of the grid layout logic; this change helps to avoid the various issues we have been suffering related to the different evaluations of the item's participation in baseline during the different phases of the grid layout algorithm. BUG = 873452 Change-Id: Ida27be11ae0f5c455e6077367a277981ab35cec1 Reviewed-on: https://chromium-review.googlesource.com/1179897 Commit-Queue: Javier Fernandez <jfernandez@igalia.com> Reviewed-by: Manuel Rego <rego@igalia.com> Cr-Commit-Position: refs/heads/master@{#593552} -- wpt-commits: f6de5f7d5d50b1ad30a1e17922e183868fd3e935 wpt-pr: 12816
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-001.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-002.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-003.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-004.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-005.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-006.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-007.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-008.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003.html
testing/web-platform/tests/css/css-grid/alignment/support/style-change.js
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-001.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'align-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.">
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 100px / 50px 50px 50px;
+  background: grey;
+  align-items: baseline;
+}
+#item1 {
+  height: 20px;
+  background: blue;
+}
+#item2 {
+  height: 50px;
+  background: green;
+}
+#item3 {
+  height: 30px;
+  background: red;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+function runTest() {
+    let before = {
+        item1: {"data-offset-y": 30 },
+        item2: {"data-offset-y": 0  },
+        item3: {"data-offset-y": 20 }
+    };
+
+    let after = {
+        item1: {"data-offset-y": 10 },
+        item2: {"data-offset-y": 50 },
+        item3: {"data-offset-y": 0  }
+    };
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.alignSelf = "end";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="runTest()">
+    <div id="container">
+        <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0"></div>
+        <div id="item2" data-expected-width="50" data-expected-height="50" data-offset-x="50"></div>
+        <div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100"></div>
+    </div>
+    <div id="log"></div>
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-002.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'align-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.">
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 100px / 50px 50px 50px;
+  background: grey;
+  align-items: baseline;
+}
+#item1 {
+  height: 20px;
+  background: blue;
+}
+#item2 {
+  height: 50px;
+  background: green;
+  align-self: center;
+}
+#item3 {
+  height: 30px;
+  background: red;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+function runTest() {
+    let before = {
+        item1: {"data-offset-y": 10 },
+        item2: {"data-offset-y": 25 },
+        item3: {"data-offset-y": 0  }
+    };
+
+    let after = {
+        item1: {"data-offset-y": 30 },
+        item2: {"data-offset-y": 0  },
+        item3: {"data-offset-y": 20 }
+    };
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.alignSelf = "baseline";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="runTest()">
+    <div id="container">
+        <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0"></div>
+        <div id="item2" data-expected-width="50" data-expected-height="50" data-offset-x="50"></div>
+        <div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100"></div>
+    </div>
+    <div id="log"></div>
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-003.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing the Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position">
+<meta name="assert" content="Changing the justify-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.">
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 50px 50px 50px / 100px;
+  background: grey;
+  justify-items: baseline;
+}
+#container > div { writing-mode: vertical-rl; }
+#item1 {
+  width: 20px;
+  background: blue;
+}
+#item2 {
+  width: 50px;
+  background: green;
+}
+#item3 {
+  width: 30px;
+  background: red;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+function runTest() {
+    let before = {
+        item1: {"data-offset-x": 30 },
+        item2: {"data-offset-x": 0  },
+        item3: {"data-offset-x": 20 }
+    };
+
+    let after = {
+        item1: {"data-offset-x": 10 },
+        item2: {"data-offset-x": 50 },
+        item3: {"data-offset-x": 0  }
+    };
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.justifySelf = "end";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="runTest()">
+    <div id="container">
+        <div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0"></div>
+        <div id="item2" data-expected-width="50" data-expected-height="50" data-offset-y="50"></div>
+        <div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100"></div>
+    </div>
+    <div id="log"></div>
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-004.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing the Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'justify-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.">
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 50px 50px 50px / 100px;
+  background: grey;
+  justify-items: baseline;
+}
+#container > div { writing-mode: vertical-rl; }
+#item1 {
+  width: 20px;
+  background: blue;
+}
+#item2 {
+  width: 50px;
+  background: green;
+  justify-self: center;
+}
+#item3 {
+  width: 30px;
+  background: red;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+function runTest() {
+    let before = {
+        item1: {"data-offset-x": 10 },
+        item2: {"data-offset-x": 25 },
+        item3: {"data-offset-x": 0  }
+    };
+
+    let after = {
+        item1: {"data-offset-x": 30 },
+        item2: {"data-offset-x": 0  },
+        item3: {"data-offset-x": 20 }
+    };
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.justifySelf = "baseline";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="runTest()">
+    <div id="container">
+        <div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0"></div>
+        <div id="item2" data-expected-width="50" data-expected-height="50" data-offset-y="50"></div>
+        <div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100"></div>
+    </div>
+    <div id="log"></div>
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-005.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'align-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.">
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 100px / 50px 50px 50px;
+  background: grey;
+  align-items: baseline;
+  font-family: Ahem;
+}
+#item1 {
+  font-size: 20px;
+  background: blue;
+}
+#item2 {
+  font-size: 40px;
+  background: green;
+}
+#item3 {
+  font-size: 30px;
+  background: red;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+function runTest() {
+    let before = {
+        item1: {"data-offset-y": 16 },
+        item2: {"data-offset-y": 0  },
+        item3: {"data-offset-y": 8  }
+    }
+
+    let after = {
+        item1: {"data-offset-y": 8  },
+        item2: {"data-offset-y": 60 },
+        item3: {"data-offset-y": 0  }
+    }
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.alignSelf = "end";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="runTest()">
+    <div id="container">
+        <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0">É</div>
+        <div id="item2" data-expected-width="50" data-expected-height="40" data-offset-x="50">É</div>
+        <div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100">É</div>
+    </div>
+    <div id="log"></div>
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-006.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'align-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.">
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 100px / 50px 50px 50px;
+  background: grey;
+  align-items: baseline;
+  font-family: Ahem;
+}
+#item1 {
+  font-size: 20px;
+  background: blue;
+}
+#item2 {
+  font-size: 40px;
+  background: green;
+  align-self: center;
+}
+#item3 {
+  font-size: 30px;
+  background: red;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+function runTest() {
+    let before = {
+        item1: {"data-offset-y": 8  },
+        item2: {"data-offset-y": 30 },
+        item3: {"data-offset-y": 0  }
+    }
+
+    let after = {
+        item1: {"data-offset-y": 16 },
+        item2: {"data-offset-y": 0  },
+        item3: {"data-offset-y": 8  }
+    }
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.alignSelf = "baseline";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="runTest()">
+    <div id="container">
+        <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0">É</div>
+        <div id="item2" data-expected-width="50" data-expected-height="40" data-offset-x="50">É</div>
+        <div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100">É</div>
+    </div>
+    <div id="log"></div>
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-007.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing the value of Self-Alignment properties</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'align-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.">
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 50px 50px 50px / 100px;
+  background: grey;
+  justify-items: baseline;
+  font-family: Ahem;
+  text-orientation: sideways;
+}
+#container > div { writing-mode: vertical-lr; }
+#item1 {
+  font-size: 20px;
+  background: blue;
+}
+#item2 {
+  font-size: 40px;
+  background: green;
+}
+#item3 {
+  font-size: 30px;
+  background: red;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+function runTest() {
+    let before = {
+        item1: {"data-offset-x": 4 },
+        item2: {"data-offset-x": 0 },
+        item3: {"data-offset-x": 2 }
+    }
+
+    let after = {
+        item1: {"data-offset-x": 2 },
+        item2: {"data-offset-x": 60 },
+        item3: {"data-offset-x": 0  }
+    }
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.justifySelf = "end";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="runTest()">
+    <div id="container">
+        <div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0">É</div>
+        <div id="item2" data-expected-width="40" data-expected-height="50" data-offset-y="50">É</div>
+        <div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100">É</div>
+    </div>
+    <div id="log"></div>
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-008.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing the Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'justify-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.">
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 50px 50px 50px / 100px;
+  background: grey;
+  justify-items: baseline;
+  font-family: Ahem;
+}
+#container > div { writing-mode: vertical-lr; }
+#item1 {
+  font-size: 20px;
+  background: blue;
+}
+#item2 {
+  font-size: 40px;
+  background: green;
+  justify-self: center;
+}
+#item3 {
+  font-size: 30px;
+  background: red;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+function runTest() {
+    let before = {
+        item1: {"data-offset-x": 5  },
+        item2: {"data-offset-x": 30 },
+        item3: {"data-offset-x": 0  }
+    };
+
+    let after = {
+        item1: {"data-offset-x": 10 },
+        item2: {"data-offset-x": 0  },
+        item3: {"data-offset-x": 5  }
+    };
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.justifySelf = "baseline";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="runTest()">
+    <div id="container">
+        <div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0">É</div>
+        <div id="item2" data-expected-width="40" data-expected-height="50" data-offset-y="50">É</div>
+        <div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100">É</div>
+    </div>
+    <div id="log"></div>
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment and sizing cyclic dependency</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="stylesheet" href="../../support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Items not participating in baseline may later participate if there is an extra pass of the track sizing algorithm.">
+<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  background: grey;
+  text-orientation: sideways;
+  font-family: Ahem;
+}
+.row { grid: minmax(0px, 1fr) / 50px 50px 100px }
+.column { grid: 50px 50px 100px / minmax(0px, 1fr); }
+.item1 {
+   font-size: 30px;
+   background: blue;
+}
+.item2 {
+  font-size: 20px;
+  background: red;
+}
+.item3 {
+  font-size: 80px;
+  background: green;
+}
+.height50 { height: 50px; }
+.relativeHeight { height: 50%; }
+.relativeWidth  { width: 50%; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+
+<pre>flex rows - column-axis baseline - the blue orthogonal item didn't participate in the first iteration</pre>
+<div class="grid row alignItemsBaseline">
+  <div class="item1 verticalLR" data-offset-x="0"   data-offset-y="34" data-expected-width="50"  data-expected-height="30">É</div>
+  <div class="item2"            data-offset-x="50"  data-offset-y="48" data-expected-width="50"  data-expected-height="20">É</div>
+  <div class="item3"            data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="80">É</div>
+</div>
+
+<pre>flex row - column-axis baseline - the blue relative sized item didn't participate in the first iterarion</pre>
+<div class="grid row alignItemsBaseline ">
+  <div class="item1 relativeHeight" data-offset-x="0"   data-offset-y="40" data-expected-width="50"  data-expected-height="40"></div>
+  <div class="item2"                data-offset-x="50"  data-offset-y="64" data-expected-width="50"  data-expected-height="20">É</div>
+  <div class="item3 verticalLR"     data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="80">É</div>
+</div>
+
+<pre>flex row - both the blue relative sized and red orthogonal didn't participate in the first iteration</pre>
+<div class="grid row alignItemsBaseline">
+  <div class="item1 relativeHeight" data-offset-x="0"   data-offset-y="24" data-expected-width="50"  data-expected-height="40"></div>
+  <div class="item2 verticalLR"     data-offset-x="50"  data-offset-y="44" data-expected-width="50"  data-expected-height="20">É</div>
+  <div class="item3"                data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="80">É</div>
+</div>
+
+<pre>flex column - row-axis baseline - the blue orthogonal item didn't participate in the first iteration</pre>
+<div class="grid column justifyItemsBaseline">
+  <div class="item1"            data-offset-x="16" data-offset-y="0"   data-expected-width="30" data-expected-height="50">É</div>
+  <div class="item2 verticalLR" data-offset-x="12" data-offset-y="50"  data-expected-width="20" data-expected-height="50">É</div>
+  <div class="item3 verticalLR" data-offset-x="0"  data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div>
+</div>
+
+<pre>flex column - column-axis baseline - the blue relative sized item didn't participate in the first iterarion</pre>
+<div class="grid column justifyItemsBaseline">
+  <div class="item1 relativeWidth height50" data-offset-x="16" data-offset-y="0"   data-expected-width="40" data-expected-height="50"></div>
+  <div class="item2 verticalLR"             data-offset-x="12" data-offset-y="50"  data-expected-width="20" data-expected-height="50">É</div>
+  <div class="item3 verticalLR"             data-offset-x="0"  data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div>
+</div>
+
+<pre>flex columns - both the blue relative sized and red orthogonal didn't participate in the first iteration</pre>
+<div class="grid column justifyItemsBaseline">
+  <div class="item1 relativeWidth height50" data-offset-x="16" data-offset-y="0"   data-expected-width="40" data-expected-height="50"></div>
+  <div class="item2"                        data-offset-x="16" data-offset-y="50"  data-expected-width="20" data-expected-height="50">É</div>
+  <div class="item3 verticalLR"             data-offset-x="0"  data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div>
+</div>
+
+</body>
--- a/testing/web-platform/tests/css/css-grid/alignment/support/style-change.js
+++ b/testing/web-platform/tests/css/css-grid/alignment/support/style-change.js
@@ -1,5 +1,14 @@
 function evaluateStyleChange(element, phase, expectedProperty, expectedResult) {
     element.className += " " + phase;
     element.setAttribute(expectedProperty, expectedResult);
     checkLayout("." + phase, false);
 }
+function evaluateStyleChangeMultiple(phase, expectedResult) {
+    for (var item in expectedResult) {
+        var element = document.getElementById(item);
+        element.className += " " + phase;
+        for (var key in expectedResult[item])
+            element.setAttribute(key, expectedResult[item][key]);
+    }
+    checkLayout("." + phase, false);
+}