tor-browser

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

edge-inclusive-intersection.html (2017B)

      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 #root {
     14  width: 200px;
     15  height: 200px;
     16  overflow: visible;
     17 }
     18 #target {
     19  background-color: green;
     20 }
     21 </style>
     22 
     23 <div id="root">
     24  <div id="target" style="width: 100px; height: 100px; transform: translateY(250px)"></div>
     25 </div>
     26 
     27 <script>
     28 var entries = [];
     29 
     30 runTestCycle(function() {
     31  var root = document.getElementById('root');
     32  assert_true(!!root, "root element exists.");
     33  var target = document.getElementById('target');
     34  assert_true(!!target, "target element exists.");
     35  var observer = new IntersectionObserver(function(changes) {
     36    entries = entries.concat(changes);
     37  }, { root: root });
     38  observer.observe(target);
     39  entries = entries.concat(observer.takeRecords());
     40  assert_equals(entries.length, 0, "No initial notifications.");
     41  runTestCycle(step0, "First rAF.");
     42 }, "IntersectionObserver should detect and report edge-adjacent and zero-area intersections.");
     43 
     44 function step0() {
     45  runTestCycle(step1, "Set transform=translateY(200px) on target.");
     46  checkLastEntry(entries, 0, [8, 108, 258, 358, 0, 0, 0, 0, 8, 208, 8, 208, false]);
     47  target.style.transform = "translateY(200px)";
     48 }
     49 
     50 function step1() {
     51  runTestCycle(step2, "Set transform=translateY(201px) on target.");
     52  checkLastEntry(entries, 1, [8, 108, 208, 308, 8, 108, 208, 208, 8, 208, 8, 208, true]);
     53  target.style.transform = "translateY(201px)";
     54 }
     55 
     56 function step2() {
     57  runTestCycle(step3, "Set transform=translateY(185px) on target.");
     58  checkLastEntry(entries, 2);
     59  target.style.height = "0px";
     60  target.style.width = "300px";
     61  target.style.transform = "translateY(185px)";
     62 }
     63 
     64 function step3() {
     65  checkLastEntry(entries, 3, [8, 308, 193, 193, 8, 208, 193, 193, 8, 208, 8, 208, true]);
     66 }
     67 </script>