[GridNG] Disable first tier OOF cache for grid

KurtCattiSchmidt · chromium-wpt-export-bot · commit d7554a0a02a4 · 2021-09-10T14:59:37.000-07:00
Grid allows for out-of-flow items to be placed in grid areas, which will impact their size and position. This doesn't work well with the first tier OOF cache, as any changes to the grid can will be out of sync with the first tier OOF cache. The fix here is to disable the first tier OOF cache for grid. Bug: 1247052 Change-Id: I6aa61df23c62de66849c87f7204e598804f99a50 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3150665 Commit-Queue: Kurt Catti-Schmidt <kschmi@microsoft.com> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#920037}
diff --git a/css/css-grid/abspos/grid-positioned-item-dynamic-change-006-ref.html b/css/css-grid/abspos/grid-positioned-item-dynamic-change-006-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned item dynamic change.</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos">
+<style>
+.reference {
+  display: grid;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+</style>
+<body>
+<p>Test passes if it matches the reference.</p>
+<div class="reference">
+</div>
+</body>
+</html>
diff --git a/css/css-grid/abspos/grid-positioned-item-dynamic-change-006.html b/css/css-grid/abspos/grid-positioned-item-dynamic-change-006.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned item dynamic change.</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos">
+<link rel="match" href="grid-positioned-item-dynamic-change-006-ref.html">
+<meta name="assert" content="This test checks that positioned items update upon dynamic changes.">
+<style>
+.absolute {
+  background: green;
+  position: absolute;
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+</style>
+<body>
+<p>Test passes if it matches the reference.</p>
+<div style="display: grid; position: relative; width: 100px;">
+  <div style="background: green;">
+    <div id="target"></div>
+  </div>
+  <div style="background: red; height: 25px;"></div>
+  <div class="absolute"></div>
+</div>
+<script>
+document.body.offsetTop;
+document.getElementById('target').style.height = '75px';
+document.documentElement.classList.remove('reftest-wait');
+</script>
+</body>
+</html>
