tor-browser

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

browser_css_alt.js (9335B)

      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 
      7 /* import-globals-from ../../mochitest/role.js */
      8 loadScripts({ name: "role.js", dir: MOCHITESTS_DIR });
      9 
     10 const IMAGE =
     11  'url("https://example.com/a11y/accessible/tests/mochitest/moz.png")';
     12 
     13 /**
     14 * Test CSS content replacing an element.
     15 */
     16 addAccessibleTask(
     17  `
     18 <style>
     19  .twoStrings1 {
     20    content: ${IMAGE} / "re" "placed";
     21  }
     22  .twoStrings2 {
     23    content: ${IMAGE} / "RE" "PLACED";
     24  }
     25 </style>
     26 <h1 id="noAlt" style='content: ${IMAGE};'>noAlt</h1>
     27 <h1 id="oneString" style='content: ${IMAGE} / "replaced";'>oneString</h1>
     28 <h1 id="twoStrings" class="twoStrings1">twoStrings</h1>
     29 <h1 id="attr" style='content: ${IMAGE} / attr(data-alt)' data-alt="replaced">attr</h1>
     30 <h1 id="attrFallback" style='content: ${IMAGE} / attr(data-alt, "fallback")'>attrFallback</h1>
     31 <h1 id="mixed" style='content: ${IMAGE} / "re" attr(data-alt, "fallback") attr(missing, "ed")' data-alt="plac">mixed</h1>
     32 <h1 id="noInitialContent">noInitialContent</h1>
     33  `,
     34  async function testReplacing(browser, docAcc) {
     35    testAccessibleTree(findAccessibleChildByID(docAcc, "noAlt"), {
     36      role: ROLE_HEADING,
     37      children: [],
     38    });
     39    const oneString = findAccessibleChildByID(docAcc, "oneString");
     40    testAccessibleTree(oneString, {
     41      role: ROLE_HEADING,
     42      name: "replaced",
     43      children: [],
     44    });
     45    const twoStrings = findAccessibleChildByID(docAcc, "twoStrings");
     46    testAccessibleTree(twoStrings, {
     47      role: ROLE_HEADING,
     48      name: "replaced",
     49      children: [],
     50    });
     51    const attr = findAccessibleChildByID(docAcc, "attr");
     52    testAccessibleTree(attr, {
     53      role: ROLE_HEADING,
     54      name: "replaced",
     55      children: [],
     56    });
     57    const attrFallback = findAccessibleChildByID(docAcc, "attrFallback");
     58    testAccessibleTree(attrFallback, {
     59      role: ROLE_HEADING,
     60      name: "fallback",
     61      children: [],
     62    });
     63    testAccessibleTree(findAccessibleChildByID(docAcc, "mixed"), {
     64      role: ROLE_HEADING,
     65      name: "replaced",
     66      children: [],
     67    });
     68 
     69    info("Changing oneString content style");
     70    let changed = waitForEvent(EVENT_NAME_CHANGE, oneString);
     71    await invokeSetStyle(
     72      browser,
     73      "oneString",
     74      "content",
     75      `${IMAGE} / "REPLACED"`
     76    );
     77    await changed;
     78    testAccessibleTree(oneString, {
     79      role: ROLE_HEADING,
     80      name: "REPLACED",
     81      children: [],
     82    });
     83 
     84    info("Changing twoStrings class to twoStrings2");
     85    changed = waitForEvent(EVENT_NAME_CHANGE, twoStrings);
     86    await invokeSetAttribute(browser, "twoStrings", "class", "twoStrings2");
     87    await changed;
     88    testAccessibleTree(twoStrings, {
     89      role: ROLE_HEADING,
     90      name: "REPLACED",
     91      children: [],
     92    });
     93 
     94    info("Changing attr data-alt");
     95    changed = waitForEvent(EVENT_NAME_CHANGE, attr);
     96    await invokeSetAttribute(browser, "attr", "data-alt", "REPLACED");
     97    await changed;
     98    testAccessibleTree(attr, {
     99      role: ROLE_HEADING,
    100      name: "REPLACED",
    101      children: [],
    102    });
    103 
    104    info("Changing attrFallback data-alt");
    105    changed = waitForEvent(EVENT_NAME_CHANGE, attrFallback);
    106    await invokeSetAttribute(browser, "attrFallback", "data-alt", "replaced");
    107    await changed;
    108    testAccessibleTree(attrFallback, {
    109      role: ROLE_HEADING,
    110      name: "replaced",
    111      children: [],
    112    });
    113 
    114    const noInitialContent = findAccessibleChildByID(
    115      docAcc,
    116      "noInitialContent"
    117    );
    118    testAccessibleTree(noInitialContent, {
    119      role: ROLE_HEADING,
    120      name: "noInitialContent",
    121      children: [{ role: ROLE_TEXT_LEAF, name: "noInitialContent" }],
    122    });
    123    info("Add content prop to noInitialContent");
    124    changed = waitForEvent(EVENT_NAME_CHANGE, noInitialContent);
    125    await invokeSetStyle(
    126      browser,
    127      "noInitialContent",
    128      "content",
    129      `${IMAGE} / "replaced"`
    130    );
    131    await changed;
    132    testAccessibleTree(noInitialContent, {
    133      role: ROLE_HEADING,
    134      name: "replaced",
    135      children: [],
    136    });
    137  },
    138  { chrome: true, topLevel: true }
    139 );
    140 
    141 /**
    142 * Test CSS image content in pseudo-elements.
    143 */
    144 addAccessibleTask(
    145  `
    146 <style>
    147  #noAlt::before, #noAlt::after {
    148    content: ${IMAGE};
    149  }
    150  .strings1::before {
    151    content: ${IMAGE} / "be" "fore";
    152  }
    153  .strings2::before {
    154    content: ${IMAGE} / "BE" "FORE";
    155  }
    156  #strings::after {
    157    content: ${IMAGE} / "af" "ter";
    158  }
    159  #mixed::before {
    160    content: ${IMAGE} / "be" attr(data-alt);
    161  }
    162 </style>
    163 <h1 id="noAlt">noAlt</h1>
    164 <h1 id="strings" class="strings1">inside</h1>
    165 <h1 id="mixed" data-alt="fore">inside</h1>
    166  `,
    167  async function testImagePseudo(browser, docAcc) {
    168    testAccessibleTree(findAccessibleChildByID(docAcc, "noAlt"), {
    169      role: ROLE_HEADING,
    170      children: [{ role: ROLE_TEXT_LEAF, name: "noAlt" }],
    171    });
    172    const strings = findAccessibleChildByID(docAcc, "strings");
    173    testAccessibleTree(strings, {
    174      role: ROLE_HEADING,
    175      name: "before inside after",
    176      children: [
    177        { role: ROLE_GRAPHIC, name: "before" },
    178        { role: ROLE_TEXT_LEAF, name: "inside" },
    179        { role: ROLE_GRAPHIC, name: "after" },
    180      ],
    181    });
    182    const mixed = findAccessibleChildByID(docAcc, "mixed");
    183    testAccessibleTree(mixed, {
    184      role: ROLE_HEADING,
    185      name: "before inside",
    186      children: [
    187        { role: ROLE_GRAPHIC, name: "before" },
    188        { role: ROLE_TEXT_LEAF, name: "inside" },
    189      ],
    190    });
    191 
    192    info("Changing strings class to strings2");
    193    let changed = waitForEvent(EVENT_NAME_CHANGE, strings);
    194    await invokeSetAttribute(browser, "strings", "class", "strings2");
    195    await changed;
    196    testAccessibleTree(strings, {
    197      role: ROLE_HEADING,
    198      name: "BEFORE inside after",
    199      children: [
    200        { role: ROLE_GRAPHIC, name: "BEFORE" },
    201        { role: ROLE_TEXT_LEAF, name: "inside" },
    202        { role: ROLE_GRAPHIC, name: "after" },
    203      ],
    204    });
    205 
    206    info("Changing mixed data-alt");
    207    changed = waitForEvent(EVENT_NAME_CHANGE, mixed);
    208    await invokeSetAttribute(browser, "mixed", "data-alt", "FORE");
    209    await changed;
    210    testAccessibleTree(mixed, {
    211      role: ROLE_HEADING,
    212      name: "beFORE inside",
    213      children: [
    214        { role: ROLE_GRAPHIC, name: "beFORE" },
    215        { role: ROLE_TEXT_LEAF, name: "inside" },
    216      ],
    217    });
    218  },
    219  { chrome: true, topLevel: true }
    220 );
    221 
    222 /**
    223 * Test CSS text content in pseudo-elements.
    224 */
    225 addAccessibleTask(
    226  `
    227 <style>
    228  #noAlt::before {
    229    content: "before";
    230  }
    231  .strings1::before {
    232    content: "before" / "a" "lt";
    233  }
    234  .strings2::before {
    235    content: "before" / "A" "LT";
    236  }
    237  #mixed::before {
    238    content: "before" / "a" attr(data-alt);
    239  }
    240  #empty::after {
    241    content: "" / "alt";
    242  }
    243  #space::after {
    244    content: " " / "alt";
    245  }
    246 </style>
    247 <h1 id="noAlt">noAlt</h1>
    248 <h1 id="strings" class="strings1">inside</h1>
    249 <h1 id="mixed" data-alt="lt">inside</h1>
    250 <h1 id="empty">inside</h1>
    251 <h1 id="space">inside</h1>
    252  `,
    253  async function testTextPseudo(browser, docAcc) {
    254    testAccessibleTree(findAccessibleChildByID(docAcc, "noAlt"), {
    255      role: ROLE_HEADING,
    256      name: "beforenoAlt",
    257      children: [
    258        { role: ROLE_STATICTEXT, name: "before" },
    259        { role: ROLE_TEXT_LEAF, name: "noAlt" },
    260      ],
    261    });
    262    const strings = findAccessibleChildByID(docAcc, "strings");
    263    testAccessibleTree(strings, {
    264      role: ROLE_HEADING,
    265      name: "altinside",
    266      children: [
    267        { role: ROLE_STATICTEXT, name: "alt" },
    268        { role: ROLE_TEXT_LEAF, name: "inside" },
    269      ],
    270    });
    271    const mixed = findAccessibleChildByID(docAcc, "mixed");
    272    testAccessibleTree(mixed, {
    273      role: ROLE_HEADING,
    274      name: "altinside",
    275      children: [
    276        { role: ROLE_STATICTEXT, name: "alt" },
    277        { role: ROLE_TEXT_LEAF, name: "inside" },
    278      ],
    279    });
    280    const empty = findAccessibleChildByID(docAcc, "empty");
    281    testAccessibleTree(empty, {
    282      role: ROLE_HEADING,
    283      name: "insidealt",
    284      children: [
    285        { role: ROLE_TEXT_LEAF, name: "inside" },
    286        { role: ROLE_STATICTEXT, name: "alt" },
    287      ],
    288    });
    289    const space = findAccessibleChildByID(docAcc, "space");
    290    testAccessibleTree(space, {
    291      role: ROLE_HEADING,
    292      name: "insidealt",
    293      children: [
    294        { role: ROLE_TEXT_LEAF, name: "inside" },
    295        { role: ROLE_STATICTEXT, name: "alt" },
    296      ],
    297    });
    298 
    299    info("Changing strings class to strings2");
    300    let changed = waitForEvent(EVENT_NAME_CHANGE, strings);
    301    await invokeSetAttribute(browser, "strings", "class", "strings2");
    302    await changed;
    303    testAccessibleTree(strings, {
    304      role: ROLE_HEADING,
    305      name: "ALTinside",
    306      children: [
    307        { role: ROLE_STATICTEXT, name: "ALT" },
    308        { role: ROLE_TEXT_LEAF, name: "inside" },
    309      ],
    310    });
    311 
    312    info("Changing mixed data-alt");
    313    changed = waitForEvent(EVENT_NAME_CHANGE, mixed);
    314    await invokeSetAttribute(browser, "mixed", "data-alt", "LT");
    315    await changed;
    316    testAccessibleTree(mixed, {
    317      role: ROLE_HEADING,
    318      name: "aLTinside",
    319      children: [
    320        { role: ROLE_STATICTEXT, name: "aLT" },
    321        { role: ROLE_TEXT_LEAF, name: "inside" },
    322      ],
    323    });
    324  },
    325  { chrome: true, topLevel: true }
    326 );