tor-browser

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

import-conditions.html (3555B)

      1 <!DOCTYPE html>
      2 <title>CSS Cascade Test: import conditions</title>
      3 <link rel="help" href="https://www.w3.org/TR/css-cascade-5/#import-conditions">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <style>
      7  @layer {
      8    .target { color: red; }
      9  }
     10 </style>
     11 <div id="target" class="target"></div>
     12 <script>
     13  const testCases = [
     14    {
     15      importCondition: "supports(display:block)",
     16      matches: true
     17    },
     18    {
     19      importCondition: "supports((display:flex))",
     20      matches: true
     21    },
     22    {
     23      importCondition: "supports((display:block) and (display:flex))",
     24      matches: true
     25    },
     26    {
     27      importCondition: "supports((display:block) and (foo:bar))",
     28      matches: false
     29    },
     30    {
     31      importCondition: "supports((display:block) or (display:flex))",
     32      matches: true
     33    },
     34    {
     35      importCondition: "supports((display:block) or (foo:bar))",
     36      matches: true
     37    },
     38    {
     39      importCondition: "supports(not (display: flex))",
     40      matches: false
     41    },
     42    {
     43      importCondition: "supports(display: block !important)",
     44      matches: true
     45    },
     46    {
     47      importCondition: "supports(foo:bar)",
     48      matches: false
     49    },
     50    {
     51      importCondition: "supports(supports(display:block))",
     52      matches: false
     53    },
     54    {
     55      importCondition: "supports(())",
     56      matches: false
     57    },
     58    {
     59      importCondition: "supports()",
     60      matches: false
     61    },
     62    {
     63      importCondition: "supports(display:block) (width >= 0px)",
     64      matches: true
     65    },
     66    {
     67      importCondition: "(width >= 0px) supports(foo:bar)",
     68      matches: false
     69    },
     70    {
     71      importCondition: "(width >= 0px) supports(display:block)",
     72      matches: false
     73    },
     74 
     75    // selector()
     76    {
     77      importCondition: "supports(selector(a))",
     78      matches: true
     79    },
     80    {
     81      importCondition: "supports(selector(p a))",
     82      matches: true
     83    },
     84    {
     85      importCondition: "supports(selector(p > a))",
     86      matches: true
     87    },
     88    {
     89      importCondition: "supports(selector(p + a))",
     90      matches: true
     91    },
     92 
     93    // font-tech()
     94    {
     95      importCondition: "supports(font-tech(color-COLRv1))",
     96      matches: true
     97    },
     98    {
     99      importCondition: "supports(font-tech(invalid))",
    100      matches: false
    101    },
    102 
    103    // font-format()
    104    {
    105      importCondition: "supports(font-format(opentype))",
    106      matches: true
    107    },
    108    {
    109      importCondition: "supports(font-format(woff))",
    110      matches: true
    111    },
    112    {
    113      importCondition: "supports(font-format(invalid))",
    114      matches: false
    115    },
    116    {
    117      importCondition: "layer(A.B) supports(font-format(opentype))",
    118      matches: true
    119    },
    120    {
    121      importCondition: "layer supports(selector(a))",
    122      matches: true
    123    },
    124  ];
    125  let target = document.getElementById("target");
    126  for (let testCase of testCases) {
    127    promise_test(async t => {
    128      let styleElement = document.createElement("style");
    129      styleElement.innerText = "@import url(data:text/css,.target{color:green}) " + testCase.importCondition + ";";
    130 
    131      await new Promise(resolve => {
    132        styleElement.onload = resolve;
    133        styleElement.onerror = resolve;
    134        document.head.appendChild(styleElement);
    135      });
    136 
    137      try {
    138        assert_equals(getComputedStyle(target).color, testCase.matches ? "rgb(0, 128, 0)" : "rgb(255, 0, 0)");
    139      } finally {
    140        styleElement.remove();
    141      }
    142    }, testCase.importCondition + " is " + (testCase.matches ? "" : "not ")  + "a valid import condition");
    143  }
    144 </script>