Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(16)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/intersection-observer/root-margin.html

Issue 1559593002: Add root margin support for IntersectionObserver. (Closed) Base URL: https://chromium.googlesource.com/chromium/src@intersection-observer-no-root-margin
Patch Set: rebaseline Created 4 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/intersection-observer/root-margin-expected.txt » ('j') | third_party/WebKit/Source/core/dom/IntersectionObservation.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <script src="../resources/js-test.js"></script> 2 <script src="../resources/js-test.js"></script>
3 <script src="helper-functions.js"></script> 3 <script src="helper-functions.js"></script>
4 <div style="width:100%; height:700px;"></div> 4 <div style="width:100%; height:700px;"></div>
5 <iframe id="target-iframe" src="../resources/intersection-observer-subframe.html " style="height: 100px; overflow-y: scroll"></iframe> 5 <div style="white-space: nowrap;">
6 <div style="display: inline-block; width: 1000px; height: 100px"></div>
7 <div id="target" style="display: inline-block; background-color: green; width: 100px; height:100px"></div>
8 <div style="display: inline-block; width: 1000px; height: 100px"></div>
9 </div>
6 <div style="width:100%; height:700px;"></div> 10 <div style="width:100%; height:700px;"></div>
7 11
8 <script> 12 <script>
9 description("Simple intersection observer test with no explicit root and target in an iframe."); 13 description("Intersection observer test with root margin and implicit root.");
10 var entries = []; 14 var target = document.getElementById("target");
11 var targetIframe = document.getElementById("target-iframe"); 15 var entries = [];
12
13 targetIframe.onload = function() {
14 var target = targetIframe.contentDocument.getElementById("target");
15 var iframeScroller = targetIframe.contentDocument.scrollingElement;
16 16
17 observer_callback = function(changes) { 17 observer_callback = function(changes) {
18 for (var i in changes) 18 for (var i in changes)
19 entries.push(changes[i]); 19 entries.push(changes[i]);
20 }; 20 };
21 var observer = new IntersectionObserver(observer_callback, {}); 21 var observer = new IntersectionObserver(observer_callback, {
22 rootMargin: "10px 20% 40% 30px"
ojan 2016/01/12 01:08:49 Please add test coverage for the other parsing cod
szager1 2016/01/12 19:24:43 I added tests to demonstrate that the parsing work
23 });
22 observer.observe(target); 24 observer.observe(target);
23 25
24 // TODO(szager): It shouldn't be necessary to RAF after the call to observer() 26 // TODO(szager): It shouldn't be necessary to RAF after the call to observer()
25 // and before changing the scroll position, but it is. 27 // and before changing the scroll position, but it is.
26 28
27 function step0() { 29 function step0() {
28 setTimeout(function() { 30 setTimeout(function() {
29 shouldBeEqualToNumber("entries.length", 0); 31 shouldBeEqualToNumber("entries.length", 0);
30 document.scrollingElement.scrollTop = 200; 32 document.scrollingElement.scrollLeft = 100;
31 requestAnimationFrame(step1); 33 requestAnimationFrame(step1);
32 }); 34 });
33 } 35 }
34 36
35 function step1() { 37 function step1() {
36 setTimeout(function() { 38 setTimeout(function() {
37 shouldBeEqualToNumber("entries.length", 0); 39 shouldBeEqualToNumber("entries.length", 1);
38 iframeScroller.scrollTop = 250; 40 shouldBeEqualToNumber("entries[0].boundingClientRect.left", 912);
41 shouldBeEqualToNumber("entries[0].boundingClientRect.right", 1012);
42 shouldBeEqualToNumber("entries[0].boundingClientRect.top", 708);
43 shouldBeEqualToNumber("entries[0].boundingClientRect.bottom", 808);
44 shouldBeEqualToNumber("entries[0].intersectionRect.left", 912);
45 shouldBeEqualToNumber("entries[0].intersectionRect.right", 942);
46 shouldBeEqualToNumber("entries[0].intersectionRect.top", 708);
47 shouldBeEqualToNumber("entries[0].intersectionRect.bottom", 808);
48 shouldBeEqualToNumber("entries[0].rootBounds.left", -30);
49 shouldBeEqualToNumber("entries[0].rootBounds.right", 942);
50 shouldBeEqualToNumber("entries[0].rootBounds.top", -10);
51 shouldBeEqualToNumber("entries[0].rootBounds.bottom", 819);
52 shouldEvaluateToSameObject("entries[0].target", target);
53 document.scrollingElement.scrollTop = 800;
39 requestAnimationFrame(step2); 54 requestAnimationFrame(step2);
40 }); 55 });
41 } 56 }
42 57
43 function step2() { 58 function step2() {
44 setTimeout(function() { 59 setTimeout(function() {
45 shouldBeEqualToNumber("entries.length", 1); 60 shouldBeEqualToNumber("entries.length", 1);
46 shouldBeEqualToNumber("entries[0].boundingClientRect.left", 18); 61 document.scrollingElement.scrollTop = 900;
47 shouldBeEqualToNumber("entries[0].boundingClientRect.right", 118);
48 shouldBeEqualToNumber("entries[0].boundingClientRect.top", 468);
49 shouldBeEqualToNumber("entries[0].boundingClientRect.bottom", 568);
50 shouldBeEqualToNumber("entries[0].intersectionRect.left", 18);
51 shouldBeEqualToNumber("entries[0].intersectionRect.right", 118);
52 shouldBeEqualToNumber("entries[0].intersectionRect.top", 510);
53 shouldBeEqualToNumber("entries[0].intersectionRect.bottom", 568);
54 shouldBeEqualToNumber("entries[0].rootBounds.left", 0);
55 shouldBeEqualToNumber("entries[0].rootBounds.right", 785);
56 shouldBeEqualToNumber("entries[0].rootBounds.top", 0);
57 shouldBeEqualToNumber("entries[0].rootBounds.bottom", 600);
58 shouldEvaluateToSameObject("entries[0].target", target);
59 document.scrollingElement.scrollTop = 100;
60 requestAnimationFrame(step3); 62 requestAnimationFrame(step3);
61 }); 63 });
62 } 64 }
63 65
64 function step3() { 66 function step3() {
65 setTimeout(function() { 67 setTimeout(function() {
66 shouldBeEqualToNumber("entries.length", 2); 68 shouldBeEqualToNumber("entries.length", 2);
67 shouldBeEqualToNumber("entries[1].boundingClientRect.left", 18); 69 shouldBeEqualToNumber("entries[1].boundingClientRect.left", 912);
68 shouldBeEqualToNumber("entries[1].boundingClientRect.right", 118); 70 shouldBeEqualToNumber("entries[1].boundingClientRect.right", 1012);
69 shouldBeEqualToNumber("entries[1].boundingClientRect.top", 568); 71 shouldBeEqualToNumber("entries[1].boundingClientRect.top", -192);
70 shouldBeEqualToNumber("entries[1].boundingClientRect.bottom", 668); 72 shouldBeEqualToNumber("entries[1].boundingClientRect.bottom", -92);
71 shouldBeEqualToNumber("entries[1].intersectionRect.left", 0); 73 shouldBeEqualToNumber("entries[1].intersectionRect.left", 0);
72 shouldBeEqualToNumber("entries[1].intersectionRect.right", 0); 74 shouldBeEqualToNumber("entries[1].intersectionRect.right", 0);
73 shouldBeEqualToNumber("entries[1].intersectionRect.top", 0); 75 shouldBeEqualToNumber("entries[1].intersectionRect.top", 0);
74 shouldBeEqualToNumber("entries[1].intersectionRect.bottom", 0); 76 shouldBeEqualToNumber("entries[1].intersectionRect.bottom", 0);
75 shouldBeEqualToNumber("entries[1].rootBounds.left", 0); 77 shouldBeEqualToNumber("entries[1].rootBounds.left", -30);
76 shouldBeEqualToNumber("entries[1].rootBounds.right", 785); 78 shouldBeEqualToNumber("entries[1].rootBounds.right", 942);
77 shouldBeEqualToNumber("entries[1].rootBounds.top", 0); 79 shouldBeEqualToNumber("entries[1].rootBounds.top", -10);
78 shouldBeEqualToNumber("entries[1].rootBounds.bottom", 600); 80 shouldBeEqualToNumber("entries[1].rootBounds.bottom", 819);
79 shouldEvaluateToSameObject("entries[1].target", target); 81 shouldEvaluateToSameObject("entries[1].target", target);
80 finishTest(); 82 finishTest();
83 document.scrollingElement.scrollLeft = 0;
81 document.scrollingElement.scrollTop = 0; 84 document.scrollingElement.scrollTop = 0;
82 }); 85 });
83 } 86 }
84 87
85 requestAnimationFrame(step0); 88 requestAnimationFrame(step0);
86 }
87 </script> 89 </script>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/intersection-observer/root-margin-expected.txt » ('j') | third_party/WebKit/Source/core/dom/IntersectionObservation.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698