CSSKeyframesRule.html (5635B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSSOM - CSSKeyframesRule interface</title> 6 <link rel="help" href="https://drafts.csswg.org/css-animations/#interface-csskeyframesrule"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 @keyframes foo { 11 0% { top: 0px; } 12 100% { top: 200px; } 13 } 14 @keyframes empty {} 15 @keyframes indexed-access { 16 0% { top: 0px; } 17 100% { top: 200px; } 18 } 19 </style> 20 21 <script> 22 test(function () { 23 var keyframe = document.styleSheets[0].cssRules[0]; 24 assert_equals(keyframe.name, "foo", "CSSKeyframesRule name attribute"); 25 assert_equals(keyframe.cssRules.length, 2, "CSSKeyframesRule cssRule length attribute"); 26 assert_equals(keyframe.cssRules[0].cssText, "0% { top: 0px; }", "CSSKeyframesRule cssRule cssText attribute"); 27 assert_equals(keyframe.cssRules[1].cssText, "100% { top: 200px; }", "CSSKeyframesRule cssRule cssText attribute"); 28 29 keyframe.appendRule("50% { top: 100px; }"); 30 assert_equals(keyframe.cssRules.length, 3, "CSSKeyframesRule cssRule length attribute after appendRule function"); 31 assert_equals(keyframe.cssRules[0].cssText, "0% { top: 0px; }", "CSSKeyframesRule cssRule cssText attribute after appendRule function"); 32 assert_equals(keyframe.cssRules[1].cssText, "100% { top: 200px; }", "CSSKeyframesRule cssRule cssText attribute after appendRule function"); 33 assert_equals(keyframe.cssRules[2].cssText, "50% { top: 100px; }", "CSSKeyframesRule cssRule cssText attribute after appendRule function"); 34 35 keyframe.appendRule("0% { top: 50px; }"); 36 assert_equals(keyframe.cssRules.length, 4, "CSSKeyframesRule cssRule length attribute after appendRule function"); 37 assert_equals(keyframe.cssRules[0].cssText, "0% { top: 0px; }", "CSSKeyframesRule cssRule cssText attribute after appendRule function"); 38 assert_equals(keyframe.cssRules[1].cssText, "100% { top: 200px; }", "CSSKeyframesRule cssRule cssText attribute after appendRule function"); 39 assert_equals(keyframe.cssRules[2].cssText, "50% { top: 100px; }", "CSSKeyframesRule cssRule cssText attribute after appendRule function"); 40 assert_equals(keyframe.cssRules[3].cssText, "0% { top: 50px; }", "CSSKeyframesRule cssRule cssText attribute after appendRule function"); 41 42 var find1 = keyframe.findRule("50%"); 43 assert_equals(find1.cssText, "50% { top: 100px; }", "CSSKeyframesRule findRule function"); 44 var find2 = keyframe.findRule("0%"); 45 assert_equals(find2.cssText, "0% { top: 50px; }", "CSSKeyframesRule findRule function"); 46 var find3 = keyframe.findRule("70%"); 47 assert_equals(find3, null, "CSSKeyframesRule findRule function"); 48 49 keyframe.deleteRule("100%"); 50 assert_equals(keyframe.cssRules.length, 3, "CSSKeyframesRule cssRule length attribute after deleteRule function"); 51 assert_equals(keyframe.cssRules[0].cssText, "0% { top: 0px; }", "CSSKeyframesRule cssRule cssText attribute after deleteRule function"); 52 assert_equals(keyframe.cssRules[1].cssText, "50% { top: 100px; }", "CSSKeyframesRule cssRule cssText attribute after deleteRule function"); 53 assert_equals(keyframe.cssRules[2].cssText, "0% { top: 50px; }", "CSSKeyframesRule cssRule cssText attribute after deleteRule function"); 54 assert_equals(keyframe.cssRules[3], undefined, "CSSKeyframesRule cssRule cssText attribute after deleteRule function"); 55 56 keyframe.deleteRule("80%"); 57 assert_equals(keyframe.cssRules.length, 3, "CSSKeyframesRule cssRule length attribute after deleteRule function"); 58 assert_equals(keyframe.cssRules[0].cssText, "0% { top: 0px; }", "CSSKeyframesRule cssRule cssText attribute after deleteRule function"); 59 assert_equals(keyframe.cssRules[1].cssText, "50% { top: 100px; }", "CSSKeyframesRule cssRule cssText attribute after deleteRule function"); 60 assert_equals(keyframe.cssRules[2].cssText, "0% { top: 50px; }", "CSSKeyframesRule cssRule cssText attribute after deleteRule function"); 61 assert_equals(keyframe.cssRules[3], undefined, "CSSKeyframesRule cssRule cssText attribute after deleteRule function"); 62 63 var empty = document.styleSheets[0].cssRules[1]; 64 empty.name = "bar"; 65 assert_equals(empty.name, "bar", "CSSKeyframesRule name setter"); 66 assert_equals(empty.cssText.replace(/\s/g, ""), "@keyframesbar{}", "CSSKeyframesRule cssText attribute"); 67 68 empty.name = "initial"; 69 assert_equals(empty.name, "initial", "CSSKeyframesRule name setter, CSS-wide keyword"); 70 assert_equals(empty.cssText.replace(/\s/g, ""), "@keyframes\"initial\"{}", "CSSKeyframesRule cssText attribute with CSS-wide keyword name"); 71 72 empty.name = "none"; 73 assert_equals(empty.name, "none", "CSSKeyframesRule name setter, 'none'"); 74 assert_equals(empty.cssText.replace(/\s/g, ""), "@keyframes\"none\"{}", "CSSKeyframesRule cssText attribute with 'none' name"); 75 }, 'name, cssRules, appendRule, findRule, deleteRule'); 76 77 test(function () { 78 const keyframes = document.styleSheets[0].cssRules[2]; 79 assert_equals(keyframes[0].cssText, "0% { top: 0px; }", "CSSKeyframesRule indexed getter [0]"); 80 assert_equals(keyframes[1].cssText, "100% { top: 200px; }", "CSSKeyframesRule indexed getter [1]"); 81 assert_equals(keyframes.length, 2, "CSSKeyframesRule.length"); 82 }, 'indexed getter, length'); 83 </script> 84 </head> 85 </html>