tor-browser

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

rule-edge-inset-bidirectional-shorthand.html (2970B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <meta charset="utf-8">
      5 <title>CSS Gap Decorations: rule-edge-inset shorthands</title>
      6 <link rel="help" href="https://www.w3.org/TR/css-gaps-1/#inset">
      7 <meta name="assert"
      8    content="rule-edge-inset supports the full grammar '<length-percentage> <length-percentage>?'.">
      9 <script src="/resources/testharness.js"></script>
     10 <script src="/resources/testharnessreport.js"></script>
     11 <script src="/css/support/shorthand-testcommon.js"></script>
     12 </head>
     13 <body>
     14    <script>
     15        const rule_properties = {
     16            'rule-edge-inset': ['column-rule-edge-inset-start', 'column-rule-edge-inset-end',
     17                'row-rule-edge-inset-start', 'row-rule-edge-inset-end']
     18        };
     19 
     20        const bidirectionalTestCases = [
     21            {
     22                input: '0px',
     23                expected: {
     24                    columnRuleEdgeInsetStart: '0px',
     25                    columnRuleEdgeInsetEnd: '0px',
     26                    rowRuleEdgeInsetStart: '0px',
     27                    rowRuleEdgeInsetEnd: '0px'
     28                }
     29            },
     30            {
     31                input: '10px',
     32                expected: {
     33                    columnRuleEdgeInsetStart: '10px',
     34                    columnRuleEdgeInsetEnd: '10px',
     35                    rowRuleEdgeInsetStart: '10px',
     36                    rowRuleEdgeInsetEnd: '10px'
     37                }
     38            },
     39            {
     40                input: '50%',
     41                expected: {
     42                    columnRuleEdgeInsetStart: '50%',
     43                    columnRuleEdgeInsetEnd: '50%',
     44                    columnRuleEdgeInsetStart: '50%',
     45                    columnRuleEdgeInsetEnd: '50%',
     46                    rowRuleEdgeInsetStart: '50%',
     47                    rowRuleEdgeInsetEnd: '50%',
     48                    rowRuleEdgeInsetStart: '50%',
     49                    rowRuleEdgeInsetEnd: '50%',
     50                }
     51            },
     52            {
     53                input: '10px 20px',
     54                expected: {
     55                    columnRuleEdgeInsetStart: '10px',
     56                    columnRuleEdgeInsetEnd: '20px',
     57                    rowRuleEdgeInsetStart: '10px',
     58                    rowRuleEdgeInsetEnd: '20px',
     59                }
     60            },
     61        ];
     62 
     63 
     64        for (rule_property in rule_properties) {
     65            const test_cases = bidirectionalTestCases;
     66 
     67            for (const { input, expected } of test_cases) {
     68                const [columnRuleEdgeInsetStart, columnRuleEdgeInsetEnd, rowRuleEdgeInsetStart, rowRuleEdgeInsetEnd] = rule_properties[rule_property];
     69 
     70                test_shorthand_value(rule_property, input, {
     71                    [columnRuleEdgeInsetStart]: expected.columnRuleEdgeInsetStart,
     72                    [columnRuleEdgeInsetEnd]: expected.columnRuleEdgeInsetEnd,
     73                    [rowRuleEdgeInsetStart]: expected.rowRuleEdgeInsetStart,
     74                    [rowRuleEdgeInsetEnd]: expected.rowRuleEdgeInsetEnd,
     75                });
     76            }
     77        }
     78    </script>
     79 </body>
     80 </html>