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 487042 557a989b9ef788d50008720c20e5423086fe3ac9
parent 487041 725e07fa06ebf57387781bd20104439e35b82e19
child 487043 2ee6cf2cb1dc314a59594fc4e63123607f0248cf
push id246
push userfmarier@mozilla.com
push dateSat, 13 Oct 2018 00:15:40 +0000
reviewerstestonly
bugs1488291, 12816, 873452, 1179897, 593552
milestone64.0a1
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);
+}