1 files changed, 167 insertions, 0 deletions
diff --git a/layout/style/test/test_keyframes_vendor_prefix.html b/layout/style/test/test_keyframes_vendor_prefix.html
new file mode 100644
index 0000000000..4463bd259a
--- /dev/null
+++ b/layout/style/test/test_keyframes_vendor_prefix.html
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>
+Test for interaction between prefixed and non-prefixed @keyframes rules with
+the same name
+</title>
+<script src='/resources/testharness.js'></script>
+<script src='/resources/testharnessreport.js'></script>
+<div id='log'></div>
+<script>
+/**
+ * Appends a style element to the document head.
+ *
+ * @param t  The testharness.js Test object. If provided, this will be used
+ *           to register a cleanup callback to remove the style element
+ *           when the test finishes.
+ *
+ * @param rules  A dictionary object with selector names and rules to set on
+ *               the style sheet.
+ */
+function addStyle(t, rules) {
+  var extraStyle = document.createElement('style');
+  document.head.appendChild(extraStyle);
+  if (rules) {
+    var sheet = extraStyle.sheet;
+    for (var selector in rules) {
+      sheet.insertRule(selector + '{' + rules[selector] + '}',
+                       sheet.cssRules.length);
+    }
+  }
+
+  if (t && typeof t.add_cleanup === 'function') {
+    t.add_cleanup(function() {
+      extraStyle.remove();
+    });
+  }
+}
+
+/**
+ * Appends a div to the document body.
+ *
+ * @param t  The testharness.js Test object. If provided, this will be used
+ *           to register a cleanup callback to remove the div when the test
+ *           finishes.
+ *
+ * @param attrs  A dictionary object with attribute names and values to set on
+ *               the div.
+ */
+function addDiv(t, attrs) {
+  var div = document.createElement('div');
+  if (attrs) {
+    for (var attrName in attrs) {
+      div.setAttribute(attrName, attrs[attrName]);
+    }
+  }
+  document.body.appendChild(div);
+  if (t && typeof t.add_cleanup === 'function') {
+    t.add_cleanup(function() {
+      div.remove();
+    });
+  }
+  return div;
+}
+
+test(function(t) {
+  addStyle(t,
+    { '@-webkit-keyframes anim': 'from,to { color: rgb(0, 255, 0); }' });
+
+  var div = addDiv(t, { style: 'animation: anim 100s' });
+
+  assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
+}, '-webkit- prefix keyframes');
+
+test(function(t) {
+  addStyle(t,
+    { '@-moz-keyframes anim': 'from,to { color: rgb(0, 255, 0); }' });
+
+  var div = addDiv(t, { style: 'animation: anim 100s' });
+
+  assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
+}, '-moz- prefix keyframes');
+
+test(function(t) {
+  addStyle(t,
+    { '@-WEBKIT-keyframes anim': 'from,to { color: rgb(0, 255, 0); }' });
+
+  var div = addDiv(t, { style: 'animation: anim 100s' });
+
+  assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
+}, '-WEBKIT- prefix keyframes');
+
+test(function(t) {
+  addStyle(t,
+    { '@-MOZ-keyframes anim': 'from,to { color: rgb(0, 255, 0); }' });
+
+  var div = addDiv(t, { style: 'animation: anim 100s' });
+
+  assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
+}, '-MOZ- prefix keyframes');
+
+test(function(t) {
+  addStyle(t,
+    { '@-webkit-KEYFRAMES anim': 'from,to { color: rgb(0, 255, 0); }' });
+
+  var div = addDiv(t, { style: 'animation: anim 100s' });
+
+  assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
+}, '-webkit- prefix KEYFRAMES');
+
+test(function(t) {
+  addStyle(t,
+    { '@keyframes anim':         'from,to { color: rgb(0, 255, 0); }',
+      '@-webkit-keyframes anim': 'from,to { color: rgb(255, 0, 0); }' });
+
+  var div = addDiv(t, { style: 'animation: anim 100s' });
+
+  assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
+}, '-webkit-keyframes should not override earlier non-prefix keyframes');
+
+test(function(t) {
+  addStyle(t,
+    { '@keyframes anim':      'from,to { color: rgb(0, 255, 0); }',
+      '@-moz-keyframes anim': 'from,to { color: rgb(255, 0, 0); }' });
+
+  var div = addDiv(t, { style: 'animation: anim 100s' });
+
+  assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
+}, '-moz-keyframes should not override earlier non-prefix keyframes');
+
+test(function(t) {
+  addStyle(t,
+    { '@-moz-keyframes anim': 'from,to { color: rgb(255, 0, 0); }',
+      '@keyframes anim':      'from,to { color: rgb(0, 255, 0); }' });
+
+  var div = addDiv(t, { style: 'animation: anim 100s' });
+
+  assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
+}, 'non-prefix keyframes should override earlier -moz-keyframes');
+
+test(function(t) {
+  addStyle(t,
+    { '@-webkit-keyframes anim': 'from,to { color: rgb(255, 0, 0); }',
+      '@keyframes anim':         'from,to { color: rgb(0, 255, 0); }' });
+
+  var div = addDiv(t, { style: 'animation: anim 100s' });
+
+  assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
+}, 'non-prefix keyframes should override earlier -webkit-keyframes');
+
+test(function(t) {
+  addStyle(t,
+    { '@-webkit-keyframes anim': 'from,to { color: rgb(255, 0, 0); }',
+      '@-moz-keyframes anim':    'from,to { color: rgb(0, 255, 0); }' });
+
+  var div = addDiv(t, { style: 'animation: anim 100s' });
+
+  assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
+
+  addStyle(t,
+    { '@-moz-keyframes anim2':    'from,to { color: rgb(255, 0, 0); }',
+      '@-webkit-keyframes anim2': 'from,to { color: rgb(0, 255, 0); }' });
+
+  var div = addDiv(t, { style: 'animation: anim2 100s' });
+
+  assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
+}, 'last prefixed keyframes should override earlier prefixed keyframes');
+</script>