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

Side by Side Diff: third_party/WebKit/LayoutTests/intersection-observer/resources/cross-origin-subframe.html

Issue 2560253004: IntersectionObserver: convert tests to testharness.js (Closed)
Patch Set: Address comments Created 3 years, 10 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
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <script src="/js-test-resources/intersection-observer-helper-functions.js"></scr ipt>
3 <div style="height: 200px; width: 100px;"></div> 2 <div style="height: 200px; width: 100px;"></div>
4 <div id="target" style="background-color: green; width:100px; height:100px"></di v> 3 <div id="target" style="background-color: green; width:100px; height:100px"></di v>
5 <div style="height: 200px; width: 100px;"></div> 4 <div style="height: 200px; width: 100px;"></div>
5
6 <script> 6 <script>
7 var port; 7 var port;
8 var entries = []; 8 var entries = [];
9 var target = document.getElementById('target'); 9 var target = document.getElementById('target');
10 var scroller = document.scrollingElement; 10 var scroller = document.scrollingElement;
11 var nextStep; 11 var nextStep;
12 12
13 function clientRectToJson(rect) {
14 if (!rect)
15 return "null";
16 return {
17 top: rect.top,
18 right: rect.right,
19 bottom: rect.bottom,
20 left: rect.left
21 };
22 }
23
24 function entryToJson(entry) {
25 return {
26 boundingClientRect: clientRectToJson(entry.boundingClientRect),
27 intersectionRect: clientRectToJson(entry.intersectionRect),
28 rootBounds: clientRectToJson(entry.rootBounds),
29 target: entry.target.id
30 };
31 }
32
33 function coordinatesToClientRectJson(top, right, bottom, left) {
34 return {
35 top: top,
36 right: right,
37 bottom: bottom,
38 left: left
39 };
40 }
41
13 // Note that we never use RAF in this code, because this frame might get render- throttled. 42 // Note that we never use RAF in this code, because this frame might get render- throttled.
14 // Instead of RAF-ing, we just post an empty message to the parent window, which will 43 // Instead of RAF-ing, we just post an empty message to the parent window, which will
15 // RAF when it is received, and then send us a message to cause the next step to run. 44 // RAF when it is received, and then send us a message to cause the next step to run.
16 45
17 // Use a rootMargin here, and verify it does NOT get applied for the cross-origi n case. 46 // Use a rootMargin here, and verify it does NOT get applied for the cross-origi n case.
18 var observer = new IntersectionObserver( 47 var observer = new IntersectionObserver(function(changes) {
19 changes => { entries = entries.concat(changes) }, 48 entries = entries.concat(changes)
20 { rootMargin: "7px" } 49 }, { rootMargin: "7px" });
21 );
22 observer.observe(target); 50 observer.observe(target);
23 51
24 function step0() { 52 function step0() {
25 entries = entries.concat(observer.takeRecords()); 53 entries = entries.concat(observer.takeRecords());
26 nextStep = step1; 54 nextStep = step1;
27 port.postMessage({actual: entries.map(entryToJson), expected: []}, "*"); 55 port.postMessage({
56 actual: entries.map(entryToJson),
57 expected: [],
58 description: "First rAF"
59 }, "*");
28 entries = []; 60 entries = [];
29 port.postMessage({scrollTo: 200}, "*"); 61 port.postMessage({scrollTo: 200}, "*");
30 } 62 }
31 63
32 function step1() { 64 function step1() {
33 entries = entries.concat(observer.takeRecords()); 65 entries = entries.concat(observer.takeRecords());
34 port.postMessage({actual: entries.map(entryToJson), expected: []}, "*"); 66 port.postMessage({
67 actual: entries.map(entryToJson),
68 expected: [],
69 description: "topDocument.scrollingElement.scrollTop = 200"
70 }, "*");
35 entries = []; 71 entries = [];
36 scroller.scrollTop = 250; 72 scroller.scrollTop = 250;
37 nextStep = step2; 73 nextStep = step2;
38 port.postMessage({}, "*"); 74 port.postMessage({}, "*");
39 } 75 }
40 76
41 function step2() { 77 function step2() {
42 entries = entries.concat(observer.takeRecords()); 78 entries = entries.concat(observer.takeRecords());
43 var expected = [{ 79 var expected = [{
44 boundingClientRect: coordinatesToClientRectJson(-42, 108, 58, 8), 80 boundingClientRect: coordinatesToClientRectJson(-42, 108, 58, 8),
45 intersectionRect: coordinatesToClientRectJson(0, 108, 58, 8), 81 intersectionRect: coordinatesToClientRectJson(0, 108, 58, 8),
46 rootBounds: "null", 82 rootBounds: "null",
47 target: target.id 83 target: target.id
48 }]; 84 }];
49 port.postMessage({actual: entries.map(entryToJson), expected: expected}, "*"); 85 port.postMessage({
86 actual: entries.map(entryToJson),
87 expected: expected,
88 description: "iframeDocument.scrollingElement.scrollTop = 250"
89 }, "*");
50 entries = []; 90 entries = [];
51 nextStep = step3; 91 nextStep = step3;
52 port.postMessage({scrollTo: 100}, "*"); 92 port.postMessage({scrollTo: 100}, "*");
53 } 93 }
54 94
55 function step3() { 95 function step3() {
56 entries = entries.concat(observer.takeRecords()); 96 entries = entries.concat(observer.takeRecords());
57 var expected = [{ 97 var expected = [{
58 boundingClientRect: coordinatesToClientRectJson(-42, 108, 58, 8), 98 boundingClientRect: coordinatesToClientRectJson(-42, 108, 58, 8),
59 intersectionRect: coordinatesToClientRectJson(0, 0, 0, 0), 99 intersectionRect: coordinatesToClientRectJson(0, 0, 0, 0),
60 rootBounds: "null", 100 rootBounds: "null",
61 target: target.id 101 target: target.id
62 }]; 102 }];
63 port.postMessage({actual: entries.map(entryToJson), expected: expected}, "*"); 103 port.postMessage({
104 actual: entries.map(entryToJson),
105 expected: expected,
106 description: "topDocument.scrollingElement.scrollTop = 100"
107 }, "*");
64 port.postMessage({DONE: 1}, "*"); 108 port.postMessage({DONE: 1}, "*");
65 } 109 }
66 110
67 function handleMessage(event) 111 function handleMessage(event)
68 { 112 {
69 port = event.source; 113 port = event.source;
70 nextStep(); 114 nextStep();
71 } 115 }
72 116
73 nextStep = step0; 117 nextStep = step0;
74 window.addEventListener("message", handleMessage); 118 window.addEventListener("message", handleMessage);
75 </script> 119 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698