| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <script src="../resources/js-test.js"></script> | 2 <script src="../resources/testharness.js"></script> |
| 3 <script src="../resources/intersection-observer-helper-functions.js"></script> | 3 <script src="../resources/testharnessreport.js"></script> |
| 4 <style> | 4 <style> |
| 5 .target { | 5 .target { |
| 6 width: 100px; | 6 width: 100px; |
| 7 height: 100px; | 7 height: 100px; |
| 8 margin: 10px; | 8 margin: 10px; |
| 9 background-color: green; | 9 background-color: green; |
| 10 } | 10 } |
| 11 </style> | 11 </style> |
| 12 <div style="width:100%; height:700px;"></div> | 12 <div id="leading-space" style="width:100%; height:700px;"></div> |
| 13 <div id="target1" class="target"></div> | 13 <div id="target1" class="target"></div> |
| 14 <div id="target2" class="target"></div> | 14 <div id="target2" class="target"></div> |
| 15 <div id="target3" class="target"></div> | 15 <div id="target3" class="target"></div> |
| 16 | 16 |
| 17 <script> | 17 <script> |
| 18 description("Verify that notifications for multiple targets are sorted by the or
der in which observe() was called on each target."); | 18 function waitForNotification(f) { |
| 19 var target1 = document.getElementById("target1"); | 19 requestAnimationFrame(() => { |
| 20 var target2 = document.getElementById("target2"); | 20 setTimeout(() => { |
| 21 var target3 = document.getElementById("target3"); | 21 setTimeout(f); |
| 22 var entries = []; | 22 }); |
| 23 var observer = new IntersectionObserver( | 23 }); |
| 24 changes => { entries.push(...changes); } | 24 } |
| 25 ); | |
| 26 | 25 |
| 27 onload = function() { | 26 onload = function() { |
| 27 var t = async_test("Verify that notifications for multiple targets are sorted
by the order in which observe() was called on each target."); |
| 28 |
| 29 test(function() { assert_equals(window.innerWidth, 800) }, "Window must be 800
pixels wide."); |
| 30 test(function() { assert_equals(window.innerHeight, 600) }, "Window must be 60
0 pixels high."); |
| 31 |
| 32 var target1 = document.getElementById("target1"); |
| 33 var target2 = document.getElementById("target2"); |
| 34 var target3 = document.getElementById("target3"); |
| 35 var entries = []; |
| 36 var observer = new IntersectionObserver(function(changes) { |
| 37 entries = entries.concat(changes) |
| 38 }); |
| 28 observer.observe(target1); | 39 observer.observe(target1); |
| 29 observer.observe(target2); | 40 observer.observe(target2); |
| 30 observer.observe(target3); | 41 observer.observe(target3); |
| 31 entries = entries.concat(observer.takeRecords()); | 42 entries = entries.concat(observer.takeRecords()); |
| 32 shouldBeEqualToNumber("entries.length", 0); | 43 test(function() { assert_equals(entries.length, 0) }, "No initial notification
s."); |
| 33 document.scrollingElement.scrollTop = 150; | 44 document.scrollingElement.scrollTop = 150; |
| 34 waitForNotification(step0); | 45 waitForNotification(step0); |
| 35 } | |
| 36 | 46 |
| 37 function step0() { | 47 function step0() { |
| 38 shouldBeEqualToNumber("entries.length", 1); | 48 test(function() { assert_equals(entries.length, 1) }, "One notification."); |
| 39 if (entries.length > 0) | 49 if (entries.length > 0) { |
| 40 shouldBeEqualToString("entries[0].target.id", "target1"); | 50 test(function() { assert_true(entries[0].target === target1) }, |
| 41 document.scrollingElement.scrollTop = 10000; | 51 "entries[0].target === target1"); |
| 42 waitForNotification(step1); | 52 } |
| 43 } | 53 document.scrollingElement.scrollTop = 10000; |
| 54 waitForNotification(step1); |
| 55 } |
| 44 | 56 |
| 45 function step1() { | 57 function step1() { |
| 46 shouldBeEqualToNumber("entries.length", 3); | 58 test(function() { assert_equals(entries.length, 3) }, "Three notifications."
); |
| 47 if (entries.length > 1) | 59 if (entries.length > 1) { |
| 48 shouldBeEqualToString("entries[1].target.id", "target2"); | 60 test(function() { assert_true(entries[1].target === target2) }, |
| 49 if (entries.length > 2) | 61 "entries[1].target === target2"); |
| 50 shouldBeEqualToString("entries[2].target.id", "target3"); | 62 } |
| 51 document.scrollingElement.scrollTop = 0; | 63 if (entries.length > 2) { |
| 52 waitForNotification(step2); | 64 test(function() { assert_true(entries[2].target === target3) }, |
| 53 } | 65 "entries[2].target === target3"); |
| 66 } |
| 67 document.scrollingElement.scrollTop = 0; |
| 68 waitForNotification(step2); |
| 69 } |
| 54 | 70 |
| 55 function step2() { | 71 function step2() { |
| 56 shouldBeEqualToNumber("entries.length", 6); | 72 test(function() { assert_equals(entries.length, 6) }, "Six notifications."); |
| 57 if (entries.length > 3) | 73 if (entries.length > 3) { |
| 58 shouldBeEqualToString("entries[3].target.id", "target1"); | 74 test(function() { assert_true(entries[3].target === target1) }, |
| 59 if (entries.length > 4) | 75 "entries[3].target === target1"); |
| 60 shouldBeEqualToString("entries[4].target.id", "target2"); | 76 } |
| 61 if (entries.length > 5) | 77 if (entries.length > 4) { |
| 62 shouldBeEqualToString("entries[5].target.id", "target3"); | 78 test(function() { assert_true(entries[4].target === target2) }, |
| 63 finishJSTest(); | 79 "entries[4].target === target2"); |
| 64 } | 80 } |
| 81 if (entries.length > 5) { |
| 82 test(function() { assert_true(entries[5].target === target3) }, |
| 83 "entries[5].target === target3"); |
| 84 } |
| 85 document.getElementById("leading-space").style.height = ""; |
| 86 t.done(); |
| 87 } |
| 88 }; |
| 65 </script> | 89 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2560253004:
IntersectionObserver: convert tests to testharness.js (Closed)
