1 files changed, 121 insertions, 0 deletions
diff --git a/accessible/tests/browser/tree/browser_css_content_visibility.js b/accessible/tests/browser/tree/browser_css_content_visibility.js
new file mode 100644
index 0000000000..798e409d86
--- /dev/null
+++ b/accessible/tests/browser/tree/browser_css_content_visibility.js
@@ -0,0 +1,121 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+/* import-globals-from ../../mochitest/role.js */
+loadScripts({ name: "role.js", dir: MOCHITESTS_DIR });
+
+const snippet1 = `
+  <style>
+  #container {
+    width: 150px;
+    height: 150px;
+    background: lightblue;
+  }
+  .hidden {
+    content-visibility: hidden;
+  }
+  .auto {
+    content-visibility: auto;
+  }
+  </style>
+  <div id="container">
+    <div class="hidden" id="hidden-target">
+      hidden target
+      <div id="hidden-child">
+        hidden child
+      </div>
+    </div>
+    <div class="auto" id="auto-target">
+      auto target
+      <div id="auto-child">
+        auto child
+      </div>
+    </div>
+  </div>
+  `;
+
+add_setup(async function () {
+  await SpecialPowers.pushPrefEnv({
+    set: [["layout.css.content-visibility.enabled", true]],
+  });
+});
+
+// Check if the element specified with `content-visibility` property is accessible
+addAccessibleTask(
+  snippet1,
+  async function (browser, accDoc) {
+    const container = findAccessibleChildByID(accDoc, "container");
+    ok(
+      findAccessibleChildByID(container, "hidden-target"),
+      "hidden-target is accessible"
+    );
+    ok(
+      findAccessibleChildByID(container, "auto-target"),
+      "auto-target is accessible"
+    );
+
+    // The test checks if the child element of the element specified with
+    // `content-visibility: hidden` is ignored from a11y tree
+    let target = findAccessibleChildByID(accDoc, "hidden-target");
+    ok(
+      !findAccessibleChildByID(target, "hidden-child"),
+      "Children of hidden-target is not accessible"
+    );
+
+    // The test checks if the child element of the element specified with
+    // `content-visibility: auto` is showen in a11y tree
+    target = findAccessibleChildByID(accDoc, "auto-target");
+    ok(
+      findAccessibleChildByID(target, "auto-child"),
+      "Children of auto-target is accessible"
+    );
+  },
+  { iframe: true, remoteIframe: true, chrome: true }
+);
+
+// Check if the element having `display: contents` and a child of `content-visibility: hidden` element isn't accessible
+const snippet2 = `
+  <style>
+  #target {
+    width: 150px;
+    height: 150px;
+    background-color: lightblue;
+  }
+  #child {
+    width: 100px;
+    height: 100px;
+    background-color: lightgreen;
+  }
+  #grandchild {
+    width: 50px;
+    height: 50px;
+    background-color: red;
+  }
+  .hidden {
+    content-visibility: hidden;
+  }
+  .display-contents {
+    display: contents;
+  }
+  </style>
+  <div id="target" class="hidden">
+    <div id="child" class="display-contents">
+      <div id="grandchild"></div>
+    </div>
+  </div>
+  `;
+
+addAccessibleTask(
+  snippet2,
+  async function (browser, accDoc) {
+    const target = findAccessibleChildByID(accDoc, "target");
+    ok(
+      !findAccessibleChildByID(target, "child"),
+      "Element having `display: contents` and a child of `content-visibility: hidden` element isn't accessible"
+    );
+    testAccessibleTree(target, { SECTION: [] });
+  },
+  { iframe: true, remoteIframe: true, chrome: true }
+);