tor-browser

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

test_variables.html (4147B)

      1 <!DOCTYPE type>
      2 <title>Assorted CSS variable tests</title>
      3 <script src="/tests/SimpleTest/SimpleTest.js"></script>
      4 <link rel="stylesheet" href="/tests/SimpleTest/test.css" type="text/css">
      5 
      6 <style id="test1">
      7 </style>
      8 
      9 <style id="test2">
     10 </style>
     11 
     12 <style id="test3">
     13 </style>
     14 
     15 <style id="test4">
     16 </style>
     17 
     18 <div id="t4"></div>
     19 
     20 <style id="test5">
     21 </style>
     22 
     23 <div id="t5"></div>
     24 
     25 <style id="test6">
     26 </style>
     27 
     28 <style id="test7">
     29 </style>
     30 
     31 <style id="test8">
     32 </style>
     33 
     34 <script>
     35 var tests = [
     36  function() {
     37    // https://bugzilla.mozilla.org/show_bug.cgi?id=773296#c121
     38    var test1 = document.getElementById("test1");
     39    test1.textContent = "p { --a:123!important; }";
     40    var declaration = test1.sheet.cssRules[0].style;
     41    declaration.cssText;
     42    declaration.setProperty("color", "black");
     43    is(declaration.getPropertyValue("--a"), "123");
     44  },
     45 
     46  function() {
     47    // https://bugzilla.mozilla.org/show_bug.cgi?id=773296#c121
     48    var test2 = document.getElementById("test2");
     49    test2.textContent = "p { --a: a !important; }";
     50    var declaration = test2.sheet.cssRules[0].style;
     51    is(declaration.getPropertyPriority("--a"), "important");
     52  },
     53 
     54  function() {
     55    // https://bugzilla.mozilla.org/show_bug.cgi?id=955913
     56    var test3 = document.getElementById("test3");
     57    test3.textContent = "p { border-left-style: inset; padding: 1px; --decoration: line-through; }";
     58    var declaration = test3.sheet.cssRules[0].style;
     59    is(declaration[declaration.length - 1], "--decoration");
     60  },
     61 
     62  function() {
     63    // https://bugzilla.mozilla.org/show_bug.cgi?id=959973
     64    var test4 = document.getElementById("test4");
     65    test4.textContent = "#t4 { background-image: var(--a); }";
     66 
     67    var element = document.getElementById("t4");
     68    var path = window.location.pathname;
     69    var currentDir = path.substring(0, path.lastIndexOf('/'));
     70    var imageURL = "http://mochi.test:8888" + currentDir + "/image.png";
     71 
     72    is(window.getComputedStyle(element).getPropertyValue("background-image"), "url(\"" + imageURL +"\")");
     73  },
     74 
     75  function() {
     76    // https://bugzilla.mozilla.org/show_bug.cgi?id=1043713
     77    var test5 = document.getElementById("test5");
     78    test5.textContent = "#t5 { --SomeVariableName: a; }";
     79 
     80    var declaration = test5.sheet.cssRules[0].style;
     81    is(declaration.item(0), "--SomeVariableName", "custom property name returned by item() on style declaration");
     82    is(declaration[0], "--SomeVariableName", "custom property name returned by indexed getter on style declaration");
     83 
     84    var element = document.getElementById("t5");
     85    var cs = window.getComputedStyle(element);
     86 
     87    is(cs.item(cs.length - 1), "--SomeVariableName", "custom property name returned by item() on computed style");
     88    is(cs[cs.length - 1], "--SomeVariableName", "custom property name returned by indexed getter on style declaration");
     89  },
     90 
     91  function() {
     92    // https://bugzilla.mozilla.org/show_bug.cgi?id=1154356
     93    var test7 = document.getElementById("test7");
     94    test7.textContent = "p { --weird\\;name: green; }";
     95    is(test7.sheet.cssRules[0].style.cssText, "--weird\\;name: green;");
     96    test7.textContent = "p { --0: green; }";
     97    is(test7.sheet.cssRules[0].style.cssText, "--0: green;");
     98  },
     99 
    100  function() {
    101    // https://bugzilla.mozilla.org/show_bug.cgi?id=1330172
    102    var test8 = document.getElementById("test8");
    103    test8.textContent = "p { --a:inHerit; }";
    104    is(test8.sheet.cssRules[0].style.cssText, "--a: inherit;");
    105    test8.textContent = "p { --b: initial!important; }";
    106    is(test8.sheet.cssRules[0].style.cssText, "--b: initial !important;");
    107    test8.textContent = "p { --c:   UNSET  !important }";
    108    is(test8.sheet.cssRules[0].style.cssText, "--c: unset !important;");
    109  },
    110 ];
    111 
    112 function prepareTest() {
    113  // Load an external style sheet for test 4.
    114  var e = document.createElement("link");
    115  e.addEventListener("load", runTest);
    116  e.setAttribute("rel", "stylesheet");
    117  e.setAttribute("href", "support/external-variable-url.css");
    118  document.head.appendChild(e);
    119 }
    120 
    121 function runTest() {
    122  tests.forEach(function(fn) { fn(); });
    123  SimpleTest.finish();
    124 }
    125 
    126 SimpleTest.waitForExplicitFinish();
    127 prepareTest();
    128 </script>