tor-browser

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

view-timeline-sticky-block.html (2507B)

      1 <!DOCTYPE html>
      2 <html id="top">
      3 <head>
      4 <meta charset="utf-8">
      5 <title>View timeline with sticky</title>
      6 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#viewtimeline-interface">
      7 <script src="/resources/testharness.js"></script>
      8 <script src="/resources/testharnessreport.js"></script>
      9 <script src="/web-animations/testcommon.js"></script>
     10 <script src="/scroll-animations/scroll-timelines/testcommon.js"></script>
     11 <script src="/scroll-animations/view-timelines/testcommon.js"></script>
     12 <style>
     13 
     14 #container {
     15  height: 500px;
     16  overflow: auto;
     17 }
     18 .space {
     19  height: 500px;
     20 }
     21 #targetp {
     22  background: yellow;
     23  position: sticky;
     24  top: 0px;
     25  bottom: 0px;
     26  height: 50px;
     27 }
     28 #target {
     29  height: 50px;
     30 }
     31 
     32 </style>
     33 </head>
     34 <body>
     35 <div id="container">
     36  <div class="space"></div>
     37  <div class="space">
     38    <div style="height: 200px"></div>
     39    <div id="targetp">
     40      <div id="target">Subject</div>
     41    </div>
     42  </div>
     43  <div class="space"></div>
     44 </div>
     45 <script type="text/javascript">
     46 
     47 promise_test(async t => {
     48  await runTimelineRangeTest(t, {
     49    rangeStart: { rangeName: 'cover', offset: CSS.percent(0) } ,
     50    rangeEnd: { rangeName: 'cover', offset: CSS.percent(100) },
     51    startOffset: 0,
     52    endOffset: 1000,
     53    axis: 'block'
     54  });
     55  await runTimelineRangeTest(t, {
     56    rangeStart: { rangeName: 'contain', offset: CSS.percent(0) } ,
     57    rangeEnd: { rangeName: 'contain', offset: CSS.percent(100) },
     58    startOffset: 50,
     59    endOffset: 950,
     60    axis: 'block'
     61  });
     62  await runTimelineRangeTest(t, {
     63    rangeStart: { rangeName: 'entry', offset: CSS.percent(0) },
     64    rangeEnd: { rangeName: 'entry', offset: CSS.percent(100) },
     65    startOffset: 0,
     66    endOffset: 50,
     67    axis: 'block'
     68  });
     69  await runTimelineRangeTest(t, {
     70    rangeStart: { rangeName: 'entry-crossing', offset: CSS.percent(0) },
     71    rangeEnd: { rangeName: 'entry-crossing', offset: CSS.percent(100) },
     72    startOffset: 0,
     73    endOffset: 50,
     74    axis: 'block'
     75  });
     76  await runTimelineRangeTest(t, {
     77    rangeStart:  { rangeName: 'exit', offset: CSS.percent(0) },
     78    rangeEnd: { rangeName: 'exit', offset: CSS.percent(100) },
     79    startOffset: 950,
     80    endOffset: 1000,
     81    axis: 'block'
     82  });
     83  await runTimelineRangeTest(t, {
     84    rangeStart:  { rangeName: 'exit-crossing', offset: CSS.percent(0) },
     85    rangeEnd: { rangeName: 'exit-crossing', offset: CSS.percent(100) },
     86    startOffset: 950,
     87    endOffset: 1000,
     88    axis: 'block'
     89  });
     90 }, 'View timeline with sticky target, block axis.' );
     91 
     92 </script>
     93 </body>
     94 </html>