Bug 1872736 [wpt PR 43838] - Wait for FCP before running color-mix te…

…sts, a=testonly

Automatic update from web-platform-tests
Wait for FCP before running color-mix tests

Several color-mix tests started flaking after the following CL was
submitted leading to a revert of the CL.

https://chromium-review.googlesource.com/c/chromium/src/+/5014009

The underlying cause appears to be that the screenshots could be taken
too soon.  This CL addresses the issue by waiting for first contentful
paint before running the test.

Verified that the reverted patch flakes without this fix and passes with
the fix.

Bug: 1378671
Change-Id: Ibbd40eb75464f179b2e58b420bd3ca181b03fbd7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5160090
Commit-Queue: Kevin Ellis <[email protected]>
Reviewed-by: Aaron Krajeski <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1243004}

--

wpt-commits: ecb983a770fe6d47c416d8fb27bd9e9ee7c6842e
wpt-pr: 43838

testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-background-repaint-parent.html

@@ -26,8 +26,13 @@
     <div id="target"></div>
 </div>
 
+<script src="/web-animations/testcommon.js"></script>
 <script>
-  addEventListener("load", () => {
+  addEventListener("load", async () => {
+    // crbug.com/1378671: Screenshot can be taken while compositor commits are
+    // still being deferred for first contentful paint (FCP). Wait for FCP
+    // before starting the test.
+    await waitForCompositorReady();
     requestAnimationFrame(() => {
       container.classList.add("green");
       requestAnimationFrame(() => {

testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-background-repaint.html

@@ -21,8 +21,13 @@
 
 <div id="target"></div>
 
+<script src="/web-animations/testcommon.js"></script>
 <script>
-  addEventListener("load", () => {
+  addEventListener("load", async () => {
+    // crbug.com/1378671: Screenshot can be taken while compositor commits are
+    // still being deferred for first contentful paint (FCP). Wait for FCP
+    // before starting the test.
+    await waitForCompositorReady();
     requestAnimationFrame(() => {
       target.classList.add("green");
       requestAnimationFrame(() => {

testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-border-repaint-parent.html

@@ -25,8 +25,13 @@
     <div id="target"></div>
 </div>
 
+<script src="/web-animations/testcommon.js"></script>
 <script>
-  addEventListener("load", () => {
+  addEventListener("load", async () => {
+    // crbug.com/1378671: Screenshot can be taken while compositor commits are
+    // still being deferred for first contentful paint (FCP). Wait for FCP
+    // before starting the test.
+    await waitForCompositorReady();
     requestAnimationFrame(() => {
       container.classList.add("green");
       requestAnimationFrame(() => {

testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-border-repaint.html

@@ -20,8 +20,14 @@
 
 <div id="target"></div>
 
+<script src="/web-animations/testcommon.js"></script>
 <script>
-  addEventListener("load", () => {
+
+  addEventListener("load", async () => {
+    // crbug.com/1378671: Screenshot can be taken while compositor commits are
+    // still being deferred for first contentful paint (FCP). Wait for FCP
+    // before starting the test.
+    await waitForCompositorReady();
     requestAnimationFrame(() => {
       target.classList.add("green");
       requestAnimationFrame(() => {

testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-outline-repaint-parent.html

@@ -27,8 +27,13 @@
     <div id="target"></div>
 </div>
 
+<script src="/web-animations/testcommon.js"></script>
 <script>
-  addEventListener("load", () => {
+  addEventListener("load", async () => {
+    // crbug.com/1378671: Screenshot can be taken while compositor commits are
+    // still being deferred for first contentful paint (FCP). Wait for FCP
+    // before starting the test.
+    await waitForCompositorReady();
     requestAnimationFrame(() => {
       container.classList.add("green");
       requestAnimationFrame(() => {

testing/web-platform/tests/css/css-backgrounds/color-mix-currentcolor-outline-repaint.html

@@ -22,8 +22,13 @@
 
 <div id="target"></div>
 
+<script src="/web-animations/testcommon.js"></script>
 <script>
-  addEventListener("load", () => {
+  addEventListener("load", async () => {
+    // crbug.com/1378671: Screenshot can be taken while compositor commits are
+    // still being deferred for first contentful paint (FCP). Wait for FCP
+    // before starting the test.
+    await waitForCompositorReady();
     requestAnimationFrame(() => {
       target.classList.add("green");
       requestAnimationFrame(() => {