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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2560253004: IntersectionObserver: convert tests to testharness.js (Closed)
Patch Set: Formatting tweaks and explicit resource paths Created 4 years 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
« third_party/WebKit/LayoutTests/intersection-observer/resources/observer-in-iframe-subframe.html ('K') | « third_party/WebKit/LayoutTests/intersection-observer/same-document-no-root-expected.txt ('k') | third_party/WebKit/LayoutTests/intersection-observer/same-document-root-expected.txt » ('j') | third_party/WebKit/LayoutTests/intersection-observer/shadow-content.html » ('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/testharness.js"></script>
3 <script src="../resources/intersection-observer-helper-functions.js"></script> 3 <script src="../resources/testharnessreport.js"></script>
4 <div style="width:100%; height:700px;"></div> 4 <script src="./resources/intersection-observer-test-utils.js"></script>
5 <div id="root" style="display: inline-block; overflow-y: scroll; height: 200px; border: 3px solid black"> 5
6 <div style="width:100px; height: 300px;"></div> 6 <style>
7 <div id="target" style="background-color: green; width:100px; height:100px"></ div> 7 pre, #log {
8 position: absolute;
9 top: 0;
10 left: 200px;
11 }
12 .spacer {
13 height: 700px;
14 }
15 #root {
16 display: inline-block;
17 overflow-y: scroll;
18 height: 200px;
19 border: 3px solid black;
20 }
21 #target {
22 width: 100px;
23 height: 100px;
24 background-color: green;
25 }
26 </style>
27
28 <div class="spacer"></div>
29 <div id="root">
30 <div style="height: 300px;"></div>
31 <div id="target"></div>
8 </div> 32 </div>
9 <div style="width:100%;height:700px;"></div> 33 <div class="spacer"></div>
10 34
11 <script> 35 <script>
12 description("Simple intersection observer test with explicit root and target in the same document.");
13 var target = document.getElementById("target");
14 var root = document.getElementById("root");
15 var entries = []; 36 var entries = [];
16 var observer = new IntersectionObserver( 37 var root, target;
17 changes => { entries = entries.concat(changes) },
18 { root: document.getElementById("root") }
19 );
20 38
21 onload = function() { 39 runTestCycle(function() {
40 assert_equals(window.innerWidth, 800, "Window must be 800 pixels wide.");
41 assert_equals(window.innerHeight, 600, "Window must be 600 pixels high.");
42
43 target = document.getElementById("target");
44 assert_true(!!target, "target exists");
45 root = document.getElementById("root");
46 assert_true(!!root, "root exists");
47 var observer = new IntersectionObserver(function(changes) {
48 entries = entries.concat(changes)
49 }, { root: root });
22 observer.observe(target); 50 observer.observe(target);
23 entries = entries.concat(observer.takeRecords()); 51 entries = entries.concat(observer.takeRecords());
24 shouldBeEqualToNumber("entries.length", 0); 52 assert_equals(entries.length, 0, "No initial notifications.");
25 waitForNotification(step0); 53 runTestCycle(step0, "First rAF");
26 } 54 }, "IntersectionObserver in a single document with explicit root.");
27 55
28 // Test that notifications are not generated when the target is overflow clipped by the root.
29 function step0() { 56 function step0() {
30 shouldBeEqualToNumber("entries.length", 0);
31 document.scrollingElement.scrollTop = 600; 57 document.scrollingElement.scrollTop = 600;
32 waitForNotification(step1); 58 runTestCycle(step1, "document.scrollingElement.scrollTop = 600.");
59 assert_equals(entries.length, 0, "No notifications after first rAF.");
33 } 60 }
34 61
35 function step1() { 62 function step1() {
36 shouldBeEqualToNumber("entries.length", 0);
37 root.scrollTop = 150; 63 root.scrollTop = 150;
38 waitForNotification(step2); 64 runTestCycle(step2, "root.scrollTop = 150 with root scrolled into view.");
65 assert_equals(entries.length, 0, "No notifications after scrolling frame.");
39 } 66 }
40 67
41 function step2() { 68 function step2() {
42 shouldBeEqualToNumber("entries.length", 1);
43 if (entries.length > 0) {
44 shouldBeEqualToNumber("entries[0].boundingClientRect.left", 11);
45 shouldBeEqualToNumber("entries[0].boundingClientRect.right", 111);
46 shouldBeEqualToNumber("entries[0].boundingClientRect.top", 261);
47 shouldBeEqualToNumber("entries[0].boundingClientRect.bottom", 361);
48 shouldBeEqualToNumber("entries[0].intersectionRect.left", 11);
49 shouldBeEqualToNumber("entries[0].intersectionRect.right", 111);
50 shouldBeEqualToNumber("entries[0].intersectionRect.top", 261);
51 shouldBeEqualToNumber("entries[0].intersectionRect.bottom", 311);
52 shouldBeEqualToNumber("entries[0].rootBounds.left", 11);
53 shouldBeEqualToNumber("entries[0].rootBounds.right", 111);
54 shouldBeEqualToNumber("entries[0].rootBounds.top", 111);
55 shouldBeEqualToNumber("entries[0].rootBounds.bottom", 311);
56 shouldEvaluateToSameObject("entries[0].target", target);
57 }
58 document.scrollingElement.scrollTop = 0; 69 document.scrollingElement.scrollTop = 0;
59 waitForNotification(step3); 70 runTestCycle(step3, "document.scrollingElement.scrollTop = 0.");
71 checkEntry(entries, 0, [11, 111, 261, 361, 11, 111, 261, 311, 11, 111, 111, 31 1, target]);
60 } 72 }
61 73
62 function step3() { 74 function step3() {
63 shouldBeEqualToNumber("entries.length", 1);
64 root.scrollTop = 0; 75 root.scrollTop = 0;
65 waitForNotification(step4); 76 runTestCycle(step4, "root.scrollTop = 0");
77 checkEntry(entries, 0);
66 } 78 }
67 79
68 function step4() { 80 function step4() {
69 shouldBeEqualToNumber("entries.length", 2);
70 if (entries.length > 1) {
71 shouldBeEqualToNumber("entries[1].boundingClientRect.left", 11);
72 shouldBeEqualToNumber("entries[1].boundingClientRect.right", 111);
73 shouldBeEqualToNumber("entries[1].boundingClientRect.top", 1011);
74 shouldBeEqualToNumber("entries[1].boundingClientRect.bottom", 1111);
75 shouldBeEqualToNumber("entries[1].intersectionRect.left", 0);
76 shouldBeEqualToNumber("entries[1].intersectionRect.right", 0);
77 shouldBeEqualToNumber("entries[1].intersectionRect.top", 0);
78 shouldBeEqualToNumber("entries[1].intersectionRect.bottom", 0);
79 shouldBeEqualToNumber("entries[1].rootBounds.left", 11);
80 shouldBeEqualToNumber("entries[1].rootBounds.right", 111);
81 shouldBeEqualToNumber("entries[1].rootBounds.top", 711);
82 shouldBeEqualToNumber("entries[1].rootBounds.bottom", 911);
83 shouldEvaluateToSameObject("entries[1].target", target);
84 }
85 root.scrollTop = 150; 81 root.scrollTop = 150;
86 waitForNotification(step5); 82 runTestCycle(step5, "root.scrollTop = 150 with root scrolled out of view.");
83 checkEntry(entries, 1, [11, 111, 1011, 1111, 0, 0, 0, 0, 11, 111, 711, 911, ta rget]);
87 } 84 }
88 85
89 // This tests that notifications are generated even when the root element is off screen. 86 // This tests that notifications are generated even when the root element is off screen.
90 function step5() { 87 function step5() {
91 shouldBeEqualToNumber("entries.length", 3); 88 checkEntry(entries, 2, [11, 111, 861, 961, 11, 111, 861, 911, 11, 111, 711, 91 1, target]);
92 if (entries.length > 2) {
93 shouldBeEqualToNumber("entries[2].boundingClientRect.left", 11);
94 shouldBeEqualToNumber("entries[2].boundingClientRect.right", 111);
95 shouldBeEqualToNumber("entries[2].boundingClientRect.top", 861);
96 shouldBeEqualToNumber("entries[2].boundingClientRect.bottom", 961);
97 shouldBeEqualToNumber("entries[2].intersectionRect.left", 11);
98 shouldBeEqualToNumber("entries[2].intersectionRect.right", 111);
99 shouldBeEqualToNumber("entries[2].intersectionRect.top", 861);
100 shouldBeEqualToNumber("entries[2].intersectionRect.bottom", 911);
101 shouldBeEqualToNumber("entries[2].rootBounds.left", 11);
102 shouldBeEqualToNumber("entries[2].rootBounds.right", 111);
103 shouldBeEqualToNumber("entries[2].rootBounds.top", 711);
104 shouldBeEqualToNumber("entries[2].rootBounds.bottom", 911);
105 shouldEvaluateToSameObject("entries[2].target", target);
106 }
107
108 finishJSTest();
109 } 89 }
110 </script> 90 </script>
OLDNEW
« third_party/WebKit/LayoutTests/intersection-observer/resources/observer-in-iframe-subframe.html ('K') | « third_party/WebKit/LayoutTests/intersection-observer/same-document-no-root-expected.txt ('k') | third_party/WebKit/LayoutTests/intersection-observer/same-document-root-expected.txt » ('j') | third_party/WebKit/LayoutTests/intersection-observer/shadow-content.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698