tor-browser

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

same-document-root.html (2695B)

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