tor-browser

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

content-visibility-anchor-positioning-001.html (3344B)

      1 <!doctype HTML>
      2 <meta charset=utf8>
      3 <title>CSS Content Visibility: auto prevents existing anchors to unskipped content
      4 from becoming skipped</title>
      5 <link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
      6 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-relevance">
      7 <script src="/web-animations/testcommon.js"></script>
      8 <script src="/resources/testharness.js"></script>
      9 <script src="/resources/testharnessreport.js"></script>
     10 
     11 <style>
     12 #anchor, #positioned {
     13  width: 200px;
     14  height: 200px;
     15 }
     16 
     17 #lock {
     18  height: 400px;
     19  width: 400px;
     20  content-visibility: auto;
     21  border: 1px solid black;
     22 }
     23 
     24 pre {
     25  position: relative;
     26  top: 200px;
     27 }
     28 
     29 #container {
     30  position:relative;
     31  height: 10000px;
     32 }
     33 
     34 #anchor {
     35  anchor-name: --anchor;
     36  background-color: lightblue;
     37 }
     38 
     39 #positioned {
     40  position: absolute;
     41  background-color: lightgreen;
     42  left: anchor(right);
     43 }
     44 </style>
     45 <div id=container>
     46  <div id=lock>
     47    <div id=anchor></div>
     48    <div id=anchor2></div>
     49  </div>
     50  <div id=positioned></div>
     51 </div>
     52 
     53 <pre id=output>
     54 </pre>
     55 <script>
     56 "use strict";
     57 
     58 promise_test(async t => {
     59  window.scrollTo(0, 10000);
     60  await waitForAnimationFrames(1);
     61 
     62  // When the anchor applies, the positioned element is moved right by 200px.
     63  positioned.style.positionAnchor = "--anchor";
     64  assert_equals(positioned.getBoundingClientRect().left, 8,
     65    '#positioned should not be anchored because #anchor is off-screen and skipped.');
     66 
     67  window.scrollTo(0, 0);
     68  await waitForAnimationFrames(2);
     69 
     70  assert_equals(positioned.getBoundingClientRect().left, 209,
     71    '#positioned should be anchored because #anchor is on-screen.');
     72 
     73  window.scrollTo(0, 10000);
     74  await waitForAnimationFrames(2);
     75 
     76  assert_equals(positioned.getBoundingClientRect().left, 209,
     77    '#positioned should be anchored because it was anchored to #anchor before #anchor was scrolled offscreen, so #anchor does not become skipped.');
     78 
     79  lock.style.contentVisibility = "visible";
     80 
     81  assert_equals(positioned.getBoundingClientRect().left, 209,
     82    "#positioned should be anchored because it's not under a content-visibility ancestor");
     83 
     84  window.scrollTo(0, 0);
     85  await waitForAnimationFrames(2);
     86  assert_equals(positioned.getBoundingClientRect().left, 209,
     87    '#positioned should be anchored regardless of scroll offset.');
     88 
     89  window.scrollTo(0, 10000);
     90  await waitForAnimationFrames(2);
     91 
     92  assert_equals(positioned.getBoundingClientRect().left, 209,
     93    '#positioned should be anchored because it was anchored to #anchor before #anchor was scrolled offscreen, so #anchor does not become skipped.');
     94 
     95  lock.style.contentVisibility = "auto";
     96  await waitForAnimationFrames(1);
     97 
     98  assert_equals(positioned.getBoundingClientRect().left, 209,
     99    '#positioned should be anchored because it was anchored to #anchor before #anchor was scrolled offscreen, so #anchor does not become skipped.');
    100 
    101  positioned.style.right = 'anchor(--anchor2 left)';
    102  assert_equals(positioned.getBoundingClientRect().left, 209,
    103    '#positioned should be anchored because it was anchored to #anchor before #anchor was scrolled offscreen, so #anchor does not become skipped.');
    104 
    105  positioned.style.left = 'auto';
    106  assert_equals(positioned.getBoundingClientRect().right, 208,
    107    '#positioned should be anchored because it still has one more anchor.');
    108 
    109 });
    110 
    111 </script>