Sync on style when creating a pseudo-element animation from script

Sync on style before evaluating a pseudo-element selector other than null.
Remove manual style syncs from pseudo-element animation wpt tests.

Bug: 1057101
Change-Id: I8a1184221f40c7546ac5179615f0d6541e8729e6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2083715Reviewed-by: Majid Valipour <majidvp@chromium.org>
Commit-Queue: George Steel <gtsteel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#747333}

third_party/blink/renderer/core/animation/keyframe_effect.cc

@@ -117,6 +117,7 @@ KeyframeEffect* KeyframeEffect::Create(
   if (!pseudo.IsEmpty()) {
     effect->target_pseudo_ = pseudo;
     if (element) {
+      element->GetDocument().UpdateStyleAndLayoutTreeForNode(element);
       effect->effect_target_ =
           element->GetPseudoElement(CSSSelector::ParsePseudoId(pseudo));
     }
@@ -200,6 +201,8 @@ void KeyframeEffect::RefreshTarget() {
   } else if (target_pseudo_.IsEmpty()) {
     new_target = target_element_;
   } else {
+    target_element_->GetDocument().UpdateStyleAndLayoutTreeForNode(
+        target_element_);
     PseudoId pseudoId = CSSSelector::ParsePseudoId(target_pseudo_);
     new_target = target_element_->GetPseudoElement(pseudoId);
   }

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

@@ -247,7 +247,6 @@ promise_test(async 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_class_string(anim, 'Animation', 'The returned object is an Animation');
 }, 'animate() with pseudoElement parameter creates an Animation object');
@@ -262,7 +261,6 @@ 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');
@@ -278,7 +276,6 @@ 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',
@@ -299,7 +296,6 @@ 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',

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

@@ -122,7 +122,6 @@ for (const hasContent of [true, false]){
     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);
@@ -147,7 +146,6 @@ for (const hasContent of [true, false]){
     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);
@@ -172,7 +170,6 @@ for (const hasContent of [true, false]){
     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'});
 
@@ -198,11 +195,9 @@ for (const hasContent of [true, false]){
       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'});
@@ -228,11 +223,9 @@ for (const hasContent of [true, false]){
       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'});