tor-browser

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

anchor-scroll-update-004.html (1892B)

      1 <!DOCTYPE html>
      2 <html class="reftest-wait">
      3 <title>Anchored elements should update location on anchor's layout changes</title>
      4 <link rel="author" href="mailto:xiaochengh@chromium.org">
      5 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
      6 <link rel="match" href="reference/anchor-scroll-ref.html">
      7 <link rel="stylesheet" href="/fonts/ahem.css">
      8 <style>
      9 body {
     10  font: 20px/1 Ahem;
     11  margin: 0;
     12 }
     13 
     14 #scroll-container {
     15  width: 400px;
     16  height: 400px;
     17  overflow: scroll;
     18 }
     19 
     20 #scroll-contents {
     21  width: 1000px;
     22  height: 1000px;
     23  position: relative;
     24 }
     25 
     26 #anchor {
     27  anchor-name: --anchor;
     28 }
     29 
     30 #placefiller-above-anchor {
     31  height: 800px;
     32 }
     33 
     34 .after #placefiller-above-anchor {
     35  height: 500px;
     36 }
     37 
     38 #placefiller-before-anchor {
     39  display: inline-block;
     40  width: 800px;
     41 }
     42 
     43 .after #placefiller-before-anchor {
     44  width: 500px;
     45 }
     46 
     47 #inner-anchored {
     48  color: green;
     49  position: absolute;
     50  left: anchor(left);
     51  bottom: anchor(top);
     52  position-anchor: --anchor;
     53 }
     54 
     55 #outer-anchored {
     56  color: yellow;
     57  position: absolute;
     58  left: anchor(left);
     59  top: anchor(bottom);
     60  position-anchor: --anchor;
     61 }
     62 </style>
     63 
     64 <div style="position: relative">
     65  <div id="scroll-container">
     66    <div id="scroll-contents">
     67      <div id="placefiller-above-anchor"></div>
     68      <div id="placefiller-before-anchor"></div>
     69      <span id="anchor">anchor</span>
     70      <div id="inner-anchored">inner-anchored</div>
     71    </div>
     72  </div>
     73  <div id="outer-anchored">outer-anchored</div>
     74 </div>
     75 
     76 <script>
     77 const scroller = document.getElementById('scroll-container');
     78 scroller.scrollTop = 300;
     79 scroller.scrollLeft = 450;
     80 
     81 function raf() {
     82  return new Promise(resolve => requestAnimationFrame(resolve));
     83 }
     84 
     85 async function runTest() {
     86  await raf();
     87  await raf();
     88  document.getElementById('scroll-contents').classList.add('after');
     89  document.documentElement.classList.remove('reftest-wait');
     90 }
     91 runTest();
     92 </script>
     93 </html>