tor-browser

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

browser_rules_css-compatibility-check-add-fix.js (3694B)

      1 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
      2 /* Any copyright is dedicated to the Public Domain.
      3 http://creativecommons.org/publicdomain/zero/1.0/ */
      4 
      5 "use strict";
      6 
      7 // Test - Add fix for incompatible property
      8 // For properties like "user-select", there exists an alias
      9 // "-webkit-user-select", that is supported on all platform
     10 // as a result of its popularity. If such a universally
     11 // compatible alias exists, we shouldn't show compatibility
     12 // warning for the base declaration.
     13 // In this case "user-select" is marked compatible because the
     14 // universally compatible alias "-webkit-user-select" exists
     15 // alongside.
     16 
     17 const TARGET_BROWSERS = [
     18  {
     19    // Chrome doesn't need any prefix for both user-select and text-size-adjust.
     20    id: "chrome",
     21    status: "current",
     22  },
     23  {
     24    // The safari_ios needs -webkit prefix for both properties.
     25    id: "safari_ios",
     26    status: "current",
     27  },
     28 ];
     29 
     30 const TEST_URI = `
     31 <style>
     32  div {
     33    color: green;
     34    background-color: black;
     35    user-select: none;
     36    text-size-adjust: none;
     37  }
     38 </style>
     39 <div>`;
     40 
     41 const TEST_DATA_INITIAL = [
     42  {
     43    rules: [
     44      {},
     45      {
     46        color: { value: "green" },
     47        "background-color": { value: "black" },
     48        "user-select": {
     49          value: "none",
     50          expected: COMPATIBILITY_TOOLTIP_MESSAGE.default,
     51        },
     52        "text-size-adjust": {
     53          value: "none",
     54          expected: COMPATIBILITY_TOOLTIP_MESSAGE.experimental,
     55        },
     56      },
     57    ],
     58  },
     59 ];
     60 
     61 const TEST_DATA_FIX_USER_SELECT = [
     62  {
     63    rules: [
     64      {},
     65      {
     66        color: { value: "green" },
     67        "background-color": { value: "black" },
     68        "user-select": { value: "none" },
     69        "-webkit-user-select": { value: "none" },
     70        "text-size-adjust": {
     71          value: "none",
     72          expected: COMPATIBILITY_TOOLTIP_MESSAGE.experimental,
     73        },
     74      },
     75    ],
     76  },
     77 ];
     78 
     79 // text-size-adjust is an experimental property with aliases.
     80 // Adding -webkit makes it compatible on all platforms but will
     81 // still show an inline warning for its experimental status.
     82 const TEST_DATA_FIX_EXPERIMENTAL_SUPPORTED = [
     83  {
     84    rules: [
     85      {},
     86      {
     87        color: { value: "green" },
     88        "background-color": { value: "black" },
     89        "user-select": { value: "none" },
     90        "-webkit-user-select": { value: "none" },
     91        "text-size-adjust": {
     92          value: "none",
     93          expected: COMPATIBILITY_TOOLTIP_MESSAGE["experimental-supported"],
     94        },
     95      },
     96    ],
     97  },
     98 ];
     99 
    100 add_task(async function () {
    101  await pushPref(
    102    "devtools.inspector.compatibility.target-browsers",
    103    JSON.stringify(TARGET_BROWSERS)
    104  );
    105  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
    106  const { inspector, view } = await openRuleView();
    107 
    108  // We're only looking for properties on this single node so select it here instead of
    109  // passing `selector` to `runCSSCompatibilityTests` (otherwise addition requests are sent
    110  // to the server and we may end up with pending promises when the toolbox closes).
    111  await selectNode("div", inspector);
    112 
    113  await runCSSCompatibilityTests(view, inspector, TEST_DATA_INITIAL);
    114 
    115  info(
    116    'Add -webkit-user-select: "none" which solves the compatibility issue from user-select'
    117  );
    118  await addProperty(view, 1, "-webkit-user-select", "none");
    119  await runCSSCompatibilityTests(view, inspector, TEST_DATA_FIX_USER_SELECT);
    120 
    121  info(
    122    'Add -webkit-text-size-adjust: "none" fixing issue but leaving an inline warning of an experimental property'
    123  );
    124  await addProperty(view, 1, "-webkit-text-size-adjust", "none");
    125  await runCSSCompatibilityTests(
    126    view,
    127    inspector,
    128    TEST_DATA_FIX_EXPERIMENTAL_SUPPORTED
    129  );
    130 });