Chromium Code Reviews Chromium Code Reviews
Issue 1449623002:
IntersectionObserver: second cut. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src@master| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE html> | |
| 2 <div style="width:100%;height:700px;"></div> | |
| 3 <div style="white-space: nowrap;"> | |
| 4 <div style="display: inline-block; width: 1000px; height: 100px"></div> | |
| 5 <div id="target" style="display: inline-block; background-color: green; width: 100px; height:100px"></div> | |
| 6 <div style="display: inline-block; width: 1000px; height: 100px"></div> | |
| 7 </div> | |
| 8 <div style="width:100%; height:700px;"></div> | |
| 9 | |
| 10 <script src="../resources/js-test.js"></script> | |
| 11 <script src="helper-functions.js"></script> | |
| 12 <script> | |
| 13 description("Intersection observer test with root margin and implicit root."); | |
| 14 var target = document.getElementById("target"); | |
| 15 var entries = []; | |
| 16 | |
| 17 observer_callback = function(changes) { | |
| 18 for (var i in changes) { | |
| 19 console.log(entryToString(changes[i])); | |
| 20 entries.push(changes[i]); | |
| 21 } | |
| 22 }; | |
| 23 var observer = new IntersectionObserver(observer_callback, { | |
| 24 rootMargin: "10px 20% 40% 30px" | |
| 25 }); | |
| 26 observer.observe(target); | |
| 27 | |
| 28 // TODO: It shouldn't be necessary to RAF after the call to observer() | |
| 29 // and before changing the scroll position, but it is. | |
| 30 | |
| 31 var expected0 = []; | |
| 32 function step0() { | |
| 33 setTimeout(function() { | |
| 34 checkResults(expected0, "entries"); | |
|
esprehn
2015/12/12 00:14:13
every time you call checkResults you pass "entries
szager1
2015/12/16 19:15:34
checkResults is gone now.
| |
| 35 document.scrollingElement.scrollLeft = 100; | |
| 36 requestAnimationFrame(step1); | |
| 37 }); | |
| 38 } | |
| 39 | |
| 40 var expected1 = [ | |
| 41 { | |
| 42 'boundingClientRect': [ 912, 1012, 708, 808 ], | |
| 43 'intersectionRect': [ 912, 942, 708, 808 ], | |
| 44 'rootBounds' : [ -30, 942, -10, 819 ], | |
| 45 'target': target | |
| 46 }, | |
| 47 ]; | |
| 48 function step1() { | |
| 49 setTimeout(function() { | |
| 50 checkResults(expected1, "entries"); | |
| 51 document.scrollingElement.scrollTop = 800; | |
| 52 requestAnimationFrame(step2); | |
| 53 }); | |
| 54 } | |
| 55 | |
| 56 var expected2 = expected1; | |
| 57 function step2() { | |
| 58 setTimeout(function() { | |
| 59 checkResults(expected2, "entries", 1); | |
| 60 document.scrollingElement.scrollTop = 900; | |
| 61 requestAnimationFrame(step3); | |
| 62 }); | |
| 63 } | |
| 64 | |
| 65 var expected3 = expected1.concat([ | |
| 66 { | |
| 67 'boundingClientRect': [ 912, 1012, -192, -92 ], | |
| 68 'intersectionRect': [ 0, 0, 0, 0 ], | |
| 69 'rootBounds' : [ -30, 942, -10, 819 ], | |
| 70 'target': target | |
| 71 } | |
| 72 ]); | |
| 73 function step3() { | |
| 74 setTimeout(function() { | |
| 75 checkResults(expected3, "entries", 1); | |
| 76 finishTest(); | |
| 77 document.scrollingElement.scrollLeft = 0; | |
| 78 document.scrollingElement.scrollTop = 0; | |
| 79 }); | |
| 80 } | |
| 81 requestAnimationFrame(step0); | |
| 82 </script> | |
| OLD | NEW |
