Index: third_party/WebKit/LayoutTests/intersection-observer/remove-element.html |
diff --git a/third_party/WebKit/LayoutTests/intersection-observer/remove-element.html b/third_party/WebKit/LayoutTests/intersection-observer/remove-element.html |
index b53b70665eec65df1694b9a0f0816a7fbbed3429..dcb3ff89a066842590a53bf713431bd9f99af991 100644 |
--- a/third_party/WebKit/LayoutTests/intersection-observer/remove-element.html |
+++ b/third_party/WebKit/LayoutTests/intersection-observer/remove-element.html |
@@ -1,97 +1,85 @@ |
<!DOCTYPE html> |
-<script src="../resources/js-test.js"></script> |
-<script src="../resources/intersection-observer-helper-functions.js"></script> |
-<div id="root" style="display: inline-block; overflow-y: scroll; height: 200px; border: 3px solid black"> |
- <div style="width:100px; height: 300px;"></div> |
- <div id="target" style="background-color: green; width:100px; height:100px"></div> |
- <div id="afterTarget" style="width:100px; height: 300px;"></div> |
+<script src="../resources/testharness.js"></script> |
+<script src="../resources/testharnessreport.js"></script> |
+<script src="./resources/intersection-observer-test-utils.js"></script> |
+ |
+<style> |
+pre, #log { |
+ position: absolute; |
+ top: 0; |
+ left: 200px; |
+} |
+#root { |
+ display: inline-block; |
+ overflow-y: scroll; |
+ height: 200px; |
+ border: 3px solid black; |
+} |
+#target { |
+ width: 100px; |
+ height: 100px; |
+ background-color: green; |
+} |
+.spacer { |
+ height: 300px; |
+} |
+</style> |
+ |
+<div id="root"> |
+ <div id="leading-space" class="spacer"></div> |
+ <div id="target"></div> |
+ <div id="trailing-space" class="spacer"</div> |
</div> |
<script> |
-description("Test that notifications are sent correctly when root and/or target are removed from the DOM tree."); |
-var target = document.getElementById("target"); |
-var afterTarget = document.getElementById("afterTarget"); |
-var root = document.getElementById("root"); |
var entries = []; |
-var observer = new IntersectionObserver( |
- changes => { entries = entries.concat(changes) }, |
- { root: document.getElementById("root") } |
-); |
+var root, target, trailingSpace; |
-onload = function() { |
+runTestCycle(function() { |
+ assert_equals(window.innerWidth, 800, "Window must be 800 pixels wide."); |
+ assert_equals(window.innerHeight, 600, "Window must be 600 pixels high."); |
+ |
+ target = document.getElementById("target"); |
+ assert_true(!!target, "Target exists"); |
+ trailingSpace = document.getElementById("trailing-space"); |
+ assert_true(!!trailingSpace, "TrailingSpace exists"); |
+ root = document.getElementById("root"); |
+ assert_true(!!root, "Root exists"); |
+ var observer = new IntersectionObserver(function(changes) { |
+ entries = entries.concat(changes) |
+ }, {root: root}); |
observer.observe(target); |
entries = entries.concat(observer.takeRecords()); |
- shouldBeEqualToNumber("entries.length", 0); |
+ assert_equals(entries.length, 0, "No initial notifications."); |
+ runTestCycle(step0, "First rAF"); |
+}, "Verify that not-intersecting notifications are sent when a target is removed from the DOM tree."); |
+ |
+function step0() { |
root.scrollTop = 150; |
- waitForNotification(step1); |
+ runTestCycle(step1, "root.scrollTop = 150"); |
+ assert_equals(entries.length, 0, "No notifications after first rAF."); |
} |
function step1() { |
- shouldBeEqualToNumber("entries.length", 1); |
- if (entries.length > 0) { |
- shouldBeEqualToNumber("entries[0].boundingClientRect.left", 11); |
- shouldBeEqualToNumber("entries[0].boundingClientRect.right", 111); |
- shouldBeEqualToNumber("entries[0].boundingClientRect.top", 161); |
- shouldBeEqualToNumber("entries[0].boundingClientRect.bottom", 261); |
- shouldBeEqualToNumber("entries[0].intersectionRect.left", 11); |
- shouldBeEqualToNumber("entries[0].intersectionRect.right", 111); |
- shouldBeEqualToNumber("entries[0].intersectionRect.top", 161); |
- shouldBeEqualToNumber("entries[0].intersectionRect.bottom", 211); |
- shouldBeEqualToNumber("entries[0].rootBounds.left", 11); |
- shouldBeEqualToNumber("entries[0].rootBounds.right", 111); |
- shouldBeEqualToNumber("entries[0].rootBounds.top", 11); |
- shouldBeEqualToNumber("entries[0].rootBounds.bottom", 211); |
- shouldEvaluateToSameObject("entries[0].target", target); |
- } |
root.removeChild(target); |
- waitForNotification(step2); |
+ runTestCycle(step2, "root.removeChild(target)."); |
+ checkLastEntry(entries, 0, [11, 111, 161, 261, 11, 111, 161, 211, 11, 111, 11, 211, target]); |
} |
function step2() { |
- shouldBeEqualToNumber("entries.length", 2); |
- if (entries.length > 1) { |
- shouldBeEqualToNumber("entries[1].boundingClientRect.left", 0); |
- shouldBeEqualToNumber("entries[1].boundingClientRect.right", 0); |
- shouldBeEqualToNumber("entries[1].boundingClientRect.top", 0); |
- shouldBeEqualToNumber("entries[1].boundingClientRect.bottom", 0) |
- shouldBeEqualToNumber("entries[1].intersectionRect.left", 0); |
- shouldBeEqualToNumber("entries[1].intersectionRect.right", 0); |
- shouldBeEqualToNumber("entries[1].intersectionRect.top", 0); |
- shouldBeEqualToNumber("entries[1].intersectionRect.bottom", 0); |
- shouldBeEqualToNumber("entries[1].rootBounds.left", 0); |
- shouldBeEqualToNumber("entries[1].rootBounds.right", 0); |
- shouldBeEqualToNumber("entries[1].rootBounds.top", 0); |
- shouldBeEqualToNumber("entries[1].rootBounds.bottom", 0); |
- shouldEvaluateToSameObject("entries[1].target", target); |
- } |
root.scrollTop = 0; |
- root.insertBefore(target, afterTarget); |
- waitForNotification(step3); |
+ root.insertBefore(target, trailingSpace); |
+ runTestCycle(step3, "root.insertBefore(target, trailingSpace)."); |
+ checkLastEntry(entries, 1, [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, target]); |
} |
function step3() { |
- shouldBeEqualToNumber("entries.length", 2); |
root.scrollTop = 150; |
- waitForNotification(step4); |
+ runTestCycle(step4, "root.scrollTop = 150 after reinserting target."); |
+ checkLastEntry(entries, 1); |
} |
function step4() { |
- shouldBeEqualToNumber("entries.length", 3); |
- if (entries.length > 2) { |
- shouldBeEqualToNumber("entries[2].boundingClientRect.left", 11); |
- shouldBeEqualToNumber("entries[2].boundingClientRect.right", 111); |
- shouldBeEqualToNumber("entries[2].boundingClientRect.top", 161); |
- shouldBeEqualToNumber("entries[2].boundingClientRect.bottom", 261); |
- shouldBeEqualToNumber("entries[2].intersectionRect.left", 11); |
- shouldBeEqualToNumber("entries[2].intersectionRect.right", 111); |
- shouldBeEqualToNumber("entries[2].intersectionRect.top", 161); |
- shouldBeEqualToNumber("entries[2].intersectionRect.bottom", 211); |
- shouldBeEqualToNumber("entries[2].rootBounds.left", 11); |
- shouldBeEqualToNumber("entries[2].rootBounds.right", 111); |
- shouldBeEqualToNumber("entries[2].rootBounds.top", 11); |
- shouldBeEqualToNumber("entries[2].rootBounds.bottom", 211); |
- shouldEvaluateToSameObject("entries[2].target", target); |
- } |
- finishJSTest(); |
+ checkLastEntry(entries, 2, [11, 111, 161, 261, 11, 111, 161, 211, 11, 111, 11, 211, target]); |
} |
</script> |