Changeset 251573 in webkit


Ignore:
Timestamp:
Oct 24, 2019 4:45:01 PM (4 years ago)
Author:
Russell Epstein
Message:

Unreviewed, rolling out r251536.

Landed 3 Broken Tests.

Reverted changeset:

"[Web Animations] Update WPT tests related to Web Animations
and remove imported Mozilla tests"
https://bugs.webkit.org/show_bug.cgi?id=203291
https://trac.webkit.org/changeset/251536

Location:
trunk/LayoutTests
Files:
45 added
65 deleted
32 edited
9 copied
21 moved

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r251567 r251573  
     12019-10-24  Russell Epstein  <repstein@apple.com>
     2
     3        Unreviewed, rolling out r251536.
     4
     5        Landed 3 Broken Tests.
     6
     7        Reverted changeset:
     8
     9        "[Web Animations] Update WPT tests related to Web Animations
     10        and remove imported Mozilla tests"
     11        https://bugs.webkit.org/show_bug.cgi?id=203291
     12        https://trac.webkit.org/changeset/251536
     13
    1142019-10-24  Commit Queue  <commit-queue@webkit.org>
    215
  • trunk/LayoutTests/TestExpectations

    r251557 r251573  
    28022802webkit.org/b/202108 imported/w3c/web-platform-tests/web-animations/interfaces/DocumentTimeline/style-change-events.html [ Pass Failure ]
    28032803webkit.org/b/202109 imported/w3c/web-platform-tests/web-animations/timing-model/timelines/update-and-send-events.html [ Pass Failure ]
     2804
     2805webkit.org/b/183836 imported/mozilla/css-animations/test_animations-dynamic-changes.html [ Pass Failure Timeout ]
     2806webkit.org/b/183844 imported/mozilla/css-animations/test_element-get-animations.html [ Pass Failure Timeout ]
     2807webkit.org/b/183846 imported/mozilla/css-transitions/test_pseudoElement-get-animations.html [ Pass Failure Timeout ]
     2808webkit.org/b/183847 imported/mozilla/css-animations/test_event-order.html [ Pass Failure Timeout ]
     2809
     2810webkit.org/b/183848 imported/mozilla/css-animations/test_keyframeeffect-getkeyframes.html [ Skip ]
    28042811
    28052812webkit.org/b/157068 [ Debug ] imported/w3c/web-platform-tests/fetch/nosniff/importscripts.html [ Pass Crash ]
     
    38793886webkit.org/b/200209 imported/w3c/web-platform-tests/css/css-images/multiple-position-color-stop-radial.html [ ImageOnlyFailure ]
    38803887
    3881 webkit.org/b/203296 imported/w3c/web-platform-tests/css/css-animations/keyframes-remove-documentElement-crash.html [ Skip ]
    3882 
    38833888# wpt css-values failures
    38843889webkit.org/b/203320 imported/w3c/web-platform-tests/css/css-values/percentage-rem-low.html [ ImageOnlyFailure ]
  • trunk/LayoutTests/imported/mozilla/ChangeLog

    r251536 r251573  
     12019-10-24  Russell Epstein  <repstein@apple.com>
     2
     3        Unreviewed, rolling out r251536.
     4
     5        Landed 3 Broken Tests.
     6
     7        Reverted changeset:
     8
     9        "[Web Animations] Update WPT tests related to Web Animations
     10        and remove imported Mozilla tests"
     11        https://bugs.webkit.org/show_bug.cgi?id=203291
     12        https://trac.webkit.org/changeset/251536
     13
    1142019-10-24  Antoine Quint  <graouts@apple.com>
    215
  • trunk/LayoutTests/imported/mozilla/css-animations/test_animation-computed-timing.html

    r251571 r251573  
    11<!doctype html>
    22<meta charset=utf-8>
    3 <title>AnimationEffect.getComputedTiming() for CSS animations</title>
    4 <!--  TODO: Add a more specific link for this once it is specified.  -->
    5 <link rel="help" href="https://drafts.csswg.org/css-animations-2/#cssanimation">
    6 <script src="/resources/testharness.js"></script>
    7 <script src="/resources/testharnessreport.js"></script>
    8 <script src="support/testcommon.js"></script>
     3<script src="../../../resources/testharness.js"></script>
     4<script src="../../../resources/testharnessreport.js"></script>
     5<script src="../resources/testcommon.js"></script>
    96<style>
    107@keyframes moveAnimation {
     
    2219// delay
    2320// --------------------
    24 
    25 test(t => {
    26   const div = addDiv(t, { style: 'animation: moveAnimation 100s' });
    27   const effect = div.getAnimations()[0].effect;
    28   assert_equals(effect.getComputedTiming().delay, 0, 'Initial value of delay');
     21test(function(t) {
     22  var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
     23  var effect = div.getAnimations()[0].effect;
     24  assert_equals(effect.getComputedTiming().delay, 0,
     25                'Initial value of delay');
    2926}, 'delay of a new animation');
    3027
    31 test(t => {
    32   const div = addDiv(t, { style: 'animation: moveAnimation 100s -10s' });
    33   const effect = div.getAnimations()[0].effect;
     28test(function(t) {
     29  var div = addDiv(t, {style: 'animation: moveAnimation 100s -10s'});
     30  var effect = div.getAnimations()[0].effect;
    3431  assert_equals(effect.getComputedTiming().delay, -10 * MS_PER_SEC,
    3532                'Initial value of delay');
    3633}, 'Negative delay of a new animation');
    3734
    38 test(t => {
    39   const div = addDiv(t, { style: 'animation: moveAnimation 100s 10s' });
    40   const effect = div.getAnimations()[0].effect;
     35test(function(t) {
     36  var div = addDiv(t, {style: 'animation: moveAnimation 100s 10s'});
     37  var effect = div.getAnimations()[0].effect;
    4138  assert_equals(effect.getComputedTiming().delay, 10 * MS_PER_SEC,
    4239                'Initial value of delay');
     
    4744// endDelay
    4845// --------------------
    49 
    50 test(t => {
    51   const div = addDiv(t, { style: 'animation: moveAnimation 100s' });
    52   const effect = div.getAnimations()[0].effect;
     46test(function(t) {
     47  var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
     48  var effect = div.getAnimations()[0].effect;
    5349  assert_equals(effect.getComputedTiming().endDelay, 0,
    5450                'Initial value of endDelay');
     
    5955// fill
    6056// --------------------
    61 
    62 test(t => {
    63   const getEffectWithFill = fill => {
    64     const div = addDiv(t, { style: 'animation: moveAnimation 100s ' + fill });
     57test(function(t) {
     58  var getEffectWithFill = function(fill) {
     59    var div = addDiv(t, {style: 'animation: moveAnimation 100s ' + fill});
    6560    return div.getAnimations()[0].effect;
    6661  };
    6762
    68   let effect = getEffectWithFill('');
     63  var effect = getEffectWithFill('');
    6964  assert_equals(effect.getComputedTiming().fill, 'none',
    7065                'Initial value of fill');
     
    8479// iterationStart
    8580// --------------------
    86 
    87 test(t => {
    88   const div = addDiv(t, { style: 'animation: moveAnimation 100s' });
    89   const effect = div.getAnimations()[0].effect;
     81test(function(t) {
     82  var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
     83  var effect = div.getAnimations()[0].effect;
    9084  assert_equals(effect.getComputedTiming().iterationStart, 0,
    9185                'Initial value of iterationStart');
     
    9690// iterations
    9791// --------------------
    98 
    99 test(t => {
    100   const div = addDiv(t, { style: 'animation: moveAnimation 100s' });
    101   const effect = div.getAnimations()[0].effect;
     92test(function(t) {
     93  var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
     94  var effect = div.getAnimations()[0].effect;
    10295  assert_equals(effect.getComputedTiming().iterations, 1,
    10396                'Initial value of iterations');
    10497}, 'iterations of a new animation');
    10598
    106 test(t => {
    107   const div = addDiv(t, { style: 'animation: moveAnimation 100s 2016.5' });
    108   const effect = div.getAnimations()[0].effect;
     99test(function(t) {
     100  var div = addDiv(t, {style: 'animation: moveAnimation 100s 2016.5'});
     101  var effect = div.getAnimations()[0].effect;
    109102  assert_equals(effect.getComputedTiming().iterations, 2016.5,
    110103                'Initial value of iterations');
    111104}, 'iterations of a finitely repeating animation');
    112105
    113 test(t => {
    114   const div = addDiv(t, { style: 'animation: moveAnimation 100s infinite' });
    115   const effect = div.getAnimations()[0].effect;
     106test(function(t) {
     107  var div = addDiv(t, {style: 'animation: moveAnimation 100s infinite'});
     108  var effect = div.getAnimations()[0].effect;
    116109  assert_equals(effect.getComputedTiming().iterations, Infinity,
    117110                'Initial value of iterations');
     
    122115// duration
    123116// --------------------
    124 
    125 test(t => {
    126   const div = addDiv(t, {
    127     style: 'animation: moveAnimation 100s -10s infinite'
    128   });
    129   const effect = div.getAnimations()[0].effect;
     117test(function(t) {
     118  var div = addDiv(t, {style: 'animation: moveAnimation 100s -10s infinite'});
     119  var effect = div.getAnimations()[0].effect;
    130120  assert_equals(effect.getComputedTiming().duration, 100 * MS_PER_SEC,
    131121                'Initial value of duration');
     
    136126// direction
    137127// --------------------
    138 
    139 test(t => {
    140   const getEffectWithDir = dir => {
    141     const div = addDiv(t, { style: 'animation: moveAnimation 100s ' + dir });
     128test(function(t) {
     129  var getEffectWithDir = function(dir) {
     130    var div = addDiv(t, {style: 'animation: moveAnimation 100s ' + dir});
    142131    return div.getAnimations()[0].effect;
    143132  };
    144133
    145   let effect = getEffectWithDir('');
     134  var effect = getEffectWithDir('');
    146135  assert_equals(effect.getComputedTiming().direction, 'normal',
    147136                'Initial value of normal direction');
     
    161150// easing
    162151// --------------------
    163 
    164 test(t => {
    165   const div = addDiv(t, { style: 'animation: moveAnimation 100s' });
    166   const effect = div.getAnimations()[0].effect;
     152test(function(t) {
     153  var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
     154  var effect = div.getAnimations()[0].effect;
    167155  assert_equals(effect.getComputedTiming().easing, 'linear',
    168156                'Initial value of easing');
     
    174162// = max(start delay + active duration + end delay, 0)
    175163// --------------------
    176 
    177 test(t => {
    178   const div = addDiv(t, { style: 'animation: moveAnimation 100s' });
    179   const effect = div.getAnimations()[0].effect;
     164test(function(t) {
     165  var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
     166  var effect = div.getAnimations()[0].effect;
    180167  assert_equals(effect.getComputedTiming().endTime, 100 * MS_PER_SEC,
    181168                'Initial value of endTime');
    182169}, 'endTime of an new animation');
    183170
    184 test(t => {
    185   const div = addDiv(t, { style: 'animation: moveAnimation 100s -5s' });
    186   const effect = div.getAnimations()[0].effect;
    187   const answer = (100 - 5) * MS_PER_SEC;
     171test(function(t) {
     172  var div = addDiv(t, {style: 'animation: moveAnimation 100s -5s'});
     173  var effect = div.getAnimations()[0].effect;
     174  var answer = (100 - 5) * MS_PER_SEC;
    188175  assert_equals(effect.getComputedTiming().endTime, answer,
    189176                'Initial value of endTime');
    190177}, 'endTime of an animation with a negative delay');
    191178
    192 test(t => {
    193   const div = addDiv(t, {
    194     style: 'animation: moveAnimation 10s -100s infinite'
    195   });
    196   const effect = div.getAnimations()[0].effect;
     179test(function(t) {
     180  var div = addDiv(t, {style: 'animation: moveAnimation 10s -100s infinite'});
     181  var effect = div.getAnimations()[0].effect;
    197182  assert_equals(effect.getComputedTiming().endTime, Infinity,
    198183                'Initial value of endTime');
    199184}, 'endTime of an infinitely repeating animation');
    200185
    201 test(t => {
    202   const div = addDiv(t, { style: 'animation: moveAnimation 0s 100s infinite' });
    203   const effect = div.getAnimations()[0].effect;
     186test(function(t) {
     187  var div = addDiv(t, {style: 'animation: moveAnimation 0s 100s infinite'});
     188  var effect = div.getAnimations()[0].effect;
    204189  assert_equals(effect.getComputedTiming().endTime, 100 * MS_PER_SEC,
    205190                'Initial value of endTime');
    206191}, 'endTime of an infinitely repeating zero-duration animation');
    207192
    208 test(t => {
     193test(function(t) {
    209194  // Fill forwards so div.getAnimations()[0] won't return an
    210195  // undefined value.
    211   const div = addDiv(t, {
    212     style: 'animation: moveAnimation 10s -100s forwards'
    213   });
    214   const effect = div.getAnimations()[0].effect;
     196  var div = addDiv(t, {style: 'animation: moveAnimation 10s -100s forwards'});
     197  var effect = div.getAnimations()[0].effect;
    215198  assert_equals(effect.getComputedTiming().endTime, 0,
    216199                'Initial value of endTime');
     
    222205// = iteration duration * iteration count
    223206// --------------------
    224 
    225 test(t => {
    226   const div = addDiv(t, { style: 'animation: moveAnimation 100s 5' });
    227   const effect = div.getAnimations()[0].effect;
    228   const answer = 100 * MS_PER_SEC * 5;
     207test(function(t) {
     208  var div = addDiv(t, {style: 'animation: moveAnimation 100s 5'});
     209  var effect = div.getAnimations()[0].effect;
     210  var answer = 100 * MS_PER_SEC * 5;
    229211  assert_equals(effect.getComputedTiming().activeDuration, answer,
    230212                'Initial value of activeDuration');
    231213}, 'activeDuration of a new animation');
    232214
    233 test(t => {
    234   const div = addDiv(t, { style: 'animation: moveAnimation 100s infinite' });
    235   const effect = div.getAnimations()[0].effect;
     215test(function(t) {
     216  var div = addDiv(t, {style: 'animation: moveAnimation 100s infinite'});
     217  var effect = div.getAnimations()[0].effect;
    236218  assert_equals(effect.getComputedTiming().activeDuration, Infinity,
    237219                'Initial value of activeDuration');
    238220}, 'activeDuration of an infinitely repeating animation');
    239221
    240 test(t => {
    241   const div = addDiv(t, { style: 'animation: moveAnimation 0s 1s infinite' });
    242   const effect = div.getAnimations()[0].effect;
     222test(function(t) {
     223  var div = addDiv(t, {style: 'animation: moveAnimation 0s 1s infinite'});
     224  var effect = div.getAnimations()[0].effect;
    243225  // If either the iteration duration or iteration count are zero,
    244226  // the active duration is zero.
     
    247229}, 'activeDuration of an infinitely repeating zero-duration animation');
    248230
    249 test(t => {
    250   const div = addDiv(t, { style: 'animation: moveAnimation 100s 1s 0' });
    251   const effect = div.getAnimations()[0].effect;
     231test(function(t) {
     232  var div = addDiv(t, {style: 'animation: moveAnimation 100s 1s 0'});
     233  var effect = div.getAnimations()[0].effect;
    252234  // If either the iteration duration or iteration count are zero,
    253235  // the active duration is zero.
     
    260242// localTime
    261243// --------------------
    262 
    263 test(t => {
    264   const div = addDiv(t, { style: 'animation: moveAnimation 100s' });
    265   const effect = div.getAnimations()[0].effect;
     244test(function(t) {
     245  var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
     246  var effect = div.getAnimations()[0].effect;
    266247  assert_equals(effect.getComputedTiming().localTime, 0,
    267248                'Initial value of localTime');
    268249}, 'localTime of a new animation');
    269250
    270 test(t => {
    271   const div = addDiv(t, { style: 'animation: moveAnimation 100s' });
    272   const anim = div.getAnimations()[0];
     251test(function(t) {
     252  var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
     253  var anim = div.getAnimations()[0];
    273254  anim.currentTime = 5 * MS_PER_SEC;
    274255  assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
     
    276257}, 'localTime of an animation is always equal to currentTime');
    277258
    278 promise_test(async t => {
    279   const div = addDiv(t, { style: 'animation: moveAnimation 100s' });
    280 
    281   const anim = div.getAnimations()[0];
     259promise_test(function(t) {
     260  var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
     261
     262  var anim = div.getAnimations()[0];
    282263  anim.playbackRate = 2; // 2 times faster
    283264
    284   await anim.ready;
    285 
    286   assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
    287                 'localTime is equal to currentTime');
    288 
    289   await waitForFrame();
    290 
    291   assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
    292                 'localTime is equal to currentTime');
     265  return anim.ready.then(function() {
     266    assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
     267                  'localTime is equal to currentTime');
     268    return waitForFrame();
     269  }).then(function() {
     270    assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
     271                  'localTime is equal to currentTime');
     272  });
    293273}, 'localTime reflects playbackRate immediately');
    294274
    295 test(t => {
    296   const div = addDiv(t);
    297   const effect = new KeyframeEffect(div, {left: ["0px", "100px"]});
     275test(function(t) {
     276  var div = addDiv(t);
     277  var effect = new KeyframeEffect(div, {left: ["0px", "100px"]});
    298278
    299279  assert_equals(effect.getComputedTiming().localTime, null,
     
    304284// --------------------
    305285// progress
    306 //
    307 // Note: Even though CSS animations have a default animation-timing-function of
    308 // "ease", this only applies between keyframes (often referred to as the
    309 // keyframe-level easing). The progress value returned by getComputedTiming(),
    310 // however, only reflects effect-level easing and this defaults to "linear",
    311 // even for CSS animations.
    312 // --------------------
    313 
    314 test(t => {
    315   const tests = [
    316     { fill: '', progress: [null, null] },
    317     { fill: 'none', progress: [null, null] },
    318     { fill: 'forwards', progress: [null, 1.0] },
    319     { fill: 'backwards', progress: [0.0, null] },
    320     { fill: 'both', progress: [0.0, 1.0] },
    321   ];
    322   for (const test of tests) {
    323     const div = addDiv(t, {
    324       style: 'animation: moveAnimation 100s 10s ' + test.fill
    325     });
    326     const anim = div.getAnimations()[0];
     286// Note: Default timing function is linear.
     287// --------------------
     288test(function(t) {
     289  [{fill: '',          progress: [ null, null ]},
     290   {fill: 'none',      progress: [ null, null ]},
     291   {fill: 'forwards',  progress: [ null, 1.0 ]},
     292   {fill: 'backwards', progress: [ 0.0, null ]},
     293   {fill: 'both',      progress: [ 0.0, 1.0 ]}]
     294  .forEach(function(test) {
     295    var div =
     296      addDiv(t, {style: 'animation: moveAnimation 100s 10s ' + test.fill});
     297    var anim = div.getAnimations()[0];
    327298    assert_true(anim.effect.getComputedTiming().progress === test.progress[0],
    328                 `Initial progress with "${test.fill}" fill`);
     299                'initial progress with "' + test.fill + '" fill');
    329300    anim.finish();
    330301    assert_true(anim.effect.getComputedTiming().progress === test.progress[1],
    331                 `Initial progress with "${test.fill}" fill`);
    332   }
     302                'finished progress with "' + test.fill + '" fill');
     303  });
    333304}, 'progress of an animation with different fill modes');
    334305
    335 test(t => {
    336   const div = addDiv(t, { style: 'animation: moveAnimation 10s 10 both' });
    337   const anim = div.getAnimations()[0];
     306test(function(t) {
     307  var div = addDiv(t, {style: 'animation: moveAnimation 10s 10 both'});
     308  var anim = div.getAnimations()[0];
    338309
    339310  assert_equals(anim.effect.getComputedTiming().progress, 0.0,
     
    353324}, 'progress of an integral repeating animation with normal direction');
    354325
    355 test(t => {
     326test(function(t) {
     327  var div = addDiv(t);
    356328  // Note: FillMode here is "both" because
    357329  // 1. Since this a zero-duration animation, it will already have finished
     
    359331  // 2. Fill backwards, so the progress before phase wouldn't be
    360332  //    unresolved (null value).
    361   const div = addDiv(t, { style: 'animation: moveAnimation 0s infinite both' });
    362   const anim = div.getAnimations()[0];
     333  var div = addDiv(t, {style: 'animation: moveAnimation 0s infinite both'});
     334  var anim = div.getAnimations()[0];
    363335
    364336  assert_equals(anim.effect.getComputedTiming().progress, 1.0,
     
    371343}, 'progress of an infinitely repeating zero-duration animation');
    372344
    373 test(t => {
     345test(function(t) {
    374346  // Default iterations = 1
    375   const div = addDiv(t, { style: 'animation: moveAnimation 0s both' });
    376   const anim = div.getAnimations()[0];
     347  var div = addDiv(t, {style: 'animation: moveAnimation 0s both'});
     348  var anim = div.getAnimations()[0];
    377349
    378350  assert_equals(anim.effect.getComputedTiming().progress, 1.0,
     
    385357}, 'progress of a finitely repeating zero-duration animation');
    386358
    387 test(t => {
    388   const div = addDiv(t, { style: 'animation: moveAnimation 0s 5s 10.25 both' });
    389   const anim = div.getAnimations()[0];
     359test(function(t) {
     360  var div = addDiv(t, {style: 'animation: moveAnimation 0s 5s 10.25 both'});
     361  var anim = div.getAnimations()[0];
    390362
    391363  assert_equals(anim.effect.getComputedTiming().progress, 0.0,
     
    399371}, 'progress of a non-integral repeating zero-duration animation');
    400372
    401 test(t => {
    402   const div = addDiv(t, {
    403     style: 'animation: moveAnimation 0s 5s 10.25 both reverse',
    404   });
    405   const anim = div.getAnimations()[0];
     373test(function(t) {
     374  var div = addDiv(t, {style: 'animation: moveAnimation 0s 5s 10.25 both reverse'});
     375  var anim = div.getAnimations()[0];
    406376
    407377  assert_equals(anim.effect.getComputedTiming().progress, 1.0,
     
    415385   'with reversing direction');
    416386
    417 test(t => {
    418   const div = addDiv(t, {
    419     style: 'animation: moveAnimation 10s 10.25 both alternate',
    420   });
    421   const anim = div.getAnimations()[0];
     387test(function(t) {
     388  var div = addDiv(t, {style: 'animation: moveAnimation 10s 10.25 both alternate'});
     389  var anim = div.getAnimations()[0];
    422390
    423391  assert_equals(anim.effect.getComputedTiming().progress, 0.0,
     
    438406   'with alternate direction');
    439407
    440 test(t => {
    441   const div = addDiv(t, {
    442     style: 'animation: moveAnimation 10s 10.25 both alternate-reverse',
    443   });
    444   const anim = div.getAnimations()[0];
     408test(function(t) {
     409  var div = addDiv(t, {style: 'animation: moveAnimation 10s 10.25 both alternate-reverse'});
     410  var anim = div.getAnimations()[0];
    445411
    446412  assert_equals(anim.effect.getComputedTiming().progress, 1.0,
     
    461427   'with alternate-reversing direction');
    462428
    463 test(t => {
    464   const div = addDiv(t, {
    465     style: 'animation: moveAnimation 0s 10.25 both alternate',
    466   });
    467   const anim = div.getAnimations()[0];
     429test(function(t) {
     430  var div = addDiv(t, {style: 'animation: moveAnimation 0s 10.25 both alternate'});
     431  var anim = div.getAnimations()[0];
    468432
    469433  assert_equals(anim.effect.getComputedTiming().progress, 0.25,
     
    481445   'with alternate direction');
    482446
    483 test(t => {
    484   const div = addDiv(t, {
    485     style: 'animation: moveAnimation 0s 10.25 both alternate-reverse',
    486   });
    487   const anim = div.getAnimations()[0];
     447test(function(t) {
     448  var div = addDiv(t, {style: 'animation: moveAnimation 0s 10.25 both alternate-reverse'});
     449  var anim = div.getAnimations()[0];
    488450
    489451  assert_equals(anim.effect.getComputedTiming().progress, 0.75,
     
    505467// currentIteration
    506468// --------------------
    507 
    508 test(t => {
    509   const div = addDiv(t, { style: 'animation: moveAnimation 100s 2s' });
    510   const effect = div.getAnimations()[0].effect;
     469test(function(t) {
     470  var div = addDiv(t, {style: 'animation: moveAnimation 100s 2s'});
     471  var effect = div.getAnimations()[0].effect;
    511472  assert_equals(effect.getComputedTiming().currentIteration, null,
    512473                'Initial value of currentIteration before phase');
     
    514475   'in before phase');
    515476
    516 test(t => {
    517   const div = addDiv(t, { style: 'animation: moveAnimation 100s' });
    518   const anim = div.getAnimations()[0];
     477test(function(t) {
     478  var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
     479  var anim = div.getAnimations()[0];
    519480  assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
    520481                'Initial value of currentIteration');
    521482}, 'currentIteration of a new animation is zero');
    522483
    523 test(t => {
     484test(function(t) {
    524485  // Note: FillMode here is "both" because
    525486  // 1. Since this a zero-duration animation, it will already have finished
     
    527488  // 2. Fill backwards, so the currentIteration (before phase) wouldn't be
    528489  //    unresolved (null value).
    529   const div = addDiv(t, { style: 'animation: moveAnimation 0s infinite both' });
    530   const anim = div.getAnimations()[0];
     490  var div = addDiv(t, {style: 'animation: moveAnimation 0s infinite both'});
     491  var anim = div.getAnimations()[0];
    531492
    532493  assert_equals(anim.effect.getComputedTiming().currentIteration, Infinity,
     
    539500}, 'currentIteration of an infinitely repeating zero-duration animation');
    540501
    541 test(t => {
    542   const div = addDiv(t, { style: 'animation: moveAnimation 0s 10.5 both' });
    543   const anim = div.getAnimations()[0];
     502test(function(t) {
     503  var div = addDiv(t, {style: 'animation: moveAnimation 0s 10.5 both'});
     504  var anim = div.getAnimations()[0];
    544505
    545506  // Note: currentIteration = ceil(iteration start + iteration count) - 1
     
    553514}, 'currentIteration of a finitely repeating zero-duration animation');
    554515
    555 test(t => {
    556   const div = addDiv(t, {
    557     style: 'animation: moveAnimation 100s 5.5 forwards'
    558   });
    559   const anim = div.getAnimations()[0];
     516test(function(t) {
     517  var div = addDiv(t, {style: 'animation: moveAnimation 100s 5.5 forwards'});
     518  var anim = div.getAnimations()[0];
    560519
    561520  assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
     
    572531}, 'currentIteration of an animation with a non-integral iteration count');
    573532
    574 test(t => {
    575   const div = addDiv(t, { style: 'animation: moveAnimation 100s 2 forwards' });
    576   const anim = div.getAnimations()[0];
     533test(function(t) {
     534  var div = addDiv(t, {style: 'animation: moveAnimation 100s 2 forwards'});
     535  var anim = div.getAnimations()[0];
    577536
    578537  assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
     
    584543}, 'currentIteration of an animation with an integral iteration count');
    585544
    586 test(t => {
    587   const div = addDiv(t, { style: 'animation: moveAnimation 100s forwards' });
    588   const anim = div.getAnimations()[0];
     545test(function(t) {
     546  var div = addDiv(t, {style: 'animation: moveAnimation 100s forwards'});
     547  var anim = div.getAnimations()[0];
    589548  assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
    590549                'Initial value of currentIteration');
     
    595554}, 'currentIteration of an animation with a default iteration count');
    596555
    597 test(t => {
    598   const div = addDiv(t);
    599   const effect = new KeyframeEffect(div, {left: ["0px", "100px"]});
     556test(function(t) {
     557  var div = addDiv(t);
     558  var effect = new KeyframeEffect(div, {left: ["0px", "100px"]});
    600559
    601560  assert_equals(effect.getComputedTiming().currentIteration, null,
  • trunk/LayoutTests/imported/mozilla/css-animations/test_animation-playstate-expected.txt

    r251571 r251573  
    11
    2 PASS A new CSS animation is initially play-pending
     2PASS Animation returns correct playState when running
    33PASS Animation returns correct playState when paused
    44PASS Animation.playState updates when paused by script
    55PASS Animation.playState updates when resumed by setting style
    6 PASS Animation returns correct playState when canceled
     6PASS Animation returns correct playState when cancelled
    77
  • trunk/LayoutTests/imported/mozilla/css-animations/test_animation-ready-expected.txt

    r251571 r251573  
    22PASS A new ready promise is created when setting animation-play-state: running
    33PASS ready promise is rejected when an animation is canceled by resetting the animation property
    4 PASS ready promise is rejected when an animation is canceled by updating the animation property
     4PASS ready promise is rejected when an animation is cancelled by updating the animation property
    55PASS A new ready promise is created when setting animation-play-state: paused
    66PASS Pausing twice re-uses the same Promise
     7PASS If a pause operation is interrupted, the ready promise is reused
     8PASS When a pause is complete the Promise callback gets the correct animation
    79
  • trunk/LayoutTests/imported/mozilla/css-animations/test_cssanimation-animationname.html

    r251571 r251573  
    11<!doctype html>
    22<meta charset=utf-8>
    3 <title>CSSAnimation.animationName</title>
    4 <link rel="help"
    5       href="https://drafts.csswg.org/css-animations-2/#dom-cssanimation-animationname">
    6 <script src="/resources/testharness.js"></script>
    7 <script src="/resources/testharnessreport.js"></script>
    8 <script src="support/testcommon.js"></script>
     3<script src="../../../resources/testharness.js"></script>
     4<script src="../../../resources/testharnessreport.js"></script>
     5<script src="../resources/testcommon.js"></script>
    96<style>
    107@keyframes xyz {
     
    129}
    1310</style>
     11<body>
    1412<div id="log"></div>
    1513<script>
    1614'use strict';
    1715
    18 test(t => {
    19   const div = addDiv(t);
     16test(function(t) {
     17  var div = addDiv(t);
    2018  div.style.animation = 'xyz 100s';
    2119  assert_equals(div.getAnimations()[0].animationName, 'xyz',
     
    2321}, 'Animation name makes keyframe rule');
    2422
    25 test(t => {
    26   const div = addDiv(t);
     23test(function(t) {
     24  var div = addDiv(t);
    2725  div.style.animation = 'x\\yz 100s';
    2826  assert_equals(div.getAnimations()[0].animationName, 'xyz',
     
    3028}, 'Escaped animation name');
    3129
    32 test(t => {
    33   const div = addDiv(t);
     30test(function(t) {
     31  var div = addDiv(t);
    3432  div.style.animation = 'x\\79 z 100s';
    3533  assert_equals(div.getAnimations()[0].animationName, 'xyz',
     
    3937
    4038</script>
     39</body>
  • trunk/LayoutTests/imported/mozilla/css-animations/test_document-get-animations-expected.txt

    r251571 r251573  
    1111PASS Finished but not filling CSS Animations are not returned
    1212PASS Yet-to-start CSS Animations are returned
    13 PASS CSS Animations canceled via the API are not returned
    14 PASS CSS Animations canceled and restarted via the API are returned
    15 FAIL CSS Animations targetting (pseudo-)elements should have correct order after sorting assert_equals: Animation #2 has expected target expected (object) Element node <div id="parent" style="animation: animBottom 100s"><div ... but got (undefined) undefined
     13PASS CSS Animations cancelled via the API are not returned
     14PASS CSS Animations cancelled and restarted via the API are returned
     15PASS CSS Animations targetting (pseudo-)elements should have correct order after sorting
    1616
  • trunk/LayoutTests/imported/mozilla/css-animations/test_document-get-animations.html

    r251571 r251573  
    11<!doctype html>
    22<meta charset=utf-8>
    3 <title>Document.getAnimations() for CSS animations</title>
    4 <link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-composite-order">
    5 <script src="/resources/testharness.js"></script>
    6 <script src="/resources/testharnessreport.js"></script>
    7 <script src="support/testcommon.js"></script>
     3<script src="../../../resources/testharness.js"></script>
     4<script src="../../../resources/testharnessreport.js"></script>
     5<script src="../resources/testcommon.js"></script>
    86<style>
    97@keyframes animLeft {
     
    1917  to { right: 100px }
    2018}
     19::before {
     20  content: ''
     21}
     22::after {
     23  content: ''
     24}
    2125</style>
     26<body>
    2227<div id="log"></div>
    2328<script>
    2429'use strict';
    2530
    26 test(t => {
     31test(function(t) {
    2732  assert_equals(document.getAnimations().length, 0,
    2833    'getAnimations returns an empty sequence for a document'
     
    3035}, 'getAnimations for non-animated content');
    3136
    32 test(t => {
    33   const div = addDiv(t);
     37test(function(t) {
     38  var div = addDiv(t);
    3439
    3540  // Add an animation
     
    4954}, 'getAnimations for CSS Animations');
    5055
    51 test(t => {
    52   const div = addDiv(t);
     56test(function(t) {
     57  var div = addDiv(t);
    5358  div.style.animation = 'animLeft 100s, animTop 100s, animRight 100s, ' +
    5459                        'animBottom 100s';
    5560
    56   const animations = document.getAnimations();
     61  var animations = document.getAnimations();
    5762  assert_equals(animations.length, 4,
    5863                'getAnimations returns all running CSS Animations');
     
    6772}, 'Order of CSS Animations - within an element');
    6873
    69 test(t => {
    70   const div1 = addDiv(t, { style: 'animation: animLeft 100s' });
    71   const div2 = addDiv(t, { style: 'animation: animLeft 100s' });
    72   const div3 = addDiv(t, { style: 'animation: animLeft 100s' });
    73   const div4 = addDiv(t, { style: 'animation: animLeft 100s' });
    74 
    75   let animations = document.getAnimations();
     74test(function(t) {
     75  var div1 = addDiv(t, { style: 'animation: animLeft 100s' });
     76  var div2 = addDiv(t, { style: 'animation: animLeft 100s' });
     77  var div3 = addDiv(t, { style: 'animation: animLeft 100s' });
     78  var div4 = addDiv(t, { style: 'animation: animLeft 100s' });
     79
     80  var animations = document.getAnimations();
    7681  assert_equals(animations.length, 4,
    7782                'getAnimations returns all running CSS Animations');
     
    108113}, 'Order of CSS Animations - across elements');
    109114
    110 test(t => {
    111   const div1 = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
    112   const div2 = addDiv(t, { style: 'animation: animBottom 100s' });
    113 
    114   let expectedResults = [ [ div1, 'animLeft' ],
    115                             [ div1, 'animTop' ],
    116                             [ div2, 'animBottom' ] ];
    117   let animations = document.getAnimations();
     115test(function(t) {
     116  var div1 = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
     117  var div2 = addDiv(t, { style: 'animation: animBottom 100s' });
     118
     119  var expectedResults = [ [ div1, 'animLeft' ],
     120                          [ div1, 'animTop' ],
     121                          [ div2, 'animBottom' ] ];
     122  var animations = document.getAnimations();
    118123  assert_equals(animations.length, expectedResults.length,
    119124                'getAnimations returns all running CSS Animations');
    120   animations.forEach((anim, i) => {
     125  animations.forEach(function(anim, i) {
    121126    assert_equals(anim.effect.target, expectedResults[i][0],
    122127                  'Target of animation in position ' + i);
     
    137142                'getAnimations returns all running CSS Animations after ' +
    138143                'making changes');
    139   animations.forEach((anim, i) => {
     144  animations.forEach(function(anim, i) {
    140145    assert_equals(anim.effect.target, expectedResults[i][0],
    141146                  'Target of animation in position ' + i + ' after changes');
     
    145150}, 'Order of CSS Animations - across and within elements');
    146151
    147 test(t => {
    148   const div = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
    149   const animLeft = document.getAnimations()[0];
     152test(function(t) {
     153  var div = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
     154  var animLeft = document.getAnimations()[0];
    150155  assert_equals(animLeft.animationName, 'animLeft',
    151156                'Originally, animLeft animation comes first');
     
    155160  animLeft.play();
    156161
    157   const animations = document.getAnimations();
     162  var animations = document.getAnimations();
    158163  assert_equals(animations.length, 2,
    159164                'getAnimations returns markup-bound and free animations');
     
    163168}, 'Order of CSS Animations - markup-bound vs free animations');
    164169
    165 test(t => {
    166   const div = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
    167   const animLeft = document.getAnimations()[0];
    168   const animTop  = document.getAnimations()[1];
     170test(function(t) {
     171  var div = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
     172  var animLeft = document.getAnimations()[0];
     173  var animTop  = document.getAnimations()[1];
    169174
    170175  // Disassociate both animations from markup and restart in opposite order
     
    173178  animLeft.play();
    174179
    175   const animations = document.getAnimations();
     180  var animations = document.getAnimations();
    176181  assert_equals(animations.length, 2,
    177182                'getAnimations returns free animations');
     
    189194}, 'Order of CSS Animations - free animations');
    190195
    191 test(t => {
     196test(function(t) {
    192197  // Add an animation first
    193   const div = addDiv(t, { style: 'animation: animLeft 100s' });
     198  var div = addDiv(t, { style: 'animation: animLeft 100s' });
    194199  div.style.top = '0px';
    195200  div.style.transition = 'all 100s';
     
    201206
    202207  // Although the transition was added later, it should come first in the list
    203   const animations = document.getAnimations();
     208  var animations = document.getAnimations();
    204209  assert_equals(animations.length, 2,
    205210                'Both CSS animations and transitions are returned');
     
    208213}, 'Order of CSS Animations and CSS Transitions');
    209214
    210 test(t => {
    211   const div = addDiv(t, { style: 'animation: animLeft 100s forwards' });
     215test(function(t) {
     216  var div = addDiv(t, { style: 'animation: animLeft 100s forwards' });
    212217  div.getAnimations()[0].finish();
    213218  assert_equals(document.getAnimations().length, 1,
     
    215220}, 'Finished but filling CSS Animations are returned');
    216221
    217 test(t => {
    218   const div = addDiv(t, { style: 'animation: animLeft 100s' });
     222test(function(t) {
     223  var div = addDiv(t, { style: 'animation: animLeft 100s' });
    219224  div.getAnimations()[0].finish();
    220225  assert_equals(document.getAnimations().length, 0,
     
    222227}, 'Finished but not filling CSS Animations are not returned');
    223228
    224 test(t => {
    225   const div = addDiv(t, { style: 'animation: animLeft 100s 100s' });
     229test(function(t) {
     230  var div = addDiv(t, { style: 'animation: animLeft 100s 100s' });
    226231  assert_equals(document.getAnimations().length, 1,
    227232                'Yet-to-start CSS animations are returned');
    228233}, 'Yet-to-start CSS Animations are returned');
    229234
    230 test(t => {
    231   const div = addDiv(t, { style: 'animation: animLeft 100s' });
     235test(function(t) {
     236  var div = addDiv(t, { style: 'animation: animLeft 100s' });
    232237  div.getAnimations()[0].cancel();
    233238  assert_equals(document.getAnimations().length, 0,
    234                 'CSS animations canceled by the API are not returned');
    235 }, 'CSS Animations canceled via the API are not returned');
    236 
    237 test(t => {
    238   const div = addDiv(t, { style: 'animation: animLeft 100s' });
    239   const anim = div.getAnimations()[0];
     239                'CSS animations cancelled by the API are not returned');
     240}, 'CSS Animations cancelled via the API are not returned');
     241
     242test(function(t) {
     243  var div = addDiv(t, { style: 'animation: animLeft 100s' });
     244  var anim = div.getAnimations()[0];
    240245  anim.cancel();
    241246  anim.play();
    242247  assert_equals(document.getAnimations().length, 1,
    243                 'CSS animations canceled and restarted by the API are ' +
     248                'CSS animations cancelled and restarted by the API are ' +
    244249                'returned');
    245 }, 'CSS Animations canceled and restarted via the API are returned');
    246 
    247 test(t => {
    248   // Create two divs with the following arrangement:
    249   //
     250}, 'CSS Animations cancelled and restarted via the API are returned');
     251
     252test(function(t) {
     253  addStyle(t, { '#parent::after': 'animation: animLeft 10s;',
     254                '#parent::before': 'animation: animRight 10s;' });
     255  // create two divs with these arrangement:
    250256  //       parent
    251   //    (::marker,)
    252257  //     ::before,
    253258  //     ::after
    254259  //        |
    255260  //       child
    256 
    257   addStyle(t, {
    258     '#parent::after': "content: ''; animation: animLeft 100s;",
    259     '#parent::before': "content: ''; animation: animRight 100s;",
     261  var parent = addDiv(t, { 'id': 'parent' });
     262  var child = addDiv(t, { 'id': 'child' });
     263  parent.appendChild(child);
     264  [parent, child].forEach((div) => {
     265    div.setAttribute('style', 'animation: animBottom 10s');
    260266  });
    261267
    262   const supportsMarkerPseudos = CSS.supports('selector(::marker)');
    263   if (supportsMarkerPseudos) {
    264     addStyle(t, {
    265       '#parent': 'display: list-item;',
    266       '#parent::marker': "content: ''; animation: animLeft 100s;",
    267     });
    268   }
    269 
    270   const parent = addDiv(t, { id: 'parent' });
    271   const child = addDiv(t);
    272   parent.appendChild(child);
    273   for (const div of [parent, child]) {
    274     div.setAttribute('style', 'animation: animBottom 100s');
    275   }
    276 
    277   const expectedAnimations = [
    278     [parent, undefined],
    279     [parent, '::marker'],
    280     [parent, '::before'],
    281     [parent, '::after'],
    282     [child, undefined],
    283   ];
    284   if (!supportsMarkerPseudos) {
    285     expectedAnimations.splice(1, 1);
    286   }
    287 
    288   const animations = document.getAnimations();
    289   assert_equals(
    290     animations.length,
    291     expectedAnimations.length,
    292     'CSS animations on both pseudo-elements and elements are returned'
    293   );
    294 
    295   for (const [index, expected] of expectedAnimations.entries()) {
    296     const [element, pseudo] = expected;
    297     const actual = animations[index];
    298 
    299     if (pseudo) {
    300       assert_equals(
    301         actual.effect.target.element,
    302         element,
    303         `Animation #${index + 1} has expected target`
    304       );
    305       assert_equals(
    306         actual.effect.target.type,
    307         pseudo,
    308         `Animation #${index + 1} has expected pseudo type`
    309       );
    310     } else {
    311       assert_equals(
    312         actual.effect.target,
    313         element,
    314         `Animation #${index + 1} has expected target`
    315       );
    316     }
    317   }
    318 }, 'CSS Animations targetting (pseudo-)elements should have correct order '
    319    + 'after sorting');
     268  var anims = document.getAnimations();
     269  assert_equals(anims.length, 4,
     270                'CSS animations on both pseudo-elements and elements ' +
     271                'are returned');
     272  assert_equals(anims[0].effect.target, parent,
     273                'The animation targeting the parent element comes first');
     274  assert_equals(anims[1].animationName, 'animRight',
     275                'The animation targeting the ::before element comes second');
     276  assert_equals(anims[2].animationName, 'animLeft',
     277                'The animation targeting the ::after element comes third');
     278  assert_equals(anims[3].effect.target, child,
     279                'The animation targeting the child element comes last');
     280}, 'CSS Animations targetting (pseudo-)elements should have correct order ' +
     281   'after sorting');
    320282
    321283</script>
     284</body>
  • trunk/LayoutTests/imported/mozilla/css-animations/test_effect-target.html

    r251571 r251573  
    11<!doctype html>
    22<meta charset=utf-8>
    3 <title>CSSAnimation.effect.target</title>
    4 <!--  TODO: Add a more specific link for this once it is specified.  -->
    5 <link rel="help" href="https://drafts.csswg.org/css-animations-2/">
    6 <script src="/resources/testharness.js"></script>
    7 <script src="/resources/testharnessreport.js"></script>
    8 <script src="support/testcommon.js"></script>
     3<script src="../../../resources/testharness.js"></script>
     4<script src="../../../resources/testharnessreport.js"></script>
     5<script src="../resources/testcommon.js"></script>
    96<style>
    107@keyframes anim { }
     
    1613}
    1714</style>
     15<body>
    1816<div id="log"></div>
    1917<script>
    2018'use strict';
    2119
    22 test(t => {
    23   const div = addDiv(t);
     20test(function(t) {
     21  var div = addDiv(t);
    2422  div.style.animation = 'anim 100s';
    25   const animation = div.getAnimations()[0];
     23  var animation = div.getAnimations()[0];
    2624  assert_equals(animation.effect.target, div,
    2725    'Animation.target is the animatable div');
    2826}, 'Returned CSS animations have the correct effect target');
    2927
    30 test(t => {
     28test(function(t) {
    3129  addStyle(t, { '.after::after': 'animation: anim 10s, anim 100s;' });
    32   const div = addDiv(t, { class: 'after' });
    33   const anims = document.getAnimations();
     30  var div = addDiv(t, { class: 'after' });
     31  var anims = document.getAnimations();
    3432  assert_equals(anims.length, 2,
    3533                'Got animations running on ::after pseudo element');
     
    3836}, 'effect.target should return the same CSSPseudoElement object each time');
    3937
    40 test(t => {
     38test(function(t) {
    4139  addStyle(t, { '.after::after': 'animation: anim 10s;' });
    42   const div = addDiv(t, { class: 'after' });
    43   const pseudoTarget = document.getAnimations()[0].effect.target;
    44   const effect = new KeyframeEffect(pseudoTarget,
    45                                     { background: ["blue", "red"] },
    46                                     3 * MS_PER_SEC);
    47   const newAnim = new Animation(effect, document.timeline);
     40  var div = addDiv(t, { class: 'after' });
     41  var pseudoTarget = document.getAnimations()[0].effect.target;
     42  var effect = new KeyframeEffect(pseudoTarget,
     43                                          { background: ["blue", "red"] },
     44                                          3 * MS_PER_SEC);
     45  var newAnim = new Animation(effect, document.timeline);
    4846  newAnim.play();
    49   const anims = document.getAnimations();
     47  var anims = document.getAnimations();
    5048  assert_equals(anims.length, 2,
    5149                'Got animations running on ::after pseudo element');
     
    6260
    6361</script>
     62</body>
  • trunk/LayoutTests/imported/mozilla/css-animations/test_element-get-animations-expected.txt

    r251571 r251573  
    1515PASS getAnimations for zero-duration CSS Animations
    1616PASS getAnimations returns objects with the same identity
    17 PASS getAnimations for CSS Animations that are canceled
     17PASS getAnimations for CSS Animations that are cancelled
    1818FAIL getAnimations for CSS Animations follows animation-name order assert_equals: animation order after prepending to list expected "anim1" but got "anim2"
    19 PASS { subtree: false } on a leaf element returns the element's animations and ignore pseudo-elements
    20 FAIL { subtree: true } on a leaf element returns the element's animations and its pseudo-elements' animations assert_equals: getAnimations({ subtree: true }) should return animations on pseudo-elements expected 3 but got 1
    21 PASS { subtree: false } on an element with a child returns only the element's animations
    22 FAIL { subtree: true } on an element with a child returns animations from the element, its pseudo-elements, its child and its child pseudo-elements assert_equals: Should find all elements, pesudo-elements that parent has expected 6 but got 1
    23 FAIL { subtree: true } on an element with many descendants returns animations from all the descendants assert_equals: Should find all descendants of the element expected 5 but got 1
     19PASS Test AnimationFilter{ subtree: false } with single element
     20FAIL Test AnimationFilter{ subtree: true } with single element assert_equals: getAnimations({ subtree: true }) should return animations on pseudo-elements expected 3 but got 1
     21PASS Test AnimationFilter{ subtree: false } with element that has a child
     22FAIL Test AnimationFilter{ subtree: true } with element that has a child assert_equals: Should find all elements, pesudo-elements that parent has expected 6 but got 1
     23FAIL Test AnimationFilter{ subtree: true } with element that has many descendant assert_equals: Should find all descendants of the element expected 5 but got 1
    2424
  • trunk/LayoutTests/imported/mozilla/css-animations/test_element-get-animations.html

    r251571 r251573  
    11<!doctype html>
    22<meta charset=utf-8>
    3 <title>Element.getAnimations() for CSS animations</title>
    4 <!--  TODO: Add a more specific link for this once it is specified.  -->
    5 <link rel="help" href="https://drafts.csswg.org/css-animations-2/">
    6 <script src="/resources/testharness.js"></script>
    7 <script src="/resources/testharnessreport.js"></script>
    8 <script src="support/testcommon.js"></script>
     3<script src="../../../resources/testharness.js"></script>
     4<script src="../../../resources/testharnessreport.js"></script>
     5<script src="../resources/testcommon.js"></script>
    96<style>
    107@keyframes anim1 {
     
    2522@keyframes empty { }
    2623</style>
     24<body>
    2725<div id="log"></div>
    2826<script>
    2927'use strict';
    3028
    31 test(t => {
    32   const div = addDiv(t);
     29test(function(t) {
     30  var div = addDiv(t);
    3331  assert_equals(div.getAnimations().length, 0,
    3432    'getAnimations returns an empty sequence for an element'
     
    3634}, 'getAnimations for non-animated content');
    3735
    38 promise_test(async t => {
    39   const div = addDiv(t);
     36promise_test(function(t) {
     37  var div = addDiv(t);
     38
     39  // FIXME: This test does too many things. It should be split up.
    4040
    4141  // Add an animation
    4242  div.style.animation = 'anim1 100s';
    43   let animations = div.getAnimations();
     43  var animations = div.getAnimations();
    4444  assert_equals(animations.length, 1,
    4545    'getAnimations returns an Animation running CSS Animations');
    46   await animations[0].ready;
    47 
    48   // Add a second animation
    49   div.style.animation = 'anim1 100s, anim2 100s';
    50   animations = div.getAnimations();
    51   assert_equals(animations.length, 2,
    52     'getAnimations returns one CSSAnimation for each value of animation-name');
    53   // (We don't check the order of the Animations since that is covered by tests
    54   //  later in this file.)
     46  return animations[0].ready.then(function() {
     47    var startTime = animations[0].startTime;
     48    assert_true(startTime > 0 && startTime <= document.timeline.currentTime,
     49      'CSS animation has a sensible start time');
     50
     51    // Wait a moment then add a second animation.
     52    //
     53    // We wait for the next frame so that we can test that the start times of
     54    // the animations differ.
     55    return waitForFrame();
     56  }).then(function() {
     57    div.style.animation = 'anim1 100s, anim2 100s';
     58    animations = div.getAnimations();
     59    assert_equals(animations.length, 2,
     60      'getAnimations returns one Animation for each value of'
     61      + ' animation-name');
     62    // Wait until both Animations are ready
     63    // (We don't make any assumptions about the order of the Animations since
     64    //  that is the purpose of the following test.)
     65    return waitForAllAnimations(animations);
     66  }).then(function() {
     67    assert_true(animations[0].startTime < animations[1].startTime,
     68      'Additional Animations for CSS animations start after the original'
     69      + ' animation and appear later in the list');
     70  });
    5571}, 'getAnimations for CSS Animations');
    5672
    57 test(t => {
    58   const div = addDiv(t, { style: 'animation: anim1 100s' });
     73test(function(t) {
     74  var div = addDiv(t, { style: 'animation: anim1 100s' });
    5975  assert_class_string(div.getAnimations()[0], 'CSSAnimation',
    6076                      'Interface of returned animation is CSSAnimation');
    6177}, 'getAnimations returns CSSAnimation objects for CSS Animations');
    6278
    63 test(t => {
    64   const div = addDiv(t);
     79test(function(t) {
     80  var div = addDiv(t);
    6581
    6682  // Add an animation that targets multiple properties
     
    7187}, 'getAnimations for multi-property animations');
    7288
    73 promise_test(async t => {
    74   const div = addDiv(t);
     89promise_test(function(t) {
     90  var div = addDiv(t);
    7591
    7692  // Add an animation
     
    8096
    8197  // Wait until a frame after the animation starts, then add a transition
    82   let animations = div.getAnimations();
    83   await animations[0].ready;
    84   await waitForFrame();
    85 
    86   div.style.transition = 'all 100s';
    87   div.style.backgroundColor = 'green';
    88 
    89   animations = div.getAnimations();
    90   assert_equals(animations.length, 2,
    91     'getAnimations returns Animations for both animations and'
    92     + ' transitions that run simultaneously');
    93   assert_class_string(animations[0], 'CSSTransition',
    94                       'First-returned animation is the CSS Transition');
    95   assert_class_string(animations[1], 'CSSAnimation',
    96                       'Second-returned animation is the CSS Animation');
     98  var animations = div.getAnimations();
     99  return animations[0].ready.then(waitForFrame).then(function() {
     100    div.style.transition = 'all 100s';
     101    div.style.backgroundColor = 'green';
     102
     103    animations = div.getAnimations();
     104    assert_equals(animations.length, 2,
     105      'getAnimations returns Animations for both animations and'
     106      + ' transitions that run simultaneously');
     107    assert_class_string(animations[0], 'CSSTransition',
     108                        'First-returned animation is the CSS Transition');
     109    assert_class_string(animations[1], 'CSSAnimation',
     110                        'Second-returned animation is the CSS Animation');
     111  });
    97112}, 'getAnimations for both CSS Animations and CSS Transitions at once');
    98113
    99 async_test(t => {
    100   const div = addDiv(t);
     114async_test(function(t) {
     115  var div = addDiv(t);
    101116
    102117  // Set up event listener
    103   div.addEventListener('animationend', t.step_func(() => {
     118  div.addEventListener('animationend', t.step_func(function() {
    104119    assert_equals(div.getAnimations().length, 0,
    105120      'getAnimations does not return Animations for finished '
     
    112127}, 'getAnimations for CSS Animations that have finished');
    113128
    114 async_test(t => {
    115   const div = addDiv(t);
     129async_test(function(t) {
     130  var div = addDiv(t);
    116131
    117132  // Set up event listener
    118   div.addEventListener('animationend', t.step_func(() => {
     133  div.addEventListener('animationend', t.step_func(function() {
    119134    assert_equals(div.getAnimations().length, 1,
    120135      'getAnimations returns Animations for CSS Animations that have'
     
    128143   + ' forwards filling');
    129144
    130 test(t => {
    131   const div = addDiv(t);
     145test(function(t) {
     146  var div = addDiv(t);
    132147  div.style.animation = 'none 100s';
    133148
    134   let animations = div.getAnimations();
     149  var animations = div.getAnimations();
    135150  assert_equals(animations.length, 0,
    136151    'getAnimations returns an empty sequence for an element'
     
    144159}, 'getAnimations for CSS Animations with animation-name: none');
    145160
    146 test(t => {
    147   const div = addDiv(t);
     161test(function(t) {
     162  var div = addDiv(t);
    148163  div.style.animation = 'missing 100s';
    149   let animations = div.getAnimations();
     164  var animations = div.getAnimations();
    150165  assert_equals(animations.length, 0,
    151166    'getAnimations returns an empty sequence for an element'
     
    159174}, 'getAnimations for CSS Animations with animation-name: missing');
    160175
    161 promise_test(async t => {
    162   const div = addDiv(t);
     176promise_test(function(t) {
     177  var div = addDiv(t);
    163178  div.style.animation = 'anim1 100s, notyet 100s';
    164   let animations = div.getAnimations();
     179  var animations = div.getAnimations();
    165180  assert_equals(animations.length, 1,
    166181    'getAnimations initally only returns Animations for CSS Animations whose'
    167182    + ' animation-name is found');
    168183
    169   await animations[0].ready;
    170   await waitForFrame();
    171 
    172   const keyframes = '@keyframes notyet { to { left: 100px; } }';
    173   document.styleSheets[0].insertRule(keyframes, 0);
    174   animations = div.getAnimations();
    175   assert_equals(animations.length, 2,
    176     'getAnimations includes Animation when @keyframes rule is added'
    177     + ' later');
    178   await waitForAllAnimations(animations);
    179 
    180   assert_true(animations[0].startTime < animations[1].startTime,
    181     'Newly added animation has a later start time');
    182   document.styleSheets[0].deleteRule(0);
     184  return animations[0].ready.then(waitForFrame).then(function() {
     185    var keyframes = '@keyframes notyet { to { left: 100px; } }';
     186    document.styleSheets[0].insertRule(keyframes, 0);
     187    animations = div.getAnimations();
     188    assert_equals(animations.length, 2,
     189      'getAnimations includes Animation when @keyframes rule is added'
     190      + ' later');
     191    return waitForAllAnimations(animations);
     192  }).then(function() {
     193    assert_true(animations[0].startTime < animations[1].startTime,
     194      'Newly added animation has a later start time');
     195    document.styleSheets[0].deleteRule(0);
     196  });
    183197}, 'getAnimations for CSS Animations where the @keyframes rule is added'
    184198   + ' later');
    185199
    186 test(t => {
    187   const div = addDiv(t);
     200test(function(t) {
     201  var div = addDiv(t);
    188202  div.style.animation = 'anim1 100s, anim1 100s';
    189203  assert_equals(div.getAnimations().length, 2,
     
    192206}, 'getAnimations for CSS Animations with duplicated animation-name');
    193207
    194 test(t => {
    195   const div = addDiv(t);
     208test(function(t) {
     209  var div = addDiv(t);
    196210  div.style.animation = 'empty 100s';
    197211  assert_equals(div.getAnimations().length, 1,
     
    200214}, 'getAnimations for CSS Animations with empty keyframes rule');
    201215
    202 promise_test(async t => {
    203   const div = addDiv(t);
     216promise_test(function(t) {
     217  var div = addDiv(t);
    204218  div.style.animation = 'anim1 100s 100s';
    205   const animations = div.getAnimations();
     219  var animations = div.getAnimations();
    206220  assert_equals(animations.length, 1,
    207221    'getAnimations returns animations for CSS animations whose'
    208222    + ' delay makes them start later');
    209   await animations[0].ready;
    210   await waitForFrame();
    211 
    212   assert_true(animations[0].startTime <= document.timeline.currentTime,
    213     'For CSS Animations in delay phase, the start time of the Animation is'
    214     + ' not in the future');
     223  return animations[0].ready.then(waitForFrame).then(function() {
     224    assert_true(animations[0].startTime <= document.timeline.currentTime,
     225      'For CSS Animations in delay phase, the start time of the Animation is'
     226      + ' not in the future');
     227  });
    215228}, 'getAnimations for CSS animations in delay phase');
    216229
    217 test(t => {
    218   const div = addDiv(t);
     230test(function(t) {
     231  var div = addDiv(t);
    219232  div.style.animation = 'anim1 0s 100s';
    220233  assert_equals(div.getAnimations().length, 1,
     
    224237}, 'getAnimations for zero-duration CSS Animations');
    225238
    226 test(t => {
    227   const div = addDiv(t);
     239test(function(t) {
     240  var div = addDiv(t);
    228241  div.style.animation = 'anim1 100s';
    229   const originalAnimation = div.getAnimations()[0];
     242  var originalAnimation = div.getAnimations()[0];
    230243
    231244  // Update pause state (an Animation change)
    232245  div.style.animationPlayState = 'paused';
    233   const pendingAnimation = div.getAnimations()[0];
     246  var pendingAnimation = div.getAnimations()[0];
    234247  assert_equals(pendingAnimation.playState, 'paused',
    235248                'animation\'s play state is updated');
     
    240253  // Update duration (an Animation change)
    241254  div.style.animationDuration = '200s';
    242   const extendedAnimation = div.getAnimations()[0];
    243   assert_equals(
    244     extendedAnimation.effect.getTiming().duration,
    245     200 * MS_PER_SEC,
    246     'animation\'s duration has been updated'
    247   );
     255  var extendedAnimation = div.getAnimations()[0];
     256  // FIXME: Check extendedAnimation.effect.timing.duration has changed once the
     257  // API is available
    248258  assert_equals(originalAnimation, extendedAnimation,
    249259                'getAnimations returns the same objects even when their'
     
    251261}, 'getAnimations returns objects with the same identity');
    252262
    253 test(t => {
    254   const div = addDiv(t);
     263test(function(t) {
     264  var div = addDiv(t);
    255265  div.style.animation = 'anim1 100s';
    256266
    257267  assert_equals(div.getAnimations().length, 1,
    258     'getAnimations returns an animation before canceling');
    259 
    260   const animation = div.getAnimations()[0];
     268    'getAnimations returns an animation before cancelling');
     269
     270  var animation = div.getAnimations()[0];
    261271
    262272  animation.cancel();
    263273  assert_equals(div.getAnimations().length, 0,
    264     'getAnimations does not return canceled animations');
     274    'getAnimations does not return cancelled animations');
    265275
    266276  animation.play();
    267277  assert_equals(div.getAnimations().length, 1,
    268     'getAnimations returns canceled animations that have been re-started');
    269 
    270 }, 'getAnimations for CSS Animations that are canceled');
    271 
    272 promise_test(async t => {
    273   const div = addDiv(t);
     278    'getAnimations returns cancelled animations that have been re-started');
     279
     280}, 'getAnimations for CSS Animations that are cancelled');
     281
     282promise_test(function(t) {
     283  var div = addDiv(t);
    274284  div.style.animation = 'anim2 100s';
    275285
    276   await div.getAnimations()[0].ready;
    277 
    278   // Prepend to the list and test that even though anim1 was triggered
    279   // *after* anim2, it should come first because it appears first
    280   // in the animation-name property.
    281   div.style.animation = 'anim1 100s, anim2 100s';
    282   let anims = div.getAnimations();
    283   assert_equals(anims[0].animationName, 'anim1',
    284                 'animation order after prepending to list');
    285   assert_equals(anims[1].animationName, 'anim2',
    286                 'animation order after prepending to list');
    287 
    288   // Normally calling cancel and play would this push anim1 to the top of
    289   // the stack but it shouldn't for CSS animations that map an the
    290   // animation-name property.
    291   const anim1 = anims[0];
    292   anim1.cancel();
    293   anim1.play();
    294   anims = div.getAnimations();
    295   assert_equals(anims[0].animationName, 'anim1',
    296                 'animation order after canceling and restarting');
    297   assert_equals(anims[1].animationName, 'anim2',
    298                 'animation order after canceling and restarting');
     286  return div.getAnimations()[0].ready.then(function() {
     287    // Prepend to the list and test that even though anim1 was triggered
     288    // *after* anim2, it should come first because it appears first
     289    // in the animation-name property.
     290    div.style.animation = 'anim1 100s, anim2 100s';
     291    var anims = div.getAnimations();
     292    assert_equals(anims[0].animationName, 'anim1',
     293                  'animation order after prepending to list');
     294    assert_equals(anims[1].animationName, 'anim2',
     295                  'animation order after prepending to list');
     296
     297    // Normally calling cancel and play would this push anim1 to the top of
     298    // the stack but it shouldn't for CSS animations that map an the
     299    // animation-name property.
     300    var anim1 = anims[0];
     301    anim1.cancel();
     302    anim1.play();
     303    anims = div.getAnimations();
     304    assert_equals(anims[0].animationName, 'anim1',
     305                  'animation order after cancelling and restarting');
     306    assert_equals(anims[1].animationName, 'anim2',
     307                  'animation order after cancelling and restarting');
     308  });
    299309}, 'getAnimations for CSS Animations follows animation-name order');
    300310
    301 test(t => {
     311test(function(t) {
    302312  addStyle(t, { '#target::after': 'animation: anim1 10s;',
    303313                '#target::before': 'animation: anim1 10s;' });
    304   const target = addDiv(t, { 'id': 'target' });
     314  var target = addDiv(t, { 'id': 'target' });
    305315  target.style.animation = 'anim1 100s';
    306316
    307   const animations = target.getAnimations({ subtree: false });
     317  var animations = target.getAnimations({ subtree: false });
    308318  assert_equals(animations.length, 1,
    309319                'Should find only the element');
    310320  assert_equals(animations[0].effect.target, target,
    311321                'Effect target should be the element');
    312 }, '{ subtree: false } on a leaf element returns the element\'s animations'
    313    + ' and ignore pseudo-elements');
    314 
    315 test(t => {
     322}, 'Test AnimationFilter{ subtree: false } with single element');
     323
     324test(function(t) {
    316325  addStyle(t, { '#target::after': 'animation: anim1 10s;',
    317326                '#target::before': 'animation: anim1 10s;' });
    318   const target = addDiv(t, { 'id': 'target' });
     327  var target = addDiv(t, { 'id': 'target' });
    319328  target.style.animation = 'anim1 100s';
    320329
    321   const animations = target.getAnimations({ subtree: true });
     330  var animations = target.getAnimations({ subtree: true });
    322331  assert_equals(animations.length, 3,
    323332                'getAnimations({ subtree: true }) ' +
     
    332341                'The animation targeting the ::after pesudo-element ' +
    333342                'should be returned last');
    334 }, '{ subtree: true } on a leaf element returns the element\'s animations'
    335    + ' and its pseudo-elements\' animations');
    336 
    337 test(t => {
     343}, 'Test AnimationFilter{ subtree: true } with single element');
     344
     345test(function(t) {
    338346  addStyle(t, { '#parent::after': 'animation: anim1 10s;',
    339347                '#parent::before': 'animation: anim1 10s;',
    340348                '#child::after': 'animation: anim1 10s;',
    341349                '#child::before': 'animation: anim1 10s;' });
    342   const parent = addDiv(t, { 'id': 'parent' });
     350  var parent = addDiv(t, { 'id': 'parent' });
    343351  parent.style.animation = 'anim1 100s';
    344   const child = addDiv(t, { 'id': 'child' });
     352  var child = addDiv(t, { 'id': 'child' });
    345353  child.style.animation = 'anim1 100s';
    346354  parent.appendChild(child);
    347355
    348   const animations = parent.getAnimations({ subtree: false });
     356  var animations = parent.getAnimations({ subtree: false });
    349357  assert_equals(animations.length, 1,
    350358                'Should find only the element even if it has a child');
    351359  assert_equals(animations[0].effect.target, parent,
    352360                'Effect target shuld be the element');
    353 }, '{ subtree: false } on an element with a child returns only the element\'s'
    354    + ' animations');
    355 
    356 test(t => {
     361}, 'Test AnimationFilter{ subtree: false } with element that has a child');
     362
     363test(function(t) {
    357364  addStyle(t, { '#parent::after': 'animation: anim1 10s;',
    358365                '#parent::before': 'animation: anim1 10s;',
    359366                '#child::after': 'animation: anim1 10s;',
    360367                '#child::before': 'animation: anim1 10s;' });
    361   const parent = addDiv(t, { 'id': 'parent' });
    362   const child = addDiv(t, { 'id': 'child' });
     368  var parent = addDiv(t, { 'id': 'parent' });
     369  var child = addDiv(t, { 'id': 'child' });
    363370  parent.style.animation = 'anim1 100s';
    364371  child.style.animation = 'anim1 100s';
    365372  parent.appendChild(child);
    366373
    367   const animations = parent.getAnimations({ subtree: true });
     374  var animations = parent.getAnimations({ subtree: true });
    368375  assert_equals(animations.length, 6,
    369376                'Should find all elements, pesudo-elements that parent has');
     
    375382                'The animation targeting the ::before pseudo-element ' +
    376383                'should be returned second');
    377   assert_equals(animations[1].effect.target.element, parent,
     384  assert_equals(animations[1].effect.target.parentElement, parent,
    378385                'This ::before element should be child of parent element');
    379386  assert_equals(animations[2].effect.target.type, '::after',
    380387                'The animation targeting the ::after pesudo-element ' +
    381388                'should be returned third');
    382   assert_equals(animations[2].effect.target.element, parent,
     389  assert_equals(animations[2].effect.target.parentElement, parent,
    383390                'This ::after element should be child of parent element');
    384391
     
    389396                'The animation targeting the ::before pseudo-element ' +
    390397                'should be returned fifth');
    391   assert_equals(animations[4].effect.target.element, child,
     398  assert_equals(animations[4].effect.target.parentElement, child,
    392399                'This ::before element should be child of child element');
    393400  assert_equals(animations[5].effect.target.type, '::after',
    394401                'The animation targeting the ::after pesudo-element ' +
    395402                'should be returned last');
    396   assert_equals(animations[5].effect.target.element, child,
     403  assert_equals(animations[5].effect.target.parentElement, child,
    397404                'This ::after element should be child of child element');
    398 }, '{ subtree: true } on an element with a child returns animations from the'
    399    + ' element, its pseudo-elements, its child and its child pseudo-elements');
    400 
    401 test(t => {
    402   const parent = addDiv(t, { 'id': 'parent' });
    403   const child1 = addDiv(t, { 'id': 'child1' });
    404   const grandchild1 = addDiv(t, { 'id': 'grandchild1' });
    405   const grandchild2 = addDiv(t, { 'id': 'grandchild2' });
    406   const child2 = addDiv(t, { 'id': 'child2' });
     405}, 'Test AnimationFilter{ subtree: true } with element that has a child');
     406
     407test(function(t) {
     408  var parent = addDiv(t, { 'id': 'parent' });
     409  var child1 = addDiv(t, { 'id': 'child1' });
     410  var grandchild1 = addDiv(t, { 'id': 'grandchild1' });
     411  var grandchild2 = addDiv(t, { 'id': 'grandchild2' });
     412  var child2 = addDiv(t, { 'id': 'child2' });
    407413
    408414  parent.style.animation = 'anim1 100s';
     
    417423  parent.appendChild(child2);
    418424
    419   const animations = parent.getAnimations({ subtree: true });
     425  var animations = parent.getAnimations({ subtree: true });
    420426  assert_equals(
    421427    parent.getAnimations({ subtree: true }).length, 5,
     
    442448                'should be returned last');
    443449
    444 }, '{ subtree: true } on an element with many descendants returns animations'
    445    + ' from all the descendants');
     450}, 'Test AnimationFilter{ subtree: true } with element that has many descendant');
    446451
    447452</script>
     453</body>
  • trunk/LayoutTests/imported/mozilla/css-animations/test_event-dispatch-expected.txt

    r251571 r251573  
    1515PASS Active -> Idle -> Active: animationstart is fired by restarting animation
    1616PASS Negative playbackRate sanity test(Before -> Active -> Before)
    17 PASS Redundant change, before -> active, then back
    18 PASS Redundant change, before -> after, then back
    19 PASS Redundant change, active -> before, then back
    20 PASS Redundant change, active -> after, then back
    21 PASS Redundant change, after -> before, then back
    22 PASS Redundant change, after -> active, then back
    23 PASS Call Animation.cancel after canceling animation.
    24 PASS Restart animation after canceling animation immediately.
     17PASS Call Animation.cancel after cancelling animation.
     18PASS Restart animation after cancelling animation immediately.
    2519PASS Call Animation.cancel after restarting animation immediately.
    2620PASS Set timeline and play transition after clearing the timeline.
    27 PASS Set null target effect after canceling the animation.
     21PASS Set null target effect after cancelling the animation.
    2822PASS Cancel the animation after clearing the target effect.
    2923
  • trunk/LayoutTests/imported/mozilla/css-animations/test_keyframeeffect-getkeyframes-expected.txt

    r251571 r251573  
    2323FAIL KeyframeEffect.getKeyframes() returns expected values for animations with CSS variables as keyframe values in a shorthand property assert_equals: properties on ComputedKeyframe #0 expected "composite,computedOffset,easing,marginBottom,marginLeft,marginRight,marginTop,offset" but got "composite,computedOffset,easing,offset"
    2424FAIL KeyframeEffect.getKeyframes() returns expected values for animations with a CSS variable which is overriden by the value in keyframe assert_equals: properties on ComputedKeyframe #0 expected "color,composite,computedOffset,easing,offset" but got "composite,computedOffset,easing,offset"
    25 FAIL KeyframeEffect.getKeyframes() returns expected values for animations with only custom property in a keyframe assert_equals: value for 'transform' on ComputedKeyframe #0 expected "translate(100px)" but got "none"
     25FAIL KeyframeEffect.getKeyframes() returns expected values for animations with only custom property in a keyframe assert_equals: value for 'transform' on ComputedKeyframe #0 expected "translate(100px, 0px)" but got "none"
    2626
  • trunk/LayoutTests/imported/mozilla/css-animations/test_keyframeeffect-getkeyframes.html

    r251571 r251573  
    11<!doctype html>
    22<meta charset=utf-8>
    3 <title>KeyframeEffect.getKeyframes() for CSS animations</title>
    4 <!--  TODO: Add a more specific link for this once it is specified.  -->
    5 <link rel="help" href="https://drafts.csswg.org/css-animations-2/">
    6 <script src="/resources/testharness.js"></script>
    7 <script src="/resources/testharnessreport.js"></script>
    8 <script src="support/testcommon.js"></script>
     3<script src="../../../resources/testharness.js"></script>
     4<script src="../../../resources/testharnessreport.js"></script>
     5<script src="../resources/testcommon.js"></script>
    96<style>
    107@keyframes anim-empty { }
     
    163160"use strict";
    164161
    165 const getKeyframes = elem => elem.getAnimations()[0].effect.getKeyframes();
    166 
    167 const assert_frames_equal = (a, b, name) => {
     162function getKeyframes(e) {
     163  return e.getAnimations()[0].effect.getKeyframes();
     164}
     165
     166function assert_frames_equal(a, b, name) {
    168167  assert_equals(Object.keys(a).sort().toString(),
    169168                Object.keys(b).sort().toString(),
    170169                "properties on " + name);
    171   for (const p in a) {
     170  for (var p in a) {
    172171    if (p === 'offset' || p === 'computedOffset') {
    173172      assert_approx_equals(a[p], b[p], 0.00001,
     
    177176    }
    178177  }
    179 };
     178}
    180179
    181180// animation-timing-function values to test with, where the value
     
    197196];
    198197
    199 test(t => {
    200   const div = addDiv(t);
     198test(function(t) {
     199  var div = addDiv(t);
    201200
    202201  div.style.animation = 'anim-empty 100s';
     
    220219   + ' of empty enimations');
    221220
    222 test(t => {
    223   const div = addDiv(t);
     221test(function(t) {
     222  var div = addDiv(t);
    224223
    225224  div.style.animation = 'anim-simple 100s';
    226   const frames = getKeyframes(div);
    227 
    228   assert_equals(frames.length, 2, "number of frames");
    229 
    230   const expected = [
     225  var frames = getKeyframes(div);
     226
     227  assert_equals(frames.length, 2, "number of frames");
     228
     229  var expected = [
    231230    { offset: 0, computedOffset: 0, easing: "ease",
    232231      color: "rgb(0, 0, 0)", composite: "auto" },
     
    235234  ];
    236235
    237   for (let i = 0; i < frames.length; i++) {
     236  for (var i = 0; i < frames.length; i++) {
    238237    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
    239238  }
     
    241240   + ' animation');
    242241
    243 test(t => {
    244   for (const easing of kTimingFunctionValues) {
    245     const div = addDiv(t);
     242test(function(t) {
     243  kTimingFunctionValues.forEach(function(easing) {
     244    var div = addDiv(t);
    246245
    247246    div.style.animation = 'anim-simple-three 100s ' + easing;
    248     const frames = getKeyframes(div);
     247    var frames = getKeyframes(div);
    249248
    250249    assert_equals(frames.length, 3, "number of frames");
    251250
    252     for (let i = 0; i < frames.length; i++) {
     251    for (var i = 0; i < frames.length; i++) {
    253252      assert_equals(frames[i].easing, easing,
    254253                    "value for 'easing' on ComputedKeyframe #" + i);
    255254    }
    256   }
     255  });
    257256}, 'KeyframeEffect.getKeyframes() returns frames with expected easing'
    258257   + ' values, when the easing comes from animation-timing-function on the'
    259258   + ' element');
    260259
    261 test(t => {
    262   const div = addDiv(t);
     260test(function(t) {
     261  var div = addDiv(t);
    263262
    264263  div.style.animation = 'anim-simple-timing 100s';
    265   const frames = getKeyframes(div);
     264  var frames = getKeyframes(div);
    266265
    267266  assert_equals(frames.length, 3, "number of frames");
     
    275274   + ' values, when the easing is specified on each keyframe');
    276275
    277 test(t => {
    278   const div = addDiv(t);
     276test(function(t) {
     277  var div = addDiv(t);
    279278
    280279  div.style.animation = 'anim-simple-timing-some 100s step-start';
    281   const frames = getKeyframes(div);
     280  var frames = getKeyframes(div);
    282281
    283282  assert_equals(frames.length, 3, "number of frames");
     
    291290   + ' values, when the easing is specified on some keyframes');
    292291
    293 test(t => {
    294   const div = addDiv(t);
     292test(function(t) {
     293  var div = addDiv(t);
    295294
    296295  div.style.animation = 'anim-simple-shorthand 100s';
    297   const frames = getKeyframes(div);
    298 
    299   assert_equals(frames.length, 2, "number of frames");
    300 
    301   const expected = [
     296  var frames = getKeyframes(div);
     297
     298  assert_equals(frames.length, 2, "number of frames");
     299
     300  var expected = [
    302301    { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
    303302      marginBottom: "8px", marginLeft: "8px",
     
    308307  ];
    309308
    310   for (let i = 0; i < frames.length; i++) {
     309  for (var i = 0; i < frames.length; i++) {
    311310    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
    312311  }
     
    314313   + ' animation that specifies a single shorthand property');
    315314
    316 test(t => {
    317   const div = addDiv(t);
     315test(function(t) {
     316  var div = addDiv(t);
    318317
    319318  div.style.animation = 'anim-omit-to 100s';
    320319  div.style.color = 'rgb(255, 255, 255)';
    321   const frames = getKeyframes(div);
    322 
    323   assert_equals(frames.length, 2, "number of frames");
    324 
    325   const expected = [
     320  var frames = getKeyframes(div);
     321
     322  assert_equals(frames.length, 2, "number of frames");
     323
     324  var expected = [
    326325    { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
    327326      color: "rgb(0, 0, 255)" },
     
    330329  ];
    331330
    332   for (let i = 0; i < frames.length; i++) {
     331  for (var i = 0; i < frames.length; i++) {
    333332    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
    334333  }
     
    336335   'animation with a 0% keyframe and no 100% keyframe');
    337336
    338 test(t => {
    339   const div = addDiv(t);
     337test(function(t) {
     338  var div = addDiv(t);
    340339
    341340  div.style.animation = 'anim-omit-from 100s';
    342341  div.style.color = 'rgb(255, 255, 255)';
    343   const frames = getKeyframes(div);
    344 
    345   assert_equals(frames.length, 2, "number of frames");
    346 
    347   const expected = [
     342  var frames = getKeyframes(div);
     343
     344  assert_equals(frames.length, 2, "number of frames");
     345
     346  var expected = [
    348347    { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
    349348      color: "rgb(255, 255, 255)" },
     
    352351  ];
    353352
    354   for (let i = 0; i < frames.length; i++) {
     353  for (var i = 0; i < frames.length; i++) {
    355354    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
    356355  }
     
    358357   'animation with a 100% keyframe and no 0% keyframe');
    359358
    360 test(t => {
    361   const div = addDiv(t);
     359test(function(t) {
     360  var div = addDiv(t);
    362361
    363362  div.style.animation = 'anim-omit-from-to 100s';
    364363  div.style.color = 'rgb(255, 255, 255)';
    365   const frames = getKeyframes(div);
     364  var frames = getKeyframes(div);
    366365
    367366  assert_equals(frames.length, 3, "number of frames");
    368367
    369   const expected = [
     368  var expected = [
    370369    { offset: 0,   computedOffset: 0,   easing: "ease", composite: "auto",
    371370      color: "rgb(255, 255, 255)" },
     
    376375  ];
    377376
    378   for (let i = 0; i < frames.length; i++) {
     377  for (var i = 0; i < frames.length; i++) {
    379378    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
    380379  }
     
    382381   'animation with no 0% or 100% keyframe but with a 50% keyframe');
    383382
    384 test(t => {
    385   const div = addDiv(t);
     383test(function(t) {
     384  var div = addDiv(t);
    386385
    387386  div.style.animation = 'anim-partially-omit-to 100s';
    388387  div.style.marginTop = '250px';
    389   const frames = getKeyframes(div);
    390 
    391   assert_equals(frames.length, 2, "number of frames");
    392 
    393   const expected = [
     388  var frames = getKeyframes(div);
     389
     390  assert_equals(frames.length, 2, "number of frames");
     391
     392  var expected = [
    394393    { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
    395394      marginTop: '50px', marginBottom: '100px' },
     
    398397  ];
    399398
    400   for (let i = 0; i < frames.length; i++) {
     399  for (var i = 0; i < frames.length; i++) {
    401400    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
    402401  }
     
    405404   '!important rule is ignored)');
    406405
    407 test(t => {
    408   const div = addDiv(t);
     406test(function(t) {
     407  var div = addDiv(t);
    409408
    410409  div.style.animation = 'anim-different-props 100s';
    411   const frames = getKeyframes(div);
     410  var frames = getKeyframes(div);
    412411
    413412  assert_equals(frames.length, 4, "number of frames");
    414413
    415   const expected = [
     414  var expected = [
    416415    { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
    417416      color: "rgb(0, 0, 0)", marginTop: "8px" },
     
    424423  ];
    425424
    426   for (let i = 0; i < frames.length; i++) {
     425  for (var i = 0; i < frames.length; i++) {
    427426    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
    428427  }
     
    431430   'with the same easing function');
    432431
    433 test(t => {
    434   const div = addDiv(t);
     432test(function(t) {
     433  var div = addDiv(t);
    435434
    436435  div.style.animation = 'anim-different-props-and-easing 100s';
    437   const frames = getKeyframes(div);
     436  var frames = getKeyframes(div);
    438437
    439438  assert_equals(frames.length, 4, "number of frames");
    440439
    441   const expected = [
     440  var expected = [
    442441    { offset: 0, computedOffset: 0, easing: "linear", composite: "auto",
    443442      color: "rgb(0, 0, 0)", marginTop: "8px" },
     
    450449  ];
    451450
    452   for (let i = 0; i < frames.length; i++) {
     451  for (var i = 0; i < frames.length; i++) {
    453452    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
    454453  }
     
    457456   'a different easing function on each');
    458457
    459 test(t => {
    460   const div = addDiv(t);
     458test(function(t) {
     459  var div = addDiv(t);
    461460
    462461  div.style.animation = 'anim-merge-offset 100s';
    463   const frames = getKeyframes(div);
    464 
    465   assert_equals(frames.length, 2, "number of frames");
    466 
    467   const expected = [
     462  var frames = getKeyframes(div);
     463
     464  assert_equals(frames.length, 2, "number of frames");
     465
     466  var expected = [
    468467    { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
    469468      color: "rgb(0, 0, 0)", marginTop: "8px" },
     
    472471  ];
    473472
    474   for (let i = 0; i < frames.length; i++) {
     473  for (var i = 0; i < frames.length; i++) {
    475474    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
    476475  }
     
    479478   'the same easing function');
    480479
    481 test(t => {
    482   const div = addDiv(t);
     480test(function(t) {
     481  var div = addDiv(t);
    483482
    484483  div.style.animation = 'anim-merge-offset-and-easing 100s';
    485   const frames = getKeyframes(div);
     484  var frames = getKeyframes(div);
    486485
    487486  assert_equals(frames.length, 3, "number of frames");
    488487
    489   const expected = [
     488  var expected = [
    490489    { offset: 0, computedOffset: 0, easing: "steps(1)", composite: "auto",
    491490      color: "rgb(0, 0, 0)", fontSize: "16px" },
     
    497496  ];
    498497
    499   for (let i = 0; i < frames.length; i++) {
     498  for (var i = 0; i < frames.length; i++) {
    500499    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
    501500  }
     
    504503   'different easing functions');
    505504
    506 test(t => {
    507   const div = addDiv(t);
     505test(function(t) {
     506  var div = addDiv(t);
    508507
    509508  div.style.animation = 'anim-no-merge-equiv-easing 100s';
    510   const frames = getKeyframes(div);
     509  var frames = getKeyframes(div);
    511510
    512511  assert_equals(frames.length, 3, "number of frames");
    513512
    514   const expected = [
     513  var expected = [
    515514    { offset: 0, computedOffset: 0, easing: "steps(1)", composite: "auto",
    516515      marginTop: "0px", marginRight: "0px", marginBottom: "0px" },
     
    521520  ];
    522521
    523   for (let i = 0; i < frames.length; i++) {
     522  for (var i = 0; i < frames.length; i++) {
    524523    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
    525524  }
     
    528527   'different but equivalent easing functions');
    529528
    530 test(t => {
    531   const div = addDiv(t);
     529test(function(t) {
     530  var div = addDiv(t);
    532531
    533532  div.style.animation = 'anim-overriding 100s';
    534   const frames = getKeyframes(div);
     533  var frames = getKeyframes(div);
    535534
    536535  assert_equals(frames.length, 6, "number of frames");
    537536
    538   const expected = [
     537  var expected = [
    539538    { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
    540539      paddingTop: "30px" },
     
    551550  ];
    552551
    553   for (let i = 0; i < frames.length; i++) {
     552  for (var i = 0; i < frames.length; i++) {
    554553    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
    555554  }
     
    560559// computed value for filter, "none", is correctly represented.
    561560
    562 test(t => {
    563   const div = addDiv(t);
     561test(function(t) {
     562  var div = addDiv(t);
    564563
    565564  div.style.animation = 'anim-filter 100s';
    566   const frames = getKeyframes(div);
    567 
    568   assert_equals(frames.length, 2, "number of frames");
    569 
    570   const expected = [
     565  var frames = getKeyframes(div);
     566
     567  assert_equals(frames.length, 2, "number of frames");
     568
     569  var expected = [
    571570    { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
    572571      filter: "none" },
     
    575574  ];
    576575
    577   for (let i = 0; i < frames.length; i++) {
     576  for (var i = 0; i < frames.length; i++) {
    578577    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
    579578  }
     
    581580   'animations with filter properties and missing keyframes');
    582581
    583 test(t => {
    584   const div = addDiv(t);
     582test(function(t) {
     583  var div = addDiv(t);
    585584
    586585  div.style.animation = 'anim-filter-drop-shadow 100s';
    587   const frames = getKeyframes(div);
    588 
    589   assert_equals(frames.length, 2, "number of frames");
    590 
    591   const expected = [
     586  var frames = getKeyframes(div);
     587
     588  assert_equals(frames.length, 2, "number of frames");
     589
     590  var expected = [
    592591    { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
    593592      filter: "drop-shadow(rgb(0, 255, 0) 10px 10px 10px)" },
     
    596595  ];
    597596
    598   for (let i = 0; i < frames.length; i++) {
     597  for (var i = 0; i < frames.length; i++) {
    599598    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
    600599  }
     
    606605// are correctly represented.
    607606
    608 test(t => {
    609   const div = addDiv(t);
     607test(function(t) {
     608  var div = addDiv(t);
    610609
    611610  div.style.textShadow = '1px 1px 2px rgb(0, 0, 0), ' +
     
    613612                         '0 0 3.2px rgb(0, 0, 255)';
    614613  div.style.animation = 'anim-text-shadow 100s';
    615   const frames = getKeyframes(div);
    616 
    617   assert_equals(frames.length, 2, "number of frames");
    618 
    619   const expected = [
     614  var frames = getKeyframes(div);
     615
     616  assert_equals(frames.length, 2, "number of frames");
     617
     618  var expected = [
    620619    { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
    621620      textShadow: "rgb(0, 0, 0) 1px 1px 2px,"
     
    626625  ];
    627626
    628   for (let i = 0; i < frames.length; i++) {
     627  for (var i = 0; i < frames.length; i++) {
    629628    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
    630629  }
     
    636635// represented.
    637636
    638 test(t => {
    639   const div = addDiv(t);
     637test(function(t) {
     638  var div = addDiv(t);
    640639
    641640  div.style.animation = 'anim-background-size 100s';
    642   let frames = getKeyframes(div);
    643 
    644   assert_equals(frames.length, 2, "number of frames");
    645 
    646   const expected = [
    647     { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
    648       backgroundSize: "auto" },
    649     { offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
    650       backgroundSize: "50%, 6px, contain" },
    651   ];
    652 
    653   for (let i = 0; i < frames.length; i++) {
     641  var frames = getKeyframes(div);
     642
     643  assert_equals(frames.length, 2, "number of frames");
     644
     645  var expected = [
     646    { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
     647      backgroundSize: "auto auto" },
     648    { offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
     649      backgroundSize: "50% auto, 6px auto, contain" },
     650  ];
     651
     652  for (var i = 0; i < frames.length; i++) {
    654653    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
    655654  }
     
    658657
    659658  expected[0].backgroundSize = div.style.backgroundSize =
    660     "30px, 40%, auto";
     659    "30px auto, 40% auto, auto auto";
    661660  frames = getKeyframes(div);
    662661
    663   for (let i = 0; i < frames.length; i++) {
     662  for (var i = 0; i < frames.length; i++) {
    664663    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i
    665664                        + " after updating current style");
     
    668667   'animations with background-size properties and missing keyframes');
    669668
    670 test(t => {
    671   const div = addDiv(t);
     669test(function(t) {
     670  var div = addDiv(t);
    672671  div.style.animation = 'anim-variables 100s';
    673672
    674   const frames = getKeyframes(div);
    675 
    676   assert_equals(frames.length, 2, "number of frames");
    677 
    678   const expected = [
     673  var frames = getKeyframes(div);
     674
     675  assert_equals(frames.length, 2, "number of frames");
     676
     677  var expected = [
    679678    { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
    680679      transform: "none" },
    681680    { offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
    682       transform: "translate(100px)" },
    683   ];
    684   for (let i = 0; i < frames.length; i++) {
     681      transform: "translate(100px, 0px)" },
     682  ];
     683  for (var i = 0; i < frames.length; i++) {
    685684    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
    686685  }
     
    688687   'animations with CSS variables as keyframe values');
    689688
    690 test(t => {
    691   const div = addDiv(t);
     689test(function(t) {
     690  var div = addDiv(t);
    692691  div.style.animation = 'anim-variables-shorthand 100s';
    693692
    694   const frames = getKeyframes(div);
    695 
    696   assert_equals(frames.length, 2, "number of frames");
    697 
    698   const expected = [
     693  var frames = getKeyframes(div);
     694
     695  assert_equals(frames.length, 2, "number of frames");
     696
     697  var expected = [
    699698    { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
    700699      marginBottom: "0px",
     
    708707      marginTop: "100px" },
    709708  ];
    710   for (let i = 0; i < frames.length; i++) {
     709  for (var i = 0; i < frames.length; i++) {
    711710    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
    712711  }
     
    714713   'animations with CSS variables as keyframe values in a shorthand property');
    715714
    716 test(t => {
    717   const div = addDiv(t);
     715test(function(t) {
     716  var div = addDiv(t);
    718717  div.style.animation = 'anim-custom-property-in-keyframe 100s';
    719718
    720   const frames = getKeyframes(div);
    721 
    722   assert_equals(frames.length, 2, "number of frames");
    723 
    724   const expected = [
     719  var frames = getKeyframes(div);
     720
     721  assert_equals(frames.length, 2, "number of frames");
     722
     723  var expected = [
    725724    { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
    726725      color: "rgb(0, 0, 0)" },
     
    728727      color: "rgb(0, 255, 0)" },
    729728  ];
    730   for (let i = 0; i < frames.length; i++) {
     729  for (var i = 0; i < frames.length; i++) {
    731730    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
    732731  }
     
    734733   'animations with a CSS variable which is overriden by the value in keyframe');
    735734
    736 test(t => {
    737   const div = addDiv(t);
     735test(function(t) {
     736  var div = addDiv(t);
    738737  div.style.animation = 'anim-only-custom-property-in-keyframe 100s';
    739738
    740   const frames = getKeyframes(div);
    741 
    742   assert_equals(frames.length, 2, "number of frames");
    743 
    744   const expected = [
    745     { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
    746       transform: "translate(100px)" },
     739  var frames = getKeyframes(div);
     740
     741  assert_equals(frames.length, 2, "number of frames");
     742
     743  var expected = [
     744    { offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
     745      transform: "translate(100px, 0px)" },
    747746    { offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
    748747      transform: "none" },
    749748  ];
    750   for (let i = 0; i < frames.length; i++) {
     749  for (var i = 0; i < frames.length; i++) {
    751750    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
    752751  }
  • trunk/LayoutTests/imported/mozilla/css-animations/test_pseudoElement-get-animations-expected.txt

    r251571 r251573  
    11
    22PASS getAnimations returns CSSAnimation objects
    3 PASS getAnimations returns CSS transitions/animations, and script-generated animations in the expected order
     3PASS getAnimations returns css transitions/animations, and script-generated animations in the expected order
    44
  • trunk/LayoutTests/imported/mozilla/css-animations/test_pseudoElement-get-animations.html

    r251571 r251573  
    11<!doctype html>
    22<meta charset=utf-8>
    3 <title>CSSPseudoElement.getAnimations() for CSS animations</title>
    4 <!--  TODO: Add a more specific link for this once it is specified.  -->
    5 <link rel="help" href="https://drafts.csswg.org/css-animations-2/">
    6 <script src="/resources/testharness.js"></script>
    7 <script src="/resources/testharnessreport.js"></script>
    8 <script src="support/testcommon.js"></script>
     3<script src="../../../resources/testharness.js"></script>
     4<script src="../../../resources/testharnessreport.js"></script>
     5<script src="../resources/testcommon.js"></script>
    96<style>
    107@keyframes anim1 { }
     
    2724}
    2825</style>
     26<body>
    2927<div id="log"></div>
    3028<script>
    3129'use strict';
    3230
    33 test(t => {
    34   const div = addDiv(t, { class: 'before' });
    35   const pseudoTarget = document.getAnimations()[0].effect.target;
     31test(function(t) {
     32  var div = addDiv(t, { class: 'before' });
     33  var pseudoTarget = document.getAnimations()[0].effect.target;
    3634  assert_equals(pseudoTarget.getAnimations().length, 1,
    3735                'Expected number of animations are returned');
     
    4038}, 'getAnimations returns CSSAnimation objects');
    4139
    42 test(t => {
    43   const div = addDiv(t, { class: 'after-with-mix-anims-trans' });
     40test(function(t) {
     41  var div = addDiv(t, { class: 'after-with-mix-anims-trans' });
    4442  // Trigger transitions
    4543  flushComputedStyle(div);
     
    4745
    4846  // Create additional animation on the pseudo-element from script
    49   const pseudoTarget = document.getAnimations()[0].effect.target;
    50   const effect = new KeyframeEffect(pseudoTarget,
    51                                     { background: ["blue", "red"] },
    52                                     3 * MS_PER_SEC);
    53   const newAnimation = new Animation(effect, document.timeline);
     47  var pseudoTarget = document.getAnimations()[0].effect.target;
     48  var effect = new KeyframeEffect(pseudoTarget,
     49                                          { background: ["blue", "red"] },
     50                                          3 * MS_PER_SEC);
     51  var newAnimation = new Animation(effect, document.timeline);
    5452  newAnimation.id = 'scripted-anim';
    5553  newAnimation.play();
    5654
    5755  // Check order - the script-generated animation should appear later
    58   const anims = pseudoTarget.getAnimations();
     56  var anims = pseudoTarget.getAnimations();
    5957  assert_equals(anims.length, 5,
    6058                'Got expected number of animations/trnasitions running on ' +
     
    7068  assert_equals(anims[4].id, 'scripted-anim',
    7169                'Animation added by script appears last');
    72 }, 'getAnimations returns CSS transitions/animations, and script-generated ' +
     70}, 'getAnimations returns css transitions/animations, and script-generated ' +
    7371   'animations in the expected order');
    7472
    7573</script>
     74</body>
  • trunk/LayoutTests/imported/mozilla/css-animations/test_setting-effect-expected.txt

    r251571 r251573  
    44PASS Replacing an animation's effect with a shorter one that should have already finished, the animation finishes immediately
    55PASS A play-pending animation's effect whose effect is replaced still exits the pending state
    6 PASS CSS animation events are dispatched at the original element even after setting an effect with a different target element
     6PASS The event is dispatched at the original element even after setting an effect with a different target element
    77PASS After replacing a finished animation's effect with a longer one it fires an animationstart event
    88
  • trunk/LayoutTests/imported/mozilla/css-transitions/test_animation-cancel-expected.txt

    r251571 r251573  
    11
    2 PASS Animated style is cleared after canceling a running CSS transition
     2PASS Animated style is cleared after cancelling a running CSS transition
    33PASS After canceling a transition, it can still be re-used
    4 PASS After canceling a finished transition, it can still be re-used
    5 PASS After canceling a transition, updating transition properties doesn't make it live again
     4PASS After cancelling a finished transition, it can still be re-used
     5PASS After cancelling a transition, updating transition properties doesn't make it live again
    66PASS Setting display:none on an element cancels its transitions
    77PASS Setting display:none cancels transitions on a child element
  • trunk/LayoutTests/imported/mozilla/css-transitions/test_animation-computed-timing-expected.txt

    r251571 r251573  
    99PASS duration of a new transition
    1010PASS direction of a new transition
    11 FAIL easing of a new transition assert_equals: Initial value of easing expected "ease" but got "linear"
    12 FAIL non-default easing of a new transition assert_equals: Initial value of easing expected "steps(4)" but got "linear"
     11PASS easing of a new transition
    1312PASS endTime of a new transition
    1413PASS activeDuration of a new transition
  • trunk/LayoutTests/imported/mozilla/css-transitions/test_animation-computed-timing.html

    r251571 r251573  
    11<!doctype html>
    22<meta charset=utf-8>
    3 <title>AnimationEffect.getComputedTiming() for CSS transitions</title>
    4 <!--  TODO: Add a more specific link for this once it is specified.  -->
    5 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
    6 <script src="/resources/testharness.js"></script>
    7 <script src="/resources/testharnessreport.js"></script>
    8 <script src="support/helper.js"></script>
     3<script src="../../../resources/testharness.js"></script>
     4<script src="../../../resources/testharnessreport.js"></script>
     5<script src="../resources/testcommon.js"></script>
    96<style>
    107
     
    1411
    1512</style>
     13<body>
    1614<div id="log"></div>
    1715<script>
     
    1917'use strict';
    2018
    21 
    2219// --------------------
    2320// delay
    2421// --------------------
    25 
    26 test(t => {
    27   const div = addDiv(t, { class: 'animated-div' });
    28   div.style.transition = 'margin-left 10s';
    29   getComputedStyle(div).marginLeft;
    30   div.style.marginLeft = '10px';
    31 
    32   const effect = div.getAnimations()[0].effect;
    33   assert_equals(effect.getComputedTiming().delay, 0, 'Initial value of delay');
     22test(function(t) {
     23  var div = addDiv(t, {'class': 'animated-div'});
     24  div.style.transition = 'margin-left 10s';
     25  flushComputedStyle(div);
     26  div.style.marginLeft = '10px';
     27
     28
     29  var effect = div.getAnimations()[0].effect;
     30  assert_equals(effect.getComputedTiming().delay, 0,
     31                'Initial value of delay');
    3432}, 'delay of a new tranisition');
    3533
    36 test(t => {
    37   const div = addDiv(t, { class: 'animated-div' });
     34test(function(t) {
     35  var div = addDiv(t, {'class': 'animated-div'});
    3836  div.style.transition = 'margin-left 10s 10s';
    39   getComputedStyle(div).marginLeft;
    40   div.style.marginLeft = '10px';
    41 
    42   const effect = div.getAnimations()[0].effect;
     37  flushComputedStyle(div);
     38  div.style.marginLeft = '10px';
     39
     40  var effect = div.getAnimations()[0].effect;
    4341  assert_equals(effect.getComputedTiming().delay, 10000,
    4442                'Initial value of delay');
    4543}, 'Positive delay of a new transition');
    4644
    47 test(t => {
    48   const div = addDiv(t, { class: 'animated-div' });
     45test(function(t) {
     46  var div = addDiv(t, {'class': 'animated-div'});
    4947  div.style.transition = 'margin-left 10s -5s';
    50   getComputedStyle(div).marginLeft;
    51   div.style.marginLeft = '10px';
    52 
    53   const effect = div.getAnimations()[0].effect;
     48  flushComputedStyle(div);
     49  div.style.marginLeft = '10px';
     50
     51  var effect = div.getAnimations()[0].effect;
    5452  assert_equals(effect.getComputedTiming().delay, -5000,
    5553                'Initial value of delay');
     
    6058// endDelay
    6159// --------------------
    62 
    63 test(t => {
    64   const div = addDiv(t, { class: 'animated-div' });
    65   div.style.transition = 'margin-left 10s';
    66   getComputedStyle(div).marginLeft;
    67   div.style.marginLeft = '10px';
    68 
    69   const effect = div.getAnimations()[0].effect;
     60test(function(t) {
     61  var div = addDiv(t, {'class': 'animated-div'});
     62  div.style.transition = 'margin-left 10s';
     63  flushComputedStyle(div);
     64  div.style.marginLeft = '10px';
     65
     66  var effect = div.getAnimations()[0].effect;
    7067  assert_equals(effect.getComputedTiming().endDelay, 0,
    7168                'Initial value of endDelay');
     
    7673// fill
    7774// --------------------
    78 
    79 test(t => {
    80   const div = addDiv(t, { class: 'animated-div' });
    81   div.style.transition = 'margin-left 10s';
    82   getComputedStyle(div).marginLeft;
    83   div.style.marginLeft = '10px';
    84 
    85   const effect = div.getAnimations()[0].effect;
    86   assert_equals(effect.getComputedTiming().fill, 'backwards', 'Fill backwards');
     75test(function(t) {
     76  var div = addDiv(t, {'class': 'animated-div'});
     77  div.style.transition = 'margin-left 10s';
     78  flushComputedStyle(div);
     79  div.style.marginLeft = '10px';
     80
     81  var effect = div.getAnimations()[0].effect;
     82  assert_equals(effect.getComputedTiming().fill, 'backwards',
     83                'Fill backwards');
    8784}, 'fill of a new transition');
    8885
     
    9188// iterationStart
    9289// --------------------
    93 
    94 test(t => {
    95   const div = addDiv(t, { class: 'animated-div' });
    96   div.style.transition = 'margin-left 10s';
    97   getComputedStyle(div).marginLeft;
    98   div.style.marginLeft = '10px';
    99 
    100   const effect = div.getAnimations()[0].effect;
     90test(function(t) {
     91  var div = addDiv(t, {'class': 'animated-div'});
     92  div.style.transition = 'margin-left 10s';
     93  flushComputedStyle(div);
     94  div.style.marginLeft = '10px';
     95
     96  var effect = div.getAnimations()[0].effect;
    10197  assert_equals(effect.getComputedTiming().iterationStart, 0,
    10298                'Initial value of iterationStart');
     
    107103// iterations
    108104// --------------------
    109 
    110 test(t => {
    111   const div = addDiv(t, { class: 'animated-div' });
    112   div.style.transition = 'margin-left 10s';
    113   getComputedStyle(div).marginLeft;
    114   div.style.marginLeft = '10px';
    115 
    116   const effect = div.getAnimations()[0].effect;
     105test(function(t) {
     106  var div = addDiv(t, {'class': 'animated-div'});
     107  div.style.transition = 'margin-left 10s';
     108  flushComputedStyle(div);
     109  div.style.marginLeft = '10px';
     110
     111  var effect = div.getAnimations()[0].effect;
    117112  assert_equals(effect.getComputedTiming().iterations, 1,
    118113                'Initial value of iterations');
     
    123118// duration
    124119// --------------------
    125 
    126 test(t => {
    127   const div = addDiv(t, { class: 'animated-div' });
    128   div.style.transition = 'margin-left 10s';
    129   getComputedStyle(div).marginLeft;
    130   div.style.marginLeft = '10px';
    131 
    132   const effect = div.getAnimations()[0].effect;
     120test(function(t) {
     121  var div = addDiv(t, {'class': 'animated-div'});
     122  div.style.transition = 'margin-left 10s';
     123  flushComputedStyle(div);
     124  div.style.marginLeft = '10px';
     125
     126  var effect = div.getAnimations()[0].effect;
    133127  assert_equals(effect.getComputedTiming().duration, 10000,
    134128                'Initial value of duration');
     
    139133// direction
    140134// --------------------
    141 
    142 test(t => {
    143   const div = addDiv(t, { class : 'animated-div' });
    144   div.style.transition = 'margin-left 10s';
    145   getComputedStyle(div).marginLeft;
    146   div.style.marginLeft = '10px';
    147 
    148   const effect = div.getAnimations()[0].effect;
     135test(function(t) {
     136  var div = addDiv(t, {'class': 'animated-div'});
     137  div.style.transition = 'margin-left 10s';
     138  flushComputedStyle(div);
     139  div.style.marginLeft = '10px';
     140
     141  var effect = div.getAnimations()[0].effect;
    149142  assert_equals(effect.getComputedTiming().direction, 'normal',
    150143                'Initial value of direction');
     
    155148// easing
    156149// --------------------
    157 
    158 test(t => {
    159   const div = addDiv(t, { class: 'animated-div' });
    160   div.style.transition = 'margin-left 10s';
    161   getComputedStyle(div).marginLeft;
    162   div.style.marginLeft = '10px';
    163 
    164   const effect = div.getAnimations()[0].effect;
    165   assert_equals(effect.getComputedTiming().easing, 'ease',
     150test(function(t) {
     151  var div = addDiv(t, {'class': 'animated-div'});
     152  div.style.transition = 'margin-left 10s';
     153  flushComputedStyle(div);
     154  div.style.marginLeft = '10px';
     155
     156  var effect = div.getAnimations()[0].effect;
     157  assert_equals(effect.getComputedTiming().easing, 'linear',
    166158                'Initial value of easing');
    167159}, 'easing of a new transition');
    168 
    169 test(t => {
    170   const div = addDiv(t, { class: 'animated-div' });
    171   div.style.transition = 'margin-left 10s steps(4)';
    172   getComputedStyle(div).marginLeft;
    173   div.style.marginLeft = '10px';
    174 
    175   const effect = div.getAnimations()[0].effect;
    176   assert_equals(effect.getComputedTiming().easing, 'steps(4)',
    177                 'Initial value of easing');
    178 }, 'non-default easing of a new transition');
    179160
    180161
     
    183164// = max(start delay + active duration + end delay, 0)
    184165// --------------------
    185 
    186 test(t => {
    187   const div = addDiv(t, { class: 'animated-div' });
     166test(function(t) {
     167  var div = addDiv(t, {'class': 'animated-div'});
    188168  div.style.transition = 'margin-left 100s -5s';
    189   getComputedStyle(div).marginLeft;
    190   div.style.marginLeft = '10px';
    191 
    192   const effect = div.getAnimations()[0].effect;
    193   const answer = 100000 - 5000; // ms
     169  flushComputedStyle(div);
     170  div.style.marginLeft = '10px';
     171
     172  var effect = div.getAnimations()[0].effect;
     173  var answer = 100000 - 5000; // ms
    194174  assert_equals(effect.getComputedTiming().endTime, answer,
    195175                'Initial value of endTime');
     
    201181// = iteration duration * iteration count(==1)
    202182// --------------------
    203 
    204 test(t => {
    205   const div = addDiv(t, { class: 'animated-div' });
     183test(function(t) {
     184  var div = addDiv(t, {'class': 'animated-div'});
    206185  div.style.transition = 'margin-left 100s -5s';
    207   getComputedStyle(div).marginLeft;
    208   div.style.marginLeft = '10px';
    209 
    210   const effect = div.getAnimations()[0].effect;
     186  flushComputedStyle(div);
     187  div.style.marginLeft = '10px';
     188
     189  var effect = div.getAnimations()[0].effect;
    211190  assert_equals(effect.getComputedTiming().activeDuration, 100000,
    212191                'Initial value of activeDuration');
     
    217196// localTime
    218197// --------------------
    219 
    220 test(t => {
    221   const div = addDiv(t, { class: 'animated-div' });
     198test(function(t) {
     199  var div = addDiv(t, {'class': 'animated-div'});
    222200  div.style.transition = 'margin-left 100s';
    223   getComputedStyle(div).marginLeft;
    224   div.style.marginLeft = '10px';
    225 
    226   const effect = div.getAnimations()[0].effect;
     201  flushComputedStyle(div);
     202  div.style.marginLeft = '10px';
     203
     204  var effect = div.getAnimations()[0].effect;
    227205  assert_equals(effect.getComputedTiming().localTime, 0,
    228206                'Initial value of localTime');
    229207}, 'localTime of a new transition');
    230208
    231 test(t => {
    232   const div = addDiv(t, { class: 'animated-div' });
     209test(function(t) {
     210  var div = addDiv(t, {'class': 'animated-div'});
    233211  div.style.transition = 'margin-left 100s';
    234   getComputedStyle(div).marginLeft;
    235   div.style.marginLeft = '10px';
    236 
    237   const anim = div.getAnimations()[0];
     212  flushComputedStyle(div);
     213  div.style.marginLeft = '10px';
     214
     215  var anim = div.getAnimations()[0];
    238216  anim.currentTime = 5000;
    239217  assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
     
    241219}, 'localTime is always equal to currentTime');
    242220
    243 promise_test(async t => {
    244   const div = addDiv(t, { class: 'animated-div' });
     221async_test(function(t) {
     222  var div = addDiv(t, {'class': 'animated-div'});
    245223  div.style.transition = 'margin-left 100s';
    246   getComputedStyle(div).marginLeft;
    247   div.style.marginLeft = '10px';
    248 
    249   const anim = div.getAnimations()[0];
     224  flushComputedStyle(div);
     225  div.style.marginLeft = '10px';
     226
     227  var anim = div.getAnimations()[0];
    250228  anim.playbackRate = 2; // 2 times faster
    251229
    252   await anim.ready;
    253 
    254   assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
    255                 'localTime is equal to currentTime');
    256   await waitForFrame();
    257 
    258   assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
    259                 'localTime is equal to currentTime');
     230  anim.ready.then(t.step_func(function() {
     231    assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
     232                  'localTime is equal to currentTime');
     233    return waitForFrame();
     234  })).then(t.step_func_done(function() {
     235    assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
     236                  'localTime is equal to currentTime');
     237  }));
    260238}, 'localTime reflects playbackRate immediately');
    261239
     
    264242// progress
    265243// --------------------
    266 
    267 test(t => {
    268   const div = addDiv(t, { class: 'animated-div' });
     244test(function(t) {
     245  var div = addDiv(t, {'class': 'animated-div'});
    269246  div.style.transition = 'margin-left 10.5s';
    270   getComputedStyle(div).marginLeft;
    271   div.style.marginLeft = '10px';
    272 
    273   const effect = div.getAnimations()[0].effect;
     247  flushComputedStyle(div);
     248  div.style.marginLeft = '10px';
     249
     250  var effect = div.getAnimations()[0].effect;
    274251  assert_equals(effect.getComputedTiming().progress, 0.0,
    275252                'Initial value of progress');
    276253}, 'progress of a new transition');
    277254
    278 test(t => {
    279   const div = addDiv(t, { class: 'animated-div' });
     255test(function(t) {
     256  var div = addDiv(t, {'class': 'animated-div'});
    280257  div.style.transition = 'margin-left 10.5s 2s';
    281   getComputedStyle(div).marginLeft;
    282   div.style.marginLeft = '10px';
    283 
    284   const effect = div.getAnimations()[0].effect;
     258  flushComputedStyle(div);
     259  div.style.marginLeft = '10px';
     260
     261  var effect = div.getAnimations()[0].effect;
    285262  assert_equals(effect.getComputedTiming().progress, 0.0,
    286263                'Initial value of progress');
    287264}, 'progress of a new transition with positive delay in before phase');
    288265
    289 test(t => {
    290   const div = addDiv(t, { class: 'animated-div' });
     266test(function(t) {
     267  var div = addDiv(t, {'class': 'animated-div'});
    291268  div.style.transition = 'margin-left 10.5s';
    292   getComputedStyle(div).marginLeft;
    293   div.style.marginLeft = '10px';
    294 
    295   const anim = div.getAnimations()[0];
    296   anim.finish();
     269  flushComputedStyle(div);
     270  div.style.marginLeft = '10px';
     271
     272  var anim = div.getAnimations()[0];
     273  anim.finish()
    297274  assert_equals(anim.effect.getComputedTiming().progress, null,
    298275                'finished progress');
     
    303280// currentIteration
    304281// --------------------
    305 
    306 test(t => {
    307   const div = addDiv(t, { class: 'animated-div' });
    308   div.style.transition = 'margin-left 10s';
    309   getComputedStyle(div).marginLeft;
    310   div.style.marginLeft = '10px';
    311 
    312   const effect = div.getAnimations()[0].effect;
     282test(function(t) {
     283  var div = addDiv(t, {'class': 'animated-div'});
     284  div.style.transition = 'margin-left 10s';
     285  flushComputedStyle(div);
     286  div.style.marginLeft = '10px';
     287
     288  var effect = div.getAnimations()[0].effect;
    313289  assert_equals(effect.getComputedTiming().currentIteration, 0,
    314290                'Initial value of currentIteration');
    315291}, 'currentIteration of a new transition');
    316292
    317 test(t => {
    318   const div = addDiv(t, { class: 'animated-div' });
     293test(function(t) {
     294  var div = addDiv(t, {'class': 'animated-div'});
    319295  div.style.transition = 'margin-left 10s 2s';
    320   getComputedStyle(div).marginLeft;
    321   div.style.marginLeft = '10px';
    322 
    323   const effect = div.getAnimations()[0].effect;
     296  flushComputedStyle(div);
     297  div.style.marginLeft = '10px';
     298
     299  var effect = div.getAnimations()[0].effect;
    324300  assert_equals(effect.getComputedTiming().currentIteration, 0,
    325301                'Initial value of currentIteration');
    326302}, 'currentIteration of a new transition with positive delay in before phase');
    327303
    328 test(t => {
    329   const div = addDiv(t, { class: 'animated-div' });
    330   div.style.transition = 'margin-left 10s';
    331   getComputedStyle(div).marginLeft;
    332   div.style.marginLeft = '10px';
    333 
    334   const anim = div.getAnimations()[0];
     304test(function(t) {
     305  var div = addDiv(t, {'class': 'animated-div'});
     306  div.style.transition = 'margin-left 10s';
     307  flushComputedStyle(div);
     308  div.style.marginLeft = '10px';
     309
     310  var anim = div.getAnimations()[0];
    335311  anim.finish();
    336312  assert_equals(anim.effect.getComputedTiming().currentIteration, null,
     
    339315
    340316</script>
     317</body>
  • trunk/LayoutTests/imported/mozilla/css-transitions/test_effect-target.html

    r251571 r251573  
    11<!doctype html>
    22<meta charset=utf-8>
    3 <title>CSSTransition.effect.target</title>
    4 <!--  TODO: Add a more specific link for this once it is specified.  -->
    5 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
    6 <script src="/resources/testharness.js"></script>
    7 <script src="/resources/testharnessreport.js"></script>
    8 <script src="support/helper.js"></script>
     3<script src="../../../resources/testharness.js"></script>
     4<script src="../../../resources/testharnessreport.js"></script>
     5<script src="../resources/testcommon.js"></script>
     6<body>
    97<div id="log"></div>
    108<script>
    119'use strict';
    1210
    13 test(t => {
    14   const div = addDiv(t);
     11test(function(t) {
     12  var div = addDiv(t);
    1513
    1614  div.style.left = '0px';
     
    1917  div.style.left = '100px';
    2018
    21   const animation = div.getAnimations()[0];
     19  var animation = div.getAnimations()[0];
    2220  assert_equals(animation.effect.target, div,
    2321    'Animation.target is the animatable div');
    2422}, 'Returned CSS transitions have the correct Animation.target');
    2523
    26 test(t => {
     24test(function(t) {
    2725  addStyle(t, { '.init::after': 'content: ""; width: 0px; height: 0px; ' +
    2826                                'transition: all 10s;',
    2927                '.change::after': 'width: 100px; height: 100px;' });
    30   const div = addDiv(t, { class: 'init' });
    31   getComputedStyle(div).width;
     28  var div = addDiv(t, { class: 'init' });
     29  flushComputedStyle(div);
    3230  div.classList.add('change');
    3331
    34   const anims = document.getAnimations();
     32  var anims = document.getAnimations();
    3533  assert_equals(anims.length, 2,
    3634                'Got transitions running on ::after pseudo element');
     
    3937}, 'effect.target should return the same CSSPseudoElement object each time');
    4038
    41 test(t => {
     39test(function(t) {
    4240  addStyle(t, { '.init::after': 'content: ""; width: 0px; transition: all 10s;',
    4341                '.change::after': 'width: 100px;' });
    44   const div = addDiv(t, { class: 'init' });
    45   getComputedStyle(div).width;
     42  var div = addDiv(t, { class: 'init' });
     43  flushComputedStyle(div);
    4644  div.classList.add('change');
    47   const pseudoTarget = document.getAnimations()[0].effect.target;
    48   const effect = new KeyframeEffect(pseudoTarget,
    49                                     { background: ["blue", "red"] },
    50                                     3000);
    51   const newAnim = new Animation(effect, document.timeline);
     45  var pseudoTarget = document.getAnimations()[0].effect.target;
     46  var effect = new KeyframeEffect(pseudoTarget,
     47                                          { background: ["blue", "red"] },
     48                                          3000);
     49  var newAnim = new Animation(effect, document.timeline);
    5250  newAnim.play();
    5351
    54   const anims = document.getAnimations();
     52  var anims = document.getAnimations();
    5553  assert_equals(anims.length, 2,
    5654                'Got animations running on ::after pseudo element');
     
    6866
    6967</script>
     68</body>
  • trunk/LayoutTests/imported/mozilla/css-transitions/test_event-dispatch-expected.txt

    r251571 r251573  
    2020PASS Calculating the interval start and end time with negative start delay.
    2121PASS Calculating the interval start and end time with negative end delay.
    22 PASS Call Animation.cancel after canceling transition.
    23 PASS Restart transition after canceling transition immediately
     22PASS Call Animation.cancel after cancelling transition.
     23PASS Restart transition after cancelling transition immediately
    2424PASS Call Animation.cancel after restarting transition immediately
    2525PASS Set timeline and play transition after clear the timeline
    26 PASS Set null target effect after canceling the transition
     26PASS Set null target effect after cancel the transition
    2727PASS Cancel the transition after clearing the target effect
    2828
  • trunk/LayoutTests/imported/mozilla/css-transitions/test_pseudoElement-get-animations.html

    r251571 r251573  
    11<!doctype html>
    22<meta charset=utf-8>
    3 <title>CSSPseudoElement.getAnimations() for CSS transitions</title>
    4 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#animation-composite-order">
    5 <script src="/resources/testharness.js"></script>
    6 <script src="/resources/testharnessreport.js"></script>
    7 <script src="support/helper.js"></script>
     3<script src="../../../resources/testharness.js"></script>
     4<script src="../../../resources/testharnessreport.js"></script>
     5<script src="../resources/testcommon.js"></script>
    86<style>
    97.init::before {
     
    2018}
    2119</style>
     20<body>
    2221<div id="log"></div>
    2322<script>
    2423'use strict';
    2524
    26 test(t => {
    27   const div = addDiv(t, { class: 'init' });
    28   getComputedStyle(div).width;
     25test(function(t) {
     26  var div = addDiv(t, { class: 'init' });
     27  flushComputedStyle(div);
    2928  div.classList.add('change');
    3029
     
    3231  assert_equals(document.getAnimations().length, 3,
    3332                'Got expected number of animations on document');
    34   const pseudoTarget = document.getAnimations()[0].effect.target;
     33  var pseudoTarget = document.getAnimations()[0].effect.target;
    3534  assert_class_string(pseudoTarget, 'CSSPseudoElement',
    3635                      'Got pseudo-element target');
    3736
    3837  // Check animations returned from the pseudo element are in correct order
    39   const anims = pseudoTarget.getAnimations();
     38  var anims = pseudoTarget.getAnimations();
    4039  assert_equals(anims.length, 3,
    4140                'Got expected number of animations on pseudo-element');
     
    4645
    4746</script>
     47</body>
  • trunk/LayoutTests/imported/w3c/ChangeLog

    r251542 r251573  
     12019-10-24  Russell Epstein  <repstein@apple.com>
     2
     3        Unreviewed, rolling out r251536.
     4
     5        Landed 3 Broken Tests.
     6
     7        Reverted changeset:
     8
     9        "[Web Animations] Update WPT tests related to Web Animations
     10        and remove imported Mozilla tests"
     11        https://bugs.webkit.org/show_bug.cgi?id=203291
     12        https://trac.webkit.org/changeset/251536
     13
    1142019-10-24  youenn fablet  <youenn@apple.com>
    215
  • trunk/LayoutTests/imported/w3c/resources/import-expectations.json

    r251536 r251573  
    6666    "web-platform-tests/css/WOFF2": "import",
    6767    "web-platform-tests/css/css-align": "import",
    68     "web-platform-tests/css/css-animations": "import",
    6968    "web-platform-tests/css/css-animations/": "import",
    7069    "web-platform-tests/css/css-color": "import",
     
    8887    "web-platform-tests/css/css-shapes/test-plan/index.html": "skip",
    8988    "web-platform-tests/css/css-text": "import",
    90     "web-platform-tests/css/css-transitions": "import",
    9189    "web-platform-tests/css/css-ui": "import",
    9290    "web-platform-tests/css/cssom": "import",
     
    360358    "web-platform-tests/wasm": "skip",
    361359    "web-platform-tests/wasm/jsapi": "import",
    362     "web-platform-tests/web-animations": "import",
     360    "web-platform-tests/web-animations": "skip",
    363361    "web-platform-tests/web-nfc": "skip",
    364362    "web-platform-tests/webaudio": "import",
  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animationevent-interface-expected.txt

    r251536 r251573  
    1515FAIL AnimationEvent.pseudoElement initialized from the dictionary assert_equals: expected (string) "::testPseudo" but got (undefined) undefined
    1616PASS animationName set to 'sample'
    17 PASS animationName set to undefined
    18 PASS animationName set to null
    19 PASS animationName set to false
    20 PASS animationName set to true
    21 PASS animationName set to a number
    22 PASS animationName set to []
    23 PASS animationName set to [1, 2, 3]
    24 PASS animationName set to an object
    25 PASS animationName set to an object with a valueOf function
    2617PASS elapsedTime set to 0.5
    27 PASS elapsedTime set to -0.5
    28 PASS elapsedTime set to undefined
    29 PASS elapsedTime set to null
    30 PASS elapsedTime set to false
    31 PASS elapsedTime set to true
    32 PASS elapsedTime set to ''
    33 PASS elapsedTime set to []
    34 PASS elapsedTime set to [0.5]
    35 PASS elapsedTime set to an object with a valueOf function
    36 PASS elapsedTime cannot be set to NaN
    37 PASS elapsedTime cannot be set to Infinity
    38 PASS elapsedTime cannot be set to -Infinity
    39 PASS elapsedTime cannot be set to 'sample'
    40 PASS elapsedTime cannot be set to [0.5, 1.0]
    41 PASS elapsedTime cannot be set to an object
    4218PASS AnimationEventInit properties set value
    4319
  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animationevent-interface.js

    r251536 r251573  
    8080
    8181  test(function() {
    82     var event = new AnimationEvent("test", {animationName: undefined});
    83     assert_equals(event.animationName, "");
    84   }, "animationName set to undefined");
    85 
    86   test(function() {
    87     var event = new AnimationEvent("test", {animationName: null});
    88     assert_equals(event.animationName, "null");
    89   }, "animationName set to null");
    90 
    91   test(function() {
    92     var event = new AnimationEvent("test", {animationName: false});
    93     assert_equals(event.animationName, "false");
    94   }, "animationName set to false");
    95 
    96   test(function() {
    97     var event = new AnimationEvent("test", {animationName: true});
    98     assert_equals(event.animationName, "true");
    99   }, "animationName set to true");
    100 
    101   test(function() {
    102     var event = new AnimationEvent("test", {animationName: 0.5});
    103     assert_equals(event.animationName, "0.5");
    104   }, "animationName set to a number");
    105 
    106   test(function() {
    107     var event = new AnimationEvent("test", {animationName: []});
    108     assert_equals(event.animationName, "");
    109   }, "animationName set to []");
    110 
    111   test(function() {
    112     var event = new AnimationEvent("test", {animationName: [1, 2, 3]});
    113     assert_equals(event.animationName, "1,2,3");
    114   }, "animationName set to [1, 2, 3]");
    115 
    116   test(function() {
    117     var event = new AnimationEvent("test", {animationName: {sample: 0.5}});
    118     assert_equals(event.animationName, "[object Object]");
    119   }, "animationName set to an object");
    120 
    121   test(function() {
    122     var event = new AnimationEvent("test",
    123         {animationName: {valueOf: function () { return 'sample'; }}});
    124     assert_equals(event.animationName, "[object Object]");
    125   }, "animationName set to an object with a valueOf function");
    126 
    127   test(function() {
    12882    var event = new AnimationEvent("test", {elapsedTime: 0.5});
    12983    assert_equals(event.elapsedTime, 0.5);
    13084  }, "elapsedTime set to 0.5");
    131 
    132   test(function() {
    133     var event = new AnimationEvent("test", {elapsedTime: -0.5});
    134     assert_equals(event.elapsedTime, -0.5);
    135   }, "elapsedTime set to -0.5");
    136 
    137   test(function() {
    138     var event = new AnimationEvent("test", {elapsedTime: undefined});
    139     assert_equals(event.elapsedTime, 0);
    140   }, "elapsedTime set to undefined");
    141 
    142   test(function() {
    143     var event = new AnimationEvent("test", {elapsedTime: null});
    144     assert_equals(event.elapsedTime, 0);
    145   }, "elapsedTime set to null");
    146 
    147   test(function() {
    148     var event = new AnimationEvent("test", {elapsedTime: false});
    149     assert_equals(event.elapsedTime, 0);
    150   }, "elapsedTime set to false");
    151 
    152   test(function() {
    153     var event = new AnimationEvent("test", {elapsedTime: true});
    154     assert_equals(event.elapsedTime, 1);
    155   }, "elapsedTime set to true");
    156 
    157   test(function() {
    158     var event = new AnimationEvent("test", {elapsedTime: ""});
    159     assert_equals(event.elapsedTime, 0);
    160   }, "elapsedTime set to ''");
    161 
    162   test(function() {
    163     var event = new AnimationEvent("test", {elapsedTime: []});
    164     assert_equals(event.elapsedTime, 0);
    165   }, "elapsedTime set to []");
    166 
    167   test(function() {
    168     var event = new AnimationEvent("test", {elapsedTime: [0.5]});
    169     assert_equals(event.elapsedTime, 0.5);
    170   }, "elapsedTime set to [0.5]");
    171 
    172   test(function() {
    173     var event = new AnimationEvent(
    174         "test", {elapsedTime: { valueOf: function() { return 0.5; }}});
    175     assert_equals(event.elapsedTime, 0.5);
    176   }, "elapsedTime set to an object with a valueOf function");
    177 
    178   test(function() {
    179     assert_throws(new TypeError(), function() {
    180       new AnimationEvent("test", {elapsedTime: NaN});
    181     }, 'elapsedTime cannot be NaN so was expecting a TypeError');
    182   }, "elapsedTime cannot be set to NaN");
    183 
    184   test(function() {
    185     assert_throws(new TypeError(), function() {
    186       new AnimationEvent("test", {elapsedTime: Infinity});
    187     }, 'elapsedTime cannot be Infinity so was expecting a TypeError');
    188   }, "elapsedTime cannot be set to Infinity");
    189 
    190   test(function() {
    191     assert_throws(new TypeError(), function() {
    192       new AnimationEvent("test", {elapsedTime: -Infinity});
    193     }, 'elapsedTime cannot be -Infinity so was expecting a TypeError');
    194   }, "elapsedTime cannot be set to -Infinity");
    195 
    196   test(function() {
    197     assert_throws(new TypeError(), function() {
    198       new AnimationEvent("test", {elapsedTime: "sample"});
    199     }, 'elapsedTime cannot be a string so was expecting a TypeError');
    200   }, "elapsedTime cannot be set to 'sample'");
    201 
    202   test(function() {
    203     assert_throws(new TypeError(), function() {
    204       new AnimationEvent("test", {elapsedTime: [0.5, 1.0]});
    205     }, 'elapsedTime cannot be a multi-element array so was expecting a TypeError');
    206   }, "elapsedTime cannot be set to [0.5, 1.0]");
    207 
    208   test(function() {
    209     assert_throws(new TypeError(), function() {
    210       new AnimationEvent("test", {elapsedTime: { sample: 0.5}});
    211     }, 'elapsedTime cannot be an object so was expecting a TypeError');
    212   }, "elapsedTime cannot be set to an object");
    21385
    21486  test(function() {
  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/support/testcommon.js

    r251536 r251573  
    104104/**
    105105 * Waits for a requestAnimationFrame callback in the next refresh driver tick.
     106 * Note that 'dom.animations-api.core.enabled' pref should be true to use this
     107 * function.
    106108 */
    107109function waitForNextFrame() {
  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/support/w3c-import.log

    r251536 r251573  
    22Do NOT modify these tests directly in WebKit.
    33Instead, create a pull request on the WPT github:
    4         https://github.com/web-platform-tests/wpt
     4        https://github.com/w3c/web-platform-tests
    55
    66Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/w3c-import.log

    r251536 r251573  
    22Do NOT modify these tests directly in WebKit.
    33Instead, create a pull request on the WPT github:
    4         https://github.com/web-platform-tests/wpt
     4        https://github.com/w3c/web-platform-tests
    55
    66Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
     
    1515------------------------------------------------------------------------
    1616List of files:
    17 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/AnimationEffect-getComputedTiming.tentative.html
    18 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-animationName.tentative.html
    19 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-canceling.tentative.html
    20 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-effect.tentative.html
    21 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-finished.tentative.html
    22 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-getCurrentTime.tentative.html
    23 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-id.tentative.html
    24 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-pausing.tentative.html
    25 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-playState.tentative.html
    26 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-ready.tentative.html
    27 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-startTime.tentative.html
    28 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSPseudoElement-getAnimations.tentative.html
    29 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Document-getAnimations.tentative.html
    30 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Element-getAnimations-dynamic-changes.tentative.html
    31 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Element-getAnimations.tentative.html
    32 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/KeyframeEffect-getKeyframes.tentative.html
    33 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/KeyframeEffect-target.tentative.html
    34 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/META.yml
     17/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/OWNERS
    3518/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-delay-008-expected.html
    3619/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-delay-008.html
     
    4225/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-delay-011.html
    4326/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-iteration-count-calc.html
    44 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-opacity-pause-and-set-time-expected.html
    45 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-opacity-pause-and-set-time.html
    46 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-pseudo-dynamic-001-expected.html
    47 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-pseudo-dynamic-001.html
    48 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-transform-pause-and-set-time-expected.html
    49 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-transform-pause-and-set-time.html
    5027/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animationevent-interface.html
    5128/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animationevent-interface.js
    52 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animationevent-marker-pseudoelement.html
    5329/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animationevent-pseudoelement.html
    5430/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animationevent-types.html
    55 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/computed-style-animation-parsing.html
    56 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/event-dispatch.tentative.html
    57 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/event-order.tentative.html
    58 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/historical.html
    59 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/idlharness.html
    60 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/inheritance.html
    61 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/keyframes-remove-documentElement-crash.html
    6231/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/pending-style-changes-001.html
    63 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/style-animation-parsing.html
  • trunk/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/accumulation-per-property-expected.txt

    r251536 r251573  
    209209PASS transform: non-invertible matrices in mismatched transform lists (invertible onto non-invertible)
    210210PASS visibility (type: visibility) has testAccumulation function
    211 PASS visibility: onto "visible"
     211FAIL visibility: onto "visible" assert_equals: The value should be visible at 1000ms expected "visible" but got "hidden"
    212212PASS visibility: onto "hidden"
    213213PASS word-spacing (type: lengthPercentageOrCalc) has testAccumulation function
  • trunk/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/addition-per-property-expected.txt

    r251536 r251573  
    204204FAIL transform: non-invertible matrices in mismatched transform lists assert_approx_equals: expected matrix(-2, 0, 0, -2, 250, 0) but got matrix(-2, 0, 0, -2, 200, 0): The value should be matrix(-2, 0, 0, -2, 250, 0) at 0ms but got matrix(-2, 0, 0, -2, 200, 0) expected 250 +/- 0.0001 but got 200
    205205PASS visibility (type: visibility) has testAddition function
    206 PASS visibility: onto "visible"
     206FAIL visibility: onto "visible" assert_equals: The value should be visible at 1000ms expected "visible" but got "hidden"
    207207PASS visibility: onto "hidden"
    208208PASS word-spacing (type: lengthPercentageOrCalc) has testAddition function
  • trunk/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-expected.txt

    r251536 r251573  
    131131FAIL filter: interpolate different length of filter-function-list with function which lacuna value is 1 assert_equals: The value should be grayscale(0.5) brightness(0.5) contrast(0.5) opacity(0.5) saturate(0.5) at 500ms expected "grayscale(0.5) brightness(0.5) contrast(0.5) opacity(0.5) saturate(0.5)" but got "grayscale(1) brightness(0) contrast(0) opacity(0) saturate(0)"
    132132FAIL filter: interpolate different length of filter-function-list with function which lacuna value is 0 assert_equals: The value should be opacity(0.5) grayscale(0.5) invert(0.5) sepia(0.5) blur(5px) at 500ms expected "opacity(0.5) grayscale(0.5) invert(0.5) sepia(0.5) blur(5px)" but got "opacity(0) grayscale(1) invert(1) sepia(1) blur(10px)"
    133 FAIL filter: interpolate different length of filter-function-list with drop-shadow function assert_equals: The value should be blur(5px) drop-shadow(rgba(0, 0, 255, 0.4) 5px 5px 5px) at 500ms expected "blur(5px) drop-shadow(rgba(0, 0, 255, 0.4) 5px 5px 5px)" but got "blur(10px) drop-shadow(rgba(0, 0, 255, 0.8) 10px 10px 10px)"
     133FAIL filter: interpolate different length of filter-function-list with drop-shadow function assert_equals: The value should be blur(5px) drop-shadow(rgba(0, 0, 255, 0.4) 5px 5px 5px at 500ms expected "blur(5px) drop-shadow(rgba(0, 0, 255, 0.4) 5px 5px 5px" but got "blur(10px) drop-shadow(rgba(0, 0, 255, 0.8) 10px 10px 10px)"
    134134PASS filter: interpolate from none
    135135FAIL filter: url function (interpoalte as discrete) assert_equals: The value should be blur(0px) url("#f1") at 499ms expected "blur(0px) url(\"#f1\")" but got "blur(4.989999771118164px) url(\"#f1\")"
  • trunk/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/property-types.js

    r251536 r251573  
    618618      testAnimationSamples(animation, idlName,
    619619                           [{ time: 0,    expected: 'visible' },
    620                             { time: 1000, expected: 'hidden' }]);
     620                            { time: 1000, expected: 'visible' }]);
    621621    }, `${property}: onto "visible"`);
    622622
     
    22062206           // Per the spec: The initial value for interpolation is all length values
    22072207           // set to 0 and the used color set to transparent.
    2208            expected: 'blur(5px) drop-shadow(rgba(0, 0, 255, 0.4) 5px 5px 5px)' }]);
     2208           expected: 'blur(5px) drop-shadow(rgba(0, 0, 255, 0.4) 5px 5px 5px' }]);
    22092209    }, `${property}: interpolate different length of filter-function-list`
    22102210       + ' with drop-shadow function');
  • trunk/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/oncancel.html

    r251536 r251573  
    2222    assert_equals(event.currentTime, null,
    2323      'event.currentTime should be null');
    24     assert_times_equal(event.timelineTime, finishedTimelineTime,
     24    assert_equals(event.timelineTime, finishedTimelineTime,
    2525      'event.timelineTime should equal to the animation timeline ' +
    2626      'when finished promise is rejected');
  • trunk/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Document/getAnimations-expected.txt

    r251536 r251573  
    55PASS Test document.getAnimations for a disconnected node
    66PASS Test document.getAnimations with null target
    7 FAIL Test document.getAnimations for elements inside same-origin iframes assert_equals: expected 1 but got 0
     7FAIL Test document.getAnimations for elements inside same-origin iframes assert_true: Not expecting event, but got load event expected true got false
    88PASS Triggers a style change event
    99
  • trunk/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Document/getAnimations.html

    r251536 r251573  
    6969
    7070  const eventWatcher = new EventWatcher(t, iframe, ['load']);
    71   const event_promise = eventWatcher.wait_for('load');
    7271
    7372  document.body.appendChild(iframe);
    7473  t.add_cleanup(() => { document.body.removeChild(iframe); });
    7574
    76   await event_promise;
     75  await eventWatcher.wait_for('load');
    7776
    7877  const div = createDiv(t, iframe.contentDocument)
  • trunk/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-001-expected.txt

    r251536 r251573  
    2222PASS non-animatable property 'writingMode' is not accessed when using a property-indexed keyframe object
    2323PASS non-animatable property 'unsupportedProperty' is not accessed when using a property-indexed keyframe object
    24 PASS non-animatable property 'float' is not accessed when using a property-indexed keyframe object
    2524PASS non-animatable property 'font-size' is not accessed when using a property-indexed keyframe object
    2625PASS non-animatable property 'animation' is not accessed when using a keyframe sequence
     
    4645PASS non-animatable property 'writingMode' is not accessed when using a keyframe sequence
    4746PASS non-animatable property 'unsupportedProperty' is not accessed when using a keyframe sequence
    48 PASS non-animatable property 'float' is not accessed when using a keyframe sequence
    4947PASS non-animatable property 'font-size' is not accessed when using a keyframe sequence
    5048PASS Equivalent property-indexed and sequenced keyframes: two properties with one value
  • trunk/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-001.html

    r251536 r251573  
    4646  'unsupportedProperty',
    4747
    48   'float', // We use the string "cssFloat" to represent "float" property, and
    49            // so reject "float" in the keyframe-like object.
    5048  'font-size', // Supported property that uses dashes
    5149];
  • trunk/LayoutTests/platform/gtk/TestExpectations

    r251536 r251573  
    18471847webkit.org/b/186136 compositing/animation/layer-for-filling-animation.html [ Failure Pass Timeout ]
    18481848
     1849webkit.org/b/186143 imported/mozilla/css-animations/test_event-dispatch.html [ Timeout Pass ]
     1850
    18491851webkit.org/b/184569 storage/indexeddb/modern/transactions-stop-on-navigation.html [ Pass Failure ]
    18501852
     
    18551857webkit.org/b/186638 animations/play-state-paused.html [ Failure Pass ]
    18561858webkit.org/b/186638 imported/w3c/web-platform-tests/streams/piping/error-propagation-forward.html [ Failure Pass ]
     1859webkit.org/b/186638 imported/mozilla/css-transitions/test_animation-finished.html [ Timeout Pass ]
    18571860webkit.org/b/186638 compositing/repaint/repaint-on-layer-grouping-change.html [ Failure  Pass ]
    18581861webkit.org/b/186638 imported/w3c/web-platform-tests/mathml/presentation-markup/spaces/space-2.html [ Timeout Pass ]
     
    20932096webkit.org/b/197507 imported/blink/svg/hittest/rect-miterlimit.html [ Timeout Pass ]
    20942097webkit.org/b/197507 imported/blink/transitions/no-transition-on-implicit-margins.html [ Timeout Pass ]
     2098webkit.org/b/197507 imported/mozilla/css-animations/test_animation-cancel.html [ Timeout Pass ]
     2099webkit.org/b/197507 imported/mozilla/css-transitions/test_animation-cancel.html [ Timeout Pass ]
    20952100webkit.org/b/197507 legacy-animation-engine/animations/animation-multiple-callbacks-timestamp.html [ Timeout Pass ]
    20962101webkit.org/b/197507 legacy-animation-engine/imported/blink/css3/calc/transition-asan-crash.html [ Timeout Pass ]
  • trunk/LayoutTests/platform/gtk/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/accumulation-per-property-expected.txt

    r251536 r251573  
    210210FAIL transform: non-invertible matrices in mismatched transform lists (invertible onto non-invertible) assert_regexp_match: Actual value is not a matrix expected object "/^matrix(?:3d)*\((.+)\)/" but got "none"
    211211PASS visibility (type: visibility) has testAccumulation function
    212 PASS visibility: onto "visible"
     212FAIL visibility: onto "visible" assert_equals: The value should be visible at 1000ms expected "visible" but got "hidden"
    213213PASS visibility: onto "hidden"
    214214PASS word-spacing (type: lengthPercentageOrCalc) has testAccumulation function
  • trunk/LayoutTests/platform/gtk/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/addition-per-property-expected.txt

    r251536 r251573  
    206206FAIL transform: non-invertible matrices in mismatched transform lists assert_approx_equals: expected matrix(-2,0,0,-2,250,0) but got matrix(-2, 0.00000000000000024492935982947064, -0.00000000000000024492935982947064, -2, 200, 0): The value should be matrix(-2,0,0,-2,250,0) at 0ms but got matrix(-2, 0.00000000000000024492935982947064, -0.00000000000000024492935982947064, -2, 200, 0) expected 250 +/- 0.0001 but got 200
    207207PASS visibility (type: visibility) has testAddition function
    208 PASS visibility: onto "visible"
     208FAIL visibility: onto "visible" assert_equals: The value should be visible at 1000ms expected "visible" but got "hidden"
    209209PASS visibility: onto "hidden"
    210210PASS word-spacing (type: lengthPercentageOrCalc) has testAddition function
  • trunk/LayoutTests/platform/ios/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/accumulation-per-property-expected.txt

    r251536 r251573  
    209209PASS transform: non-invertible matrices in mismatched transform lists (invertible onto non-invertible)
    210210PASS visibility (type: visibility) has testAccumulation function
    211 PASS visibility: onto "visible"
     211FAIL visibility: onto "visible" assert_equals: The value should be visible at 1000ms expected "visible" but got "hidden"
    212212PASS visibility: onto "hidden"
    213213PASS word-spacing (type: lengthPercentageOrCalc) has testAccumulation function
  • trunk/LayoutTests/platform/ios/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/addition-per-property-expected.txt

    r251536 r251573  
    204204FAIL transform: non-invertible matrices in mismatched transform lists assert_approx_equals: expected matrix(-2, 0, 0, -2, 250, 0) but got matrix(-2, 0, 0, -2, 200, 0): The value should be matrix(-2, 0, 0, -2, 250, 0) at 0ms but got matrix(-2, 0, 0, -2, 200, 0) expected 250 +/- 0.0001 but got 200
    205205PASS visibility (type: visibility) has testAddition function
    206 PASS visibility: onto "visible"
     206FAIL visibility: onto "visible" assert_equals: The value should be visible at 1000ms expected "visible" but got "hidden"
    207207PASS visibility: onto "hidden"
    208208PASS word-spacing (type: lengthPercentageOrCalc) has testAddition function
  • trunk/LayoutTests/platform/ios/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-expected.txt

    r251536 r251573  
    131131FAIL filter: interpolate different length of filter-function-list with function which lacuna value is 1 assert_equals: The value should be grayscale(0.5) brightness(0.5) contrast(0.5) opacity(0.5) saturate(0.5) at 500ms expected "grayscale(0.5) brightness(0.5) contrast(0.5) opacity(0.5) saturate(0.5)" but got "grayscale(1) brightness(0) contrast(0) opacity(0) saturate(0)"
    132132FAIL filter: interpolate different length of filter-function-list with function which lacuna value is 0 assert_equals: The value should be opacity(0.5) grayscale(0.5) invert(0.5) sepia(0.5) blur(5px) at 500ms expected "opacity(0.5) grayscale(0.5) invert(0.5) sepia(0.5) blur(5px)" but got "opacity(0) grayscale(1) invert(1) sepia(1) blur(10px)"
    133 FAIL filter: interpolate different length of filter-function-list with drop-shadow function assert_equals: The value should be blur(5px) drop-shadow(rgba(0, 0, 255, 0.4) 5px 5px 5px) at 500ms expected "blur(5px) drop-shadow(rgba(0, 0, 255, 0.4) 5px 5px 5px)" but got "blur(10px) drop-shadow(rgba(0, 0, 255, 0.8) 10px 10px 10px)"
     133FAIL filter: interpolate different length of filter-function-list with drop-shadow function assert_equals: The value should be blur(5px) drop-shadow(rgba(0, 0, 255, 0.4) 5px 5px 5px at 500ms expected "blur(5px) drop-shadow(rgba(0, 0, 255, 0.4) 5px 5px 5px" but got "blur(10px) drop-shadow(rgba(0, 0, 255, 0.8) 10px 10px 10px)"
    134134PASS filter: interpolate from none
    135135FAIL filter: url function (interpoalte as discrete) assert_equals: The value should be blur(0px) url("#f1") at 499ms expected "blur(0px) url(\"#f1\")" but got "blur(4.989999771118164px) url(\"#f1\")"
  • trunk/LayoutTests/platform/mac-sierra/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/accumulation-per-property-expected.txt

    r251536 r251573  
    211211PASS transform: non-invertible matrices in mismatched transform lists (invertible onto non-invertible)
    212212PASS visibility (type: visibility) has testAccumulation function
    213 PASS visibility: onto "visible"
     213FAIL visibility: onto "visible" assert_equals: The value should be visible at 1000ms expected "visible" but got "hidden"
    214214PASS visibility: onto "hidden"
    215215PASS word-spacing (type: lengthPercentageOrCalc) has testAccumulation function
  • trunk/LayoutTests/platform/mac-sierra/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/addition-per-property-expected.txt

    r251536 r251573  
    206206FAIL transform: non-invertible matrices in mismatched transform lists assert_approx_equals: expected matrix(-2,0,0,-2,250,0) but got matrix(-2, 0.00000000000000024492935982947064, -0.00000000000000024492935982947064, -2, 200, 0): The value should be matrix(-2,0,0,-2,250,0) at 0ms but got matrix(-2, 0.00000000000000024492935982947064, -0.00000000000000024492935982947064, -2, 200, 0) expected 250 +/- 0.0001 but got 200
    207207PASS visibility (type: visibility) has testAddition function
    208 PASS visibility: onto "visible"
     208FAIL visibility: onto "visible" assert_equals: The value should be visible at 1000ms expected "visible" but got "hidden"
    209209PASS visibility: onto "hidden"
    210210PASS word-spacing (type: lengthPercentageOrCalc) has testAddition function
  • trunk/LayoutTests/platform/mac-wk1/TestExpectations

    r251565 r251573  
    804804webkit.org/b/203176 [ Debug ] fast/scrolling/latching/scroll-select-bottom-test.html [ Pass Failure ]
    805805
    806 webkit.org/b/203304 imported/w3c/web-platform-tests/css/css-animations/animation-opacity-pause-and-set-time.html [ ImageOnlyFailure ]
    807 webkit.org/b/203304 imported/w3c/web-platform-tests/css/css-animations/animation-transform-pause-and-set-time.html [ ImageOnlyFailure ]
    808 webkit.org/b/203305 imported/w3c/web-platform-tests/css/css-transitions/properties-value-001.html [ Pass Failure ]
    809 webkit.org/b/203305 imported/w3c/web-platform-tests/css/css-transitions/properties-value-inherit-001.html [ Pass Failure ]
    810 webkit.org/b/203305 imported/w3c/web-platform-tests/css/css-transitions/properties-value-inherit-002.html [ Pass Failure ]
    811 webkit.org/b/203356 imported/w3c/web-platform-tests/css/css-transitions/properties-value-003.html [ Pass Timeout ]
    812 webkit.org/b/203357 imported/w3c/web-platform-tests/css/css-transitions/event-dispatch.tentative.html [ Pass Failure ]
  • trunk/LayoutTests/platform/win/TestExpectations

    r251550 r251573  
    40944094webkit.org/b/186183 http/tests/security/referrer-policy-header.html [ Skip ]
    40954095
     4096webkit.org/b/186522 imported/mozilla/css-animations/test_animation-finished.html [ Failure ]
     4097webkit.org/b/186522 imported/mozilla/css-animations/test_animation-id.html [ Failure ]
     4098webkit.org/b/186522 imported/mozilla/css-animations/test_animation-reverse.html [ Failure ]
     4099webkit.org/b/186522 imported/mozilla/css-animations/test_cssanimation-animationname.html [ Failure ]
     4100webkit.org/b/186522 imported/mozilla/css-animations/test_setting-effect.html [ Failure ]
     4101webkit.org/b/186522 imported/mozilla/css-transitions/test_animation-computed-timing.html [ Failure ]
     4102webkit.org/b/186522 imported/mozilla/css-transitions/test_animation-currenttime.html [ Failure ]
     4103webkit.org/b/186522 imported/mozilla/css-transitions/test_animation-finished.html [ Failure ]
     4104webkit.org/b/186522 imported/mozilla/css-transitions/test_animation-pausing.html [ Failure ]
     4105webkit.org/b/186522 imported/mozilla/css-transitions/test_animation-starttime.html [ Failure ]
     4106webkit.org/b/186522 imported/mozilla/css-transitions/test_csstransition-transitionproperty.html [ Failure ]
     4107webkit.org/b/186522 imported/mozilla/css-transitions/test_setting-effect.html [ Failure ]
     4108
    40964109webkit.org/b/186562 [ Release ] accessibility/accessibility-node-memory-management.html [ Failure ]
    40974110webkit.org/b/186562 fast/workers/worker-document-leak.html [ Failure ]
     
    41014114webkit.org/b/186562 workers/bomb.html [ Skip ]
    41024115
     4116webkit.org/b/186807 imported/mozilla/css-animations/test_animation-playstate.html [ Failure ]
     4117webkit.org/b/186807 imported/mozilla/css-animations/test_animation-ready.html [ Failure ]
     4118webkit.org/b/186807 imported/mozilla/css-animations/test_animation-starttime.html [ Failure ]
     4119webkit.org/b/186807 imported/mozilla/css-transitions/test_animation-cancel.html [ Failure ]
     4120webkit.org/b/186807 imported/mozilla/css-transitions/test_animation-ready.html [ Failure ]
    41034121webkit.org/b/186807 transitions/transition-to-from-auto.html [ Failure ]
    41044122webkit.org/b/186807 animations/transition-and-animation-3.html [ Skip ]
    41054123
     4124webkit.org/b/186868 imported/mozilla/css-animations/test_pseudoElement-get-animations.html [ Failure ]
     4125webkit.org/b/186868 imported/mozilla/css-transitions/test_element-get-animations.html [ Failure ]
     4126
     4127webkit.org/b/187041 imported/mozilla/css-animations/test_animation-pausing.html [ Failure ]
    41064128webkit.org/b/187041 webanimations/opacity-animation-yields-compositing-span.html [ Failure ]
    41074129
     
    43514373webkit.org/b/196869 animations/animation-multiple-callbacks-timestamp.html [ Failure ]
    43524374webkit.org/b/196869 legacy-animation-engine/animations/animation-multiple-callbacks-timestamp.html [ Failure ]
     4375webkit.org/b/196869 imported/mozilla/css-animations/test_animation-currenttime.html [ Failure ]
    43534376
    43544377webkit.org/b/194450 storage/indexeddb/modern/gc-closes-database-private.html [ Skip ]
  • trunk/LayoutTests/platform/wpe/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/accumulation-per-property-expected.txt

    r251536 r251573  
    210210FAIL transform: non-invertible matrices in mismatched transform lists (invertible onto non-invertible) assert_regexp_match: Actual value is not a matrix expected object "/^matrix(?:3d)*\((.+)\)/" but got "none"
    211211PASS visibility (type: visibility) has testAccumulation function
    212 PASS visibility: onto "visible"
     212FAIL visibility: onto "visible" assert_equals: The value should be visible at 1000ms expected "visible" but got "hidden"
    213213PASS visibility: onto "hidden"
    214214PASS word-spacing (type: lengthPercentageOrCalc) has testAccumulation function
  • trunk/LayoutTests/platform/wpe/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/addition-per-property-expected.txt

    r251536 r251573  
    215215FAIL transform: non-invertible matrices in mismatched transform lists assert_approx_equals: expected matrix(-2,0,0,-2,250,0) but got matrix(-2, 2.4492935982947064e-16, -2.4492935982947064e-16, -2, 200, 0): The value should be matrix(-2,0,0,-2,250,0) at 0ms but got matrix(-2, 2.4492935982947064e-16, -2.4492935982947064e-16, -2, 200, 0) expected 250 +/- 0.0001 but got 200
    216216PASS visibility (type: visibility) has testAddition function
    217 PASS visibility: onto "visible"
     217FAIL visibility: onto "visible" assert_equals: The value should be visible at 1000ms expected "visible" but got "hidden"
    218218PASS visibility: onto "hidden"
    219219PASS word-spacing (type: lengthPercentageOrCalc) has testAddition function
  • trunk/LayoutTests/tests-options.json

    r251536 r251573  
    468468        "slow"
    469469    ],
    470     "imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-effect.tentative.html": [
    471         "slow"
    472     ],
    473470    "imported/w3c/web-platform-tests/css/css-animations/animationevent-types.html": [
    474471        "slow"
    475472    ],
    476     "imported/w3c/web-platform-tests/css/css-animations/event-dispatch.tentative.html": [
    477         "slow"
    478     ],
    479473    "imported/w3c/web-platform-tests/css/css-color/color-resolving-hsl.html": [
    480474        "slow"
    481475    ],
    482     "imported/w3c/web-platform-tests/css/css-transitions/properties-value-001.html": [
    483         "slow"
    484     ],
    485     "imported/w3c/web-platform-tests/css/css-transitions/properties-value-003.html": [
    486         "slow"
    487     ],
    488     "imported/w3c/web-platform-tests/css/css-transitions/properties-value-implicit-001.html": [
    489         "slow"
    490     ],
    491     "imported/w3c/web-platform-tests/css/css-transitions/properties-value-inherit-001.html": [
    492         "slow"
    493     ],
    494     "imported/w3c/web-platform-tests/css/css-transitions/properties-value-inherit-002.html": [
    495         "slow"
    496     ],
    497     "imported/w3c/web-platform-tests/css/css-transitions/transitioncancel-001.html": [
    498         "slow"
    499     ],
    500476    "imported/w3c/web-platform-tests/css/cssom-view/matchMedia.xht": [
    501477        "slow"
     
    20412017    ],
    20422018    "imported/w3c/web-platform-tests/svg/animations/svglengthlist-animation-3.html": [
    2043         "slow"
    2044     ],
    2045     "imported/w3c/web-platform-tests/web-animations/timing-model/animations/updating-the-finished-state.html": [
    2046         "slow"
    2047     ],
    2048     "imported/w3c/web-platform-tests/web-animations/timing-model/timelines/update-and-send-events.html": [
    20492019        "slow"
    20502020    ],
Note: See TracChangeset for help on using the changeset viewer.