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

Delta Between Two Patch Sets: LayoutTests/imported/w3c/web-platform-tests/intersection-observer/same-document-root.html

Issue 359780043: WIP for IO
Left Patch Set: Computed root bounds correctly. Now 13/24 WPTs pass 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 .spacer {
13 height: calc(100vh + 100px);
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>
32 </div>
33 <div class="spacer"></div>
34
35 <script>
36 var vw = document.documentElement.clientWidth;
37 var vh = document.documentElement.clientHeight;
38
39 var entries = [];
40 var root, target;
41
42 runTestCycle(function() {
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 });
50 observer.observe(target);
51 entries = entries.concat(observer.takeRecords());
52 assert_equals(entries.length, 0, "No initial notifications.");
53 runTestCycle(step0, "First rAF");
54 }, "IntersectionObserver in a single document with explicit root.");
55
56 function step0() {
57 document.scrollingElement.scrollTop = vh;
58 runTestCycle(step1, "document.scrollingElement.scrollTop = window.innerHeight. ");
59 checkLastEntry(entries, 0, [ 11, 111, vh + 411, vh + 511, 0, 0, 0, 0, 11, 111, vh + 111, vh + 311, false]);
60 }
61
62 function step1() {
63 root.scrollTop = 150;
64 runTestCycle(step2, "root.scrollTop = 150 with root scrolled into view.");
65 assert_equals(entries.length, 1, "No notifications after scrolling frame.");
66 }
67
68 function step2() {
69 document.scrollingElement.scrollTop = 0;
70 runTestCycle(step3, "document.scrollingElement.scrollTop = 0.");
71 checkLastEntry(entries, 1, [11, 111, 261, 361, 11, 111, 261, 311, 11, 111, 111 , 311, true]);
72 }
73
74 function step3() {
75 root.scrollTop = 0;
76 runTestCycle(step4, "root.scrollTop = 0");
77 checkLastEntry(entries, 1);
78 }
79
80 function step4() {
81 root.scrollTop = 150;
82 runTestCycle(step5, "root.scrollTop = 150 with root scrolled out of view.");
83 checkLastEntry(entries, 2, [11, 111, vh + 411, vh + 511, 0, 0, 0, 0, 11, 111, vh + 111, vh + 311, false]);
84 }
85
86 // This tests that notifications are generated even when the root element is off screen.
87 function step5() {
88 checkLastEntry(entries, 3, [11, 111, vh + 261, vh + 361, 11, 111, vh + 261, vh + 311, 11, 111, vh + 111, vh + 311, true]);
89 }
90 </script>
LEFTRIGHT

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