Google Git
Sign in
cobalt / cobalt / ecd0a9050be22614b8a32d770fda4268c0191626 / . / src / third_party / web_platform_tests / intersection-observer / isIntersecting-change-events.html
blob: 2021f066f9f78a0b53fe65ff776fea0d7a551864 [file] [log] [blame]
Xiaoming Shi73dfa202020-03-12 11:31:35 -0700[diff] [blame]1<!DOCTYPE html>
2<meta name="viewport" content="width=device-width,initial-scale=1">
3<script src="/resources/testharness.js"></script>
4<script src="/resources/testharnessreport.js"></script>
5<script src="./resources/intersection-observer-test-utils.js"></script>
6
7<style>
8pre, #log {
9 position: absolute;
10 top: 0;
11 left: 200px;
12}
13#root {
14 position: absolute;
15 top: 0;
16 left: 0;
17 width: 150px;
18 height: 200px;
Kaido Kert308ed6b2020-07-31 13:56:40 -0700[diff] [blame]19 overflow: scroll;
Xiaoming Shi73dfa202020-03-12 11:31:35 -0700[diff] [blame]20}
21#target1, #target2, #target3, #target4 {
22 width: 100px;
23 height: 100px;
24}
25#target1 {
26 background-color: green;
27}
28#target2 {
29 background-color: red;
30}
31#target3 {
32 background-color: blue;
33}
34#target4 {
35 background-color: yellow;
36}
37</style>
38
39<div id="root">
40 <div id="target1"></div>
41 <div id="target2"></div>
42 <div id="target3"></div>
43</div>
44
45<script>
46var entries = [];
47var observer;
Kaido Kert308ed6b2020-07-31 13:56:40 -0700[diff] [blame]48var target1, target2, target3, target4;
49var root;
Xiaoming Shi73dfa202020-03-12 11:31:35 -0700[diff] [blame]50
51runTestCycle(function() {
Kaido Kert308ed6b2020-07-31 13:56:40 -0700[diff] [blame]52 root = document.getElementById('root');
53 target1 = document.getElementById('target1');
54 target2 = document.getElementById('target2');
55 target3 = document.getElementById('target3');
Xiaoming Shi73dfa202020-03-12 11:31:35 -0700[diff] [blame]56 assert_true(!!root, "root element exists.");
57 assert_true(!!target1, "target1 element exists.");
58 assert_true(!!target2, "target2 element exists.");
59 assert_true(!!target3, "target3 element exists.");
60 observer = new IntersectionObserver(function(changes) {
61 entries = entries.concat(changes);
Kaido Kert308ed6b2020-07-31 13:56:40 -0700[diff] [blame]62 window.testRunner.DoNonMeasuredLayout();
Xiaoming Shi73dfa202020-03-12 11:31:35 -0700[diff] [blame]63 }, { root: root });
64 observer.observe(target1);
65 observer.observe(target2);
66 observer.observe(target3);
67 entries = entries.concat(observer.takeRecords());
68 assert_equals(entries.length, 0, "No initial notifications.");
69 runTestCycle(step0, "Rects in initial notifications should report initial positions.");
70}, "isIntersecting changes should trigger notifications.");
Kaido Kert308ed6b2020-07-31 13:56:40 -0700[diff] [blame]71window.testRunner.DoNonMeasuredLayout();
72window.testRunner.DoNonMeasuredLayout();
Xiaoming Shi73dfa202020-03-12 11:31:35 -0700[diff] [blame]73
74function step0() {
75 assert_equals(entries.length, 3, "Has 3 initial notifications.");
76 checkRect(entries[0].boundingClientRect, [0, 100, 0, 100], "Check 1st entry rect");
77 assert_equals(entries[0].target.id, 'target1', "Check 1st entry target id.");
78 checkIsIntersecting(entries, 0, true);
79 checkRect(entries[1].boundingClientRect, [0, 100, 100, 200], "Check 2nd entry rect");
80 assert_equals(entries[1].target.id, 'target2', "Check 2nd entry target id.");
81 checkIsIntersecting(entries, 1, true);
82 checkRect(entries[2].boundingClientRect, [0, 100, 200, 300], "Check 3rd entry rect");
83 assert_equals(entries[2].target.id, 'target3', "Check 3rd entry target id.");
84 checkIsIntersecting(entries, 2, true);
85 runTestCycle(step1, "Set scrollTop=100 and check for no new notifications.");
Kaido Kert308ed6b2020-07-31 13:56:40 -0700[diff] [blame]86 target1.style.marginTop = "-100px";
87 target2.style.marginTop = "-100px";
88 target3.style.marginTop = "-100px";
89 //root.scrollTop = 100;
90 window.testRunner.DoNonMeasuredLayout();
Xiaoming Shi73dfa202020-03-12 11:31:35 -0700[diff] [blame]91}
92
93function step1() {
94 assert_equals(entries.length, 3, "Has 3 total notifications because isIntersecting did not change.");
95 runTestCycle(step2, "Add 4th target.");
Kaido Kert308ed6b2020-07-31 13:56:40 -0700[diff] [blame]96 target1.style.marginTop = "0px";
97 target2.style.marginTop = "0px";
98 target3.style.marginTop = "0px";
99 //root.scrollTop = 0;
100 target4 = document.createElement('div');
Xiaoming Shi73dfa202020-03-12 11:31:35 -0700[diff] [blame]101 target4.setAttribute('id', 'target4');
102 root.appendChild(target4);
103 observer.observe(target4);
104}
105
106function step2() {
107 assert_equals(entries.length, 4, "Has 4 total notifications because 4th element was added.");
108 checkRect(entries[3].boundingClientRect, [0, 100, 300, 400], "Check 4th entry rect");
109 assert_equals(entries[3].target.id, 'target4', "Check 4th entry target id.");
110 checkIsIntersecting(entries, 3, false);
111 assert_equals(entries[3].intersectionRatio, 0, 'target4 initially has intersectionRatio of 0.');
112 runTestCycle(step3, "Set scrollTop=100 and check for one new notification.");
Kaido Kert308ed6b2020-07-31 13:56:40 -0700[diff] [blame]113 target1.style.marginTop = "-100px";
114 target2.style.marginTop = "-100px";
115 target3.style.marginTop = "-100px";
116 target4.style.marginTop = "-100px";
117 //root.scrollTop = 100;
Xiaoming Shi73dfa202020-03-12 11:31:35 -0700[diff] [blame]118}
119
120function step3() {
121 assert_equals(entries.length, 5, "Has 5 total notifications.");
Kaido Kert308ed6b2020-07-31 13:56:40 -0700[diff] [blame]122 checkRect(entries[4].boundingClientRect, [0, 100, -100, 000], "Check 5th entry rect");
Xiaoming Shi73dfa202020-03-12 11:31:35 -0700[diff] [blame]123 assert_equals(entries[4].target.id, 'target4', "Check 5th entry target id.");
124 checkIsIntersecting(entries, 4, true);
125 assert_equals(entries[4].intersectionRatio, 0, 'target4 still has intersectionRatio of 0.');
126 root.scrollTop = 0; // reset to make it easier to refresh and run the test
127}
128
129</script>