tor-browser

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

test_getRegisteredCustomProperties.html (2350B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <head>
      4  <title>Test InspectorUtils.getCSSRegisteredProperties</title>
      5  <script src="/tests/SimpleTest/SimpleTest.js"></script>
      6  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
      7  <style>
      8    @property --color-1 {
      9      syntax: "<color>";
     10      inherits: true;
     11      initial-value: blue;
     12    }
     13    @property --color-2 {
     14      syntax: "*";
     15      inherits: false;
     16    }
     17  </style>
     18 </head>
     19 <body>
     20 <code>InspectorUtils.getCSSRegisteredProperties</code>
     21 
     22 <script>
     23 "use strict";
     24 
     25 /** Test for InspectorUtils.getCSSRegisteredProperties */
     26 
     27 const { Assert } = SpecialPowers.ChromeUtils.importESModule(
     28  "resource://testing-common/Assert.sys.mjs"
     29 );
     30 const InspectorUtils = SpecialPowers.InspectorUtils;
     31 
     32 CSS.registerProperty({
     33  name: "--length-1",
     34  syntax: "<length>",
     35  initialValue: "10px",
     36  inherits: true,
     37 });
     38 CSS.registerProperty({
     39  name: "--length-2",
     40  syntax: "foo | <integer>+ | <percentage> | <length># | auto",
     41  initialValue: "100vw",
     42  inherits: true
     43 });
     44 CSS.registerProperty({
     45  name: "--length-3",
     46  syntax: "*",
     47  inherits: false
     48 });
     49 CSS.registerProperty({
     50  name: "--length-4",
     51  syntax: "*",
     52  initialValue: "",
     53  inherits: false
     54 });
     55 
     56 // The order isn't guaranteed, so sort variable by their name.
     57 // We get a Proxy, so build another array to properly sort it.
     58 const results = Array.from(InspectorUtils.getCSSRegisteredProperties(document));
     59 results.sort((a,b) => a.name < b.name ? -1 : 1)
     60 
     61 Assert.deepEqual(
     62  results,
     63  [{
     64    name: "--color-1",
     65    syntax: "<color>",
     66    inherits: true,
     67    initialValue: "blue",
     68    fromJS: false,
     69  },{
     70    name: "--color-2",
     71    syntax: "*",
     72    inherits: false,
     73    initialValue: null,
     74    fromJS: false,
     75  },{
     76    name: "--length-1",
     77    syntax: "<length>",
     78    inherits: true,
     79    initialValue: "10px",
     80    fromJS: true,
     81  }, {
     82    name: "--length-2",
     83    syntax: "foo | <integer>+ | <percentage> | <length># | auto",
     84    inherits: true,
     85    initialValue: "100vw",
     86    fromJS: true,
     87  }, {
     88    name: "--length-3",
     89    syntax: "*",
     90    inherits: false,
     91    initialValue: null,
     92    fromJS: true,
     93  }, {
     94    name: "--length-4",
     95    syntax: "*",
     96    inherits: false,
     97    initialValue: "",
     98    fromJS: true,
     99  }],
    100  `Got registered CSS properties`
    101 );
    102 
    103 // Test needs at least one `ok/is` call
    104 ok(true, "Success!")
    105 
    106 </script>
    107 </pre>
    108 </body>
    109 </html>