diff options
Diffstat (limited to 'accessible/tests/browser/tree/browser_css_content_visibility.js')
-rw-r--r-- | accessible/tests/browser/tree/browser_css_content_visibility.js | 121 |
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 } +); |