tor-browser

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

content-visibility-anchor-positioning-002.html (3049B)

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