tor-browser

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

content-visibility-anchor-positioning-003.html (1891B)

      1 <!doctype HTML>
      2 <meta charset=utf8>
      3 <title>CSS Content Visibility: auto still anchors even if the anchor and positioned element are both skipped by the same element</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 #positioned {
     39  position: absolute;
     40  background-color: lightgreen;
     41  left: anchor(right);
     42  position-anchor: --anchor;
     43 }
     44 </style>
     45 <div id=container>
     46  <div id=lock>
     47    <div id=anchor></div>
     48    <div id=positioned></div>
     49  </div>
     50 </div>
     51 
     52 <pre id=output>
     53 </pre>
     54 <script>
     55 "use strict";
     56 
     57 let skipped = false;
     58 lock.addEventListener("contentvisibilityautostatechange",
     59  (e) => {
     60    skipped = e.skipped;
     61  });
     62 
     63 promise_test(async t => {
     64  await waitForAnimationFrames(2);
     65 
     66  // When the anchor applies, the positioned element is moved right by 200px.
     67  assert_equals(positioned.getBoundingClientRect().left, 209,
     68    '#positioned should be anchored because they are both on-screen.');
     69 
     70  window.scrollTo(0, 10000);
     71  await waitForAnimationFrames(2);
     72 
     73  assert_equals(positioned.getBoundingClientRect().left, 209,
     74    "#positioned should be anchored because they are both in the skipped subtree of the same element.");
     75  assert_true(skipped, "The content-visibility subtree is now skipped, even though there is a target anchor below it.");
     76 });
     77 
     78 </script>