tor-browser

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

content-visibility-anchor-positioning-004.html (2261B)

      1 <!doctype HTML>
      2 <meta charset=utf8>
      3 <title>CSS Content Visibility: auto not skipped, but skipped after removing all 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: auto;
     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 #anchor2 {
     39  anchor-name: --anchor2;
     40 }
     41 
     42 #positioned {
     43  position: absolute;
     44  background-color: lightgreen;
     45  left: anchor(right);
     46  top: anchor( --anchor2 top);
     47 }
     48 </style>
     49 <div id=container>
     50  <div id=lock>
     51    <div id=anchor></div>
     52    <div>
     53      <div id=anchor2></div>
     54    </div>
     55  </div>
     56  <div id=positioned></div>
     57 </div>
     58 
     59 <pre id=output>
     60 </pre>
     61 <script>
     62 "use strict";
     63 
     64 let skipped = false;
     65 lock.addEventListener("contentvisibilityautostatechange",
     66  (e) => {
     67    skipped = e.skipped;
     68  });
     69 
     70 promise_test(async t => {
     71 
     72  positioned.style.positionAnchor = "--anchor";
     73  await waitForAnimationFrames(2);
     74 
     75  assert_equals(positioned.getBoundingClientRect().left, 209,
     76    '#positioned should be anchored because #anchor is on-screen.');
     77 
     78  window.scrollTo(0, 10000);
     79  await waitForAnimationFrames(2);
     80 
     81  assert_equals(positioned.getBoundingClientRect().left, 209,
     82    '#positioned should be anchored because it was anchored to #anchor before #anchor was scrolled offscreen, so #anchor does not become skipped.');
     83  assert_false(skipped, "The content-visibility subtree is not skipped despite being offscreen.");
     84 
     85  positioned.style.positionAnchor = "";
     86  await waitForAnimationFrames(2);
     87  assert_false(skipped, "The content-visibility subtree still not skipped, because there is still --anchor2.");
     88 
     89  positioned.style.top = "10px";
     90  await waitForAnimationFrames(2);
     91  assert_true(skipped, "The content-visibility subtree is now skipped.");
     92 });
     93 
     94 </script>