tor-browser

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

local-inherit-substitution.html (2471B)

      1 <!DOCTYPE html>
      2 <title>Custom Functions: Local inherit() substitution</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-mixins-1/">
      4 <link rel="help" href="https://drafts.csswg.org/css-values-5/#inherit-notation">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <script src="resources/utils.js"></script>
      8 
      9 <div id=parent>
     10  <div id=target></div>
     11 </div>
     12 <div id=main></div>
     13 
     14 <!-- To pass, a test must produce matching computed values for '--actual'
     15     and '--expected' on '#target'. -->
     16 
     17 <template data-name="inherit() refers to parent stack frame (element)">
     18  <style>
     19    @function --f() {
     20      --x: FAIL2;
     21      result: inherit(--x);
     22    }
     23    #parent {
     24      --x: FAIL1;
     25    }
     26    #parent > #target {
     27      --x: PASS;
     28      --actual: --f();
     29      --expected: PASS;
     30    }
     31  </style>
     32 </template>
     33 
     34 <template data-name="inherit() refers to parent stack frame (other function call)">
     35  <style>
     36    @function --f() {
     37      --x: PASS;
     38      result: --g();
     39    }
     40    @function --g() {
     41      --x: FAIL3;
     42      result: inherit(--x);
     43    }
     44    #parent {
     45      --x: FAIL1;
     46    }
     47    #parent > #target {
     48      --x: FAIL2;
     49      --actual: --f();
     50      --expected: PASS;
     51    }
     52  </style>
     53 </template>
     54 
     55 <template data-name="inherit() referring to guaranteed-invalid in parent frame">
     56  <style>
     57    @function --f() {
     58      --x: var(--noexist);
     59      result: --g();
     60    }
     61    @function --g() {
     62      --x: FAIL3;
     63      result: inherit(--x, PASS);
     64    }
     65    #parent {
     66      --x: FAIL1;
     67    }
     68    #parent > #target {
     69      --x: FAIL2;
     70      --actual: --f();
     71      --expected: PASS;
     72    }
     73  </style>
     74 </template>
     75 
     76 <template data-name="inherit() referring to cycle in parent frame">
     77  <style>
     78    @function --f() {
     79      --x: var(--x);
     80      result: --g();
     81    }
     82    @function --g() {
     83      --x: FAIL3;
     84      result: inherit(--x, PASS);
     85    }
     86    #parent {
     87      --x: FAIL1;
     88    }
     89    #parent > #target {
     90      --x: FAIL2;
     91      --actual: --f();
     92      --expected: PASS;
     93    }
     94  </style>
     95 </template>
     96 
     97 
     98 <template data-name="inherit() referring to typed value in parent frame">
     99  <style>
    100    @function --f(--x <length>) {
    101      result: --g();
    102    }
    103    @function --g() {
    104      --x: 14px;
    105      result: inherit(--x);
    106    }
    107    #parent {
    108      --x: 12px;
    109    }
    110    #parent > #target {
    111      --x: 13px;
    112      --actual: --f(42.0px);
    113      --expected: 42px;
    114    }
    115  </style>
    116 </template>
    117 
    118 <script>
    119  test_all_templates();
    120 </script>