Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code | Sign in
(206)

Delta Between Two Patch Sets: LayoutTests/imported/w3c/web-platform-tests/intersection-observer/isIntersecting-change-events.html

Issue 359780043: WIP for IO
Left Patch Set: Fixed root parsing Created 5 years, 8 months ago
Right Patch Set: 22 tests pass Created 5 years, 8 months ago
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments. Please Sign in to add in-line comments.
Jump to:
Right: Side by side diff | Download
LEFTRIGHT
(no file at all)
1 <!DOCTYPE html>
2 <script src="/resources/testharness.js"></script>
3 <script src="/resources/testharnessreport.js"></script>
4 <script src="./resources/intersection-observer-test-utils.js"></script>
5
6 <style>
7 pre, #log {
8 position: absolute;
9 top: 0;
10 left: 200px;
11 }
12 #root {
13 position: absolute;
14 top: 0;
15 left: 0;
16 width: 150px;
17 height: 200px;
18 overflow-y: scroll;
19 }
20 #target1, #target2, #target3, #target4 {
21 width: 100px;
22 height: 100px;
23 }
24 #target1 {
25 background-color: green;
26 }
27 #target2 {
28 background-color: red;
29 }
30 #target3 {
31 background-color: blue;
32 }
33 #target4 {
34 background-color: yellow;
35 }
36 </style>
37
38 <div id="root">
39 <div id="target1"></div>
40 <div id="target2"></div>
41 <div id="target3"></div>
42 </div>
43
44 <script>
45 var entries = [];
46 var observer;
47
48 runTestCycle(function() {
49 var root = document.getElementById('root');
50 var target1 = document.getElementById('target1');
51 var target2 = document.getElementById('target2');
52 var target3 = document.getElementById('target3');
53 assert_true(!!root, "root element exists.");
54 assert_true(!!target1, "target1 element exists.");
55 assert_true(!!target2, "target2 element exists.");
56 assert_true(!!target3, "target3 element exists.");
57 observer = new IntersectionObserver(function(changes) {
58 entries = entries.concat(changes);
59 }, { root: root });
60 observer.observe(target1);
61 observer.observe(target2);
62 observer.observe(target3);
63 entries = entries.concat(observer.takeRecords());
64 assert_equals(entries.length, 0, "No initial notifications.");
65 runTestCycle(step0, "Rects in initial notifications should report initial posi tions.");
66 }, "isIntersecting changes should trigger notifications.");
67
68 function step0() {
69 assert_equals(entries.length, 3, "Has 3 initial notifications.");
70 checkRect(entries[0].boundingClientRect, [0, 100, 0, 100], "Check 1st entry re ct");
71 assert_equals(entries[0].target.id, 'target1', "Check 1st entry target id.");
72 checkIsIntersecting(entries, 0, true);
73 checkRect(entries[1].boundingClientRect, [0, 100, 100, 200], "Check 2nd entry rect");
74 assert_equals(entries[1].target.id, 'target2', "Check 2nd entry target id.");
75 checkIsIntersecting(entries, 1, true);
76 checkRect(entries[2].boundingClientRect, [0, 100, 200, 300], "Check 3rd entry rect");
77 assert_equals(entries[2].target.id, 'target3', "Check 3rd entry target id.");
78 checkIsIntersecting(entries, 2, true);
79 runTestCycle(step1, "Set scrollTop=100 and check for no new notifications.");
80 root.scrollTop = 100;
81 }
82
83 function step1() {
84 assert_equals(entries.length, 3, "Has 3 total notifications because isIntersec ting did not change.");
85 runTestCycle(step2, "Add 4th target.");
86 root.scrollTop = 0;
87 var target4 = document.createElement('div');
88 target4.setAttribute('id', 'target4');
89 root.appendChild(target4);
90 observer.observe(target4);
91 }
92
93 function step2() {
94 assert_equals(entries.length, 4, "Has 3 total notifications because 4th elemen t was added.");
95 checkRect(entries[3].boundingClientRect, [0, 100, 300, 400], "Check 4th entry rect");
96 assert_equals(entries[3].target.id, 'target4', "Check 4th entry target id.");
97 checkIsIntersecting(entries, 3, false);
98 assert_equals(entries[3].intersectionRatio, 0, 'target4 initially has intersec tionRatio of 0.');
99 runTestCycle(step3, "Set scrollTop=100 and check for one new notification.");
100 root.scrollTop = 100;
101 }
102
103 function step3() {
104 assert_equals(entries.length, 5, "Has 5 total notifications.");
105 checkRect(entries[4].boundingClientRect, [0, 100, 200, 300], "Check 5th entry rect");
106 assert_equals(entries[4].target.id, 'target4', "Check 5th entry target id.");
107 checkIsIntersecting(entries, 4, true);
108 assert_equals(entries[4].intersectionRatio, 0, 'target4 still has intersection Ratio of 0.');
109 root.scrollTop = 0; // reset to make it easier to refresh and run the test
110 }
111
112 </script>
LEFTRIGHT

Powered by Google App Engine
RSS Feeds Recent Issues | This issue
This is Rietveld f62528b