tor-browser

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

function-shadow-container.html (2924B)

      1 <!DOCTYPE html>
      2 <title>Custom Functions: Container Queries + ShadowDOM</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#using-custom-functions">
      4 <link rel="help" href="https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-reference">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <script src="resources/utils.js"></script>
      8 
      9 <div data-name="Can query named container in shadow">
     10  <template shadowrootmode=open>
     11    <style>
     12      @function --b() {
     13        @container --cont (width = 10px) {
     14          result: 10px;
     15        }
     16      }
     17      ::part(target) {
     18        --actual: --b();
     19        --expected: 10px;
     20      }
     21      .container {
     22        container: --cont / size;
     23        width: 10px;
     24        height: 10px;
     25      }
     26    </style>
     27    <div id=target part=target></div>
     28  </template>
     29 </div>
     30 
     31 <div data-name="::part() can see inner named containers">
     32  <template shadowrootmode=open>
     33    <style>
     34      @function --b() {
     35        @container --cont (width = 5px) {
     36          result: 5px;
     37        }
     38        @container --cont (width = 10px) {
     39          result: 10px;
     40        }
     41      }
     42      ::part(target) {
     43        --actual: --b();
     44        --expected: 5px;
     45      }
     46      .container {
     47        container: --cont / size;
     48        width: 10px;
     49        height: 10px;
     50      }
     51    </style>
     52    <div class=container>
     53      <template shadowrootmode=open>
     54        <style>
     55          @function --b() {
     56            result: FAIL;
     57          }
     58          .container {
     59            container: --cont / size;
     60            width: 5px;
     61            height: 5px;
     62          }
     63        </style>
     64        <div class=container>
     65          <div id=target part=target></div>
     66        </div>
     67      </template>
     68    </div>
     69  </template>
     70 </div>
     71 
     72 <div data-name="::slotted() can see inner named containers">
     73  <template shadowrootmode=open>
     74    <style>
     75      @function --b() {
     76        @container --cont (width = 5px) {
     77          result: 5px;
     78        }
     79        @container --cont (width = 10px) {
     80          result: 10px;
     81        }
     82      }
     83      .container {
     84        container: --cont / size;
     85        width: 10px;
     86        height: 10px;
     87      }
     88    </style>
     89    <div class=container>
     90      <template shadowrootmode=open>
     91        <style>
     92          @function --c() {
     93            @container --cont (width = 5px) {
     94              result: 5px;
     95            }
     96            @container --cont (width = 10px) {
     97              result: 10px;
     98            }
     99          }
    100          .container {
    101            container: --cont / size;
    102            width: 5px;
    103            height: 5px;
    104          }
    105          ::slotted(#target) {
    106            --actual: --b() --c();
    107            --expected: 5px 5px;
    108          }
    109        </style>
    110        <div class=container>
    111          <slot></slot>
    112        </div>
    113      </template>
    114      <div id=target></div>
    115    </div>
    116  </template>
    117 </div>
    118 
    119 <script>
    120  test_all_shadows();
    121 </script>