tor-browser

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

gap-decorations-col-rule-width.html (1966B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <meta charset="utf-8">
      5 <title>CSS Gap Decorations: Ensure getComputedStyle for column-rule-width is as specified with multiple values</title>
      6 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#column-row-rule-width">
      7 <link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com">
      8 <script src="/resources/testharness.js" type="text/javascript"></script>
      9 <script src="/resources/testharnessreport.js" type="text/javascript"></script>
     10 </head>
     11 <body>
     12 <div id="target1"></div>
     13 <div id="target2"></div>
     14 <div id="target3"></div>
     15 <style>
     16  #target1 {
     17    column-rule-width: thin;
     18  }
     19 
     20  #target2 {
     21    column-rule-width: 5px 10px 15px;
     22  }
     23 
     24  #target3 {
     25    column-rule-width: repeat(auto, 5px);
     26  }
     27 </style>
     28 <script>
     29  test(function() {
     30    const containerStyle = window.getComputedStyle(document.querySelector('#target1'));
     31 
     32    const thinWidth = getComputedStyle(document.getElementById('target1')).columnRuleWidth; // e.g. 1px
     33    const columnRuleWidth = containerStyle.getPropertyValue('column-rule-width');
     34    assert_equals(columnRuleWidth, thinWidth);
     35 
     36  }, "`column-rule-width` should be independent of column-rule-style, hence should be as specified.");
     37 
     38  test(function() {
     39    const containerStyle = window.getComputedStyle(document.querySelector('#target2'));
     40    const columnRuleWidth = containerStyle.getPropertyValue('column-rule-width');
     41    assert_equals(columnRuleWidth, '5px 10px 15px');
     42 
     43  }, "`column-rule-width` should be as specified regardless of `column-rule-style` with multiple values");
     44 
     45  test(function() {
     46    const containerStyle = window.getComputedStyle(document.querySelector('#target3'));
     47    const columnRuleWidth = containerStyle.getPropertyValue('column-rule-width');
     48    assert_equals(columnRuleWidth, 'repeat(auto, 5px)');
     49 
     50  }, "`column-rule-width` should be as specified regardless of `column-rule-style` with multiple (repeat) values");
     51 </script>
     52 </body>
     53 </html>