tor-browser

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

root-margin-root-element.html (2634B)

      1 <!DOCTYPE html>
      2 <script src="/resources/testharness.js"></script>
      3 <script src="/resources/testharnessreport.js"></script>
      4 <script src="./resources/intersection-observer-test-utils.js"></script>
      5 
      6 <style>
      7 pre, #log {
      8  position: absolute;
      9  top: 0;
     10  left: 200px;
     11 }
     12 .spacer {
     13  height: calc(100vh + 100px);
     14 }
     15 #root {
     16  display: inline-block;
     17  overflow-y: scroll;
     18  height: 200px;
     19  border: 3px solid black;
     20 }
     21 #target {
     22  width: 100px;
     23  height: 100px;
     24  background-color: green;
     25 }
     26 </style>
     27 
     28 <div class="spacer"></div>
     29 <div id="root">
     30  <div style="height: 300px;"></div>
     31  <div id="target"></div>
     32 </div>
     33 <div class="spacer"></div>
     34 
     35 <script>
     36 var vw = document.documentElement.clientWidth;
     37 var vh = document.documentElement.clientHeight;
     38 
     39 var entries = [];
     40 var root, target;
     41 
     42 runTestCycle(function() {
     43  target = document.getElementById("target");
     44  assert_true(!!target, "target exists");
     45  root = document.getElementById("root");
     46  assert_true(!!root, "root exists");
     47  var observer = new IntersectionObserver(function(changes) {
     48    entries = entries.concat(changes)
     49  }, { root: root, rootMargin: "10px 20% 40% 30px" });
     50  observer.observe(target);
     51  entries = entries.concat(observer.takeRecords());
     52  assert_equals(entries.length, 0, "No initial notifications.");
     53  runTestCycle(step0, "First rAF");
     54 }, "Root margin with explicit root.");
     55 
     56 function step0() {
     57  document.scrollingElement.scrollTop = vh;
     58  runTestCycle(step1, "document.scrollingElement.scrollTop = window.innerHeight.");
     59  checkLastEntry(entries, 0, [ 11, 111, vh + 411, vh + 511, 0, 0, 0, 0, -19, 131, vh + 101, vh + 391, false]);
     60 }
     61 
     62 function step1() {
     63  root.scrollTop = 50;
     64  runTestCycle(step2, "root.scrollTop = 50, putting target into root margin");
     65  assert_equals(entries.length, 1, "No notifications after scrolling frame.");
     66 }
     67 
     68 function step2() {
     69  document.scrollingElement.scrollTop = 0;
     70  runTestCycle(step3, "document.scrollingElement.scrollTop = 0.");
     71  checkLastEntry(entries, 1, [11, 111, 361, 461, 11, 111, 361, 391, -19, 131, 101, 391, true]);
     72 }
     73 
     74 function step3() {
     75  root.scrollTop = 0;
     76  runTestCycle(step4, "root.scrollTop = 0");
     77  checkLastEntry(entries, 1);
     78 }
     79 
     80 function step4() {
     81  root.scrollTop = 50;
     82  runTestCycle(step5, "root.scrollTop = 50 with root scrolled out of view.");
     83  checkLastEntry(entries, 2, [ 11, 111, vh + 411, vh + 511, 0, 0, 0, 0, -19, 131, vh + 101, vh + 391, false]);
     84 }
     85 
     86 // This tests that notifications are generated even when the root element is off screen.
     87 function step5() {
     88  checkLastEntry(entries, 3, [11, 111, vh + 361, vh + 461, 11, 111, vh + 361, vh + 391, -19, 131, vh + 101, vh + 391, true]);
     89 }
     90 </script>