tor-browser

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

animation-name-in-nested-shadow.html (2494B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <title>Matching animation-name with nested shadow roots</title>
      5 <link rel="author" title="Antoine Quint" href="mailto:graouts@webkit.org">
      6 <link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=296048">
      7 <link rel="help" href="https://drafts.csswg.org/css-scoping-1/#shadow-names">
      8 <link rel="match" href="animation-name-in-nested-shadow-ref.html">
      9 </head>
     10 <body>
     11 
     12 <style>
     13  body {
     14    margin: 0;
     15  }
     16 
     17  @keyframes doc {
     18    from, to { background-color: lightgreen }
     19  }
     20 
     21  .anim {
     22    width: 100px;
     23    height: 100px;
     24    background-color: red;
     25    animation-duration: 1s;
     26    animation-fill-mode: both;
     27  }
     28 
     29  #doc_anim_doc { animation-name: doc; }
     30  #doc_anim_outer { animation-name: outer; }
     31  #doc_anim_inner { animation-name: inner; }
     32 
     33  #outer_host {
     34    position: absolute;
     35    left: 100px;
     36    top: 0;
     37  }
     38 </style>
     39 
     40 <div id="doc_anim_doc" class="anim"></div>
     41 <div id="doc_anim_outer" class="anim"></div>
     42 <div id="doc_anim_inner" class="anim"></div>
     43 <div id="outer_host">
     44  <template shadowrootmode="open">
     45    <style>
     46      @keyframes outer {
     47        from, to { background-color: green }
     48      }
     49 
     50      .anim {
     51        width: 100px;
     52        height: 100px;
     53        background-color: red;
     54        animation-duration: 1s;
     55        animation-fill-mode: both;
     56      }
     57 
     58      #outer_anim_doc { animation-name: doc; }
     59      #outer_anim_outer { animation-name: outer; }
     60      #outer_anim_inner { animation-name: inner; }
     61 
     62      #inner_host {
     63        position: absolute;
     64        left: 100px;
     65        top: 0;
     66      }
     67 
     68    </style>
     69    <div id="outer_anim_doc" class="anim"></div>
     70    <div id="outer_anim_outer" class="anim"></div>
     71    <div id="outer_anim_inner" class="anim"></div>
     72    <div id="inner_host">
     73      <template shadowrootmode="open">
     74        <style>
     75          @keyframes inner {
     76            from, to { background-color: darkgreen }
     77          }
     78 
     79          .anim {
     80            width: 100px;
     81            height: 100px;
     82            background-color: red;
     83            animation-duration: 1s;
     84            animation-fill-mode: both;
     85          }
     86 
     87          #inner_anim_doc { animation-name: doc; }
     88          #inner_anim_outer { animation-name: outer; }
     89          #inner_anim_inner { animation-name: inner; }
     90        </style>
     91        <div id="inner_anim_doc" class="anim"></div>
     92        <div id="inner_anim_outer" class="anim"></div>
     93        <div id="inner_anim_inner" class="anim"></div>
     94      </template>
     95    </div>
     96  </template>
     97 </div>
     98 
     99 </body>
    100 </html>