Source/WebKit/ChangeLog

 12018-08-08 Ali Juma <ajuma@chromium.org>
 2
 3 Import WPTs for IntersectionObserver
 4 https://bugs.webkit.org/show_bug.cgi?id=188416
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 Make IntersectionObserver an experimental feature, so that it is enabled in
 9 WebKitTestRunner.
 10
 11 * Shared/WebPreferences.yaml:
 12
1132018-08-05 Darin Adler <darin@apple.com>
214
315 [Cocoa] More tweaks and refactoring to prepare for ARC

Source/WebKitLegacy/mac/ChangeLog

 12018-08-08 Ali Juma <ajuma@chromium.org>
 2
 3 Import WPTs for IntersectionObserver
 4 https://bugs.webkit.org/show_bug.cgi?id=188416
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 * WebView/WebPreferencesPrivate.h:
 9
1102018-08-08 Jonathan Bedard <jbedard@apple.com>
211
312 Follow-up build fix for r234685

Source/WebKit/Shared/WebPreferences.yaml

@@MediaPreloadingEnabled:
655655 defaultValue: false
656656 webcoreBinding: RuntimeEnabledFeatures
657657
658 IntersectionObserverEnabled:
659  type: bool
660  defaultValue: false
661  humanReadableName: "Intersection Observer"
662  humanReadableDescription: "Enable Intersection Observer support"
663  webcoreBinding: RuntimeEnabledFeatures
664  condition: ENABLE(INTERSECTION_OBSERVER)
665 
666658InteractiveFormValidationEnabled:
667659 type: bool
668660 defaultValue: true

@@ImageBitmapOffscreenCanvasEnabled:
11461138 category: experimental
11471139 webcoreBinding: RuntimeEnabledFeatures
11481140
 1141IntersectionObserverEnabled:
 1142 type: bool
 1143 defaultValue: false
 1144 humanReadableName: "Intersection Observer"
 1145 humanReadableDescription: "Enable Intersection Observer support"
 1146 webcoreBinding: RuntimeEnabledFeatures
 1147 category: experimental
 1148 condition: ENABLE(INTERSECTION_OBSERVER)
 1149
11491150WebRTCLegacyAPIEnabled:
11501151 type: bool
11511152 defaultValue: false

Source/WebKitLegacy/mac/WebView/WebPreferencesPrivate.h

@@extern NSString *WebPreferencesCacheModelChangedInternalNotification WEBKIT_DEPR
576576- (void)setWebAuthenticationEnabled:(BOOL)flag;
577577- (BOOL)webAuthenticationEnabled;
578578
 579- (void)setIntersectionObserverEnabled:(BOOL)flag;
 580- (BOOL)intersectionObserverEnabled;
 581
579582- (void)setIsSecureContextAttributeEnabled:(BOOL)flag;
580583- (BOOL)isSecureContextAttributeEnabled;
581584

Tools/ChangeLog

 12018-08-08 Ali Juma <ajuma@chromium.org>
 2
 3 Import WPTs for IntersectionObserver
 4 https://bugs.webkit.org/show_bug.cgi?id=188416
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 Enable IntersectionObserver in DumpRenderTree.
 9
 10 * DumpRenderTree/mac/DumpRenderTree.mm:
 11 (enableExperimentalFeatures):
 12 (setWebPreferencesForTestOptions):
 13 * WebKitTestRunner/TestController.cpp:
 14 (WTR::TestController::resetPreferencesToConsistentValues):
 15
1162018-08-08 Wenson Hsieh <wenson_hsieh@apple.com>
217
318 [iOS] fast/events/ios/contenteditable-autocapitalize.html is a flaky failure

Tools/DumpRenderTree/mac/DumpRenderTree.mm

@@static void enableExperimentalFeatures(WebPreferences* preferences)
867867 [preferences setColorFilterEnabled:YES];
868868 [preferences setCrossOriginWindowPolicySupportEnabled:YES];
869869 [preferences setServerTimingEnabled:YES];
 870 [preferences setIntersectionObserverEnabled:YES];
870871}
871872
872873// Called before each test.

@@static void setWebPreferencesForTestOptions(const TestOptions& options)
996997
997998 preferences.attachmentElementEnabled = options.enableAttachmentElement;
998999 preferences.acceleratedDrawingEnabled = options.useAcceleratedDrawing;
999  preferences.intersectionObserverEnabled = options.enableIntersectionObserver;
10001000 preferences.menuItemElementEnabled = options.enableMenuItemElement;
10011001 preferences.modernMediaControlsEnabled = options.enableModernMediaControls;
10021002 preferences.webAuthenticationEnabled = options.enableWebAuthentication;

Tools/WebKitTestRunner/TestController.cpp

@@void TestController::resetPreferencesToConsistentValues(const TestOptions& optio
711711 WKPreferencesSetMockScrollbarsEnabled(preferences, options.useMockScrollbars);
712712 WKPreferencesSetNeedsSiteSpecificQuirks(preferences, options.needsSiteSpecificQuirks);
713713 WKPreferencesSetAttachmentElementEnabled(preferences, options.enableAttachmentElement);
714  WKPreferencesSetIntersectionObserverEnabled(preferences, options.enableIntersectionObserver);
715714 WKPreferencesSetMenuItemElementEnabled(preferences, options.enableMenuItemElement);
716715 WKPreferencesSetModernMediaControlsEnabled(preferences, options.enableModernMediaControls);
717716 WKPreferencesSetWebAuthenticationEnabled(preferences, options.enableWebAuthentication);

LayoutTests/imported/w3c/ChangeLog

 12018-08-08 Ali Juma <ajuma@chromium.org>
 2
 3 Import WPTs for IntersectionObserver
 4 https://bugs.webkit.org/show_bug.cgi?id=188416
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 * resources/import-expectations.json:
 9 * web-platform-tests/intersection-observer/META.yml: Added.
 10 * web-platform-tests/intersection-observer/bounding-box-expected.txt: Added.
 11 * web-platform-tests/intersection-observer/bounding-box.html: Added.
 12 * web-platform-tests/intersection-observer/client-rect-expected.txt: Added.
 13 * web-platform-tests/intersection-observer/client-rect.html: Added.
 14 * web-platform-tests/intersection-observer/containing-block-expected.txt: Added.
 15 * web-platform-tests/intersection-observer/containing-block.html: Added.
 16 * web-platform-tests/intersection-observer/cross-origin-iframe-expected.txt: Added.
 17 * web-platform-tests/intersection-observer/cross-origin-iframe.html: Added.
 18 * web-platform-tests/intersection-observer/disconnect-expected.txt: Added.
 19 * web-platform-tests/intersection-observer/disconnect.html: Added.
 20 * web-platform-tests/intersection-observer/display-none-expected.txt: Added.
 21 * web-platform-tests/intersection-observer/display-none.html: Added.
 22 * web-platform-tests/intersection-observer/edge-inclusive-intersection-expected.txt: Added.
 23 * web-platform-tests/intersection-observer/edge-inclusive-intersection.html: Added.
 24 * web-platform-tests/intersection-observer/idlharness.window-expected.txt: Added.
 25 * web-platform-tests/intersection-observer/idlharness.window.html: Added.
 26 * web-platform-tests/intersection-observer/idlharness.window.js: Added.
 27 (idl_array.self.observer.new.IntersectionObserver):
 28 * web-platform-tests/intersection-observer/iframe-no-root-expected.txt: Added.
 29 * web-platform-tests/intersection-observer/iframe-no-root.html: Added.
 30 * web-platform-tests/intersection-observer/inline-client-rect-expected.txt: Added.
 31 * web-platform-tests/intersection-observer/inline-client-rect.html: Added.
 32 * web-platform-tests/intersection-observer/isIntersecting-change-events-expected.txt: Added.
 33 * web-platform-tests/intersection-observer/isIntersecting-change-events.html: Added.
 34 * web-platform-tests/intersection-observer/multiple-targets-expected.txt: Added.
 35 * web-platform-tests/intersection-observer/multiple-targets.html: Added.
 36 * web-platform-tests/intersection-observer/multiple-thresholds-expected.txt: Added.
 37 * web-platform-tests/intersection-observer/multiple-thresholds.html: Added.
 38 * web-platform-tests/intersection-observer/observer-attributes-expected.txt: Added.
 39 * web-platform-tests/intersection-observer/observer-attributes.html: Added.
 40 * web-platform-tests/intersection-observer/observer-exceptions-expected.txt: Added.
 41 * web-platform-tests/intersection-observer/observer-exceptions.html: Added.
 42 * web-platform-tests/intersection-observer/observer-in-iframe.html: Added.
 43 * web-platform-tests/intersection-observer/observer-without-js-reference-expected.txt: Added.
 44 * web-platform-tests/intersection-observer/observer-without-js-reference.html: Added.
 45 * web-platform-tests/intersection-observer/remove-element-expected.txt: Added.
 46 * web-platform-tests/intersection-observer/remove-element.html: Added.
 47 * web-platform-tests/intersection-observer/resources/cross-origin-subframe.html: Added.
 48 * web-platform-tests/intersection-observer/resources/iframe-no-root-subframe.html: Added.
 49 * web-platform-tests/intersection-observer/resources/intersection-observer-test-utils.js: Added.
 50 (waitForNotification):
 51 (runTestCycle):
 52 (contentBounds):
 53 (borderBoxBounds):
 54 (clientBounds):
 55 (rectArea):
 56 (checkRect):
 57 (checkLastEntry):
 58 (checkJsonEntry):
 59 (checkJsonEntries):
 60 * web-platform-tests/intersection-observer/resources/observer-in-iframe-subframe.html: Added.
 61 * web-platform-tests/intersection-observer/resources/timestamp-subframe.html: Added.
 62 * web-platform-tests/intersection-observer/resources/w3c-import.log: Added.
 63 * web-platform-tests/intersection-observer/root-margin-expected.txt: Added.
 64 * web-platform-tests/intersection-observer/root-margin.html: Added.
 65 * web-platform-tests/intersection-observer/same-document-no-root-expected.txt: Added.
 66 * web-platform-tests/intersection-observer/same-document-no-root.html: Added.
 67 * web-platform-tests/intersection-observer/same-document-root-expected.txt: Added.
 68 * web-platform-tests/intersection-observer/same-document-root.html: Added.
 69 * web-platform-tests/intersection-observer/same-document-zero-size-target-expected.txt: Added.
 70 * web-platform-tests/intersection-observer/same-document-zero-size-target.html: Added.
 71 * web-platform-tests/intersection-observer/shadow-content-expected.txt: Added.
 72 * web-platform-tests/intersection-observer/shadow-content.html: Added.
 73 * web-platform-tests/intersection-observer/text-target-expected.txt: Added.
 74 * web-platform-tests/intersection-observer/text-target.html: Added.
 75 * web-platform-tests/intersection-observer/timestamp-expected.txt: Added.
 76 * web-platform-tests/intersection-observer/timestamp.html: Added.
 77 * web-platform-tests/intersection-observer/unclipped-root-expected.txt: Added.
 78 * web-platform-tests/intersection-observer/unclipped-root.html: Added.
 79 * web-platform-tests/intersection-observer/w3c-import.log: Added.
 80 * web-platform-tests/intersection-observer/zero-area-element-hidden-expected.txt: Added.
 81 * web-platform-tests/intersection-observer/zero-area-element-hidden.html: Added.
 82 * web-platform-tests/intersection-observer/zero-area-element-visible-expected.txt: Added.
 83 * web-platform-tests/intersection-observer/zero-area-element-visible.html: Added.
 84
1852018-08-08 Charlie Turner <cturner@igalia.com>
286
387 Add CENC sanitization

LayoutTests/imported/w3c/resources/import-expectations.json

246246 "web-platform-tests/innerText": "import",
247247 "web-platform-tests/input-events": "skip",
248248 "web-platform-tests/interfaces": "skip",
249  "web-platform-tests/intersection-observer": "skip",
 249 "web-platform-tests/intersection-observer": "import",
250250 "web-platform-tests/js": "skip",
251251 "web-platform-tests/keyboard-lock": "skip",
252252 "web-platform-tests/longtask-timing": "skip",

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/META.yml

 1spec: https://w3c.github.io/IntersectionObserver/
 2suggested_reviewers:
 3 - szager-chromium

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/bounding-box-expected.txt

 1
 2PASS Test that the target's border bounding box is used to calculate intersection.
 3FAIL First rAF. assert_equals: entries.length expected 1 but got 0
 4FAIL target.style.transform = 'translateY(195px)' assert_equals: entries.length expected 2 but got 0
 5

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/bounding-box.html

 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>
 7pre, #log {
 8 position: absolute;
 9 top: 0;
 10 left: 200px;
 11}
 12#root {
 13 overflow: visible;
 14 height: 200px;
 15 width: 160px;
 16 border: 7px solid black;
 17}
 18#target {
 19 margin: 10px;
 20 width: 100px;
 21 height: 100px;
 22 padding: 10px;
 23 background-color: green;
 24}
 25</style>
 26
 27<div id="root">
 28 <div id="target" style="transform: translateY(300px)"></div>
 29</div>
 30
 31<script>
 32var entries = [];
 33var target;
 34
 35runTestCycle(function() {
 36 target = document.getElementById("target");
 37 assert_true(!!target, "target exists");
 38 var root = document.getElementById("root");
 39 assert_true(!!root, "root exists");
 40 var observer = new IntersectionObserver(function(changes) {
 41 entries = entries.concat(changes)
 42 }, {root: root});
 43 observer.observe(target);
 44 entries = entries.concat(observer.takeRecords());
 45 assert_equals(entries.length, 0, "No initial notifications.");
 46 runTestCycle(step0, "First rAF.");
 47}, "Test that the target's border bounding box is used to calculate intersection.");
 48
 49function step0() {
 50 var targetBounds = clientBounds(target);
 51 target.style.transform = "translateY(195px)";
 52 runTestCycle(step1, "target.style.transform = 'translateY(195px)'");
 53 checkLastEntry(entries, 0, targetBounds.concat(0, 0, 0, 0, 8, 182, 8, 222, false));
 54}
 55
 56function step1() {
 57 var targetBounds = clientBounds(target);
 58 target.style.transform = "";
 59 checkLastEntry(entries, 1, targetBounds.concat(25, 145, 220, 222, 8, 182, 8, 222, true));
 60}
 61</script>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/client-rect-expected.txt

 1
 2PASS IntersectionObserverEntry.boundingClientRect should match target.boundingClientRect()
 3FAIL First rAF should generate notification. assert_equals: One notification. expected 1 but got 0
 4

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/client-rect.html

 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>
 7pre, #log {
 8 position: absolute;
 9 top: 0;
 10 left: 200px;
 11}
 12iframe {
 13 width: 180px;
 14 height: 100px;
 15}
 16</style>
 17
 18<iframe id="iframe" srcdoc="<div id='target' style='margin:0.5px;width:1000px;height:1000px;'></div>"></iframe>
 19
 20<script>
 21var target;
 22var entries = [];
 23var observer;
 24var iframe = document.getElementById("iframe");
 25
 26iframe.onload = function() {
 27 runTestCycle(function() {
 28 target = iframe.contentDocument.getElementById("target");
 29 assert_true(!!target, "Target element exists.");
 30 observer = new IntersectionObserver(function(changes) {
 31 entries = entries.concat(changes);
 32 });
 33 observer.observe(target);
 34 entries = entries.concat(observer.takeRecords());
 35 assert_equals(entries.length, 0, "No initial notifications.");
 36 runTestCycle(test0, "First rAF should generate notification.");
 37 }, "IntersectionObserverEntry.boundingClientRect should match target.boundingClientRect()");
 38};
 39
 40function test0() {
 41 assert_equals(entries.length, 1, "One notification.");
 42 var bcr = target.getBoundingClientRect();
 43 checkLastEntry(entries, 0, [bcr.left, bcr.right, bcr.top, bcr.bottom]);
 44}
 45</script>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/containing-block-expected.txt

 1
 2PASS IntersectionObserver should only report intersections if root is a containing block ancestor of target.
 3FAIL In containing block and intersecting. assert_equals: entries.length expected 1 but got 0
 4FAIL In containing block and not intersecting. assert_equals: entries.length expected 2 but got 0
 5FAIL Not in containing block and intersecting. assert_equals: entries.length expected 2 but got 0
 6FAIL Not in containing block and not intersecting. assert_equals: entries.length expected 2 but got 0
 7

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/containing-block.html

 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>
 7pre, #log {
 8 position: absolute;
 9 top: 0;
 10 left: 200px;
 11}
 12#root {
 13 width: 170px;
 14 height: 200px;
 15 overflow-y: scroll;
 16}
 17#target {
 18 width: 100px;
 19 height: 100px;
 20 background-color: green;
 21 position: absolute;
 22}
 23</style>
 24
 25<div id="root" style="position: absolute">
 26 <div id="target" style="left: 50px; top: 250px"></div>
 27</div>
 28
 29<script>
 30var entries = [];
 31var root, target;
 32
 33runTestCycle(function() {
 34 root = document.getElementById("root");
 35 assert_true(!!root, "root element exists.");
 36 target = document.getElementById("target");
 37 assert_true(!!target, "target element exists.");
 38 var observer = new IntersectionObserver(function(changes) {
 39 entries = entries.concat(changes);
 40 }, { root: root });
 41 observer.observe(target);
 42 entries = entries.concat(observer.takeRecords());
 43 assert_equals(entries.length, 0, "No initial notifications.");
 44 target.style.top = "10px";
 45 runTestCycle(test1, "In containing block and intersecting.");
 46}, "IntersectionObserver should only report intersections if root is a containing block ancestor of target.");
 47
 48function test1() {
 49 runTestCycle(test2, "In containing block and not intersecting.");
 50 var rootBounds = contentBounds(root);
 51 checkLastEntry(entries, 0, [58, 158, 18, 118, 58, 158, 18, 118].concat(rootBounds));
 52 target.style.top = "250px";
 53}
 54
 55function test2() {
 56 runTestCycle(test3, "Not in containing block and intersecting.");
 57 var rootBounds = contentBounds(root);
 58 checkLastEntry(entries, 1, [58, 158, 258, 358, 0, 0, 0, 0].concat(rootBounds));
 59 root.style.position = "static";
 60 target.style.top = "10px";
 61}
 62
 63function test3() {
 64 runTestCycle(test4, "Not in containing block and not intersecting.");
 65 checkLastEntry(entries, 1);
 66 target.style.top = "250px";
 67}
 68
 69function test4() {
 70 checkLastEntry(entries, 1);
 71 target.style.top = "0";
 72}
 73</script>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/cross-origin-iframe-expected.txt

 1
 2
 3PASS Intersection observer test with no explicit root and target in a cross-origin iframe.
 4FAIL First rAF assert_equals: expected 1 but got 0
 5PASS topDocument.scrollingElement.scrollTop = 200
 6FAIL iframeDocument.scrollingElement.scrollTop = 250 assert_equals: expected 1 but got 0
 7FAIL topDocument.scrollingElement.scrollTop = 100 assert_equals: expected 1 but got 0
 8

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/cross-origin-iframe.html

 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>
 7pre, #log {
 8 position: absolute;
 9 top: 0;
 10 left: 200px;
 11}
 12iframe {
 13 width: 160px;
 14 height: 100px;
 15 overflow-y: scroll;
 16}
 17.spacer {
 18 height: calc(100vh + 100px);
 19}
 20</style>
 21
 22<div class="spacer"></div>
 23<iframe src="resources/cross-origin-subframe.html" sandbox="allow-scripts"></iframe>
 24<div class="spacer"></div>
 25
 26<script>
 27async_test(function(t) {
 28 var iframe = document.querySelector("iframe");
 29
 30 function handleMessage(event) {
 31 if (event.data.hasOwnProperty('scrollTo')) {
 32 document.scrollingElement.scrollTop = event.data.scrollTo;
 33 waitForNotification(t, function() { iframe.contentWindow.postMessage("", "*"); },
 34 "document.scrollingElement.scrollTop = " + event.data.scrollTo);
 35 } else if (event.data.hasOwnProperty('actual')) {
 36 checkJsonEntries(event.data.actual, event.data.expected, event.data.description);
 37 } else if (event.data.hasOwnProperty('DONE')) {
 38 document.scrollingElement.scrollTop = 0;
 39 t.done();
 40 } else {
 41 var description = event.data.description;
 42 waitForNotification(t, function() { iframe.contentWindow.postMessage("", "*"); }, description);
 43 }
 44 }
 45
 46 window.addEventListener("message", t.step_func(handleMessage));
 47
 48 iframe.onload = t.step_func(function() {
 49 waitForNotification(t, function() { iframe.contentWindow.postMessage("", "*") }, "setup");
 50 });
 51}, "Intersection observer test with no explicit root and target in a cross-origin iframe.");
 52</script>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/disconnect-expected.txt

 1
 2PASS IntersectionObserver should not deliver pending notifications after disconnect().
 3FAIL First rAF. assert_equals: Initial notification. expected 1 but got 0
 4FAIL observer.disconnect() assert_equals: No new notifications. expected 1 but got 0
 5

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/disconnect.html

 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>
 7pre, #log {
 8 position: absolute;
 9 top: 0;
 10 left: 200px;
 11}
 12.spacer {
 13 height: calc(100vh + 100px);
 14}
 15#target {
 16 width: 100px;
 17 height: 100px;
 18 background-color: green;
 19}
 20</style>
 21
 22<div class="spacer"></div>
 23<div id="target"></div>
 24<div class="spacer"></div>
 25
 26<script>
 27var entries = [];
 28var observer;
 29var target;
 30
 31runTestCycle(function() {
 32 target = document.getElementById("target");
 33 assert_true(!!target, "target exists");
 34 observer = new IntersectionObserver(function(changes) {
 35 entries = entries.concat(changes)
 36 });
 37 observer.observe(target);
 38 entries = entries.concat(observer.takeRecords());
 39 assert_equals(entries.length, 0, "No initial notifications.");
 40 runTestCycle(step0, "First rAF.");
 41}, "IntersectionObserver should not deliver pending notifications after disconnect().");
 42
 43function step0() {
 44 runTestCycle(step1, "observer.disconnect()");
 45 document.scrollingElement.scrollTop = 300;
 46 observer.disconnect();
 47 assert_equals(entries.length, 1, "Initial notification.");
 48}
 49
 50function step1() {
 51 assert_equals(entries.length, 1, "No new notifications.");
 52}
 53</script>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/display-none-expected.txt

 1
 2PASS IntersectionObserver should send a not-intersecting notification for a target that gets display:none.
 3FAIL Intersecting notification after first rAF. assert_equals: entries.length expected 1 but got 0
 4FAIL Not-intersecting notification after setting display:none on target. assert_equals: entries.length expected 2 but got 0
 5FAIL Intersecting notification after removing display:none on target. assert_equals: entries.length expected 3 but got 0
 6

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/display-none.html

 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>
 7pre, #log {
 8 position: absolute;
 9 top: 0;
 10 left: 200px;
 11}
 12#target {
 13 background-color: green;
 14 width: 100px;
 15 height: 100px;
 16}
 17</style>
 18
 19<div id="target"></div>
 20
 21<script>
 22var vw = document.documentElement.clientWidth;
 23var vh = document.documentElement.clientHeight;
 24
 25var entries = [];
 26
 27runTestCycle(function() {
 28 var target = document.getElementById("target");
 29 var root = document.getElementById("root");
 30 var observer = new IntersectionObserver(function(changes) {
 31 entries = entries.concat(changes)
 32 });
 33 observer.observe(target);
 34 entries = entries.concat(observer.takeRecords());
 35 assert_equals(entries.length, 0, "No initial notifications.");
 36 runTestCycle(step0, "Intersecting notification after first rAF.");
 37}, "IntersectionObserver should send a not-intersecting notification for a target that gets display:none.");
 38
 39function step0() {
 40 runTestCycle(step1, "Not-intersecting notification after setting display:none on target.");
 41 checkLastEntry(entries, 0, [8, 108, 8, 108, 8, 108, 8, 108, 0, vw, 0, vh, true]);
 42 target.style.display = "none";
 43}
 44
 45function step1() {
 46 runTestCycle(step2, "Intersecting notification after removing display:none on target.");
 47 checkLastEntry(entries, 1, [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, false]);
 48 target.style.display = "";
 49}
 50
 51function step2() {
 52 checkLastEntry(entries, 2, [8, 108, 8, 108, 8, 108, 8, 108, 0, vw, 0, vh, true]);
 53}
 54</script>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/edge-inclusive-intersection-expected.txt

 1
 2PASS IntersectionObserver should detect and report edge-adjacent and zero-area intersections.
 3FAIL First rAF. assert_equals: entries.length expected 1 but got 0
 4FAIL Set transform=translateY(200px) on target. assert_equals: entries.length expected 2 but got 0
 5FAIL Set transform=translateY(201px) on target. assert_equals: entries.length expected 3 but got 0
 6FAIL Set transform=translateY(185px) on target. assert_equals: entries.length expected 4 but got 0
 7

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/edge-inclusive-intersection.html

 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>
 7pre, #log {
 8 position: absolute;
 9 top: 0;
 10 left: 200px;
 11}
 12#root {
 13 width: 200px;
 14 height: 200px;
 15 overflow: visible;
 16}
 17#target {
 18 background-color: green;
 19}
 20</style>
 21
 22<div id="root">
 23 <div id="target" style="width: 100px; height: 100px; transform: translateY(250px)"></div>
 24</div>
 25
 26<script>
 27var entries = [];
 28
 29runTestCycle(function() {
 30 var root = document.getElementById('root');
 31 assert_true(!!root, "root element exists.");
 32 var target = document.getElementById('target');
 33 assert_true(!!target, "target element exists.");
 34 var observer = new IntersectionObserver(function(changes) {
 35 entries = entries.concat(changes);
 36 }, { root: root });
 37 observer.observe(target);
 38 entries = entries.concat(observer.takeRecords());
 39 assert_equals(entries.length, 0, "No initial notifications.");
 40 runTestCycle(step0, "First rAF.");
 41}, "IntersectionObserver should detect and report edge-adjacent and zero-area intersections.");
 42
 43function step0() {
 44 runTestCycle(step1, "Set transform=translateY(200px) on target.");
 45 checkLastEntry(entries, 0, [8, 108, 258, 358, 0, 0, 0, 0, 8, 208, 8, 208, false]);
 46 target.style.transform = "translateY(200px)";
 47}
 48
 49function step1() {
 50 runTestCycle(step2, "Set transform=translateY(201px) on target.");
 51 checkLastEntry(entries, 1, [8, 108, 208, 308, 8, 108, 208, 208, 8, 208, 8, 208, true]);
 52 target.style.transform = "translateY(201px)";
 53}
 54
 55function step2() {
 56 runTestCycle(step3, "Set transform=translateY(185px) on target.");
 57 checkLastEntry(entries, 2);
 58 target.style.height = "0px";
 59 target.style.width = "300px";
 60 target.style.transform = "translateY(185px)";
 61}
 62
 63function step3() {
 64 checkLastEntry(entries, 3, [8, 308, 193, 193, 8, 208, 193, 193, 8, 208, 8, 208, true]);
 65}
 66</script>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/idlharness.window-expected.txt

 1CONSOLE MESSAGE: line 8: ReferenceError: Can't find variable: idl_test
 2
 3FAIL Untitled ReferenceError: Can't find variable: idl_test
 4

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/idlharness.window.html

 1<!-- This file is required for WebKit test infrastructure to run the templated test -->
02\ No newline at end of file

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/idlharness.window.js

 1// META: script=/resources/WebIDLParser.js
 2// META: script=/resources/idlharness.js
 3
 4'use strict';
 5
 6// https://w3c.github.io/IntersectionObserver/
 7
 8idl_test(
 9 ['intersection-observer'],
 10 ['dom'],
 11 idl_array => {
 12 idl_array.add_objects({
 13 IntersectionObserver: ['observer'],
 14 });
 15 var options = {
 16 root: document.body,
 17 rootMargin: '0px',
 18 threshold: 1.0
 19 }
 20 self.observer = new IntersectionObserver(() => {}, options);
 21 }
 22);

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/iframe-no-root-expected.txt

 1
 2
 3PASS Observer with the implicit root; target in a same-origin iframe.
 4FAIL First rAF. assert_equals: entries.length expected 1 but got 0
 5FAIL document.scrollingElement.scrollTop = 200 assert_equals: entries.length == 1 expected 1 but got 0
 6FAIL iframe.contentDocument.scrollingElement.scrollTop = 250 assert_equals: entries.length expected 2 but got 0
 7FAIL document.scrollingElement.scrollTop = 100 assert_equals: entries.length expected 3 but got 0
 8

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/iframe-no-root.html

 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>
 7pre, #log {
 8 position: absolute;
 9 top: 0;
 10 left: 200px;
 11}
 12.spacer {
 13 height: calc(100vh + 100px);
 14}
 15iframe {
 16 height: 100px;
 17 width: 150px;
 18}
 19</style>
 20
 21<div class="spacer"></div>
 22<iframe id="target-iframe" src="resources/iframe-no-root-subframe.html"></iframe>
 23<div class="spacer"></div>
 24
 25<script>
 26var vw = document.documentElement.clientWidth;
 27var vh = document.documentElement.clientHeight;
 28
 29var iframe = document.getElementById("target-iframe");
 30var target;
 31var entries = [];
 32
 33iframe.onload = function() {
 34 runTestCycle(function() {
 35 assert_true(!!iframe, "iframe exists");
 36
 37 target = iframe.contentDocument.getElementById("target");
 38 assert_true(!!target, "Target element exists.");
 39 var observer = new IntersectionObserver(function(changes) {
 40 entries = entries.concat(changes)
 41 });
 42 observer.observe(target);
 43 entries = entries.concat(observer.takeRecords());
 44 assert_equals(entries.length, 0, "No initial notifications.");
 45 runTestCycle(step0, "First rAF.");
 46 }, "Observer with the implicit root; target in a same-origin iframe.");
 47};
 48
 49function step0() {
 50 document.scrollingElement.scrollTop = 200;
 51 runTestCycle(step1, "document.scrollingElement.scrollTop = 200");
 52 checkLastEntry(entries, 0, [8, 108, 208, 308, 0, 0, 0, 0, 0, vw, 0, vh, false]);
 53}
 54
 55function step1() {
 56 iframe.contentDocument.scrollingElement.scrollTop = 250;
 57 runTestCycle(step2, "iframe.contentDocument.scrollingElement.scrollTop = 250");
 58 assert_equals(entries.length, 1, "entries.length == 1");
 59}
 60
 61function step2() {
 62 document.scrollingElement.scrollTop = 100;
 63 runTestCycle(step3, "document.scrollingElement.scrollTop = 100");
 64 checkLastEntry(entries, 1, [8, 108, -42, 58, 8, 108, 0, 58, 0, vw, 0, vh, true]);
 65}
 66
 67function step3() {
 68 checkLastEntry(entries, 2, [8, 108, -42, 58, 0, 0, 0, 0, 0, vw, 0, vh, false]);
 69 document.scrollingElement.scrollTop = 0;
 70}
 71</script>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/inline-client-rect-expected.txt

 11 2 3 4 5
 2
 3PASS Inline target
 4FAIL First rAF assert_equals: entries.length expected 1 but got 0
 5FAIL scroller.scrollLeft = 90 assert_equals: entries.length expected 2 but got 0
 6

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/inline-client-rect.html

 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>
 7pre, #log {
 8 position: absolute;
 9 top: 120px;
 10 left: 0;
 11}
 12#scroller {
 13 width: 250px;
 14 overflow: auto;
 15}
 16#overflow {
 17 width: 1000px;
 18}
 19.content {
 20 width: 100px;
 21 height: 20px;
 22 padding: 40px 0;
 23 text-align: center;
 24 background-color: grey;
 25 display: inline-block;
 26}
 27</style>
 28
 29<div id="scroller">
 30 <div id="overflow">
 31 <span><div class="content">1</div></span>
 32 <span><div class="content">2</div></span>
 33 <span><div class="content">3</div></span>
 34 <span id="target"><div class="content">4</div></span>
 35 <span><div class="content">5</div></span>
 36 </div>
 37</div>
 38
 39<script>
 40var vw = document.documentElement.clientWidth;
 41var vh = document.documentElement.clientHeight;
 42
 43var entries = [];
 44var scroller, target, spaceWidth, targetOffsetLeft, targetOffsetTop;
 45
 46runTestCycle(function() {
 47 scroller = document.getElementById("scroller");
 48 assert_true(!!scroller, "scroller exists");
 49 target = document.getElementById("target");
 50 assert_true(!!target, "target exists");
 51 var observer = new IntersectionObserver(function(changes) {
 52 entries = entries.concat(changes)
 53 });
 54 observer.observe(target);
 55 entries = entries.concat(observer.takeRecords());
 56 assert_equals(entries.length, 0, "No initial notifications.");
 57 runTestCycle(step0, "First rAF");
 58}, "Inline target");
 59
 60function step0() {
 61 // Measure space width between two adjacent inlines.
 62 let nextEl = target.nextElementSibling;
 63 spaceWidth = nextEl.offsetLeft - target.offsetLeft - target.offsetWidth;
 64 // 8px body margin + 3 preceding siblings @ (100px width + spaceWidth) each
 65 targetOffsetLeft = 8 + 300 + (spaceWidth * 3);
 66 // 8px body margin + 40px top padding
 67 targetOffsetTop = 48;
 68 let left = targetOffsetLeft;
 69 let right = left + 100;
 70 let top = targetOffsetTop;
 71 let bottom = top + target.offsetHeight;
 72
 73 scroller.scrollLeft = 90;
 74 runTestCycle(step1, "scroller.scrollLeft = 90");
 75
 76 checkLastEntry(entries, 0, [left, right, top, bottom,
 77 0, 0, 0, 0, 0, vw, 0, vh, false]);
 78}
 79
 80function step1() {
 81 // -90px for scroll offset
 82 let left = targetOffsetLeft - 90;
 83 let right = left + 100;
 84 let top = targetOffsetTop;
 85 let bottom = top + target.offsetHeight;
 86 // 8px body margin + 250px client width of scroller
 87 let scrollerRight = 258;
 88 checkLastEntry(entries, 1, [left, right, top, bottom,
 89 left, scrollerRight, top, bottom,
 90 0, vw, 0, vh, true]);
 91}
 92</script>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/isIntersecting-change-events-expected.txt

 1
 2PASS isIntersecting changes should trigger notifications.
 3FAIL Rects in initial notifications should report initial positions. assert_equals: Has 3 initial notifications. expected 3 but got 0
 4

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/isIntersecting-change-events.html

 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>
 7pre, #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>
 45var entries = [];
 46var observer;
 47
 48runTestCycle(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 positions.");
 66}, "isIntersecting changes should trigger notifications.");
 67
 68function step0() {
 69 assert_equals(entries.length, 3, "Has 3 initial notifications.");
 70 checkRect(entries[0].boundingClientRect, [0, 100, 0, 100], "Check 1st entry rect");
 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
 83function step1() {
 84 assert_equals(entries.length, 3, "Has 3 total notifications because isIntersecting 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
 93function step2() {
 94 assert_equals(entries.length, 4, "Has 3 total notifications because 4th element 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 intersectionRatio of 0.');
 99 runTestCycle(step3, "Set scrollTop=100 and check for one new notification.");
 100 root.scrollTop = 100;
 101}
 102
 103function 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 intersectionRatio of 0.');
 109 root.scrollTop = 0; // reset to make it easier to refresh and run the test
 110}
 111
 112</script>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/multiple-targets-expected.txt

 1
 2PASS One observer with multiple targets.
 3FAIL First rAF. assert_equals: Three initial notifications. expected 3 but got 0
 4FAIL document.scrollingElement.scrollTop = 150 assert_equals: Four notifications. expected 4 but got 0
 5FAIL document.scrollingElement.scrollTop = 10000 assert_equals: Six notifications. expected 6 but got 0
 6FAIL document.scrollingElement.scrollTop = 0 assert_equals: Nine notifications. expected 9 but got 0
 7

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/multiple-targets.html

 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>
 7pre, #log {
 8 position: absolute;
 9 top: 0;
 10 left: 200px;
 11}
 12.spacer {
 13 height: calc(100vh + 100px);
 14}
 15.target {
 16 width: 100px;
 17 height: 100px;
 18 margin: 10px;
 19 background-color: green;
 20}
 21</style>
 22
 23<div class="spacer"></div>
 24<div id="target1" class="target"></div>
 25<div id="target2" class="target"></div>
 26<div id="target3" class="target"></div>
 27
 28<script>
 29var entries = [];
 30var target1, target2, target3;
 31
 32runTestCycle(function() {
 33 target1 = document.getElementById("target1");
 34 assert_true(!!target1, "target1 exists.");
 35 target2 = document.getElementById("target2");
 36 assert_true(!!target2, "target2 exists.");
 37 target3 = document.getElementById("target3");
 38 assert_true(!!target3, "target3 exists.");
 39 var observer = new IntersectionObserver(function(changes) {
 40 entries = entries.concat(changes)
 41 });
 42 observer.observe(target1);
 43 observer.observe(target2);
 44 observer.observe(target3);
 45 entries = entries.concat(observer.takeRecords());
 46 assert_equals(entries.length, 0, "No initial notifications.");
 47 runTestCycle(step0, "First rAF.");
 48}, "One observer with multiple targets.");
 49
 50function step0() {
 51 document.scrollingElement.scrollTop = 150;
 52 runTestCycle(step1, "document.scrollingElement.scrollTop = 150");
 53 assert_equals(entries.length, 3, "Three initial notifications.");
 54 assert_equals(entries[0].target, target1, "entries[0].target === target1");
 55 assert_equals(entries[1].target, target2, "entries[1].target === target2");
 56 assert_equals(entries[2].target, target3, "entries[2].target === target3");
 57}
 58
 59function step1() {
 60 document.scrollingElement.scrollTop = 10000;
 61 runTestCycle(step2, "document.scrollingElement.scrollTop = 10000");
 62 assert_equals(entries.length, 4, "Four notifications.");
 63 assert_equals(entries[3].target, target1, "entries[3].target === target1");
 64}
 65
 66function step2() {
 67 document.scrollingElement.scrollTop = 0;
 68 runTestCycle(step3, "document.scrollingElement.scrollTop = 0");
 69 assert_equals(entries.length, 6, "Six notifications.");
 70 assert_equals(entries[4].target, target2, "entries[4].target === target2");
 71 assert_equals(entries[5].target, target3, "entries[5].target === target3");
 72}
 73
 74function step3() {
 75 assert_equals(entries.length, 9, "Nine notifications.");
 76 assert_equals(entries[6].target, target1, "entries[6].target === target1");
 77 assert_equals(entries[7].target, target2, "entries[7].target === target2");
 78 assert_equals(entries[8].target, target3, "entries[8].target === target3");
 79}
 80</script>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/multiple-thresholds-expected.txt

 1
 2PASS Observer with multiple thresholds.
 3FAIL First rAF. assert_equals: entries.length expected 1 but got 0
 4FAIL document.scrollingElement.scrollTop = 120 assert_equals: entries.length expected 2 but got 0
 5FAIL document.scrollingElement.scrollTop = 160 assert_equals: entries.length expected 3 but got 0
 6FAIL document.scrollingElement.scrollTop = 200 assert_equals: entries.length expected 4 but got 0
 7FAIL document.scrollingElement.scrollTop = 240 assert_equals: entries.length expected 5 but got 0
 8FAIL document.scrollingElement.scrollTop = window.innerHeight + 140 assert_equals: entries.length expected 6 but got 0
 9FAIL document.scrollingElement.scrollTop = window.innerHeight + 160 assert_equals: entries.length expected 7 but got 0
 10FAIL document.scrollingElement.scrollTop = window.innerHeight + 200 assert_equals: entries.length expected 8 but got 0
 11

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/multiple-thresholds.html

 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>
 7pre, #log {
 8 position: absolute;
 9 top: 0;
 10 left: 200px;
 11}
 12.spacer {
 13 height: calc(100vh + 100px);
 14}
 15#target {
 16 width: 100px;
 17 height: 100px;
 18 background-color: green;
 19}
 20</style>
 21
 22<div class="spacer"></div>
 23<div id="target"></div>
 24<div class="spacer"></div>
 25
 26<script>
 27var vw = document.documentElement.clientWidth;
 28var vh = document.documentElement.clientHeight;
 29
 30var entries = [];
 31var target;
 32
 33runTestCycle(function() {
 34 target = document.getElementById("target");
 35 var observer = new IntersectionObserver(function(changes) {
 36 entries = entries.concat(changes)
 37 }, { threshold: [0, 0.25, 0.5, 0.75, 1] });
 38 observer.observe(target);
 39 entries = entries.concat(observer.takeRecords());
 40 assert_equals(entries.length, 0, "No initial notifications.");
 41 runTestCycle(step0, "First rAF.");
 42}, "Observer with multiple thresholds.");
 43
 44function step0() {
 45 document.scrollingElement.scrollTop = 120;
 46 runTestCycle(step1, "document.scrollingElement.scrollTop = 120");
 47 checkLastEntry(entries, 0, [8, 108, vh + 108, vh + 208, 0, 0, 0, 0, 0, vw, 0, vh, false]);
 48}
 49
 50function step1() {
 51 document.scrollingElement.scrollTop = 160;
 52 runTestCycle(step2, "document.scrollingElement.scrollTop = 160");
 53 checkLastEntry(entries, 1, [8, 108, vh - 12, vh + 88, 8, 108, vh - 12, vh, 0, vw, 0, vh, true]);
 54}
 55
 56function step2() {
 57 document.scrollingElement.scrollTop = 200;
 58 runTestCycle(step3, "document.scrollingElement.scrollTop = 200");
 59 checkLastEntry(entries, 2, [8, 108, vh - 52, vh + 48, 8, 108, vh - 52, vh, 0, vw, 0, vh, true]);
 60}
 61
 62function step3() {
 63 document.scrollingElement.scrollTop = 240;
 64 runTestCycle(step4, "document.scrollingElement.scrollTop = 240");
 65 checkLastEntry(entries, 3, [8, 108, vh - 92, vh + 8, 8, 108, vh - 92, vh, 0, vw, 0, vh, true]);
 66}
 67
 68function step4() {
 69 document.scrollingElement.scrollTop = vh + 140;
 70 runTestCycle(step5, "document.scrollingElement.scrollTop = window.innerHeight + 140");
 71 checkLastEntry(entries, 4, [8, 108, vh - 132, vh - 32, 8, 108, vh - 132, vh - 32, 0, vw, 0, vh, true]);
 72}
 73
 74function step5() {
 75 document.scrollingElement.scrollTop = vh + 160;
 76 runTestCycle(step6, "document.scrollingElement.scrollTop = window.innerHeight + 160");
 77 checkLastEntry(entries, 5, [8, 108, -32, 68, 8, 108, 0, 68, 0, vw, 0, vh, true]);
 78}
 79
 80function step6() {
 81 document.scrollingElement.scrollTop = vh + 200;
 82 runTestCycle(step7, "document.scrollingElement.scrollTop = window.innerHeight + 200");
 83 checkLastEntry(entries, 6, [8, 108, -52, 48, 8, 108, 0, 48, 0, vw, 0, vh, true]);
 84}
 85
 86function step7() {
 87 checkLastEntry(entries, 7, [8, 108, -92, 8, 8, 108, 0, 8, 0, vw, 0, vh, true]);
 88 document.scrollingElement.scrollTop = vh + 220;
 89 runTestCycle(step8, "document.scrollingElement.scrollTop = window.innerHeight + 220");
 90}
 91
 92function step8() {
 93 checkLastEntry(entries, 8, [8, 108, -112, -12, 0, 0, 0, 0, 0, vw, 0, vh, false]);
 94 document.scrollingElement.scrollTop = 0;
 95}
 96</script>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/observer-attributes-expected.txt

 1
 2PASS Observer attribute getters.
 3PASS observer.root
 4PASS observer.thresholds
 5FAIL observer.rootMargin assert_equals: expected "0px 0px 0px 0px" but got "0px"
 6PASS set observer.root
 7PASS set observer.thresholds
 8FAIL set observer.rootMargin assert_equals: expected "10% 20px 10% 20px" but got "10% 20px"
 9

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/observer-attributes.html

 1<!DOCTYPE html>
 2<script src="/resources/testharness.js"></script>
 3<script src="/resources/testharnessreport.js"></script>
 4
 5<div id="root"></div>
 6
 7<script>
 8test(function() {
 9 var observer = new IntersectionObserver(function(e) {}, {});
 10 test(function() { assert_equals(observer.root, null) },
 11 "observer.root");
 12 test(function() { assert_array_equals(observer.thresholds, [0]) },
 13 "observer.thresholds");
 14 test(function() { assert_equals(observer.rootMargin, "0px 0px 0px 0px") },
 15 "observer.rootMargin");
 16
 17 var rootDiv = document.getElementById("root");
 18 observer = new IntersectionObserver(function(e) {}, {
 19 root: rootDiv,
 20 threshold: [0, 0.25, 0.5, 1.0],
 21 rootMargin: "10% 20px"
 22 });
 23 test(function() { assert_equals(observer.root, rootDiv) },
 24 "set observer.root");
 25 test(function() { assert_array_equals(observer.thresholds, [0, 0.25, 0.5, 1.0]) },
 26 "set observer.thresholds");
 27 test(function() { assert_equals(observer.rootMargin, "10% 20px 10% 20px") },
 28 "set observer.rootMargin");
 29}, "Observer attribute getters.");
 30
 31</script>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/observer-exceptions-expected.txt

 1
 2FAIL IntersectionObserver constructor with { threshold: [1.1] } assert_throws: function "function () {
 3 new IntersectionObserver(e => {}, {threshold: [1.1]})
 4 }" did not throw
 5PASS IntersectionObserver constructor with { threshold: ["foo"] }
 6FAIL IntersectionObserver constructor witth { rootMargin: "1" } assert_throws: function "function () {
 7 new IntersectionObserver(e => {}, {rootMargin: "1"})
 8 }" did not throw
 9FAIL IntersectionObserver constructor with { rootMargin: "2em" } assert_throws: function "function () {
 10 new IntersectionObserver(e => {}, {rootMargin: "2em"})
 11 }" did not throw
 12FAIL IntersectionObserver constructor with { rootMargin: "auto" } assert_throws: function "function () {
 13 new IntersectionObserver(e => {}, {rootMargin: "auto"})
 14 }" did not throw
 15FAIL IntersectionObserver constructor with { rootMargin: "calc(1px + 2px)" } assert_throws: function "function () {
 16 new IntersectionObserver(e => {}, {rootMargin: "calc(1px + 2px)"})
 17 }" did not throw
 18FAIL IntersectionObserver constructor with { rootMargin: "1px !important" } assert_throws: function "function () {
 19 new IntersectionObserver(e => {}, {rootMargin: "1px !important"})
 20 }" did not throw
 21FAIL IntersectionObserver constructor with { rootMargin: "1px 1px 1px 1px 1px" } assert_throws: function "function () {
 22 new IntersectionObserver(e => {}, {rootMargin: "1px 1px 1px 1px 1px"})
 23 }" did not throw
 24PASS IntersectionObserver.observe("foo")
 25

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/observer-exceptions.html

 1<!DOCTYPE html>
 2<script src="/resources/testharness.js"></script>
 3<script src="/resources/testharnessreport.js"></script>
 4
 5<script>
 6test(function () {
 7 assert_throws(RangeError(), function() {
 8 new IntersectionObserver(e => {}, {threshold: [1.1]})
 9 })
 10}, "IntersectionObserver constructor with { threshold: [1.1] }");
 11
 12test(function () {
 13 assert_throws(TypeError(), function() {
 14 new IntersectionObserver(e => {}, {threshold: ["foo"]})
 15 })
 16}, 'IntersectionObserver constructor with { threshold: ["foo"] }');
 17
 18test(function () {
 19 assert_throws("SYNTAX_ERR", function() {
 20 new IntersectionObserver(e => {}, {rootMargin: "1"})
 21 })
 22}, 'IntersectionObserver constructor witth { rootMargin: "1" }');
 23
 24test(function () {
 25 assert_throws("SYNTAX_ERR", function() {
 26 new IntersectionObserver(e => {}, {rootMargin: "2em"})
 27 })
 28}, 'IntersectionObserver constructor with { rootMargin: "2em" }');
 29
 30test(function () {
 31 assert_throws("SYNTAX_ERR", function() {
 32 new IntersectionObserver(e => {}, {rootMargin: "auto"})
 33 })
 34}, 'IntersectionObserver constructor with { rootMargin: "auto" }');
 35
 36test(function () {
 37 assert_throws("SYNTAX_ERR", function() {
 38 new IntersectionObserver(e => {}, {rootMargin: "calc(1px + 2px)"})
 39 })
 40}, 'IntersectionObserver constructor with { rootMargin: "calc(1px + 2px)" }');
 41
 42test(function () {
 43 assert_throws("SYNTAX_ERR", function() {
 44 new IntersectionObserver(e => {}, {rootMargin: "1px !important"})
 45 })
 46}, 'IntersectionObserver constructor with { rootMargin: "1px !important" }');
 47
 48test(function () {
 49 assert_throws("SYNTAX_ERR", function() {
 50 new IntersectionObserver(e => {}, {rootMargin: "1px 1px 1px 1px 1px"})
 51 })
 52}, 'IntersectionObserver constructor with { rootMargin: "1px 1px 1px 1px 1px" }');
 53
 54test(function () {
 55 assert_throws(TypeError(), function() {
 56 let observer = new IntersectionObserver(c => {}, {});
 57 observer.observe("foo");
 58 })
 59}, 'IntersectionObserver.observe("foo")');
 60</script>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/observer-in-iframe.html

 1<!DOCTYPE html>
 2<style>
 3pre, #log {
 4 position: absolute;
 5 top: 0;
 6 left: 200px;
 7}
 8</style>
 9<iframe id="target-iframe" src="resources/observer-in-iframe-subframe.html" width="150px" height="150px"></iframe>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/observer-without-js-reference-expected.txt

 1
 2PASS IntersectionObserver that is unreachable in js should still generate notifications.
 3FAIL First rAF assert_equals: One notification. expected 1 but got 0
 4FAIL document.scrollingElement.scrollTop = 300 assert_equals: Two notifications. expected 2 but got 0
 5

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/observer-without-js-reference.html

 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>
 7pre, #log {
 8 position: absolute;
 9 top: 0;
 10 left: 200px;
 11}
 12.spacer {
 13 height: calc(100vh + 100px);
 14}
 15#target {
 16 width: 100px;
 17 height: 100px;
 18 background-color: green;
 19}
 20</style>
 21<div class="spacer"></div>
 22<div id="target"></div>
 23<div class="spacer"></div>
 24
 25<script>
 26var entries = [];
 27
 28runTestCycle(function() {
 29 var target = document.getElementById("target");
 30 assert_true(!!target, "Target exists");
 31 function createObserver() {
 32 new IntersectionObserver(function(changes) {
 33 entries = entries.concat(changes)
 34 }).observe(target);
 35 }
 36 createObserver();
 37 runTestCycle(step0, "First rAF");
 38}, "IntersectionObserver that is unreachable in js should still generate notifications.");
 39
 40function step0() {
 41 document.scrollingElement.scrollTop = 300;
 42 runTestCycle(step1, "document.scrollingElement.scrollTop = 300");
 43 assert_equals(entries.length, 1, "One notification.");
 44}
 45
 46function step1() {
 47 document.scrollingElement.scrollTop = 0;
 48 assert_equals(entries.length, 2, "Two notifications.");
 49}
 50</script>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/remove-element-expected.txt

 1
 2PASS Verify that not-intersecting notifications are sent when a target is removed from the DOM tree.
 3FAIL First rAF assert_equals: entries.length expected 1 but got 0
 4FAIL root.scrollTop = 150 assert_equals: entries.length expected 2 but got 0
 5FAIL root.removeChild(target). assert_equals: entries.length expected 3 but got 0
 6FAIL root.insertBefore(target, trailingSpace). assert_equals: entries.length expected 3 but got 0
 7FAIL root.scrollTop = 150 after reinserting target. assert_equals: entries.length expected 4 but got 0
 8

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/remove-element.html

 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>
 7pre, #log {
 8 position: absolute;
 9 top: 0;
 10 left: 200px;
 11}
 12#root {
 13 display: inline-block;
 14 overflow-y: scroll;
 15 height: 200px;
 16 border: 3px solid black;
 17}
 18#target {
 19 width: 100px;
 20 height: 100px;
 21 background-color: green;
 22}
 23.spacer {
 24 height: 300px;
 25}
 26</style>
 27
 28<div id="root">
 29 <div id="leading-space" class="spacer"></div>
 30 <div id="target"></div>
 31 <div id="trailing-space" class="spacer"</div>
 32</div>
 33
 34<script>
 35var entries = [];
 36var root, target, trailingSpace;
 37
 38runTestCycle(function() {
 39 target = document.getElementById("target");
 40 assert_true(!!target, "Target exists");
 41 trailingSpace = document.getElementById("trailing-space");
 42 assert_true(!!trailingSpace, "TrailingSpace exists");
 43 root = document.getElementById("root");
 44 assert_true(!!root, "Root exists");
 45 var observer = new IntersectionObserver(function(changes) {
 46 entries = entries.concat(changes)
 47 }, {root: root});
 48 observer.observe(target);
 49 entries = entries.concat(observer.takeRecords());
 50 assert_equals(entries.length, 0, "No initial notifications.");
 51 runTestCycle(step0, "First rAF");
 52}, "Verify that not-intersecting notifications are sent when a target is removed from the DOM tree.");
 53
 54function step0() {
 55 root.scrollTop = 150;
 56 runTestCycle(step1, "root.scrollTop = 150");
 57 checkLastEntry(entries, 0, [11, 111, 311, 411, 0, 0, 0, 0, 11, 111, 11, 211, false]);
 58}
 59
 60function step1() {
 61 root.removeChild(target);
 62 runTestCycle(step2, "root.removeChild(target).");
 63 checkLastEntry(entries, 1, [11, 111, 161, 261, 11, 111, 161, 211, 11, 111, 11, 211, true]);
 64}
 65
 66function step2() {
 67 root.scrollTop = 0;
 68 root.insertBefore(target, trailingSpace);
 69 runTestCycle(step3, "root.insertBefore(target, trailingSpace).");
 70 checkLastEntry(entries, 2, [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, false]);
 71}
 72
 73function step3() {
 74 root.scrollTop = 150;
 75 runTestCycle(step4, "root.scrollTop = 150 after reinserting target.");
 76 checkLastEntry(entries, 2);
 77}
 78
 79function step4() {
 80 checkLastEntry(entries, 3, [11, 111, 161, 261, 11, 111, 161, 211, 11, 111, 11, 211, true]);
 81}
 82</script>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/resources/cross-origin-subframe.html

 1<!DOCTYPE html>
 2<div style="height: 200px; width: 100px;"></div>
 3<div id="target" style="background-color: green; width:100px; height:100px"></div>
 4<div style="height: 200px; width: 100px;"></div>
 5
 6<script>
 7var port;
 8var entries = [];
 9var target = document.getElementById('target');
 10var scroller = document.scrollingElement;
 11var nextStep;
 12
 13function clientRectToJson(rect) {
 14 if (!rect)
 15 return "null";
 16 return {
 17 top: rect.top,
 18 right: rect.right,
 19 bottom: rect.bottom,
 20 left: rect.left
 21 };
 22}
 23
 24function entryToJson(entry) {
 25 return {
 26 boundingClientRect: clientRectToJson(entry.boundingClientRect),
 27 intersectionRect: clientRectToJson(entry.intersectionRect),
 28 rootBounds: clientRectToJson(entry.rootBounds),
 29 target: entry.target.id
 30 };
 31}
 32
 33function coordinatesToClientRectJson(top, right, bottom, left) {
 34 return {
 35 top: top,
 36 right: right,
 37 bottom: bottom,
 38 left: left
 39 };
 40}
 41
 42// Note that we never use RAF in this code, because this frame might get render-throttled.
 43// Instead of RAF-ing, we just post an empty message to the parent window, which will
 44// RAF when it is received, and then send us a message to cause the next step to run.
 45
 46// Use a rootMargin here, and verify it does NOT get applied for the cross-origin case.
 47var observer = new IntersectionObserver(function(changes) {
 48 entries = entries.concat(changes)
 49}, { rootMargin: "7px" });
 50observer.observe(target);
 51
 52function step0() {
 53 entries = entries.concat(observer.takeRecords());
 54 nextStep = step1;
 55 var expected = [{
 56 boundingClientRect: coordinatesToClientRectJson(8, 208, 108, 308),
 57 intersectionRect: coordinatesToClientRectJson(0, 0, 0, 0),
 58 rootBounds: "null",
 59 target: target.id
 60 }];
 61 port.postMessage({
 62 actual: entries.map(entryToJson),
 63 expected: expected,
 64 description: "First rAF"
 65 }, "*");
 66 entries = [];
 67 port.postMessage({scrollTo: 200}, "*");
 68}
 69
 70function step1() {
 71 entries = entries.concat(observer.takeRecords());
 72 port.postMessage({
 73 actual: entries.map(entryToJson),
 74 expected: [],
 75 description: "topDocument.scrollingElement.scrollTop = 200"
 76 }, "*");
 77 entries = [];
 78 scroller.scrollTop = 250;
 79 nextStep = step2;
 80 port.postMessage({}, "*");
 81}
 82
 83function step2() {
 84 entries = entries.concat(observer.takeRecords());
 85 var expected = [{
 86 boundingClientRect: coordinatesToClientRectJson(-42, 108, 58, 8),
 87 intersectionRect: coordinatesToClientRectJson(0, 108, 58, 8),
 88 rootBounds: "null",
 89 target: target.id
 90 }];
 91 port.postMessage({
 92 actual: entries.map(entryToJson),
 93 expected: expected,
 94 description: "iframeDocument.scrollingElement.scrollTop = 250"
 95 }, "*");
 96 entries = [];
 97 nextStep = step3;
 98 port.postMessage({scrollTo: 100}, "*");
 99}
 100
 101function step3() {
 102 entries = entries.concat(observer.takeRecords());
 103 var expected = [{
 104 boundingClientRect: coordinatesToClientRectJson(-42, 108, 58, 8),
 105 intersectionRect: coordinatesToClientRectJson(0, 0, 0, 0),
 106 rootBounds: "null",
 107 target: target.id
 108 }];
 109 port.postMessage({
 110 actual: entries.map(entryToJson),
 111 expected: expected,
 112 description: "topDocument.scrollingElement.scrollTop = 100"
 113 }, "*");
 114 port.postMessage({DONE: 1}, "*");
 115}
 116
 117function handleMessage(event)
 118{
 119 port = event.source;
 120 nextStep();
 121}
 122
 123nextStep = step0;
 124window.addEventListener("message", handleMessage);
 125</script>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/resources/iframe-no-root-subframe.html

 1<!DOCTYPE html>
 2<div style="height: 200px; width: 100px;"></div>
 3<div id="target" style="background-color: green; width:100px; height:100px"></div>
 4<div style="height: 200px; width: 100px;"></div>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/resources/intersection-observer-test-utils.js

 1// Here's how waitForNotification works:
 2//
 3// - myTestFunction0()
 4// - waitForNotification(myTestFunction1)
 5// - requestAnimationFrame()
 6// - Modify DOM in a way that should trigger an IntersectionObserver callback.
 7// - BeginFrame
 8// - requestAnimationFrame handler runs
 9// - First step_timeout()
 10// - Style, layout, paint
 11// - IntersectionObserver generates new notifications
 12// - Posts a task to deliver notifications
 13// - First step_timeout handler runs
 14// - Second step_timeout()
 15// - Task to deliver IntersectionObserver notifications runs
 16// - IntersectionObserver callbacks run
 17// - Second step_timeout handler runs
 18// - myTestFunction1()
 19// - [optional] waitForNotification(myTestFunction2)
 20// - requestAnimationFrame()
 21// - Verify newly-arrived IntersectionObserver notifications
 22// - [optional] Modify DOM to trigger new notifications
 23function waitForNotification(t, f) {
 24 requestAnimationFrame(function() {
 25 t.step_timeout(function() { t.step_timeout(f); });
 26 });
 27}
 28
 29// The timing of when runTestCycle is called is important. It should be
 30// called:
 31//
 32// - Before or during the window load event, or
 33// - Inside of a prior runTestCycle callback, *before* any assert_* methods
 34// are called.
 35//
 36// Following these rules will ensure that the test suite will not abort before
 37// all test steps have run.
 38function runTestCycle(f, description) {
 39 async_test(function(t) {
 40 waitForNotification(t, t.step_func_done(f));
 41 }, description);
 42}
 43
 44// Root bounds for a root with an overflow clip as defined by:
 45// http://wicg.github.io/IntersectionObserver/#intersectionobserver-root-intersection-rectangle
 46function contentBounds(root) {
 47 var left = root.offsetLeft + root.clientLeft;
 48 var right = left + root.clientWidth;
 49 var top = root.offsetTop + root.clientTop;
 50 var bottom = top + root.clientHeight;
 51 return [left, right, top, bottom];
 52}
 53
 54// Root bounds for a root without an overflow clip as defined by:
 55// http://wicg.github.io/IntersectionObserver/#intersectionobserver-root-intersection-rectangle
 56function borderBoxBounds(root) {
 57 var left = root.offsetLeft;
 58 var right = left + root.offsetWidth;
 59 var top = root.offsetTop;
 60 var bottom = top + root.offsetHeight;
 61 return [left, right, top, bottom];
 62}
 63
 64function clientBounds(element) {
 65 var rect = element.getBoundingClientRect();
 66 return [rect.left, rect.right, rect.top, rect.bottom];
 67}
 68
 69function rectArea(rect) {
 70 return (rect.left - rect.right) * (rect.bottom - rect.top);
 71}
 72
 73function checkRect(actual, expected, description, all) {
 74 if (!expected.length)
 75 return;
 76 assert_equals(actual.left | 0, expected[0] | 0, description + '.left');
 77 assert_equals(actual.right | 0, expected[1] | 0, description + '.right');
 78 assert_equals(actual.top | 0, expected[2] | 0, description + '.top');
 79 assert_equals(actual.bottom | 0, expected[3] | 0, description + '.bottom');
 80}
 81
 82function checkLastEntry(entries, i, expected) {
 83 assert_equals(entries.length, i + 1, 'entries.length');
 84 if (expected) {
 85 checkRect(
 86 entries[i].boundingClientRect, expected.slice(0, 4),
 87 'entries[' + i + '].boundingClientRect', entries[i]);
 88 checkRect(
 89 entries[i].intersectionRect, expected.slice(4, 8),
 90 'entries[' + i + '].intersectionRect', entries[i]);
 91 checkRect(
 92 entries[i].rootBounds, expected.slice(8, 12),
 93 'entries[' + i + '].rootBounds', entries[i]);
 94 if (expected.length > 12) {
 95 assert_equals(
 96 entries[i].isIntersecting, expected[12],
 97 'entries[' + i + '].isIntersecting');
 98 }
 99 }
 100}
 101
 102function checkJsonEntry(actual, expected) {
 103 checkRect(
 104 actual.boundingClientRect, expected.boundingClientRect,
 105 'entry.boundingClientRect');
 106 checkRect(
 107 actual.intersectionRect, expected.intersectionRect,
 108 'entry.intersectionRect');
 109 if (actual.rootBounds == 'null')
 110 assert_equals(expected.rootBounds, 'null', 'rootBounds is null');
 111 else
 112 checkRect(actual.rootBounds, expected.rootBounds, 'entry.rootBounds');
 113 assert_equals(actual.target, expected.target);
 114}
 115
 116function checkJsonEntries(actual, expected, description) {
 117 test(function() {
 118 assert_equals(actual.length, expected.length);
 119 for (var i = 0; i < actual.length; i++)
 120 checkJsonEntry(actual[i], expected[i]);
 121 }, description);
 122}
 123
 124function checkIsIntersecting(entries, i, expected) {
 125 assert_equals(entries[i].isIntersecting, expected,
 126 'entries[' + i + '].target.isIntersecting equals ' + expected);
 127}

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/resources/observer-in-iframe-subframe.html

 1<!DOCTYPE html>
 2<script src="/resources/testharness.js"></script>
 3<script src="/resources/testharnessreport.js"></script>
 4<script src="./intersection-observer-test-utils.js"></script>
 5
 6<style>
 7#root {
 8 width: 200px;
 9 height: 200px;
 10}
 11#scroller {
 12 width: 160px;
 13 height: 200px;
 14 overflow-y: scroll;
 15}
 16#target {
 17 width: 100px;
 18 height: 100px;
 19 background-color: green;
 20}
 21.spacer {
 22 height: 300px;
 23}
 24</style>
 25
 26<div id="root">
 27 <div id="scroller">
 28 <div class="spacer"></div>
 29 <div id="target"></div>
 30 <div class="spacer"></div>
 31 </div>
 32</div>
 33
 34<script>
 35setup({message_events: [], output_document: window.parent.document});
 36
 37var entries = [];
 38var root, scroller, target;
 39
 40runTestCycle(function() {
 41 root = document.getElementById("root");
 42 assert_true(!!root, "Root element exists.");
 43 scroller = document.getElementById("scroller");
 44 assert_true(!!scroller, "Scroller element exists.");
 45 target = document.getElementById("target");
 46 assert_true(!!target, "Target element 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(step1, "First rAF.");
 54}, "IntersectionObserver in iframe with explicit root.");
 55
 56function step1() {
 57 scroller.scrollTop = 250;
 58 runTestCycle(step2, "scroller.scrollTop = 250");
 59 checkLastEntry(entries, 0, [8, 108, 308, 408, 0, 0, 0, 0, 8, 208, 8, 208, false]);
 60}
 61
 62function step2() {
 63 checkLastEntry(entries, 1, [8, 108, 58, 158, 8, 108, 58, 158, 8, 208, 8, 208, true]);
 64}
 65</script>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/resources/timestamp-subframe.html

 1<!DOCTYPE html>
 2<style>
 3#target {
 4 width: 100px;
 5 height: 100px;
 6 background-color: green;
 7}
 8.spacer {
 9 width: height: 100px
 10}
 11</style>
 12
 13<div class="spacer"></div>
 14<div id="target"></div>
 15<div class="spacer"></div>
 16
 17<script>
 18document.createObserverCallback = function(entries) {
 19 return function(newEntries) {
 20 for (var i in newEntries) {
 21 entries.push(newEntries[i]);
 22 }
 23 };
 24}
 25document.createObserver = function(callback) {
 26 return new IntersectionObserver(callback, {});
 27};
 28</script>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/resources/w3c-import.log

 1The tests in this directory were imported from the W3C repository.
 2Do NOT modify these tests directly in WebKit.
 3Instead, create a pull request on the WPT github:
 4 https://github.com/web-platform-tests/wpt
 5
 6Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
 7
 8Do NOT modify or remove this file.
 9
 10------------------------------------------------------------------------
 11Properties requiring vendor prefixes:
 12None
 13Property values requiring vendor prefixes:
 14None
 15------------------------------------------------------------------------
 16List of files:
 17/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/resources/cross-origin-subframe.html
 18/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/resources/iframe-no-root-subframe.html
 19/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/resources/intersection-observer-test-utils.js
 20/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/resources/observer-in-iframe-subframe.html
 21/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/resources/timestamp-subframe.html

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/root-margin-expected.txt

 1
 2
 3PASS Root margin tests
 4FAIL First rAF. assert_equals: entries.length expected 1 but got 0
 5FAIL document.scrollingElement.scrollLeft = 100 assert_equals: entries.length expected 2 but got 0
 6FAIL document.scrollingElement.scrollTop = document.documentElement.clientHeight + 200 assert_equals: entries.length expected 2 but got 0
 7FAIL document.scrollingElement.scrollTop = document.documentElement.clientHeight + 300 assert_equals: entries.length expected 3 but got 0
 8

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/root-margin.html

 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>
 7pre, #log {
 8 position: absolute;
 9 top: 0;
 10 left: 200px;
 11}
 12#target {
 13 display: inline-block;
 14 width: 100px;
 15 height: 100px;
 16 background-color: green;
 17}
 18.vertical-spacer {
 19 height: calc(100vh + 100px);
 20}
 21.horizontal-spacer {
 22 display: inline-block;
 23 width: 120vw;
 24}
 25</style>
 26
 27<div class="vertical-spacer"></div>
 28<div style="white-space:nowrap;">
 29 <div class="horizontal-spacer"></div>
 30 <div id="target"></div>
 31 <div class="horizontal-spacer"></div>
 32</div>
 33<div class="vertical-spacer"></div>
 34
 35<script>
 36var vw = document.documentElement.clientWidth;
 37var vh = document.documentElement.clientHeight;
 38
 39var entries = [];
 40var target;
 41
 42runTestCycle(function() {
 43 target = document.getElementById("target");
 44 assert_true(!!target, "Target exists");
 45 var observer = new IntersectionObserver(function(changes) {
 46 entries = entries.concat(changes)
 47 }, { rootMargin: "10px 20% 40% 30px" });
 48 observer.observe(target);
 49 entries = entries.concat(observer.takeRecords());
 50 assert_equals(entries.length, 0, "No initial notifications.");
 51 runTestCycle(step0, "First rAF.");
 52}, "Root margin tests");
 53
 54function step0() {
 55 var targetBounds = clientBounds(target);
 56 document.scrollingElement.scrollLeft = 100;
 57 runTestCycle(step1, "document.scrollingElement.scrollLeft = 100");
 58 checkLastEntry(entries, 0, targetBounds.concat(0, 0, 0, 0, -30, vw * 1.2, -10, vh * 1.4, false));
 59}
 60
 61function step1() {
 62 var targetBounds = clientBounds(target);
 63 var sw = window.innerWidth - document.documentElement.clientWidth;
 64 var sh = window.innerHeight - document.documentElement.clientHeight;
 65 document.scrollingElement.scrollTop = vh + 200;
 66 runTestCycle(step2, "document.scrollingElement.scrollTop = document.documentElement.clientHeight + 200");
 67 checkLastEntry(entries, 1, targetBounds.concat(
 68 targetBounds[0], Math.min(targetBounds[1], vw * 1.2), vh + 108 + sh, Math.min(vh + 208 + sw, vh * 1.4),
 69 -30, vw * 1.2, -10, vh * 1.4,
 70 true
 71 ));
 72}
 73
 74function step2() {
 75 document.scrollingElement.scrollTop = vh + 300;
 76 runTestCycle(step3, "document.scrollingElement.scrollTop = document.documentElement.clientHeight + 300");
 77 checkLastEntry(entries, 1);
 78}
 79
 80function step3() {
 81 var targetBounds = clientBounds(target);
 82 document.scrollingElement.scrollLeft = 0;
 83 document.scrollingElement.scrollTop = 0;
 84 checkLastEntry(entries, 2, targetBounds.concat(0, 0, 0, 0, -30, vw * 1.2, -10, vh * 1.4, false));
 85}
 86</script>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/same-document-no-root-expected.txt

 1
 2PASS IntersectionObserver in a single document using the implicit root.
 3FAIL First rAF. assert_equals: entries.length expected 1 but got 0
 4FAIL document.scrollingElement.scrollTop = 300 assert_equals: entries.length expected 2 but got 0
 5FAIL document.scrollingElement.scrollTop = 100 assert_equals: entries.length expected 3 but got 0
 6

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/same-document-no-root.html

 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>
 7pre, #log {
 8 position: absolute;
 9 top: 0;
 10 left: 200px;
 11}
 12.spacer {
 13 height: calc(100vh + 100px);
 14}
 15#target {
 16 width: 100px;
 17 height: 100px;
 18 background-color: green;
 19}
 20</style>
 21
 22<div class="spacer"></div>
 23<div id="target"></div>
 24<div class="spacer"></div>
 25
 26<script>
 27var vw = document.documentElement.clientWidth;
 28var vh = document.documentElement.clientHeight;
 29
 30var entries = [];
 31var target;
 32
 33runTestCycle(function() {
 34 target = document.getElementById("target");
 35 assert_true(!!target, "target exists");
 36 var observer = new IntersectionObserver(function(changes) {
 37 entries = entries.concat(changes)
 38 });
 39 observer.observe(target);
 40 entries = entries.concat(observer.takeRecords());
 41 assert_equals(entries.length, 0, "No initial notifications.");
 42 runTestCycle(step0, "First rAF.");
 43}, "IntersectionObserver in a single document using the implicit root.");
 44
 45function step0() {
 46 document.scrollingElement.scrollTop = 300;
 47 runTestCycle(step1, "document.scrollingElement.scrollTop = 300");
 48 checkLastEntry(entries, 0, [8, 108, vh + 108, vh + 208, 0, 0, 0, 0, 0, vw, 0, vh, false]);
 49}
 50
 51function step1() {
 52 document.scrollingElement.scrollTop = 100;
 53 runTestCycle(step2, "document.scrollingElement.scrollTop = 100");
 54 checkLastEntry(entries, 1, [8, 108, vh - 192, vh - 92, 8, 108, vh - 192, vh - 92, 0, vw, 0, vh, true]);
 55}
 56
 57function step2() {
 58 document.scrollingElement.scrollTop = 0;
 59 checkLastEntry(entries, 2, [8, 108, vh + 8, vh + 108, 0, 0, 0, 0, 0, vw, 0, vh, false]);
 60}
 61</script>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/same-document-root-expected.txt

 1
 2PASS IntersectionObserver in a single document with explicit root.
 3FAIL First rAF assert_equals: entries.length expected 1 but got 0
 4FAIL document.scrollingElement.scrollTop = window.innerHeight. assert_equals: No notifications after scrolling frame. expected 1 but got 0
 5FAIL root.scrollTop = 150 with root scrolled into view. assert_equals: entries.length expected 2 but got 0
 6FAIL document.scrollingElement.scrollTop = 0. assert_equals: entries.length expected 2 but got 0
 7FAIL root.scrollTop = 0 assert_equals: entries.length expected 3 but got 0
 8FAIL root.scrollTop = 150 with root scrolled out of view. assert_equals: entries.length expected 4 but got 0
 9

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/same-document-root.html

 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>
 7pre, #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>
 36var vw = document.documentElement.clientWidth;
 37var vh = document.documentElement.clientHeight;
 38
 39var entries = [];
 40var root, target;
 41
 42runTestCycle(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
 56function 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
 62function 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
 68function 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
 74function step3() {
 75 root.scrollTop = 0;
 76 runTestCycle(step4, "root.scrollTop = 0");
 77 checkLastEntry(entries, 1);
 78}
 79
 80function 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.
 87function 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>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/same-document-zero-size-target-expected.txt

 1
 2PASS Observing a zero-area target.
 3FAIL First rAF assert_equals: entries.length expected 1 but got 0
 4FAIL document.scrollingElement.scrollTop = 300 assert_equals: entries.length expected 2 but got 0
 5FAIL document.scrollingElement.scrollTop = 100 assert_equals: entries.length expected 3 but got 0
 6

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/same-document-zero-size-target.html

 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>
 7pre, #log {
 8 position: absolute;
 9 top: 0;
 10 left: 200px;
 11}
 12.spacer {
 13 height: calc(100vh + 100px);
 14}
 15#target {
 16 width: 0px;
 17 height: 0px;
 18 background-color: green;
 19}
 20</style>
 21
 22<div class="spacer"></div>
 23<div id="target"></div>
 24<div class="spacer"></div>
 25
 26<script>
 27var vw = document.documentElement.clientWidth;
 28var vh = document.documentElement.clientHeight;
 29
 30var entries = [];
 31var target;
 32
 33runTestCycle(function() {
 34 target = document.getElementById("target");
 35 assert_true(!!target, "Target exists");
 36 var observer = new IntersectionObserver(function(changes) {
 37 entries = entries.concat(changes)
 38 });
 39 observer.observe(target);
 40 entries = entries.concat(observer.takeRecords());
 41 assert_equals(entries.length, 0, "No initial notifications.");
 42 runTestCycle(step0, "First rAF");
 43}, "Observing a zero-area target.");
 44
 45function step0() {
 46 document.scrollingElement.scrollTop = 300;
 47 runTestCycle(step1, "document.scrollingElement.scrollTop = 300");
 48 checkLastEntry(entries, 0, [8, 8, vh + 108, vh + 108, 0, 0, 0, 0, 0, vw, 0, vh, false]);
 49}
 50
 51function step1() {
 52 document.scrollingElement.scrollTop = 100;
 53 runTestCycle(step2, "document.scrollingElement.scrollTop = 100");
 54 checkLastEntry(entries, 1, [8, 8, vh - 192, vh - 192, 8, 8, vh - 192, vh - 192, 0, vw, 0, vh, true]);
 55}
 56
 57function step2() {
 58 document.scrollingElement.scrollTop = 0;
 59 checkLastEntry(entries, 2, [8, 8, vh + 8, vh + 8, 0, 0, 0, 0, 0, vw, 0, vh, false]);
 60}
 61</script>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/shadow-content-expected.txt

 1
 2PASS Observing a target inside shadow DOM.
 3FAIL First rAF after creating shadow DOM. assert_equals: entries.length expected 1 but got 0
 4

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/shadow-content.html

 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>
 7pre, #log {
 8 position: absolute;
 9 top: 0;
 10 left: 200px;
 11}
 12</style>
 13
 14<div id="host"></div>
 15
 16<script>
 17var vw = document.documentElement.clientWidth;
 18var vh = document.documentElement.clientHeight;
 19
 20var entries = [];
 21var target;
 22
 23runTestCycle(function() {
 24 var shadowHost = document.getElementById("host");
 25 assert_true(!!shadowHost, "Host exists");
 26 var shadowRoot = shadowHost.attachShadow({ mode: "open" });
 27 assert_true(!!shadowRoot, "Shadow root exists");
 28 shadowRoot.innerHTML = "<div id='target' style='width: 100px; height: 100px; background-color: green;'></div>";
 29 target = shadowRoot.getElementById("target");
 30 assert_true(!!target, "target exists");
 31
 32 var observer = new IntersectionObserver(function(changes) {
 33 entries = entries.concat(changes)
 34 });
 35 observer.observe(target);
 36 entries = entries.concat(observer.takeRecords());
 37 assert_equals(entries.length, 0, "No initial notifications.");
 38 runTestCycle(step0, "First rAF after creating shadow DOM.");
 39}, "Observing a target inside shadow DOM.");
 40
 41function step0() {
 42 checkLastEntry(entries, 0, [8, 108, 8, 108, 8, 108, 8, 108, 0, vw, 0, vh, true]);
 43}
 44</script>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/text-target-expected.txt

 1
 2
 3PASS IntersectionObserver observing a br element.
 4FAIL First rAF. assert_equals: entries.length expected 1 but got 0
 5FAIL document.scrollingElement.scrollTop = 300 assert_equals: entries.length expected 2 but got 0
 6FAIL document.scrollingElement.scrollTop = 100 assert_equals: entries.length expected 3 but got 0
 7

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/text-target.html

 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>
 7pre, #log {
 8 position: absolute;
 9 top: 0;
 10 left: 200px;
 11}
 12.spacer {
 13 height: calc(100vh + 100px);
 14}
 15</style>
 16
 17<div class="spacer"></div>
 18<br id="target">
 19<div class="spacer"></div>
 20
 21<script>
 22var vw = document.documentElement.clientWidth;
 23var vh = document.documentElement.clientHeight;
 24
 25var entries = [];
 26var target;
 27var tw, th;
 28
 29runTestCycle(function() {
 30 target = document.getElementById("target");
 31 let target_rect = target.getBoundingClientRect();
 32 tw = target_rect.width;
 33 th = target_rect.height;
 34 assert_true(!!target, "target exists");
 35 var observer = new IntersectionObserver(function(changes) {
 36 entries = entries.concat(changes)
 37 });
 38 observer.observe(target);
 39 entries = entries.concat(observer.takeRecords());
 40 assert_equals(entries.length, 0, "No initial notifications.");
 41 runTestCycle(step0, "First rAF.");
 42}, "IntersectionObserver observing a br element.");
 43
 44function step0() {
 45 document.scrollingElement.scrollTop = 300;
 46 runTestCycle(step1, "document.scrollingElement.scrollTop = 300");
 47 // The numbers in brackets are target client rect; intersection rect;
 48 // and root bounds.
 49 checkLastEntry(entries, 0, [8, 8 + tw, vh + 108, vh + 108 + th, 0, 0, 0, 0, 0, vw, 0, vh, false]);
 50}
 51
 52function step1() {
 53 document.scrollingElement.scrollTop = 100;
 54 runTestCycle(step2, "document.scrollingElement.scrollTop = 100");
 55 checkLastEntry(entries, 1, [8, 8 + tw, vh - 192, vh - 192 + th, 8, 8 + tw, vh - 192, vh - 192 + th, 0, vw, 0, vh, true]);
 56}
 57
 58function step2() {
 59 document.scrollingElement.scrollTop = 0;
 60 checkLastEntry(entries, 2, [8, 8 + tw, vh + 8, vh + 8 + th, 0, 0, 0, 0, 0, vw, 0, vh, false]);
 61}
 62</script>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/timestamp-expected.txt

 1
 2
 3PASS Check that timestamps correspond to the to execution context that created the observer.
 4FAIL First rAF after iframe is loaded. assert_equals: One notification to top window observer. expected 1 but got 0
 5FAIL Generate notifications. undefined is not an object (evaluating 'topWindowEntries[1].time')
 6

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/timestamp.html

 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>
 7pre, #log {
 8 position: absolute;
 9 top: 0;
 10 left: 200px;
 11}
 12.spacer {
 13 height: calc(100vh + 100px);
 14}
 15
 16</style>
 17<div id="leading-space" class="spacer"></div>
 18<div id="trailing-space" class="spacer"></div>
 19
 20<script>
 21// Pick this number to be comfortably greater than the length of two frames at 60Hz.
 22var timeSkew = 40;
 23
 24var topWindowEntries = [];
 25var iframeWindowEntries = [];
 26var targetIframe;
 27var topWindowTimeBeforeNotification;
 28var iframeWindowTimeBeforeNotification;
 29
 30async_test(function(t) {
 31 t.step_timeout(function() {
 32 targetIframe = document.createElement("iframe");
 33 assert_true(!!targetIframe, "iframe exists");
 34 targetIframe.src = "resources/timestamp-subframe.html";
 35 var trailingSpace = document.getElementById("trailing-space");
 36 assert_true(!!trailingSpace, "trailing-space exists");
 37 trailingSpace.parentNode.insertBefore(targetIframe, trailingSpace);
 38 targetIframe.onload = function() {
 39 var target = targetIframe.contentDocument.getElementById("target");
 40 var iframeScroller = targetIframe.contentDocument.scrollingElement;
 41
 42 // Observer created here, callback created in iframe context. Timestamps should be
 43 // from this window.
 44 var observer = new IntersectionObserver(
 45 targetIframe.contentDocument.createObserverCallback(topWindowEntries), {});
 46 assert_true(!!observer, "Observer exists");
 47 observer.observe(target);
 48
 49 // Callback created here, observer created in iframe. Timestamps should be
 50 // from iframe window.
 51 observer = targetIframe.contentDocument.createObserver(function(newEntries) {
 52 iframeWindowEntries = iframeWindowEntries.concat(newEntries);
 53 });
 54 observer.observe(target);
 55 runTestCycle(step1, "First rAF after iframe is loaded.");
 56 t.done();
 57 };
 58 }, timeSkew);
 59}, "Check that timestamps correspond to the to execution context that created the observer.");
 60
 61function step1() {
 62 document.scrollingElement.scrollTop = 200;
 63 targetIframe.contentDocument.scrollingElement.scrollTop = 250;
 64 topWindowTimeBeforeNotification = performance.now();
 65 iframeWindowTimeBeforeNotification = targetIframe.contentWindow.performance.now();
 66 runTestCycle(step2, "Generate notifications.");
 67 assert_equals(topWindowEntries.length, 1, "One notification to top window observer.");
 68 assert_equals(iframeWindowEntries.length, 1, "One notification to iframe observer.");
 69}
 70
 71function step2() {
 72 document.scrollingElement.scrollTop = 0;
 73 var topWindowTimeAfterNotification = performance.now();
 74 var iframeWindowTimeAfterNotification = targetIframe.contentWindow.performance.now();
 75
 76 assert_approx_equals(
 77 topWindowEntries[1].time - topWindowTimeBeforeNotification,
 78 iframeWindowEntries[1].time - iframeWindowTimeBeforeNotification,
 79 // Since all intersections are computed in a tight loop between 2 frames,
 80 // an epsilon of 16ms (the length of one frame at 60Hz) turned out to be
 81 // reliable, even at slow frame rates.
 82 16,
 83 "Notification times are relative to the expected time origins");
 84
 85 assert_equals(topWindowEntries.length, 2, "Top window observer has two notifications.");
 86 assert_between_inclusive(
 87 topWindowEntries[1].time,
 88 topWindowTimeBeforeNotification,
 89 topWindowTimeAfterNotification,
 90 "Notification to top window observer is within the expected range.");
 91
 92 assert_equals(iframeWindowEntries.length, 2, "Iframe observer has two notifications.");
 93 assert_between_inclusive(
 94 iframeWindowEntries[1].time,
 95 iframeWindowTimeBeforeNotification,
 96 iframeWindowTimeAfterNotification,
 97 "Notification to iframe observer is within the expected range.");
 98}
 99</script>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/unclipped-root-expected.txt

 1
 2PASS Test that border bounding box is used to calculate intersection with a non-scrolling root.
 3FAIL First rAF. assert_equals: entries.length expected 1 but got 0
 4FAIL target.style.transform = 'translateY(195px)' assert_equals: entries.length expected 2 but got 0
 5

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/unclipped-root.html

 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>
 7pre, #log {
 8 position: absolute;
 9 top: 0;
 10 left: 200px;
 11}
 12#root {
 13 overflow: visible;
 14 height: 200px;
 15 width: 160px;
 16 border: 7px solid black;
 17}
 18#target {
 19 width: 100px;
 20 height: 100px;
 21 background-color: green;
 22}
 23</style>
 24
 25<div id="root">
 26 <div id="target" style="transform: translateY(300px)"></div>
 27</div>
 28
 29<script>
 30var entries = [];
 31var target;
 32
 33runTestCycle(function() {
 34 target = document.getElementById("target");
 35 assert_true(!!target, "target exists");
 36 var root = document.getElementById("root");
 37 assert_true(!!root, "root exists");
 38 var observer = new IntersectionObserver(function(changes) {
 39 entries = entries.concat(changes)
 40 }, {root: root});
 41 observer.observe(target);
 42 entries = entries.concat(observer.takeRecords());
 43 assert_equals(entries.length, 0, "No initial notifications.");
 44 runTestCycle(step0, "First rAF.");
 45}, "Test that border bounding box is used to calculate intersection with a non-scrolling root.");
 46
 47function step0() {
 48 target.style.transform = "translateY(195px)";
 49 runTestCycle(step1, "target.style.transform = 'translateY(195px)'");
 50 checkLastEntry(entries, 0, [15, 115, 315, 415, 0, 0, 0, 0, 8, 182, 8, 222, false]);
 51}
 52
 53function step1() {
 54 target.style.transform = "";
 55 checkLastEntry(entries, 1, [15, 115, 210, 310, 15, 115, 210, 222, 8, 182, 8, 222, true]);
 56}
 57</script>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/w3c-import.log

 1The tests in this directory were imported from the W3C repository.
 2Do NOT modify these tests directly in WebKit.
 3Instead, create a pull request on the WPT github:
 4 https://github.com/web-platform-tests/wpt
 5
 6Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
 7
 8Do NOT modify or remove this file.
 9
 10------------------------------------------------------------------------
 11Properties requiring vendor prefixes:
 12None
 13Property values requiring vendor prefixes:
 14None
 15------------------------------------------------------------------------
 16List of files:
 17/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/META.yml
 18/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/bounding-box.html
 19/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/client-rect.html
 20/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/containing-block.html
 21/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/cross-origin-iframe.html
 22/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/disconnect.html
 23/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/display-none.html
 24/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/edge-inclusive-intersection.html
 25/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/idlharness.window.js
 26/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/iframe-no-root.html
 27/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/inline-client-rect.html
 28/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/isIntersecting-change-events.html
 29/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/multiple-targets.html
 30/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/multiple-thresholds.html
 31/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/observer-attributes.html
 32/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/observer-exceptions.html
 33/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/observer-in-iframe.html
 34/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/observer-without-js-reference.html
 35/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/remove-element.html
 36/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/root-margin.html
 37/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/same-document-no-root.html
 38/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/same-document-root.html
 39/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/same-document-zero-size-target.html
 40/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/shadow-content.html
 41/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/text-target.html
 42/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/timestamp.html
 43/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/unclipped-root.html
 44/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/zero-area-element-hidden.html
 45/LayoutTests/imported/w3c/web-platform-tests/intersection-observer/zero-area-element-visible.html

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/zero-area-element-hidden-expected.txt

 1
 2PASS A zero-area hidden target should not be intersecting.
 3FAIL First rAF. assert_equals: entries.length expected 1 but got 0
 4

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/zero-area-element-hidden.html

 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>
 7pre, #log {
 8 position: absolute;
 9 top: 0;
 10 left: 200px;
 11}
 12#target {
 13 width: 0px;
 14 height: 0px;
 15 position: fixed;
 16 top: -1000px;
 17}
 18</style>
 19
 20<div id='target'></div>
 21
 22<script>
 23var vw = document.documentElement.clientWidth;
 24var vh = document.documentElement.clientHeight;
 25
 26var entries = [];
 27
 28runTestCycle(function() {
 29 var target = document.getElementById('target');
 30 assert_true(!!target, "target exists");
 31 var observer = new IntersectionObserver(function(changes) {
 32 entries = entries.concat(changes)
 33 });
 34 observer.observe(target);
 35 entries = entries.concat(observer.takeRecords());
 36 assert_equals(entries.length, 0, "No initial notifications.");
 37 runTestCycle(step0, "First rAF.");
 38}, "A zero-area hidden target should not be intersecting.");
 39
 40function step0() {
 41 checkLastEntry(entries, 0, [8, 8, -1000, -1000, 0, 0, 0, 0, 0, vw, 0, vh, false]);
 42}
 43</script>

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/zero-area-element-visible-expected.txt

 1
 2PASS Ensure that a zero-area target intersecting root generates a notification with intersectionRatio == 1
 3FAIL First rAF should generate a notification. assert_equals: One notification. expected 1 but got 0
 4

LayoutTests/imported/w3c/web-platform-tests/intersection-observer/zero-area-element-visible.html

 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>
 7pre, #log {
 8 position: absolute;
 9 top: 0;
 10 left: 200px;
 11}
 12#target {
 13 width: 0px;
 14 height: 0px;
 15}
 16</style>
 17
 18<div id='target'></div>
 19
 20<script>
 21var entries = [];
 22
 23runTestCycle(function() {
 24 var target = document.getElementById('target');
 25 assert_true(!!target, "target exists");
 26 var observer = new IntersectionObserver(function(changes) {
 27 entries = entries.concat(changes)
 28 });
 29 observer.observe(target);
 30 entries = entries.concat(observer.takeRecords());
 31 assert_equals(entries.length, 0, "No initial notifications.");
 32 runTestCycle(step0, "First rAF should generate a notification.");
 33}, "Ensure that a zero-area target intersecting root generates a notification with intersectionRatio == 1");
 34
 35function step0() {
 36 assert_equals(entries.length, 1, "One notification.");
 37 assert_equals(entries[0].intersectionRatio, 1, "intersectionRatio == 1");
 38}
 39</script>