[Web Animations] Update WPT tests related to Web Animations and remove imported Mozil...
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-transitions / changing-while-transition-001.html
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset=utf-8>
5 <title>CSS Transitions Test: behavior when transition-duration changes while transitioning</title>
6 <meta name="assert" content="Checks a change to the transition-duration
7 property does not affect an in-flight transition">
8 <link rel="help" title="3. Starting of transitions" href="https://drafts.csswg.org/css-transitions/#starting">
9
10 <script src="/resources/testharness.js" type="text/javascript"></script>
11 <script src="/resources/testharnessreport.js" type="text/javascript"></script>
12 <script src="./support/helper.js" type="text/javascript"></script>
13
14 </head>
15 <body>
16 <div id="log"></div>
17
18 <script>
19 promise_test(async t => {
20   // Start a 100s transition 50% of the way through
21   const div = addDiv(t, {
22     style: 'transition: height 100s -50s linear; height: 0px',
23   });
24   getComputedStyle(div).height;
25   div.style.height = '100px';
26   assert_equals(
27     getComputedStyle(div).height,
28     '50px',
29     'Transition should be initially 50% complete'
30   );
31
32   // Extend the transition-duration to 200s.
33   div.style.transitionDuration = '200s';
34
35   // If the change to the transition-duration was reflected, the
36   // computed height would now be '25px'.
37   assert_equals(
38     getComputedStyle(div).height,
39     '50px',
40     'Even after updating the transition-duration, the transition should be 50% complete'
41   );
42
43   // Wait a frame just to be sure that the changed duration is not later
44   // updated.
45   await waitForFrame();
46
47   assert_greater_than_equal(
48     parseInt(getComputedStyle(div).height),
49     50,
50     'Even in the next frame the updated transition-duration should not apply'
51   );
52 }, 'Changes to transition-duration should not affect in-flight transitions');
53 </script>
54
55 </body>
56 </html>