tor-browser

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

local-attr-substitution.html (2721B)

      1 <!DOCTYPE html>
      2 <title>Custom Functions: Local substitution of var() in attribute value</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 attribute value substitutes locally">
     15  <style>
     16    @function --f() {
     17      --x: PASS;
     18      result: attr(data-x type(*));
     19    }
     20    #target {
     21      --x: FAIL;
     22      --actual: --f();
     23      --expected: PASS;
     24    }
     25  </style>
     26 </template>
     27 
     28 <template data-name="var() in attribute value substitutes locally, argument">
     29  <style>
     30    @function --f(--x) {
     31      result: attr(data-x type(*));
     32    }
     33    #target {
     34      --x: FAIL;
     35      --actual: --f(PASS);
     36      --expected: PASS;
     37    }
     38  </style>
     39 </template>
     40 
     41 <template data-name="var() in attribute value substitutes locally, typed">
     42  <style>
     43    @function --f() returns <length> {
     44      --x: calc(10px + 2px);
     45      result: attr(data-x type(<length>));
     46    }
     47    #target {
     48      --x: calc(10px + 1px);
     49      --actual: --f();
     50      --expected: 12px;
     51    }
     52  </style>
     53 </template>
     54 
     55 <template data-name="attr() fallback substitutes locally">
     56  <style>
     57    @function --f() {
     58      --x: PASS;
     59      result: attr(data-unknown, var(--x));
     60    }
     61    #target {
     62      --x: FAIL;
     63      --actual: --f();
     64      --expected: PASS;
     65    }
     66  </style>
     67 </template>
     68 
     69 <template data-name="attr() cycle through local">
     70  <style>
     71    @function --f() {
     72      --x: attr(data-x type(*));
     73      --y: attr(data-x type(*), PASS);
     74      result: var(--y, PASS);
     75    }
     76    #target {
     77      --x: FAIL1;
     78      --y: FAIL2;
     79      --actual: --f();
     80      --expected: PASS;
     81    }
     82  </style>
     83 </template>
     84 
     85 <template data-name="attr() cycle through unused fallback in local">
     86  <style>
     87    @function --f() {
     88      --valid: PASS;
     89      --x: var(--valid, attr(data-x type(*)));
     90      --y: attr(data-x type(*), FAIL);
     91      result: var(--y, FAIL);
     92    }
     93    #target {
     94      --x: FAIL1;
     95      --y: FAIL2;
     96      --actual: --f();
     97      --expected: PASS;
     98    }
     99  </style>
    100 </template>
    101 
    102 <template data-name="attr() cycle through function">
    103  <style>
    104    @function --f() {
    105      --local: --g();
    106      result: var(--local);
    107    }
    108    @function --g() {
    109      result: attr(data-f type(*));
    110    }
    111    #target {
    112      --local: FAIL;
    113      --tmp: --f();
    114      --actual: var(--tmp, PASS);
    115      --expected: PASS;
    116    }
    117  </style>
    118 </template>
    119 
    120 <script>
    121  test_all_templates();
    122 </script>