computed-style-animation-parsing.html (3210B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Animations: parsing computedStyle.animation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-animations/#animation"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <div id="test1"></div> 8 <div id="test2"></div> 9 <script> 10 function testComputedStyle(computedStyle1, computedStyle2, name) { 11 assert_equals(computedStyle1.animationName, name, "computedStyle1.animationName"); 12 assert_equals(computedStyle2.animationName, name, "computedStyle2.animationName"); 13 assert_equals(computedStyle1.animation, computedStyle2.animation, 14 "computedStyle1 and computedStyle2 should have the same animation"); 15 } 16 17 function testAnimation(input, name) { 18 var style1 = test1.style; 19 var style2 = test2.style; 20 var computedStyle1 = getComputedStyle(test1); 21 var computedStyle2 = getComputedStyle(test2); 22 23 style1.animation = input; 24 style2.animation = style1.animation; 25 testComputedStyle(computedStyle1, computedStyle2, name); 26 style2.animation = computedStyle1.animation; 27 testComputedStyle(computedStyle1, computedStyle2, name); 28 } 29 30 test(() => { 31 // We are duplicating the logic of testAnimation because the animationName of 32 // the getComputedStyle is "none" when there is no animation. 33 var style1 = test1.style; 34 var style2 = test2.style; 35 var computedStyle1 = getComputedStyle(test1); 36 var computedStyle2 = getComputedStyle(test2); 37 38 style1.animation = ""; 39 style2.animation = style1.animation; 40 testComputedStyle(computedStyle1, computedStyle2, "none"); 41 style2.animation = computedStyle1.animation; 42 assert_equals(computedStyle2.animationName, "none"); 43 }, "Test animation name being empty."); 44 45 test(() => { 46 testAnimation("myShorthandAnim", "myShorthandAnim"); 47 }, "Test a non-conflicting animation name."); 48 49 test(() => { 50 testAnimation("ease", "none"); 51 testAnimation("ease-in", "none"); 52 testAnimation("ease-in-out", "none"); 53 testAnimation("ease-out", "none"); 54 testAnimation("linear", "none"); 55 testAnimation("step-end", "none"); 56 testAnimation("step-start", "none"); 57 testAnimation("ease ease", "ease"); 58 testAnimation("ease linear", "linear"); 59 }, "Test an animation name that is the same as a possible animation timing-function."); 60 61 test(() => { 62 testAnimation("infinite", "none"); 63 testAnimation("infinite infinite", "infinite"); 64 }, "Test an animation name that is the same as a possible animation iteration-count."); 65 66 test(() => { 67 testAnimation("none", "none"); 68 testAnimation("forwards", "none"); 69 testAnimation("none forwards", "forwards"); 70 }, "Test an animation name that is the same as a possible animation fill-mode."); 71 72 test(() => { 73 testAnimation("normal", "none"); 74 testAnimation("reverse", "none"); 75 testAnimation("normal normal", "normal"); 76 testAnimation("normal reverse", "reverse"); 77 }, "Test an animation name that is the same as a possible animation direction."); 78 79 test(() => { 80 testAnimation("running", "none"); 81 testAnimation("paused", "none"); 82 testAnimation("running running", "running"); 83 testAnimation("running paused", "paused"); 84 }, "Test an animation name that is the same as a possible running state."); 85 </script>