Update 'animation-iteration-event-destroy-renderer.html' to use 'test…

…harness' https://bugs.webkit.org/show_bug.cgi?id=266063 Reviewed by Antoine Quint. Merge (and update): https://chromium.googlesource.com/chromium/src.git/+/13fe1b8357c3e67f72136207efdafdaf8a103100 This PR imports the following tests from Blink / Chromium source with slight changes (e.g., adding DOCTYPE, `html` tag, unprefixed CSS etc.) to make it 'testharness' based and more resilient. * LayoutTests/animations/animation-iteration-event-destroy-renderer.html: Rebaelined * LayoutTests/animations/animation-iteration-event-destroy-renderer-expected.txt: Rebaselined Canonical link: https://commits.webkit.org/271726@main
WebKit · Dec 8, 2023 · a75d4f2 · a75d4f2
1 parent 52828dc
commit a75d4f2
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 69 deletions.
diff --git a/LayoutTests/animations/animation-iteration-event-destroy-renderer-expected.txt b/LayoutTests/animations/animation-iteration-event-destroy-renderer-expected.txt
@@ -1,3 +1,3 @@
-Tests element removal and hiding within the webkitAnimationIteration event handler. Should not crash.
 
-Did not crash, so PASSED
+PASS Tests element removal and hiding within the AnimationIteration event handler. Should not crash
+
diff --git a/LayoutTests/animations/animation-iteration-event-destroy-renderer.html b/LayoutTests/animations/animation-iteration-event-destroy-renderer.html
@@ -1,70 +1,64 @@
+<!DOCTYPE html>
 <html>
-<head>
-  <title>Destroy and Hide Element in Animation End Event</title>
-  <style type="text/css" media="screen">
-    .box {
-      height: 100px;
-      width: 100px;
-      margin: 10px;
-      background-color: blue;
-      -webkit-animation-duration: 0.2s;
-      -webkit-animation-iteration-count: 2;
-    }
-
-    @-webkit-keyframes move {
-      from { -webkit-transform: translate(0px, 0px); }
-      to { -webkit-transform: translate(100px, 0px); }
-    }
-  </style>
-  <script type="text/javascript" charset="utf-8">
-    if (window.testRunner) {
-        testRunner.dumpAsText();
-        testRunner.waitUntilDone();
-    }
-
-    var numDone = 0;
-    function animationIterated()
-    {
-      ++numDone;
-      if (numDone == 2) {
-        if (window.GCController)
-          GCController.collect();
-
-        document.getElementById('results').innerHTML = 'Did not crash, so PASSED';
-
-        if (window.testRunner)
-          testRunner.notifyDone();
+  <head>
+    <title>Destroy and Hide Element in Animation End Event</title>
+    <style type="text/css" media="screen">
+      .box {
+        height: 100px;
+        width: 100px;
+        margin: 10px;
+        background-color: blue;
+        animation-duration: 0.2s;
+        animation-iteration-count: 2;
       }
-    }
-
-    function startTest()
-    {
-      var box1 = document.getElementById('box1');
-      box1.addEventListener('webkitAnimationIteration', function() {
-        box1.parentNode.removeChild(box1);
-        animationIterated();
-      }, false);
-      box1.style.webkitAnimationName = 'move';
-
-      var box2 = document.getElementById('box2');
-      box2.addEventListener('webkitAnimationIteration', function() {
-        box2.style.display = 'none';
-        animationIterated();
-      }, false);
-      box2.style.webkitAnimationName = 'move';
-    }
-
-    window.addEventListener('load', startTest, false);
-  </script>
-</head>
-<body>
-
-<p>Tests element removal and hiding within the webkitAnimationIteration event handler. Should not crash.</p>
-
-<div id="container">
-  <div id="box1" class="box"></div>
-  <div id="box2" class="box"></div>
-</div>
-<div id="results"></div>
-</body>
+
+      @keyframes move {
+        from { transform: translate(0px, 0px); }
+        to { transform: translate(100px, 0px); }
+      }
+    </style>
+    <script src="../resources/testharness.js"></script>
+    <script src="../resources/testharnessreport.js"></script>
+    <script type="text/javascript" charset="utf-8">
+      'use strict';
+      var test = async_test("Tests element removal and hiding within the AnimationIteration event handler. Should not crash");
+
+      var numDone = 0;
+      function animationIterated()
+      {
+        ++numDone;
+        if (numDone == 2) {
+          if (window.GCController)
+            GCController.collect();
+
+          test.done();
+        }
+      }
+
+      function startTest()
+      {
+        var box1 = document.getElementById('box1');
+        var box2 = document.getElementById('box2');
+        box2.offsetTop; // force style recalc
+
+        box1.addEventListener('animationiteration', function() {
+          box1.parentNode.removeChild(box1);
+          animationIterated();
+        }, false);
+        box1.style.animationName = 'move';
+
+        box2.addEventListener('animationiteration', function() {
+          box2.style.display = 'none';
+          animationIterated();
+        }, false);
+        box2.style.animationName = 'move';
+      }
+
+      window.addEventListener('load', test.step_func(startTest), false);
+    </script>
+  </head>
+  <div id="container">
+    <div id="box1" class="box"></div>
+    <div id="box2" class="box"></div>
+  </div>
 </html>