layout/style/test/test_keyframes_vendor_prefix.html

   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>