tor-browser

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

layer-vs-inline-style.html (1750B)

      1 <!DOCTYPE html>
      2 <link rel="help" href="https://drafts.csswg.org/css-cascade-5/#cascade-sort">
      3 <link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <style>
      7 #target, #reference {
      8  width: 100px;
      9  height: 100px;
     10 }
     11 
     12 #reference {
     13  background-color: green;
     14 }
     15 </style>
     16 
     17 <div id="target"></div>
     18 <div id="reference"></div>
     19 
     20 <script>
     21 // In all tests, #target should have green background color, same as #reference
     22 
     23 const testCases = [
     24  {
     25    title: 'Normal inline style > normal layered style',
     26    style: '@layer { #target { background-color: red; }}',
     27    inlineStyle: 'background-color: green'
     28  },
     29  {
     30    title: 'Normal inline style < important layered style',
     31    style: '@layer { #target { background-color: green !important; }}',
     32    inlineStyle: 'background-color: red'
     33  },
     34  {
     35    title: 'Important inline style > normal layered style',
     36    style: '@layer { #target { background-color: red; }}',
     37    inlineStyle: 'background-color: green !important'
     38  },
     39  {
     40    title: 'Important inline style > important layered style',
     41    style: '@layer { #target { background-color: red !important; }}',
     42    inlineStyle: 'background-color: green !important'
     43  },
     44 ];
     45 
     46 for (let testCase of testCases) {
     47  var documentStyle = document.createElement('style');
     48  documentStyle.appendChild(document.createTextNode(testCase['style']));
     49  document.head.appendChild(documentStyle);
     50 
     51  target.style = testCase['inlineStyle'];
     52 
     53  test(function () {
     54    assert_equals(getComputedStyle(target).backgroundColor,
     55                  getComputedStyle(reference).backgroundColor);
     56  }, testCase['title']);
     57 
     58  documentStyle.remove();
     59 }
     60 </script>