[@container] Add WPT for container size invalidation after onload

Bug: 1321010 Change-Id: If033cfe9c41d70ad26dc6614492b9bfb3479b8ea Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3613777 Reviewed-by: Rune Lillesveen <[email protected]> Commit-Queue: Rune Lillesveen <[email protected]> Cr-Commit-Position: refs/heads/main@{#997600}
web-platform-tests · Apr 29, 2022 · 41fb91f · 41fb91f
1 parent 219f3b4
commit 41fb91f
Showing 1 changed file with 39 additions and 0 deletions.
diff --git a/css/css-contain/container-queries/container-size-invalidation-after-load.html b/css/css-contain/container-queries/container-size-invalidation-after-load.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<title>@container: invalidation of container size after load event</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #container {
+    container-type: size;
+    width: 200px;
+    height: 4em;
+    border: 1px solid black;
+  }
+  @container (width > 300px) {
+    #child { color: green; }
+  }
+</style>
+<div id=container>
+  <div id=child>
+    Green
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  function waitForLoad(w) {
+    return new Promise(resolve => w.addEventListener('load', resolve));
+  }
+
+  promise_test(async () => {
+    await waitForLoad(window);
+    container.offsetTop;
+
+    container.style.width = '400px';
+    container.style.setProperty('--x', 'x'); // crbug.com/1321010
+
+    assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)');
+  });
+</script>