tor-browser

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

gap-decorations-010-crash.html (1070B)

      1 <!DOCTYPE html>
      2 <head>
      3    <title>Make sure we don't crash while attempting to animate.</title>
      4    <link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
      5    <link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
      6 </head>
      7 <style>
      8    .crazy-class {
      9      height: 110px;
     10      width: 110px;
     11      display: flex;
     12 
     13      column-gap: 10px;
     14 
     15      column-rule-style: solid;
     16      column-rule-width: 1px; /* start at 1px */
     17    }
     18 
     19    .flex-item {
     20      width: 50px;
     21    }
     22  </style>
     23 </head>
     24 <body>
     25  <div class="crazy-class">
     26    <div class="flex-item"></div>
     27    <div class="flex-item"></div>
     28  </div>
     29 
     30  <script>
     31    window.addEventListener('load', () => {
     32      const container = document.querySelector('.crazy-class');
     33 
     34      // Animate row rule color from green → red
     35      container.animate(
     36        [
     37          { rowRuleColor: 'green' },
     38          { rowRuleColor: 'red' }
     39        ],
     40        {
     41          duration: 2000,
     42          easing: 'ease-out',
     43          fill: 'forwards'
     44        }
     45      );
     46    });
     47  </script>
     48 </body>
     49 </html>