Add additional WPT tests for new cases of KeyframeEffect.target and .pseudoElement

Goes with spec CL https://github.com/w3c/csswg-drafts/pull/4437 (merged)
Follows up on https://crrev.com/c/1894477

Change-Id: I9f50739cb4dac68d3c9002c0f3ed509f6b379380
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1949405Reviewed-by: Stephen McGruer <smcgruer@chromium.org>
Reviewed-by: Kevin Ellis <kevers@chromium.org>
Commit-Queue: George Steel <gtsteel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#721752}

third_party/blink/web_tests/external/wpt/web-animations/interfaces/Animatable/animate-expected.txt

 This is a testharness.js-based test.
-Found 140 tests; 137 PASS, 3 FAIL, 0 TIMEOUT, 0 NOTRUN.
+Found 142 tests; 138 PASS, 4 FAIL, 0 TIMEOUT, 0 NOTRUN.
 PASS Element.animate() creates an Animation object
 PASS Element.animate() creates an Animation object in the relevant realm of the target element
 PASS Element.animate() creates an Animation object with a KeyframeEffect
@@ -135,10 +135,12 @@ PASS Element.animate() correctly sets the Animation's timeline when triggered on
 PASS Element.animate() calls play on the Animation
 PASS Element.animate() does NOT trigger a style change event
 PASS animate() with pseudoElement parameter creates an Animation object
+PASS animate() with pseudoElement parameter without content creates an Animation object
 PASS animate() with pseudoElement parameter  creates an Animation object for ::marker
 PASS animate() with pseudoElement parameter  creates an Animation object for ::first-line
-FAIL animate() with pseudoElement an Animation object targeting to the correct pseudo-element assert_equals: The returned Animation targets to the correct selector expected (string) "::before" but got (undefined) undefined
-FAIL animate() with pseudoElement an Animation object targeting to the correct pseudo-element for ::marker assert_equals: The returned Animation targets to the correct selector expected (string) "::marker" but got (undefined) undefined
-FAIL animate() with pseudoElement an Animation object targeting to the correct pseudo-element for ::first-line assert_equals: The returned Animation targets to the correct selector expected (string) "::first-line" but got (undefined) undefined
+FAIL animate() with pseudoElement an Animation object targeting the correct pseudo-element assert_equals: The returned Animation targets the correct selector expected (string) "::before" but got (undefined) undefined
+FAIL animate() with pseudoElement without content creates an Animation object targeting the correct pseudo-element assert_equals: The returned Animation targets the correct selector expected (string) "::before" but got (undefined) undefined
+FAIL animate() with pseudoElement an Animation object targeting the correct pseudo-element for ::marker assert_equals: The returned Animation targets the correct selector expected (string) "::marker" but got (undefined) undefined
+FAIL animate() with pseudoElement an Animation object targeting the correct pseudo-element for ::first-line assert_equals: The returned Animation targets the correct selector expected (string) "::first-line" but got (undefined) undefined
 Harness: the test ran to completion.
 

third_party/blink/web_tests/external/wpt/web-animations/interfaces/Animatable/animate.html

@@ -241,18 +241,28 @@ promise_test(async t => {
 }, 'Element.animate() does NOT trigger a style change event');
 
 // Tests on pseudo-elements
+// Some tests occur twice (on pseudo-elements with and without content)
+// in order to test both code paths for tree-abiding pseudo-elements in blink.
 
 test(t => {
   const div = createDiv(t);
   div.classList.add('pseudo');
+  getComputedStyle(div,"::before").content; // Sync style
   const anim = div.animate(null, {pseudoElement: '::before'});
   assert_class_string(anim, 'Animation', 'The returned object is an Animation');
 }, 'animate() with pseudoElement parameter creates an Animation object');
 
+test(t => {
+  const div = createDiv(t);
+  const anim = div.animate(null, {pseudoElement: '::before'});
+  assert_class_string(anim, 'Animation', 'The returned object is an Animation');
+}, 'animate() with pseudoElement parameter without content creates an Animation object');
+
 test(t => {
   const div = createDiv(t);
   div.classList.add('pseudo');
   div.style.display = 'list-item';
+  getComputedStyle(div,"::marker").content; // Sync style
   const anim = div.animate(null, {pseudoElement: '::marker'});
   assert_class_string(anim, 'Animation', 'The returned object is an Animation for ::marker');
 }, 'animate() with pseudoElement parameter  creates an Animation object for ::marker');
@@ -268,31 +278,45 @@ test(t => {
 test(t => {
   const div = createDiv(t);
   div.classList.add('pseudo');
+  getComputedStyle(div,"::before").content; // Sync style
   const anim = div.animate(null, {pseudoElement: '::before'});
+  assert_equals(anim.effect.target, div, 'The returned element has the correct target element');
   assert_equals(anim.effect.pseudoElement, '::before',
-                'The returned Animation targets to the correct selector');
+                'The returned Animation targets the correct selector');
 }, 'animate() with pseudoElement an Animation object targeting ' +
-   'to the correct pseudo-element');
+   'the correct pseudo-element');
+
+test(t => {
+  const div = createDiv(t);
+  const anim = div.animate(null, {pseudoElement: '::before'});
+  assert_equals(anim.effect.target, div, 'The returned element has the correct target element');
+  assert_equals(anim.effect.pseudoElement, '::before',
+                'The returned Animation targets the correct selector');
+}, 'animate() with pseudoElement without content creates an Animation object targeting ' +
+   'the correct pseudo-element');
 
 test(t => {
   const div = createDiv(t);
   div.classList.add('pseudo');
   div.style.display = 'list-item';
+  getComputedStyle(div,"::marker").content; // Sync style
   const anim = div.animate(null, {pseudoElement: '::marker'});
+  assert_equals(anim.effect.target, div, 'The returned element has the correct target element');
   assert_equals(anim.effect.pseudoElement, '::marker',
-                'The returned Animation targets to the correct selector');
+                'The returned Animation targets the correct selector');
 }, 'animate() with pseudoElement an Animation object targeting ' +
-   'to the correct pseudo-element for ::marker');
+   'the correct pseudo-element for ::marker');
 
 test(t => {
   const div = createDiv(t);
   div.classList.add('pseudo');
   div.textContent = 'foo';
   const anim = div.animate(null, {pseudoElement: '::first-line'});
+  assert_equals(anim.effect.target, div, 'The returned element has the correct target element');
   assert_equals(anim.effect.pseudoElement, '::first-line',
-                'The returned Animation targets to the correct selector');
+                'The returned Animation targets the correct selector');
 }, 'animate() with pseudoElement an Animation object targeting ' +
-   'to the correct pseudo-element for ::first-line');
+   'the correct pseudo-element for ::first-line');
 
 </script>
 </body>

third_party/blink/web_tests/external/wpt/web-animations/interfaces/KeyframeEffect/target-expected.txt

+This is a testharness.js-based test.
+PASS Test setting target before constructing the associated animation
+PASS Test setting target from null to a valid target
+PASS Test setting target from a valid target to null
+PASS Test setting target from a valid target to another target
+PASS Target element can be set to a foreign element
+FAIL Change target from null to an existing pseudoElement setting target first. assert_equals: Value at 50% progress after setting new target expected "50px" but got "10px"
+FAIL Change target from null to an existing pseudoElement setting pseudoElement first. assert_equals: Value at 50% progress after setting new target expected "50px" but got "10px"
+PASS Change target from an existing pseudo-element to the originating element.
+FAIL Change target from an existing to a different existing pseudo-element by setting target. assert_equals: Animation targets specified pseudo-element (pseudo-selector) expected (string) "::before" but got (undefined) undefined
+FAIL Change target from an existing to a different existing pseudo-element by setting pseudoElement. assert_equals: Value of 2nd element (currently targeted) after changing the effect target expected "50px" but got "20px"
+FAIL Change target from a non-existing to a different existing pseudo-element by setting target. assert_equals: Animation targets specified pseudo-element (pseudo-selector) expected (string) "::before" but got (undefined) undefined
+FAIL Change target from a non-existing to a different existing pseudo-element by setting pseudoElement. assert_equals: Value of 2nd element (currently targeted) after changing the effect target expected "50px" but got "20px"
+FAIL Change target from null to a non-existing pseudoElement setting target first. assert_equals: Value at 50% progress after setting new target expected "50px" but got "10px"
+FAIL Change target from null to a non-existing pseudoElement setting pseudoElement first. assert_equals: Value at 50% progress after setting new target expected "50px" but got "10px"
+PASS Change target from a non-existing pseudo-element to the originating element.
+FAIL Change target from an existing to a different non-existing pseudo-element by setting target. assert_equals: Animation targets specified pseudo-element (pseudo-selector) expected (string) "::before" but got (undefined) undefined
+FAIL Change target from an existing to a different non-existing pseudo-element by setting pseudoElement. assert_equals: Value of 2nd element (currently targeted) after changing the effect target expected "50px" but got "20px"
+FAIL Change target from a non-existing to a different non-existing pseudo-element by setting target. assert_equals: Animation targets specified pseudo-element (pseudo-selector) expected (string) "::before" but got (undefined) undefined
+FAIL Change target from a non-existing to a different non-existing pseudo-element by setting pseudoElement. assert_equals: Value of 2nd element (currently targeted) after changing the effect target expected "50px" but got "20px"
+Harness: the test ran to completion.
+

third_party/blink/web_tests/external/wpt/web-animations/interfaces/KeyframeEffect/target.html

 <!DOCTYPE html>
 <meta charset=utf-8>
-<title>KeyframeEffect.target</title>
+<title>KeyframeEffect.target and .pseudoElement</title>
 <link rel="help"
   href="https://drafts.csswg.org/web-animations/#dom-keyframeeffect-target">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
+<style>
+  .before::before {content: 'foo'; display: inline-block;}
+  .after::after {content: 'bar'; display: inline-block;}
+  .pseudoa::before, .pseudoc::before {margin-left: 10px;}
+  .pseudob::before, .pseudoc::after {margin-left: 20px;}
+</style>
 <body>
 <div id="log"></div>
 <script>
@@ -105,5 +111,151 @@ promise_test(async t => {
   await waitForNextFrame();
 }, 'Target element can be set to a foreign element');
 
+// Pseudo-element tests
+// (testing target and pseudoElement in these cases)
+// Since blink uses separate code paths for handling pseudo-element styles
+// depending on whether content is set (putting the pseudo-element in the layout),
+// we run tests on both cases.
+for (const hasContent of [true, false]){
+  test(t => {
+    const d = createDiv(t);
+    d.classList.add('pseudoa');
+    if (hasContent) {
+      d.classList.add('before');
+      getComputedStyle(d,"::before").content; // Sync style
+    }
+
+    const effect = new KeyframeEffect(null, gKeyFrames, 100 * MS_PER_SEC);
+    const anim = new Animation(effect, document.timeline);
+    anim.play();
+
+    anim.currentTime = 50 * MS_PER_SEC;
+    assert_equals(getComputedStyle(d, '::before').marginLeft, '10px',
+                  'Value at 50% progress before setting new target');
+    effect.target = d;
+    effect.pseudoElement = '::before';
+
+    assert_equals(effect.target, d, "Target element is set correctly");
+    assert_equals(effect.pseudoElement, '::before', "Target pseudo-element set correctly");
+    assert_equals(getComputedStyle(d, '::before').marginLeft, '50px',
+                  'Value at 50% progress after setting new target');
+  }, "Change target from null to " + (hasContent ? "an existing" : "a non-existing") +
+     " pseudoElement setting target first.");
+
+  test(t => {
+    const d = createDiv(t);
+    d.classList.add('pseudoa');
+    if (hasContent) {
+      d.classList.add('before');
+      getComputedStyle(d,"::before").content; // Sync style
+    }
+
+    const effect = new KeyframeEffect(null, gKeyFrames, 100 * MS_PER_SEC);
+    const anim = new Animation(effect, document.timeline);
+    anim.play();
+
+    anim.currentTime = 50 * MS_PER_SEC;
+    assert_equals(getComputedStyle(d, '::before').marginLeft, '10px',
+                  'Value at 50% progress before setting new target');
+    effect.pseudoElement = '::before';
+    effect.target = d;
+
+    assert_equals(effect.target, d, "Target element is set correctly");
+    assert_equals(effect.pseudoElement, '::before', "Target pseudo-element set correctly");
+    assert_equals(getComputedStyle(d, '::before').marginLeft, '50px',
+                  'Value at 50% progress after setting new target');
+  }, "Change target from null to " + (hasContent ? "an existing" : "a non-existing") +
+     " pseudoElement setting pseudoElement first.");
+
+  test(t => {
+    const d = createDiv(t);
+    d.classList.add('pseudoa');
+    if (hasContent) {
+      d.classList.add('before');
+      getComputedStyle(d,"::before").content; // Sync style
+    }
+    const anim = d.animate(gKeyFrames, {duration: 100 * MS_PER_SEC, pseudoElement: '::before'});
+
+    anim.currentTime = 50 * MS_PER_SEC;
+    anim.effect.pseudoElement = null;
+    assert_equals(anim.effect.target, d,
+                  "Animation targets specified element (target element)");
+    assert_equals(anim.effect.pseudoElement, null,
+                  "Animation targets specified element (null pseudo-selector)");
+    assert_equals(getComputedStyle(d, '::before').marginLeft, '10px',
+                  'Value of 1st element (currently not targeted) after ' +
+                  'changing the effect target');
+    assert_equals(getComputedStyle(d).marginLeft, '50px',
+                  'Value of 2nd element (currently targeted) after ' +
+                  'changing the effect target');
+  }, "Change target from " + (hasContent ? "an existing" : "a non-existing") + " pseudo-element to the originating element.");
+
+  for (const prevHasContent of [true, false]) {
+    test(t => {
+      const a = createDiv(t);
+      a.classList.add('pseudoa');
+      const b = createDiv(t);
+      b.classList.add('pseudob');
+      if (prevHasContent) {
+        a.classList.add('before');
+        getComputedStyle(a,"::before").content; // Sync style
+      }
+      if (hasContent) {
+        b.classList.add('before');
+        getComputedStyle(b,"::before").content; // Sync style
+      }
+
+      const anim = a.animate(gKeyFrames, {duration: 100 * MS_PER_SEC, pseudoElement: '::before'});
+
+      anim.currentTime = 50 * MS_PER_SEC;
+      anim.effect.target = b;
+      assert_equals(anim.effect.target, b,
+                    "Animation targets specified pseudo-element (target element)");
+      assert_equals(anim.effect.pseudoElement, '::before',
+                    "Animation targets specified pseudo-element (pseudo-selector)");
+      assert_equals(getComputedStyle(a, '::before').marginLeft, '10px',
+                    'Value of 1st element (currently not targeted) after ' +
+                    'changing the effect target');
+      assert_equals(getComputedStyle(b, '::before').marginLeft, '50px',
+                    'Value of 2nd element (currently targeted) after ' +
+                    'changing the effect target');
+    }, "Change target from " + (prevHasContent ? "an existing" : "a non-existing") +
+        " to a different " + (hasContent ? "existing" : "non-existing") +
+        " pseudo-element by setting target.");
+
+    test(t => {
+      const d = createDiv(t);
+      d.classList.add('pseudoc');
+      if (prevHasContent) {
+        d.classList.add('before');
+        getComputedStyle(d,"::before").content; // Sync style
+      }
+      if (hasContent) {
+        d.classList.add('after');
+        getComputedStyle(d,"::after").content; // Sync style
+      }
+
+      const anim = d.animate(gKeyFrames, {duration: 100 * MS_PER_SEC, pseudoElement: '::before'});
+
+      anim.currentTime = 50 * MS_PER_SEC;
+      anim.effect.pseudoElement = '::after';
+      assert_equals(anim.effect.target, d,
+                    "Animation targets specified pseudo-element (target element)");
+      assert_equals(anim.effect.pseudoElement, '::after',
+                    "Animation targets specified pseudo-element (pseudo-selector)");
+      assert_equals(getComputedStyle(d, '::before').marginLeft, '10px',
+                    'Value of 1st element (currently not targeted) after ' +
+                    'changing the effect target');
+      assert_equals(getComputedStyle(d, '::after').marginLeft, '50px',
+                    'Value of 2nd element (currently targeted) after ' +
+                    'changing the effect target');
+    }, "Change target from " + (prevHasContent ? "an existing" : "a non-existing") +
+        " to a different " + (hasContent ? "existing" : "non-existing") +
+        " pseudo-element by setting pseudoElement.");
+  }
+}
+
+
+
 </script>
 </body>