tor-browser

commit c4b3bd45243ecc001b3ac850114e6d115b1f1143
parent aac5f313098e5974d7754008f9a7424feed9ee5a
Author: Antoine Quint <graouts@apple.com>
Date:   Tue, 21 Oct 2025 10:29:58 +0000

Bug 1994463 [wpt PR 55455] - WebKit export of https://bugs.webkit.org/show_bug.cgi?id=299952, a=testonly

Automatic update from web-platform-tests
WebKit export of https://bugs.webkit.org/show_bug.cgi?id=299952 (#55455)

--

wpt-commits: b1ca3b209a5579df8f183ddb3d398d8756717ac2
wpt-pr: 55455

Diffstat:
M
testing/web-platform/tests/css/css-conditional/container-queries/container-units-animation.html
 | 
76
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------

1 file changed, 59 insertions(+), 17 deletions(-)
diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/container-units-animation.html b/testing/web-platform/tests/css/css-conditional/container-queries/container-units-animation.html
@@ -18,28 +18,35 @@
   @keyframes anim_cqmin { from { top: 20cqmin; } to { top: 40cqmin; } }
   @keyframes anim_cqmax { from { top: 20cqmax; } to { top: 40cqmax; } }
 
-  #container > div {
+  #container > div.css-animation {
     animation-delay: -5s;
     animation-play-state: paused;
     animation-duration: 10s;
     animation-timing-function: linear;
   }
 
-  #element_cqw { animation-name: anim_cqw; }
-  #element_cqh { animation-name: anim_cqh; }
-  #element_cqi { animation-name: anim_cqi; }
-  #element_cqb { animation-name: anim_cqb; }
-  #element_cqmin { animation-name: anim_cqmin; }
-  #element_cqmax { animation-name: anim_cqmax; }
+  .css-animation.cqw { animation-name: anim_cqw; }
+  .css-animation.cqh { animation-name: anim_cqh; }
+  .css-animation.cqi { animation-name: anim_cqi; }
+  .css-animation.cqb { animation-name: anim_cqb; }
+  .css-animation.cqmin { animation-name: anim_cqmin; }
+  .css-animation.cqmax { animation-name: anim_cqmax; }
 
 </style>
 <div id=container>
-  <div id=element_cqw></div>
-  <div id=element_cqh></div>
-  <div id=element_cqi></div>
-  <div id=element_cqb></div>
-  <div id=element_cqmin></div>
-  <div id=element_cqmax></div>
+  <div class="css-animation cqw"></div>
+  <div class="css-animation cqh"></div>
+  <div class="css-animation cqi"></div>
+  <div class="css-animation cqb"></div>
+  <div class="css-animation cqmin"></div>
+  <div class="css-animation cqmax"></div>
+
+  <div class="web-animation cqw"></div>
+  <div class="web-animation cqh"></div>
+  <div class="web-animation cqi"></div>
+  <div class="web-animation cqb"></div>
+  <div class="web-animation cqmin"></div>
+  <div class="web-animation cqmax"></div>
 </div>
 <script>
   setup(() => assert_implements_size_container_queries());
@@ -48,12 +55,12 @@
 
   for (let unit of units) {
     test(() => {
-      let element = document.getElementById(`element_${unit}`)
+      let element = document.querySelector(`.css-animation.${unit}`)
       assert_equals(getComputedStyle(element).top, '60px');
-    }, `Animation using ${unit} unit`);
+    }, `CSS Animation using ${unit} unit`);
 
     test(() => {
-      let element = document.getElementById(`element_${unit}`)
+      let element = document.querySelector(`.css-animation.${unit}`)
       assert_equals(getComputedStyle(element).top, '60px');
       try {
         container.style.width = '300px';
@@ -64,7 +71,42 @@
       }
 
       assert_equals(getComputedStyle(element).top, '60px');
-    }, `Animation using ${unit} unit responds to changing container size`);
+    }, `CSS Animation using ${unit} unit responds to changing container size`);
+  }
+
+  const keyframes = {
+    "cqw" : { top: ["20cqw", "40cqw"] },
+    "cqh" : { top: ["20cqh", "40cqh"] },
+    "cqi" : { top: ["20cqi", "40cqi"] },
+    "cqb" : { top: ["20cqb", "40cqb"] },
+    "cqmin" : { top: ["20cqmin", "40cqmin"] },
+    "cqmax" : { top: ["20cqmax", "40cqmax"] }
+  };
+
+  for (const unit in keyframes) {
+    const target = document.querySelector(`.web-animation.${unit}`);
+    const assert_top = expected => assert_equals(getComputedStyle(target).top, expected);
+
+    const animation = target.animate(keyframes[unit], 10 * 1000);
+    animation.currentTime = 5 * 1000;
+    animation.pause();
+
+    test(() => {
+      assert_top('60px');
+    }, `Web Animation using ${unit} unit`);
+
+    test(() => {
+      assert_top('60px');
+      try {
+        container.style.width = '300px';
+        container.style.height = '300px';
+        assert_top('90px');
+      } finally {
+        container.style = '';
+      }
+
+      assert_top('60px');
+    }, `Web Animation using ${unit} unit responds to changing container size`);
   }
 
 </script>