tor-browser

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

browser_compatibility_css-property_issue.js (2453B)

      1 /* Any copyright is dedicated to the Public Domain.
      2   http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test that unsupported CSS properties are correctly reported as issues.
      7 
      8 const {
      9  COMPATIBILITY_ISSUE_TYPE,
     10 } = require("resource://devtools/shared/constants.js");
     11 
     12 const TEST_URI = `
     13  <style>
     14  body {
     15    color: blue;
     16    text-box-edge: text;
     17    user-modify: read-only;
     18    background-repeat-x: repeat;
     19  }
     20  div {
     21    overflow-anchor: auto;
     22  }
     23  </style>
     24  <body>
     25    <div>test</div>
     26  </body>
     27 `;
     28 
     29 const TEST_DATA_SELECTED = [
     30  {
     31    type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
     32    property: "text-box-edge",
     33    url: "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-box-edge",
     34    deprecated: false,
     35    experimental: false,
     36  },
     37  {
     38    type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY_ALIASES,
     39    property: "user-modify",
     40    url: "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/user-modify",
     41    aliases: ["user-modify"],
     42    deprecated: true,
     43    experimental: false,
     44  },
     45  {
     46    type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
     47    property: "background-repeat-x",
     48    // No MDN url, but a spec one
     49    specUrl:
     50      "https://drafts.csswg.org/css-backgrounds-4/#background-repeat-longhands",
     51    deprecated: false,
     52    experimental: true,
     53  },
     54  // TODO: Write a test for it when we have a property with no MDN url nor spec url Bug 1840910
     55 ];
     56 
     57 const TEST_DATA_ALL = [
     58  ...TEST_DATA_SELECTED,
     59  {
     60    type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
     61    property: "overflow-anchor",
     62    url: "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/overflow-anchor",
     63    deprecated: false,
     64    experimental: false,
     65  },
     66 ];
     67 
     68 add_task(async function () {
     69  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     70 
     71  const { allElementsPane, selectedElementPane } =
     72    await openCompatibilityView();
     73 
     74  // If the test fail because the properties used are no longer in the dataset, or they
     75  // now have mdn/spec url although we expected them not to, uncomment the next line
     76  // to get all the properties in the dataset that don't have a MDN url.
     77  // logCssCompatDataPropertiesWithoutMDNUrl()
     78 
     79  info("Check the content of the issue list on the selected element");
     80  await assertIssueList(selectedElementPane, TEST_DATA_SELECTED);
     81 
     82  info("Check the content of the issue list on all elements");
     83  await assertIssueList(allElementsPane, TEST_DATA_ALL);
     84 });