Changeset 260780 in webkit


Ignore:
Timestamp:
Apr 27, 2020 1:56:01 PM (4 years ago)
Author:
graouts@webkit.org
Message:

[ iOS ] REGRESSION: animations/change-keyframes-name.html is a flaky failure
​https://bugs.webkit.org/show_bug.cgi?id=211079
<rdar://problem/61486093>

Reviewed by Simon Fraser.

Rewrite this test to use the new AnimationTest helper that will non-flakily check animated values while an animation is running.

  • animations/change-keyframes-name-expected.txt:
  • animations/change-keyframes-name.html:
  • animations/resources/animation-test.js:

(AnimationTest.prototype.async recordValueAfterRunningFor):

Location:
trunk/LayoutTests
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r260773 r260780  
     12020-04-27  Antoine Quint  <graouts@apple.com>
     2
     3        [ iOS ] REGRESSION: animations/change-keyframes-name.html is a flaky failure
     4        https://bugs.webkit.org/show_bug.cgi?id=211079
     5        <rdar://problem/61486093>
     6
     7        Reviewed by Simon Fraser.
     8
     9        Rewrite this test to use the new AnimationTest helper that will non-flakily check animated values while an animation is running.
     10
     11        * animations/change-keyframes-name-expected.txt:
     12        * animations/change-keyframes-name.html:
     13        * animations/resources/animation-test.js:
     14        (AnimationTest.prototype.async recordValueAfterRunningFor):
     15
    1162020-04-27  Dean Jackson  <dino@apple.com>
    217

  • trunk/LayoutTests/animations/change-keyframes-name-expected.txt

    r41593 r260780  
    1 This test starts by making sure the animation is not running, because the animation-name and the name of they @keyframes rule do not match. Then it changes the name of the @keyframes rule so they match and makes sure the animation is now running.
    2 PASS: animation is not running
    3 PASS - "left" property for "box" element at 0.25s saw something close to: 200
    41
     2PASS Test that dynamically changing the name of a @keyframes rule starts animations using that name.
     3

  • trunk/LayoutTests/animations/change-keyframes-name.html

    r211573 r260780  
    1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    2    "http://www.w3.org/TR/html4/loose.dtd">
     1<!DOCTYPE html>
    32
    43<html lang="en">
    … …  
    1413        width: 100px;
    1514        background-color: blue;
    16         -webkit-animation-duration: 0.5s;
    17         -webkit-animation-timing-function: linear;
    18         -webkit-animation-name: "bar";
     15        animation-duration: 0.5s;
     16        animation-timing-function: linear;
     17        animation-repeat-count: infinite;
     18        animation-name: "bar";
    1919    }
    2020    @-webkit-keyframes "foo" {
    … …  
    2525    }
    2626    </style>
    27     <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
     27    <script src="../resources/testharness.js"></script>
     28        <script src="../resources/testharnessreport.js"></script>
     29        <script src="resources/animation-test.js"></script>
     30</head>
     31<body>
     32<div id="box"></div>
    2833    <script type="text/javascript" charset="utf-8">
    29    
    30     const expectedValues = [
    31       // [animation-name, time, element-id, property, expected-value, tolerance]
    32       [null, 0.25, "box", "left", 200, 20],
    33     ];
    3434
    3535    function findKeyframesRule(rule)
    … …  
    4242            }
    4343        }
    44        
     44
    4545        return null;
    4646    }
    47        
    48     function change()
    49     {
    50         // change keyframes name
    51         var keyframes = findKeyframesRule("foo");
    52         keyframes.name = "anim";
    53         document.getElementById('box').style.webkitAnimationName = "anim";
    5447
    55         runAnimationTest(expectedValues);
    56     }
    57    
    58     function setup()
    59     {
    60         if (window.testRunner) {
    61           testRunner.dumpAsText();
    62           var box = document.getElementById('box');
    63           if (internals.pauseAnimationAtTimeOnElement("bar", 0.5, box))
    64               document.getElementById("pre-result").innerHTML = "FAIL: animation is running";
    65           else
    66               document.getElementById("pre-result").innerHTML = "PASS: animation is not running";
    67         }
    68        
    69         setTimeout(change, 200);
    70     }
     48    async_test(async t => {
     49        const delay = 100;
     50        const box = document.getElementById("box");
     51        const previousAnimationName = "foo";
     52        const newAnimationName = "anim";
     53
     54        const test = new AnimationTest({
     55            target: box,
     56            styleExtractor: style => parseFloat(style.left)
     57        });
     58
     59        // First, ensure that there is no animation running.
     60        assert_true(!test.animation, "There is no animation initially.");
     61
     62        // Now, rename "@keyframes foo" to allow an animation to start.
     63        findKeyframesRule(previousAnimationName).name = newAnimationName;
     64        box.style.animationName = newAnimationName;
     65
     66        // There should be a running animation now.
     67        assert_true(test.animation instanceof CSSAnimation, "There is an animation after changing the @keyframes rule.");
     68
     69        // Record two computed values after the specified delay each and ensure they're not the same,
     70        // showing animated values are applied.
     71        const initialValue = await test.recordValueAfterRunningFor(delay);
     72        const currentValue = await test.recordValueAfterRunningFor(delay);
     73        assert_not_equals(initialValue, currentValue, "Values recorded while running aren't the same.");
     74
     75        // Now, check the recorded values were correct.
     76        test.checkRecordedValues();
     77
     78        t.done();
     79    }, `Test that dynamically changing the name of a @keyframes rule starts animations using that name.`);
    7180   
    7281  </script>
    73 </head>
    74 <body onload="setup()">
    75 This test starts by making sure the animation is not running, because the animation-name and the
    76 name of they @keyframes rule do not match. Then it changes the name of the @keyframes rule so they
    77 match and makes sure the animation is now running.
    78 <div id="box">
    79 </div>
    80 <div id="pre-result">
    81 </div>
    82 <div id="result">
    83 </div>
    8482</body>
    8583</html>

  • trunk/LayoutTests/animations/resources/animation-test.js

    r260577 r260780  
    7373        await this._tickUntil(elapsedTime => animation.currentTime >= targetTime);
    7474
     75        const value = this.value;
    7576        this._records.push({
    7677            currentTime: animation.currentTime,
    77             value: this.value
     78            value: value
    7879        });
     80
     81        return value;
    7982    }
    8083
Note: See TracChangeset for help on using the changeset viewer.