test_keyframes_vendor_prefix.html (5236B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title> 4 Test for interaction between prefixed and non-prefixed @keyframes rules with 5 the same name 6 </title> 7 <script src='/resources/testharness.js'></script> 8 <script src='/resources/testharnessreport.js'></script> 9 <div id='log'></div> 10 <script> 11 /** 12 * Appends a style element to the document head. 13 * 14 * @param t The testharness.js Test object. If provided, this will be used 15 * to register a cleanup callback to remove the style element 16 * when the test finishes. 17 * 18 * @param rules A dictionary object with selector names and rules to set on 19 * the style sheet. 20 */ 21 function addStyle(t, rules) { 22 var extraStyle = document.createElement('style'); 23 document.head.appendChild(extraStyle); 24 if (rules) { 25 var sheet = extraStyle.sheet; 26 for (var selector in rules) { 27 sheet.insertRule(selector + '{' + rules[selector] + '}', 28 sheet.cssRules.length); 29 } 30 } 31 32 if (t && typeof t.add_cleanup === 'function') { 33 t.add_cleanup(function() { 34 extraStyle.remove(); 35 }); 36 } 37 } 38 39 /** 40 * Appends a div to the document body. 41 * 42 * @param t The testharness.js Test object. If provided, this will be used 43 * to register a cleanup callback to remove the div when the test 44 * finishes. 45 * 46 * @param attrs A dictionary object with attribute names and values to set on 47 * the div. 48 */ 49 function addDiv(t, attrs) { 50 var div = document.createElement('div'); 51 if (attrs) { 52 for (var attrName in attrs) { 53 div.setAttribute(attrName, attrs[attrName]); 54 } 55 } 56 document.body.appendChild(div); 57 if (t && typeof t.add_cleanup === 'function') { 58 t.add_cleanup(function() { 59 div.remove(); 60 }); 61 } 62 return div; 63 } 64 65 test(function(t) { 66 addStyle(t, 67 { '@-webkit-keyframes anim': 'from,to { color: rgb(0, 255, 0); }' }); 68 69 var div = addDiv(t, { style: 'animation: anim 100s' }); 70 71 assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)'); 72 }, '-webkit- prefix keyframes'); 73 74 test(function(t) { 75 addStyle(t, 76 { '@-moz-keyframes anim': 'from,to { color: rgb(0, 255, 0); }' }); 77 78 var div = addDiv(t, { style: 'animation: anim 100s' }); 79 80 assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)'); 81 }, '-moz- prefix keyframes'); 82 83 test(function(t) { 84 addStyle(t, 85 { '@-WEBKIT-keyframes anim': 'from,to { color: rgb(0, 255, 0); }' }); 86 87 var div = addDiv(t, { style: 'animation: anim 100s' }); 88 89 assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)'); 90 }, '-WEBKIT- prefix keyframes'); 91 92 test(function(t) { 93 addStyle(t, 94 { '@-MOZ-keyframes anim': 'from,to { color: rgb(0, 255, 0); }' }); 95 96 var div = addDiv(t, { style: 'animation: anim 100s' }); 97 98 assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)'); 99 }, '-MOZ- prefix keyframes'); 100 101 test(function(t) { 102 addStyle(t, 103 { '@-webkit-KEYFRAMES anim': 'from,to { color: rgb(0, 255, 0); }' }); 104 105 var div = addDiv(t, { style: 'animation: anim 100s' }); 106 107 assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)'); 108 }, '-webkit- prefix KEYFRAMES'); 109 110 test(function(t) { 111 addStyle(t, 112 { '@keyframes anim': 'from,to { color: rgb(0, 255, 0); }', 113 '@-webkit-keyframes anim': 'from,to { color: rgb(255, 0, 0); }' }); 114 115 var div = addDiv(t, { style: 'animation: anim 100s' }); 116 117 assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)'); 118 }, '-webkit-keyframes should not override earlier non-prefix keyframes'); 119 120 test(function(t) { 121 addStyle(t, 122 { '@keyframes anim': 'from,to { color: rgb(0, 255, 0); }', 123 '@-moz-keyframes anim': 'from,to { color: rgb(255, 0, 0); }' }); 124 125 var div = addDiv(t, { style: 'animation: anim 100s' }); 126 127 assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)'); 128 }, '-moz-keyframes should not override earlier non-prefix keyframes'); 129 130 test(function(t) { 131 addStyle(t, 132 { '@-moz-keyframes anim': 'from,to { color: rgb(255, 0, 0); }', 133 '@keyframes anim': 'from,to { color: rgb(0, 255, 0); }' }); 134 135 var div = addDiv(t, { style: 'animation: anim 100s' }); 136 137 assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)'); 138 }, 'non-prefix keyframes should override earlier -moz-keyframes'); 139 140 test(function(t) { 141 addStyle(t, 142 { '@-webkit-keyframes anim': 'from,to { color: rgb(255, 0, 0); }', 143 '@keyframes anim': 'from,to { color: rgb(0, 255, 0); }' }); 144 145 var div = addDiv(t, { style: 'animation: anim 100s' }); 146 147 assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)'); 148 }, 'non-prefix keyframes should override earlier -webkit-keyframes'); 149 150 test(function(t) { 151 addStyle(t, 152 { '@-webkit-keyframes anim': 'from,to { color: rgb(255, 0, 0); }', 153 '@-moz-keyframes anim': 'from,to { color: rgb(0, 255, 0); }' }); 154 155 var div = addDiv(t, { style: 'animation: anim 100s' }); 156 157 assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)'); 158 159 addStyle(t, 160 { '@-moz-keyframes anim2': 'from,to { color: rgb(255, 0, 0); }', 161 '@-webkit-keyframes anim2': 'from,to { color: rgb(0, 255, 0); }' }); 162 163 var div = addDiv(t, { style: 'animation: anim2 100s' }); 164 165 assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)'); 166 }, 'last prefixed keyframes should override earlier prefixed keyframes'); 167 </script>