OLD | NEW |
(Empty) | |
| 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 #root { |
| 13 position: absolute; |
| 14 top: 0; |
| 15 left: 0; |
| 16 width: 150px; |
| 17 height: 200px; |
| 18 overflow-y: scroll; |
| 19 } |
| 20 #target1, #target2, #target3, #target4 { |
| 21 width: 100px; |
| 22 height: 100px; |
| 23 } |
| 24 #target1 { |
| 25 background-color: green; |
| 26 } |
| 27 #target2 { |
| 28 background-color: red; |
| 29 } |
| 30 #target3 { |
| 31 background-color: blue; |
| 32 } |
| 33 #target4 { |
| 34 background-color: yellow; |
| 35 } |
| 36 </style> |
| 37 |
| 38 <div id="root"> |
| 39 <div id="target1"></div> |
| 40 <div id="target2"></div> |
| 41 <div id="target3"></div> |
| 42 </div> |
| 43 |
| 44 <script> |
| 45 var entries = []; |
| 46 var observer; |
| 47 |
| 48 runTestCycle(function() { |
| 49 var root = document.getElementById('root'); |
| 50 var target1 = document.getElementById('target1'); |
| 51 var target2 = document.getElementById('target2'); |
| 52 var target3 = document.getElementById('target3'); |
| 53 assert_true(!!root, "root element exists."); |
| 54 assert_true(!!target1, "target1 element exists."); |
| 55 assert_true(!!target2, "target2 element exists."); |
| 56 assert_true(!!target3, "target3 element exists."); |
| 57 observer = new IntersectionObserver(function(changes) { |
| 58 entries = entries.concat(changes); |
| 59 }, { root: root }); |
| 60 observer.observe(target1); |
| 61 observer.observe(target2); |
| 62 observer.observe(target3); |
| 63 entries = entries.concat(observer.takeRecords()); |
| 64 assert_equals(entries.length, 0, "No initial notifications."); |
| 65 runTestCycle(step0, "Rects in initial notifications should report initial posi
tions."); |
| 66 }, "isIntersecting changes should trigger notifications."); |
| 67 |
| 68 function step0() { |
| 69 assert_equals(entries.length, 3, "Has 3 initial notifications."); |
| 70 checkRect(entries[0].boundingClientRect, [0, 100, 0, 100], "Check 1st entry re
ct"); |
| 71 assert_equals(entries[0].target.id, 'target1', "Check 1st entry target id."); |
| 72 checkIsIntersecting(entries, 0, true); |
| 73 checkRect(entries[1].boundingClientRect, [0, 100, 100, 200], "Check 2nd entry
rect"); |
| 74 assert_equals(entries[1].target.id, 'target2', "Check 2nd entry target id."); |
| 75 checkIsIntersecting(entries, 1, true); |
| 76 checkRect(entries[2].boundingClientRect, [0, 100, 200, 300], "Check 3rd entry
rect"); |
| 77 assert_equals(entries[2].target.id, 'target3', "Check 3rd entry target id."); |
| 78 checkIsIntersecting(entries, 2, true); |
| 79 runTestCycle(step1, "Set scrollTop=100 and check for no new notifications."); |
| 80 root.scrollTop = 100; |
| 81 } |
| 82 |
| 83 function step1() { |
| 84 assert_equals(entries.length, 3, "Has 3 total notifications because isIntersec
ting did not change."); |
| 85 runTestCycle(step2, "Add 4th target."); |
| 86 root.scrollTop = 0; |
| 87 var target4 = document.createElement('div'); |
| 88 target4.setAttribute('id', 'target4'); |
| 89 root.appendChild(target4); |
| 90 observer.observe(target4); |
| 91 } |
| 92 |
| 93 function step2() { |
| 94 assert_equals(entries.length, 4, "Has 3 total notifications because 4th elemen
t was added."); |
| 95 checkRect(entries[3].boundingClientRect, [0, 100, 300, 400], "Check 4th entry
rect"); |
| 96 assert_equals(entries[3].target.id, 'target4', "Check 4th entry target id."); |
| 97 checkIsIntersecting(entries, 3, false); |
| 98 assert_equals(entries[3].intersectionRatio, 0, 'target4 initially has intersec
tionRatio of 0.'); |
| 99 runTestCycle(step3, "Set scrollTop=100 and check for one new notification."); |
| 100 root.scrollTop = 100; |
| 101 } |
| 102 |
| 103 function step3() { |
| 104 assert_equals(entries.length, 5, "Has 5 total notifications."); |
| 105 checkRect(entries[4].boundingClientRect, [0, 100, 200, 300], "Check 5th entry
rect"); |
| 106 assert_equals(entries[4].target.id, 'target4', "Check 5th entry target id."); |
| 107 checkIsIntersecting(entries, 4, true); |
| 108 assert_equals(entries[4].intersectionRatio, 0, 'target4 still has intersection
Ratio of 0.'); |
| 109 root.scrollTop = 0; // reset to make it easier to refresh and run the test |
| 110 } |
| 111 |
| 112 </script> |
OLD | NEW |