tor-browser

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

local-if-substitution.html (6712B)

      1 <!DOCTYPE html>
      2 <title>Custom Functions: Local substitution of var() in if()</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#locally-substitute-a-var">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <script src="resources/utils.js"></script>
      7 
      8 <div id=target data-x="var(--x)" data-f="--f()"></div>
      9 <div id=main></div>
     10 
     11 <!-- To pass, a test must produce matching computed values for --actual and
     12     --expected on #target. -->
     13 
     14 <template data-name="var() in if() condition's custom property value substitutes locally">
     15  <style>
     16    @function --f() {
     17      --x: 3px;
     18      result: if(style(--x: 3px): PASS; else: FAIL;);
     19    }
     20    #target {
     21      --x: 1px;
     22      --actual: --f();
     23      --expected: PASS;
     24    }
     25  </style>
     26 </template>
     27 
     28 <template data-name="var() in if() condition's specified value substitutes locally">
     29  <style>
     30    @function --f() {
     31      --x: 3px;
     32      result: if(style(--y: var(--x)): PASS; else: FAIL;);
     33    }
     34    #target {
     35      --x: 1px;
     36      --y: 3px;
     37      --actual: --f();
     38      --expected: PASS;
     39    }
     40  </style>
     41 </template>
     42 
     43 <template data-name="var() in if() declaration value substitutes locally">
     44  <style>
     45    @function --f() {
     46      --x: PASS;
     47      result: if(style(--true): var(--x); else: FAIL;);
     48    }
     49    #target {
     50      --true: true;
     51      --x: FAIL;
     52      --actual: --f();
     53      --expected: PASS;
     54    }
     55  </style>
     56 </template>
     57 
     58 <template data-name="var() in if() condition's custom property value substitutes locally, argument">
     59  <style>
     60    @function --f(--x) {
     61      result: if(style(--x: 3px): PASS; else: FAIL;);
     62    }
     63    #target {
     64      --x: 1px;
     65      --actual: --f(3px);
     66      --expected: PASS;
     67    }
     68  </style>
     69 </template>
     70 
     71 <template data-name="var() in if() condition's specified value substitutes locally, argument">
     72  <style>
     73    @function --f(--x) {
     74      result: if(style(--y: var(--x)): PASS; else: FAIL;);
     75    }
     76    #target {
     77      --x: 1px;
     78      --y: 3px;
     79      --actual: --f(3px);
     80      --expected: PASS;
     81    }
     82  </style>
     83 </template>
     84 
     85 <template data-name="var() in if() declaration value substitutes locally, argument">
     86  <style>
     87    @function --f(--x) {
     88      result: if(style(--true): var(--x); else: FAIL;);
     89    }
     90    #target {
     91      --true: true;
     92      --x: FAIL;
     93      --actual: --f(PASS);
     94      --expected: PASS;
     95    }
     96  </style>
     97 </template>
     98 
     99 <template data-name="dashed function in if() declaration value">
    100  <style>
    101    @function --f() {
    102      result: if(style(--true): --g(); else: FAIL;);
    103    }
    104    @function --g() {
    105      result: PASS;
    106    }
    107    #target {
    108      --true: true;
    109      --actual: --f();
    110      --expected: PASS;
    111    }
    112  </style>
    113 </template>
    114 
    115 <template data-name="dashed function with argument in if() declaration value">
    116  <style>
    117    @function --f(--x) {
    118      --true: true;
    119      result: if(style(--true): --g(var(--x)); else: FAIL;);
    120    }
    121    @function --g(--x) {
    122      result: var(--x, FAIL);
    123    }
    124    #target {
    125      --actual: --f(PASS);
    126      --expected: PASS;
    127    }
    128  </style>
    129 </template>
    130 
    131 <template data-name="if() cycle through local">
    132  <style>
    133    @function --f() {
    134      --x: if(style(--true): var(--x); else: FAIL;);
    135      result: var(--x, PASS);
    136    }
    137    #target {
    138      --true: true;
    139      --x: FAIL;
    140      --actual: --f();
    141      --expected: PASS;
    142    }
    143  </style>
    144 </template>
    145 
    146 <template data-name="if() cycle in condition custom property through local">
    147  <style>
    148    @function --f() {
    149      --x: if(style(--x): FAIL1; else: FAIL2;);
    150      result: var(--x, PASS);
    151    }
    152    #target {
    153      --x: 1px;
    154      --actual: --f();
    155      --expected: PASS;
    156    }
    157  </style>
    158 </template>
    159 
    160 <template data-name="if() cycle in condition specified value through local">
    161  <style>
    162    @function --f() {
    163      --x: if(style(--y: var(--x)): FAIL1; else: FAIL2;);
    164      result: var(--x, PASS);
    165    }
    166    #target {
    167      --y: 1px;
    168      --x: 1px;
    169      --actual: --f();
    170      --expected: PASS;
    171    }
    172  </style>
    173 </template>
    174 
    175 <template data-name="if() cycle through function">
    176  <style>
    177    @function --f() {
    178      --local: --g();
    179      result: var(--local);
    180    }
    181    @function --g() {
    182      result: if(style(--true): --f());
    183    }
    184    #target {
    185      --true: true;
    186      --local: FAIL;
    187      --tmp: --f();
    188      --actual: var(--tmp, PASS);
    189      --expected: PASS;
    190    }
    191  </style>
    192 </template>
    193 
    194 <template data-name="if() no cycle in overridden local">
    195  <style>
    196    @function --f() {
    197      --x: 3px;
    198      result: if(style(--x): PASS; else: FAIL);
    199    }
    200    #target {
    201      --x: var(--x);
    202      --actual: --f();
    203      --expected: PASS;
    204    }
    205  </style>
    206 </template>
    207 
    208 <template data-name="if() no cycle in overridden argument">
    209  <style>
    210    @function --f(--x) {
    211      result: if(style(--x): PASS; else: FAIL);
    212    }
    213    #target {
    214      --x: var(--x);
    215      --actual: --f(3px);
    216      --expected: PASS;
    217    }
    218  </style>
    219 </template>
    220 
    221 <template data-name="CSS-wide keywords are interpreted locally (initial)">
    222  <style>
    223    @function --f(--c: green) {
    224      result: if(style(--c: initial): PASS; else: FAIL);
    225    }
    226    @function --g() {
    227      --c: red;
    228      result: --f();
    229    }
    230    #target {
    231      --actual: --g();
    232      --expected: PASS;
    233    }
    234  </style>
    235 </template>
    236 
    237 <template data-name="CSS-wide keywords are interpreted locally (inherit)">
    238  <style>
    239    @function --f(--c: red) {
    240      --c: green;
    241      result: if(style(--c: inherit): PASS; else: FAIL);
    242    }
    243    @function --g() {
    244      --c: green;
    245      result: --f();
    246    }
    247    #target {
    248      --actual: --g();
    249      --expected: PASS;
    250    }
    251  </style>
    252 </template>
    253 
    254 <template data-name="CSS-wide keywords are interpreted locally (guaranteed-invalid, initial)">
    255  <style>
    256    @function --f() {
    257      result: if(style(--c: initial): PASS; else: FAIL);
    258    }
    259    #target {
    260      --actual: --f();
    261      --expected: PASS;
    262    }
    263  </style>
    264 </template>
    265 
    266 <template data-name="CSS-wide keywords are interpreted locally (guaranteed-invalid, unset)">
    267  <style>
    268    @function --f() {
    269      result: if(style(--c: unset): PASS; else: FAIL);
    270    }
    271    #target {
    272      --actual: --f();
    273      --expected: PASS;
    274    }
    275  </style>
    276 </template>
    277 
    278 <template data-name="CSS-wide keywords are interpreted locally (revert)">
    279  <style>
    280    @function --f() {
    281      result: if(style(--c: revert): FAIL; else: PASS);
    282    }
    283    #target {
    284      --actual: --f();
    285      --expected: PASS;
    286    }
    287  </style>
    288 </template>
    289 
    290 <template data-name="CSS-wide keywords are interpreted locally (revert-layer)">
    291  <style>
    292    @function --f() {
    293      result: if(style(--c: revert-layer): FAIL; else: PASS);
    294    }
    295    #target {
    296      --actual: --f();
    297      --expected: PASS;
    298    }
    299  </style>
    300 </template>
    301 
    302 <script>
    303  test_all_templates();
    304 </script>