wpt: Fix the content-visibility test to reflect sync-auto observation.

The spec has changed to ensure that 'auto' content-visibility
intersection observations are synchronous (after lifecycle) on the
first frame.

The test change is to expect new behavior as well as test previous
behavior by making a container off-screen first.

R=chrishtr@chromium.org, jarhar@chromium.org

Change-Id: I0ef3182b04a2a8731a80a044689581f2a5ac3c2a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2368509Reviewed-by: Joey Arhar <jarhar@chromium.org>
Commit-Queue: vmpstr <vmpstr@chromium.org>
Cr-Commit-Position: refs/heads/master@{#800669}

third_party/blink/web_tests/external/wpt/css/css-contain/content-visibility/content-visibility-026-expected.txt

-This is a testharness.js-based test.
-PASS content-visibility: hidden adds contain: size layout style;
-FAIL content-visibility: auto adds contain: size layout style paint; assert_equals: expected "size layout style paint" but got "layout style paint"
-PASS content-visibility: auto adds contain: size layout style paint, can't be overridden
-PASS content-visibility keeps all containment even when shorthands are specified
-Harness: the test ran to completion.
-

third_party/blink/web_tests/external/wpt/css/css-contain/content-visibility/content-visibility-026.html

@@ -16,9 +16,13 @@
 .hidden {
   content-visibility: hidden;
 }
+.spacer {
+  height: 10000px;
+}
 </style>
 <div id="container"></div>
-<div id="async_container"></div>
+<div class=spacer></div>
+<div id="offscreen_container"></div>
 
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
@@ -37,27 +41,46 @@ test(() => {
 }, "content-visibility: hidden adds contain: size layout style;");
 
 async_test((t) => {
-  setUp(async_container);
-  async_container.classList.add("auto");
-  t.step(() => assert_equals(getComputedStyle(async_container).contain, "size layout style paint"));
+  setUp(container);
+  setUp(offscreen_container);
+
+  container.classList.add("auto");
+  offscreen_container.classList.add("auto");
+  // This will be determined to be on-screen immediately.
+  t.step(() => assert_equals(getComputedStyle(container).contain, "size layout style paint", "initial onscreen"));
+  t.step(() => assert_equals(getComputedStyle(offscreen_container).contain, "size layout style paint", "initial offscreen"));
   // Considering this as frame 1:
-  // At frame 2, the container has size-containment, and intersection
-  //   observations will be delivered at the end of that frame.
-  // At frame 3, the container still has size-containment, because visiblility
+  // At frame 2, intersection observation will happen and determine that the container
+  //   is not visible.
+  // At frame 3, the container has size-containment, and intersection
+  //   observations will mark this container as visible at the end of the frame
+  // At frame 4, the container still has size-containment, because visiblility
   //   switch happens after rAF-callbacks have run.
-  // At frame 4, the container is no longer size-contained since it is visible.
+  // At frame 5, the container is no longer size-contained since it is visible.
   requestAnimationFrame(() => {
     // Frame 2 checks:
-    t.step(() => assert_equals(getComputedStyle(async_container).contain, "size layout style paint"));
+    // The onscreen container should be visible and the switch happens immediately after layout.
+    t.step(() => assert_equals(getComputedStyle(container).contain, "size layout style paint", "frame 2 onscreen"));
+    t.step(() => assert_equals(getComputedStyle(offscreen_container).contain, "size layout style paint", "frame 2 offscreen"));
 
     requestAnimationFrame(() => {
+      offscreen_container.scrollIntoView();
+
       // Frame 3 checks:
-      t.step(() => assert_equals(getComputedStyle(async_container).contain, "size layout style paint"));
+      // At the beginning of the frame, the onscreen container should already be visible because
+      // the visibility switch should have happened after layout of the previous frame.
+      t.step(() => assert_equals(getComputedStyle(container).contain, "layout style paint", "frame 3 onscreen"));
+      t.step(() => assert_equals(getComputedStyle(offscreen_container).contain, "size layout style paint", "frame 3 offscreen"));
 
       requestAnimationFrame(() => {
         // Frame 4 checks:
-        t.step(() => assert_equals(getComputedStyle(async_container).contain, "layout style paint"));
-        t.done();
+        t.step(() => assert_equals(getComputedStyle(offscreen_container).contain, "size layout style paint", "frame 4"));
+
+        requestAnimationFrame(() => {
+          // Frame 5 checks:
+          t.step(() => assert_equals(getComputedStyle(offscreen_container).contain, "layout style paint", "frame 4"));
+          t.done();
+        });
       });
     });
   });