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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/intersection-observer/edge-inclusive-intersection.html

Issue 2560253004: IntersectionObserver: convert tests to testharness.js (Closed)
Patch Set: Address comments Created 3 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 | « third_party/WebKit/LayoutTests/intersection-observer/display-none-expected.txt ('k') | third_party/WebKit/LayoutTests/intersection-observer/edge-inclusive-intersection-expected.txt » ('j') | no next file with comments »
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 <script src="./resources/intersection-observer-test-utils.js"></script>
5
4 <style> 6 <style>
7 pre, #log {
8 position: absolute;
9 top: 0;
10 left: 200px;
11 }
5 #root { 12 #root {
6 width: 200px; 13 width: 200px;
7 height: 200px; 14 height: 200px;
8 overflow: visible; 15 overflow: visible;
9 } 16 }
10 #target { 17 #target {
11 background-color: green; 18 background-color: green;
12 } 19 }
13 </style> 20 </style>
21
14 <div id="root"> 22 <div id="root">
15 <div id="target" style="width: 100px; height: 100px; transform: translateY(250 px)"></div> 23 <div id="target" style="width: 100px; height: 100px; transform: translateY(250 px)"></div>
16 </div> 24 </div>
17 25
18 <script> 26 <script>
19 description("Verifies that IntersectionObserver detects edge-inclusive intersect ions.");
20 var root = document.getElementById('root');
21 var target = document.getElementById('target');
22 var entries = []; 27 var entries = [];
23 var observer = new IntersectionObserver(
24 changes => { entries.push(...changes) },
25 { root: root }
26 );
27 28
28 onload = function() { 29 runTestCycle(function() {
30 assert_equals(window.innerWidth, 800, "Window must be 800 pixels wide.");
31 assert_equals(window.innerHeight, 600, "Window must be 600 pixels high.");
32
33 var root = document.getElementById('root');
34 assert_true(!!root, "root element exists.");
35 var target = document.getElementById('target');
36 assert_true(!!target, "target element exists.");
37 var observer = new IntersectionObserver(function(changes) {
38 entries = entries.concat(changes);
39 }, { root: root });
29 observer.observe(target); 40 observer.observe(target);
30 entries.push(...observer.takeRecords()); 41 entries = entries.concat(observer.takeRecords());
31 shouldBeEqualToNumber("entries.length", 0); 42 assert_equals(entries.length, 0, "No initial notifications.");
32 waitForNotification(step0); 43 runTestCycle(step0, "No notifications after first rAF.");
33 }; 44 }, "IntersectionObserver should detect and report edge-adjacent and zero-area in tersections.");
34 45
35 function step0() { 46 function step0() {
36 shouldBeEqualToNumber("entries.length", 0); 47 runTestCycle(step1, "Set transform=translateY(200px) on target.");
37 waitForNotification(step1); 48 assert_equals(entries.length, 0, "entries.length");
38 target.style.transform = "translateY(200px)"; 49 target.style.transform = "translateY(200px)";
39 } 50 }
40 51
41 function step1() { 52 function step1() {
42 shouldBeEqualToNumber("entries.length", 1); 53 runTestCycle(step2, "Set transform=translateY(201px) on target.");
43 if (entries.length > 0) { 54 checkLastEntry(entries, 0, [8, 108, 208, 308, 8, 108, 208, 208, 8, 208, 8, 208 , target]);
44 shouldBeEqualToNumber("entries[0].boundingClientRect.left", 8);
45 shouldBeEqualToNumber("entries[0].boundingClientRect.right", 108);
46 shouldBeEqualToNumber("entries[0].boundingClientRect.top", 208);
47 shouldBeEqualToNumber("entries[0].boundingClientRect.bottom", 308);
48 shouldBeEqualToNumber("entries[0].intersectionRect.left", 8);
49 shouldBeEqualToNumber("entries[0].intersectionRect.right", 108);
50 shouldBeEqualToNumber("entries[0].intersectionRect.top", 208);
51 shouldBeEqualToNumber("entries[0].intersectionRect.bottom", 208);
52 shouldBeEqualToNumber("entries[0].rootBounds.left", 8);
53 shouldBeEqualToNumber("entries[0].rootBounds.right", 208);
54 shouldBeEqualToNumber("entries[0].rootBounds.top", 8);
55 shouldBeEqualToNumber("entries[0].rootBounds.bottom", 208);
56 shouldEvaluateToSameObject("entries[0].target", target);
57 }
58 waitForNotification(step2);
59 target.style.transform = "translateY(201px)"; 55 target.style.transform = "translateY(201px)";
60 } 56 }
61 57
62 function step2() { 58 function step2() {
63 shouldBeEqualToNumber("entries.length", 2); 59 runTestCycle(step3, "Set transform=translateY(185px) on target.");
64 waitForNotification(step3); 60 checkLastEntry(entries, 1);
65 target.style.height = "0px"; 61 target.style.height = "0px";
66 target.style.width = "300px"; 62 target.style.width = "300px";
67 target.style.transform = "translateY(185px)"; 63 target.style.transform = "translateY(185px)";
68 } 64 }
69 65
70 function step3() { 66 function step3() {
71 shouldBeEqualToNumber("entries.length", 3); 67 checkLastEntry(entries, 2, [8, 308, 193, 193, 8, 208, 193, 193, 8, 208, 8, 208 , target]);
72 if (entries.length > 2) {
73 shouldBeEqualToNumber("entries[2].boundingClientRect.left", 8);
74 shouldBeEqualToNumber("entries[2].boundingClientRect.right", 308);
75 shouldBeEqualToNumber("entries[2].boundingClientRect.top", 193);
76 shouldBeEqualToNumber("entries[2].boundingClientRect.bottom", 193);
77 shouldBeEqualToNumber("entries[2].intersectionRect.left", 8);
78 shouldBeEqualToNumber("entries[2].intersectionRect.right", 208);
79 shouldBeEqualToNumber("entries[2].intersectionRect.top", 193);
80 shouldBeEqualToNumber("entries[2].intersectionRect.bottom", 193);
81 shouldBeEqualToNumber("entries[2].rootBounds.left", 8);
82 shouldBeEqualToNumber("entries[2].rootBounds.right", 208);
83 shouldBeEqualToNumber("entries[2].rootBounds.top", 8);
84 shouldBeEqualToNumber("entries[2].rootBounds.bottom", 208);
85 shouldEvaluateToSameObject("entries[2].target", target);
86 }
87 finishJSTest();
88 } 68 }
89 </script> 69 </script>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/intersection-observer/display-none-expected.txt ('k') | third_party/WebKit/LayoutTests/intersection-observer/edge-inclusive-intersection-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698