tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

browser_css_content_visibility.js (3046B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 "use strict";
      6 /* import-globals-from ../../mochitest/role.js */
      7 loadScripts({ name: "role.js", dir: MOCHITESTS_DIR });
      8 
      9 const snippet1 = `
     10  <style>
     11  #container {
     12    width: 150px;
     13    height: 150px;
     14    background: lightblue;
     15  }
     16  .hidden {
     17    content-visibility: hidden;
     18  }
     19  .auto {
     20    content-visibility: auto;
     21  }
     22  </style>
     23  <div id="container">
     24    <div class="hidden" id="hidden-target">
     25      hidden target
     26      <div id="hidden-child">
     27        hidden child
     28      </div>
     29    </div>
     30    <div class="auto" id="auto-target">
     31      auto target
     32      <div id="auto-child">
     33        auto child
     34      </div>
     35    </div>
     36  </div>
     37  `;
     38 
     39 // Check if the element specified with `content-visibility` property is accessible
     40 addAccessibleTask(
     41  snippet1,
     42  async function (browser, accDoc) {
     43    const container = findAccessibleChildByID(accDoc, "container");
     44    ok(
     45      findAccessibleChildByID(container, "hidden-target"),
     46      "hidden-target is accessible"
     47    );
     48    ok(
     49      findAccessibleChildByID(container, "auto-target"),
     50      "auto-target is accessible"
     51    );
     52 
     53    // The test checks if the child element of the element specified with
     54    // `content-visibility: hidden` is ignored from a11y tree
     55    let target = findAccessibleChildByID(accDoc, "hidden-target");
     56    ok(
     57      !findAccessibleChildByID(target, "hidden-child"),
     58      "Children of hidden-target is not accessible"
     59    );
     60 
     61    // The test checks if the child element of the element specified with
     62    // `content-visibility: auto` is showen in a11y tree
     63    target = findAccessibleChildByID(accDoc, "auto-target");
     64    ok(
     65      findAccessibleChildByID(target, "auto-child"),
     66      "Children of auto-target is accessible"
     67    );
     68  },
     69  { iframe: true, remoteIframe: true, chrome: true }
     70 );
     71 
     72 // Check if the element having `display: contents` and a child of `content-visibility: hidden` element isn't accessible
     73 const snippet2 = `
     74  <style>
     75  #target {
     76    width: 150px;
     77    height: 150px;
     78    background-color: lightblue;
     79  }
     80  #child {
     81    width: 100px;
     82    height: 100px;
     83    background-color: lightgreen;
     84  }
     85  #grandchild {
     86    width: 50px;
     87    height: 50px;
     88    background-color: red;
     89  }
     90  .hidden {
     91    content-visibility: hidden;
     92  }
     93  .display-contents {
     94    display: contents;
     95  }
     96  </style>
     97  <div id="target" class="hidden">
     98    <div id="child" class="display-contents">
     99      <div id="grandchild"></div>
    100    </div>
    101  </div>
    102  `;
    103 
    104 addAccessibleTask(
    105  snippet2,
    106  async function (browser, accDoc) {
    107    const target = findAccessibleChildByID(accDoc, "target");
    108    ok(
    109      !findAccessibleChildByID(target, "child"),
    110      "Element having `display: contents` and a child of `content-visibility: hidden` element isn't accessible"
    111    );
    112    testAccessibleTree(target, { SECTION: [] });
    113  },
    114  { iframe: true, remoteIframe: true, chrome: true }
    115 );