tor-browser

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

rule-inset-shorthand.html (3850B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <meta charset="utf-8">
      5 <title>CSS Gap Decorations: rule-inset shorthands</title>
      6 <link rel="help" href="https://www.w3.org/TR/css-gaps-1/#propdef-rule-inset">
      7 <meta name="assert"
      8    content="rule-inset supports the full grammar '<length-percentage> <length-percentage>? /[<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            'column-rule-inset': ['column-rule-edge-inset-start', 'column-rule-edge-inset-end',
     17                'column-rule-interior-inset-start', 'column-rule-interior-inset-end'],
     18            'row-rule-inset': ['row-rule-edge-inset-start', 'row-rule-edge-inset-end',
     19                'row-rule-interior-inset-start', 'row-rule-interior-inset-end']
     20        };
     21        const testCases = [
     22            {
     23                input: '0px',
     24                expected: {
     25                    ruleEdgeInsetStart: '0px',
     26                    ruleEdgeInsetEnd: '0px',
     27                    ruleInteriorInsetStart: '0px',
     28                    ruleInteriorInsetEnd: '0px',
     29                }
     30            },
     31            {
     32                input: '10px',
     33                expected: {
     34                    ruleEdgeInsetStart: '10px',
     35                    ruleEdgeInsetEnd: '10px',
     36                    ruleInteriorInsetStart: '10px',
     37                    ruleInteriorInsetEnd: '10px'
     38                }
     39            },
     40            {
     41                input: '50%',
     42                expected: {
     43                    ruleEdgeInsetStart: '50%',
     44                    ruleEdgeInsetEnd: '50%',
     45                    ruleInteriorInsetStart: '50%',
     46                    ruleInteriorInsetEnd: '50%',
     47                }
     48            },
     49            {
     50                input: '10px 20px',
     51                expected: {
     52                    ruleEdgeInsetStart: '10px',
     53                    ruleEdgeInsetEnd: '20px',
     54                    ruleInteriorInsetStart: '10px',
     55                    ruleInteriorInsetEnd: '20px',
     56                }
     57            },
     58            {
     59                input: '10px 20px / 30px',
     60                expected: {
     61                    ruleEdgeInsetStart: '10px',
     62                    ruleEdgeInsetEnd: '20px',
     63                    ruleInteriorInsetStart: '30px',
     64                    ruleInteriorInsetEnd: '30px',
     65                }
     66            },
     67            {
     68                input: '10px / 20px 30px',
     69                expected: {
     70                    ruleEdgeInsetStart: '10px',
     71                    ruleEdgeInsetEnd: '10px',
     72                    ruleInteriorInsetStart: '20px',
     73                    ruleInteriorInsetEnd: '30px',
     74                }
     75            },
     76            {
     77                input: '10px 20px / 30px 40px',
     78                expected: {
     79                    ruleEdgeInsetStart: '10px',
     80                    ruleEdgeInsetEnd: '20px',
     81                    ruleInteriorInsetStart: '30px',
     82                    ruleInteriorInsetEnd: '40px',
     83                }
     84            },
     85        ];
     86 
     87 
     88        for (rule_property in rule_properties) {
     89            const test_cases = testCases;
     90 
     91            for (const { input, expected } of test_cases) {
     92                const [ruleEdgeInsetStart, ruleEdgeInsetEnd, ruleInteriorInsetStart, ruleInteriorInsetEnd] = rule_properties[rule_property];
     93                test_shorthand_value(rule_property, input, {
     94                    [ruleEdgeInsetStart]: expected.ruleEdgeInsetStart,
     95                    [ruleEdgeInsetEnd]: expected.ruleEdgeInsetEnd,
     96                    [ruleInteriorInsetStart]: expected.ruleInteriorInsetStart,
     97                    [ruleInteriorInsetEnd]: expected.ruleInteriorInsetEnd,
     98                });
     99            }
    100        }
    101    </script>
    102 </body>
    103 </html>