1 files changed, 47 insertions, 6 deletions
diff --git a/testing/web-platform/tests/css/css-transitions/starting-style-size-container.html b/testing/web-platform/tests/css/css-transitions/starting-style-size-container.html
index 92ad6e6125..1ad609dd90 100644
--- a/testing/web-platform/tests/css/css-transitions/starting-style-size-container.html
+++ b/testing/web-platform/tests/css/css-transitions/starting-style-size-container.html
@@ -5,32 +5,58 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/css/css-transitions/support/helper.js"></script>
-<div id="container" style="width: 200px">
-  <div id="target" style="display: none"></div>
-</div>
+<body>
+</body>
 <style>
   #container {
     container-type: inline-size;
+    width: 100px;
   }
   #target {
     transition-property: background-color;
     transition-duration: 100s;
     transition-timing-function: steps(2, start);
     background-color: lime;
+    display: none;
   }
   @container (width > 300px) {
     @starting-style {
       #target { background-color: white; }
     }
   }
-  @container (width < 300px) {
+  @container ((width > 200px) and (width < 300px)) {
+    #target {
+      display: block;
+    }
+    @starting-style {
+      #target { background-color: white; }
+    }
+  }
+  @container (width < 200px) {
     @starting-style {
       #target { background-color: red; }
     }
   }
 </style>
 <script>
+  function setup(test) {
+    let container = document.createElement("div");
+    container.id = "container";
+    document.body.appendChild(container);
+
+    let target = document.createElement("div");
+    target.id = "target";
+    container.appendChild(target);
+
+    test.add_cleanup(() => {
+      target.remove();
+      container.remove();
+    });
+    return [container, target];
+  }
+
   promise_test(async t => {
+    let [container, target] = setup(t);
     await waitForAnimationFrames(2);
     assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 255, 0)",
                   "No transition while display:none");
@@ -38,6 +64,21 @@
     target.style.display = "block";
     await waitForAnimationFrames(2);
     assert_equals(getComputedStyle(target).backgroundColor, "rgb(128, 255, 128)",
-                  "@starting-style based on the size query evaluation from the same frame");
-  }, "Triggered transition from first style update based on up-to-date container query");
+                  "@starting-style based on the size query evaluation from " +
+                  "the same frame");
+  }, "Triggered transition from first style update based on up-to-date " +
+     "container query");
+
+  promise_test(async t => {
+    let [container, target] = setup(t);
+    await waitForAnimationFrames(2);
+    assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 255, 0)",
+                  "No transition while display:none");
+    container.style.width = "250px";
+    await waitForAnimationFrames(2);
+    assert_equals(getComputedStyle(target).backgroundColor, "rgb(128, 255, 128)",
+                  "@starting-style based on the size query evaluation from " +
+                  "the same frame");
+  }, "Triggered transition from the display change inside the up-to-date " +
+     "container query");
 </script>