DL: add spacer to accessibility layout tests

Since subtree-visibility: auto subtrees gets unlocked when on screen,
we should add spacer to accessibility tests to make sure the locked
elements are offscreen and not get viewport-activated.

This way, the tests are actually testing whether the functions that
should activate the locked elements actually activates them.

Change-Id: Ia38217af0777a478539a752a7a353e4c4daeedc0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2123691
Commit-Queue: Rakina Zata Amni <rakina@chromium.org>
Reviewed-by: Aaron Leventhal <aleventhal@chromium.org>
Reviewed-by: vmpstr <vmpstr@chromium.org>
Cr-Commit-Position: refs/heads/master@{#756148}

third_party/blink/web_tests/TestExpectations

@@ -177,6 +177,8 @@ virtual/composite-after-paint/paint/frames/* [ Pass ]
 virtual/composite-after-paint/scrollingcoordinator/* [ Pass ]
 # --- End CompositeAfterPaint Tests --
 
+crbug.com/1067174 wpt_internal/display-lock/css-subtree-visibility/subtree-visibility-051.html [ Failure ]
+
 # Subpixel differences
 crbug.com/771643 external/wpt/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-5.html [ Failure ]
 crbug.com/771643 external/wpt/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-5.html [ Failure ]

third_party/blink/web_tests/wpt_internal/display-lock/css-subtree-visibility/subtree-visibility-032.html

@@ -40,11 +40,13 @@ async_test(async (t) => {
   const target = document.getElementById("target");
   let axTarget = axElementById("target");
   t.step(() => { assert_false(axTarget.isIgnored); });
-
-  // Expect 7 children: 4 text nodes ("target" and whitespace between the divs) and 3 div children.
+  // Expect 7 children: 4 text nodes ("target" text and whitespace between the divs) and 3 div children.
+  // This is because #target is locked, and thus is saved as an AXNodeObject instead of an AXLayoutObject,
+  // so we have the separate <newline> text children because AXNodeObject does not do whitespace
+  // collapsing (though this might change in the future).
   // TODO(rakina): Make display:none, visiblity:hidden be ignored/not included in tree even when
   // display target, and make sure whitespace collapsing happen.
-  t.step(() => { assert_equals(axTarget.childrenCount, 7, "Child count after acquire"); });
+  t.step(() => { assert_equals(axTarget.childrenCount, 7, "Children count when locked"); });
 
   // These children are special because their "isVisible" should be false.
   const displayNoneIndex = 3;
@@ -63,27 +65,14 @@ async_test(async (t) => {
     }
   }
 
-  axTarget = axElementById("target");
-  t.step(() => { assert_equals(axTarget.childrenCount, 7, "Child count after update"); });
-
-  // Should stay the same as after acquiring.
-  for (let i = 0; i < axTarget.childrenCount; ++i) {
-    const axChild = axTarget.childAtIndex(i);
-    t.step(() => { assert_false(axChild.isIgnored, "After update, isIgnored is false on child #" + i); });
-    if (i == displayNoneIndex || i == visibilityHiddenIndex) {
-      t.step(() => { assert_false(axChild.isVisible, "After update, isVisible is false on child #" + i); });
-    } else {
-      t.step(() => { assert_true(axChild.isVisible, "After update, isVisible is true on child #" + i); });
-    }
-  }
-
-  // Remove subtree-visibility and force a layout recalc.
+  // Remove subtree-visibility and force a layout recalc, causing #target to get unlocked.
   target.classList.remove("auto");
   requestAnimationFrame(() => requestAnimationFrame(() => {
     target.getBoundingClientRect();
     axTarget = axElementById("target");
-    // Expect 4 children: the text node "target" and 3 div children (#child, #displayNone, and #hidden).
-    t.step(() => { assert_equals(axTarget.childrenCount, 4, "Child count after commit"); });
+    // Now that #target is not locked, it is saved as a normal AXLayout object and has  4 children:
+    // the text node "target" and 3 div children (#child, #displayNone, and #hidden).
+    t.step(() => { assert_equals(axTarget.childrenCount, 4, "Children count when not locked"); });
 
     for (let i = 0; i < axTarget.childrenCount; ++i) {
       const axChild = axTarget.childAtIndex(i);

third_party/blink/web_tests/wpt_internal/display-lock/css-subtree-visibility/subtree-visibility-033.html

@@ -32,14 +32,14 @@ async_test(async (t) => {
   let target = document.getElementById("target");
   let axTarget = axElementById("target");
   t.step(() => { assert_false(axTarget.isIgnored); });
-  t.step(() => { assert_equals(axTarget.childrenCount, 0); });
+  t.step(() => { assert_equals(axTarget.childrenCount, 0, "When locked, nodes in hidden subtree are ignored"); });
 
   target.classList.remove("hidden");
   requestAnimationFrame(() => requestAnimationFrame(() => {
     // The ax object for #target got replaced since the layout object changed, so use the new ax object.
     axTarget = axElementById("target");
-    t.step(() => { assert_equals(axTarget.childrenCount, 2, "After commit, nodes in target subtree are not ignored"); });
+    t.step(() => { assert_equals(axTarget.childrenCount, 2, "After getting unlocked, nodes in hidden subtree are not ignored"); });
     t.done();
   }));
-}, "Nodes in target non-activatable tree are not exposed to accessibility tree");
+}, "Nodes in hidden non-activatable tree are not exposed to accessibility tree");
 </script>

third_party/blink/web_tests/wpt_internal/display-lock/css-subtree-visibility/subtree-visibility-051.html

@@ -4,12 +4,14 @@
 <title>Subtree Visibility: accessibility focus</title>
 <link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
 <link rel="help" href="https://github.com/WICG/display-locking">
-<link rel="match" href="container-ref.html">
 <meta name="assert" content="subtree-visibility auto subtrees are exposed by accessibility focus">
 
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 
+<div style="height:10000px;">
+  spacer so that everything below will be offscreen (and won't get viewport-activated)
+</div>
 <div id="hidden" style="subtree-visibility: auto">
   foo
   <div id="child" tabindex="0">
@@ -23,25 +25,25 @@ function axElementById(id) {
 }
 
 async_test(async(t) => {
-  t.step(() => {
-    let axChild = axElementById("child");
-    assert_false(Boolean(axChild.backgroundColor), "Background color after activation");
-  });
+  const hiddenEl = document.getElementById("hidden");
+  let axHidden = axElementById("hidden");
+  // #hidden is locked, and thus is saved as an AXNodeObject instead of an AXLayoutObject,
+  // and has 3 child nodes: "foo" text, "<newline>" text, and #child node.
+  // Note that we have the separate <newline> text because it's an AXNodeObject and does
+  // not do whitespace collapsing (though this might change in the future).
+  t.step(() => { assert_equals(axHidden.childrenCount, 3, "Children count when locked"); });
 
-  axElementById("child").takeFocus();  // Use accessibility to set the focus.
-
-  // Wait for a few frames for the ax tree to be refreshed.
+  // Focus to #child, causing #hidden to get unlocked.
+  axElementById("child").takeFocus();
+  // Wait for the next frame for the ax object to be recreated.
   requestAnimationFrame(() => {
     requestAnimationFrame(() => {
--     requestAnimationFrame(() => {
-  -     t.step(() => {
-          let axChild = axElementById("child");
-          assert_equals(axChild.backgroundColor, 0xFFFFFFFF, "Background color after activation");
-        });
-        t.done();
-      });
+      axHidden = axElementById("hidden");
+      // #hidden is now unlocked and saved as a normal AXLayoutObject with 2 child nodes:
+      // "foo" text and #child node.
+      t.step(() => { assert_equals(axHidden.childrenCount, 2, "Children count after activation"); });
+      t.done();
     });
   });
-}, "Accessiblility focus causes activatable hidden tree to activate, and thus accessibility details such as background color become available");
-
+}, "Accessiblility focus causes activatable hidden tree to activate");
 </script>

third_party/blink/web_tests/wpt_internal/display-lock/css-subtree-visibility/subtree-visibility-052.html

@@ -4,18 +4,14 @@
 <title>Subtree Visibility: accessibility press</title>
 <link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
 <link rel="help" href="https://github.com/WICG/display-locking">
-<link rel="match" href="container-ref.html">
 <meta name="assert" content="subtree-visibility auto subtrees are exposed by accessibility press">
 
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 
-<style>
-.auto {
-  subtree-visibility: auto;
-}
-</style>
-
+<div style="height:10000px;">
+  spacer so that everything below will be offscreen (and won't get viewport-activated)
+</div>
 <div id="hidden" style="subtree-visibility: auto">
   foo
   <div id="child" tabindex="0">
@@ -28,18 +24,24 @@ function axElementById(id) {
   return accessibilityController.accessibleElementById(id);
 }
 
+// #hidden is locked, and thus is saved as an AXNodeObject instead of an AXLayoutObject,
+// and has 3 child nodes: "foo" text, "<newline>" text, and #child node.
+// Note that we have the separate <newline> text because it's an AXNodeObject and does
+// not do whitespace collapsing (though this might change in the future).
 async_test(async(t) => {
   const hiddenEl = document.getElementById("hidden");
   let axHidden = axElementById("hidden");
-  t.step(() => { assert_equals(axHidden.childrenCount, 3, "Child count after acquire"); });
+  t.step(() => { assert_equals(axHidden.childrenCount, 3, "Children count when locked"); });
 
+  // This should unlock #hidden.
   axElementById("child").press();
-
   // Wait for the next frame for the ax object to be recreated.
   requestAnimationFrame(() => {
     requestAnimationFrame(() => {
       axHidden = axElementById("hidden");
-      t.step(() => { assert_equals(axHidden.childrenCount, 2, "Child count after activation"); });
+      // #hidden is now unlocked and saved as a normal AXLayoutObject with 2 child nodes:
+      // "foo" text and #child node.
+      t.step(() => { assert_equals(axHidden.childrenCount, 2, "Children count after activation"); });
       t.done();
     });
   });

third_party/blink/web_tests/wpt_internal/display-lock/css-subtree-visibility/subtree-visibility-053.html

@@ -9,17 +9,10 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 
-<style>
-.spacer {
-  height: 3000px;
-}
-.auto {
-  subtree-visibility: auto;
-}
-</style>
-
-<div class=spacer></div>
-<div id="hidden" class=auto>
+<div style="height:10000px;">
+  spacer so that everything below will be offscreen (and won't get viewport-activated)
+</div>
+<div id="hidden" style="subtree-visibility: auto">
   foo
   <div id="child" tabindex="0">
     bar
@@ -35,8 +28,13 @@ function axElementById(id) {
 async_test(async(t) => {
   const hiddenEl = document.getElementById("hidden");
   let axHidden = axElementById("hidden");
-  t.step(() => { assert_equals(axHidden.childrenCount, 3, "Child count after acquire"); });
+  // #hidden is locked, and thus is saved as an AXNodeObject instead of an AXLayoutObject,
+  // and has 3 child nodes: "foo" text, "<newline>" text, and #child node.
+  // Note that we have the separate <newline> text because it's an AXNodeObject and does
+  // not do whitespace collapsing (though this might change in the future)..
+  t.step(() => { assert_equals(axHidden.childrenCount, 3, "Children count when locked"); });
 
+  // This should unlock #hidden.
   axElementById("child").scrollToMakeVisible();
 
   // If this is frame 1, then during frame 2, we will determine that we're