tor-browser

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

root-margin.html (2697B)

      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 #target {
     14  display: inline-block;
     15  width: 100px;
     16  height: 100px;
     17  background-color: green;
     18 }
     19 .vertical-spacer {
     20  height: calc(100vh + 100px);
     21 }
     22 .horizontal-spacer {
     23  display: inline-block;
     24  width: 120vw;
     25 }
     26 </style>
     27 
     28 <div class="vertical-spacer"></div>
     29 <div style="white-space:nowrap;">
     30  <div class="horizontal-spacer"></div>
     31  <div id="target"></div>
     32  <div class="horizontal-spacer"></div>
     33 </div>
     34 <div class="vertical-spacer"></div>
     35 
     36 <script>
     37 var vw = document.documentElement.clientWidth;
     38 var vh = document.documentElement.clientHeight;
     39 
     40 var entries = [];
     41 var target;
     42 
     43 runTestCycle(function() {
     44  target = document.getElementById("target");
     45  assert_true(!!target, "Target exists");
     46  var observer = new IntersectionObserver(function(changes) {
     47    entries = entries.concat(changes)
     48  }, { rootMargin: "10px 20% 40% 30px" });
     49  observer.observe(target);
     50  entries = entries.concat(observer.takeRecords());
     51  assert_equals(entries.length, 0, "No initial notifications.");
     52  runTestCycle(step0, "First rAF.");
     53 }, "Root margin tests");
     54 
     55 function step0() {
     56  var targetBounds = clientBounds(target);
     57  document.scrollingElement.scrollLeft = 100;
     58  runTestCycle(step1, "document.scrollingElement.scrollLeft = 100");
     59  checkLastEntry(entries, 0, targetBounds.concat(0, 0, 0, 0, -30, vw * 1.2, -10, vh * 1.4, false));
     60 }
     61 
     62 function step1() {
     63  var targetBounds = clientBounds(target);
     64  var sw = window.innerWidth - document.documentElement.clientWidth;
     65  var sh = window.innerHeight - document.documentElement.clientHeight;
     66  document.scrollingElement.scrollTop = vh + 200;
     67  runTestCycle(step2, "document.scrollingElement.scrollTop = document.documentElement.clientHeight + 200");
     68  checkLastEntry(entries, 1, targetBounds.concat(
     69    targetBounds[0], Math.min(targetBounds[1], vw * 1.2), vh + 108 + sh, Math.min(vh + 208 + sw, vh * 1.4),
     70    -30, vw * 1.2, -10, vh * 1.4,
     71    true
     72  ));
     73 }
     74 
     75 function step2() {
     76  document.scrollingElement.scrollTop = vh + 300;
     77  runTestCycle(step3, "document.scrollingElement.scrollTop = document.documentElement.clientHeight + 300");
     78  checkLastEntry(entries, 1);
     79 }
     80 
     81 function step3() {
     82  var targetBounds = clientBounds(target);
     83  document.scrollingElement.scrollLeft = 0;
     84  document.scrollingElement.scrollTop = 0;
     85  checkLastEntry(entries, 2, targetBounds.concat(0, 0, 0, 0, -30, vw * 1.2, -10, vh * 1.4, false));
     86 }
     87 </script>