tor-browser

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

browser_compatibility_cssIssues.js (3097B)

      1 /* Any copyright is dedicated to the Public Domain.
      2   http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Check the output of getNodeCssIssues
      7 
      8 const {
      9  COMPATIBILITY_ISSUE_TYPE,
     10 } = require("resource://devtools/shared/constants.js");
     11 const URL = MAIN_DOMAIN + "doc_compatibility.html";
     12 
     13 const CHROME_81 = {
     14  id: "chrome",
     15  version: "81",
     16 };
     17 
     18 const CHROME_ANDROID = {
     19  id: "chrome_android",
     20  version: "81",
     21 };
     22 
     23 const EDGE_81 = {
     24  id: "edge",
     25  version: "81",
     26 };
     27 
     28 const FIREFOX_1 = {
     29  id: "firefox",
     30  version: "1",
     31 };
     32 
     33 const FIREFOX_60 = {
     34  id: "firefox",
     35  version: "60",
     36 };
     37 
     38 const FIREFOX_69 = {
     39  id: "firefox",
     40  version: "69",
     41 };
     42 
     43 const FIREFOX_MOBILE = {
     44  id: "firefox_android",
     45  version: "68",
     46 };
     47 
     48 const SAFARI_13 = {
     49  id: "safari",
     50  version: "13",
     51 };
     52 
     53 const SAFARI_MOBILE = {
     54  id: "safari_ios",
     55  version: "13.4",
     56 };
     57 
     58 const TARGET_BROWSERS = [
     59  FIREFOX_1,
     60  FIREFOX_60,
     61  FIREFOX_69,
     62  FIREFOX_MOBILE,
     63  CHROME_81,
     64  CHROME_ANDROID,
     65  SAFARI_13,
     66  SAFARI_MOBILE,
     67  EDGE_81,
     68 ];
     69 
     70 const ISSUE_USER_SELECT = {
     71  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY_ALIASES,
     72  property: "user-select",
     73  aliases: ["-moz-user-select"],
     74  url: "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/user-select",
     75  specUrl: "https://drafts.csswg.org/css-ui/#content-selection",
     76  deprecated: false,
     77  experimental: false,
     78  prefixNeeded: true,
     79  unsupportedBrowsers: [
     80    CHROME_81,
     81    CHROME_ANDROID,
     82    SAFARI_13,
     83    SAFARI_MOBILE,
     84    EDGE_81,
     85  ],
     86 };
     87 
     88 const ISSUE_CLIP = {
     89  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
     90  property: "clip",
     91  url: "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/clip",
     92  specUrl: "https://drafts.fxtf.org/css-masking/#clip-property",
     93  deprecated: true,
     94  experimental: false,
     95  unsupportedBrowsers: [],
     96 };
     97 
     98 async function testNodeCssIssues(selector, walker, compatibility, expected) {
     99  const node = await walker.querySelector(walker.rootNode, selector);
    100  const cssCompatibilityIssues = await compatibility.getNodeCssIssues(
    101    node,
    102    TARGET_BROWSERS
    103  );
    104  info("Ensure result is correct");
    105  Assert.deepEqual(
    106    cssCompatibilityIssues,
    107    expected,
    108    "Expected CSS browser compat data is correct."
    109  );
    110 }
    111 
    112 add_task(async function () {
    113  const { inspector, walker, target } = await initInspectorFront(URL);
    114  const compatibility = await inspector.getCompatibilityFront();
    115 
    116  info('Test CSS properties linked with the "div" tag');
    117  await testNodeCssIssues("div", walker, compatibility, []);
    118 
    119  info('Test CSS properties linked with class "class-user-select"');
    120  await testNodeCssIssues(".class-user-select", walker, compatibility, [
    121    ISSUE_USER_SELECT,
    122  ]);
    123 
    124  info("Test CSS properties linked with multiple classes and id");
    125  await testNodeCssIssues(
    126    "div#id-clip.class-clip.class-user-select",
    127    walker,
    128    compatibility,
    129    [ISSUE_CLIP, ISSUE_USER_SELECT]
    130  );
    131 
    132  info("Repeated incompatible CSS rule should be only reported once");
    133  await testNodeCssIssues(".duplicate", walker, compatibility, [ISSUE_CLIP]);
    134 
    135  await target.destroy();
    136  gBrowser.removeCurrentTab();
    137 });