Bug 1241784 - Part 3: Test. r=birtles

testing/web-platform/tests/web-animations/animatable/animate.html

@@ -125,7 +125,21 @@ test(function(t) {
   assert_equals(anim.playState, 'pending');
 }, 'Element.animate() calls play on the Animation');
 
-// TODO: Test the same on CSSPseudoElement
+// Tests on CSSPseudoElement
+
+test(function(t) {
+  var pseudoTarget = createPseudo(t, 'before');
+  var anim = pseudoTarget.animate({ opacity: [ 0, 1 ] }, 2000);
+  assert_class_string(anim, 'Animation', 'The returned object is an Animation');
+}, 'CSSPseudoElement.animate() creates an Animation object');
+
+test(function(t) {
+  var pseudoTarget = createPseudo(t, 'before');
+  var anim = pseudoTarget.animate({ opacity: [ 0, 1 ] }, 2000);
+  assert_equals(anim.effect.target, pseudoTarget,
+                'The returned Animation targets to the correct object');
+}, 'CSSPseudoElement.animate() creates an Animation object targeting ' +
+   'to the correct CSSPseudoElement object');
 
 </script>
 </body>

testing/web-platform/tests/web-animations/testcommon.js

@@ -47,6 +47,50 @@ function createDiv(test, doc) {
   return div;
 }
 
+// Creates a style element with the specified rules, appends it to the document
+// head and removes the created element during test cleanup.
+// |rules| is an object. For example:
+// { '@keyframes anim': '' ,
+//   '.className': 'animation: anim 100s;' };
+// or
+// { '.className1::before': 'content: ""; width: 0px; transition: all 10s;',
+//   '.className2::before': 'width: 100px;' };
+// The object property name could be a keyframes name, or a selector.
+// The object property value is declarations which are property:value pairs
+// split by a space.
+function createStyle(test, rules, doc) {
+  if (!doc) {
+    doc = document;
+  }
+  var extraStyle = doc.createElement('style');
+  doc.head.appendChild(extraStyle);
+  if (rules) {
+    var sheet = extraStyle.sheet;
+    for (var selector in rules) {
+      sheet.insertRule(selector + '{' + rules[selector] + '}',
+                       sheet.cssRules.length);
+    }
+  }
+  test.add_cleanup(function() {
+    extraStyle.remove();
+  });
+}
+
+// Create a pseudo element
+function createPseudo(test, type) {
+  createStyle(test, { '@keyframes anim': '',
+                      ['.pseudo::' + type]: 'animation: anim 10s;' });
+  var div = createDiv(test);
+  div.classList.add('pseudo');
+  var anims = document.getAnimations();
+  assert_true(anims.length >= 1);
+  var anim = anims[anims.length - 1];
+  assert_equals(anim.effect.target.parentElement, div);
+  assert_equals(anim.effect.target.type, '::' + type);
+  anim.cancel();
+  return anim.effect.target;
+}
+
 // Removes element
 function removeElement(element) {
   element.parentNode.removeChild(element);