Index: third_party/WebKit/LayoutTests/intersection-observer/display-none.html |
diff --git a/third_party/WebKit/LayoutTests/intersection-observer/display-none.html b/third_party/WebKit/LayoutTests/intersection-observer/display-none.html |
index df0541adf055888b7fd9acbbf416401b6d4f6996..28170f620ac846b243eb85fda10323940a52b438 100644 |
--- a/third_party/WebKit/LayoutTests/intersection-observer/display-none.html |
+++ b/third_party/WebKit/LayoutTests/intersection-observer/display-none.html |
@@ -1,12 +1,13 @@ |
<!DOCTYPE html> |
-<script src="../resources/js-test.js"></script> |
-<script src="../resources/intersection-observer-helper-functions.js"></script> |
+<script src="../resources/testharness.js"></script> |
+<script src="../resources/testharnessreport.js"></script> |
+<script src="./resources/intersection-observer-test-utils.js"></script> |
+ |
<style> |
-#root { |
- display: inline-block; |
- overflow-y: scroll; |
- height: 200px; |
- border: 3px solid black; |
+pre, #log { |
+ position: absolute; |
+ top: 0; |
+ left: 200px; |
} |
#target { |
background-color: green; |
@@ -14,103 +15,40 @@ |
height: 100px; |
} |
</style> |
-<div style="width:100%; height:700px;"></div> |
-<div id="root"> |
- <div style="width:100px; height: 300px;"></div> |
- <div id="target"></div> |
- <div style="width:100%;height:700px;"></div> |
-</div> |
-<div style="width:100%;height:700px;"></div> |
+ |
+<div id="target"></div> |
<script> |
-description("Test that setting display:none will send a not-intersecting notification."); |
-var target = document.getElementById("target"); |
-var root = document.getElementById("root"); |
var entries = []; |
-var observer = new IntersectionObserver( |
- changes => { entries = entries.concat(changes) }, |
- { root: document.getElementById("root") } |
-); |
-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."); |
+ |
+ var target = document.getElementById("target"); |
+ var root = document.getElementById("root"); |
+ var observer = new IntersectionObserver(function(changes) { |
+ entries = entries.concat(changes) |
+ }); |
observer.observe(target); |
entries = entries.concat(observer.takeRecords()); |
- shouldBeEqualToNumber("entries.length", 0); |
- waitForNotification(step0); |
-} |
+ assert_equals(entries.length, 0, "No initial notifications."); |
+ runTestCycle(step0, "Intersecting notification after first rAF."); |
+}, "IntersectionObserver should send a not-intersecting notification for a target that gets display:none."); |
function step0() { |
- shouldBeEqualToNumber("entries.length", 0); |
- document.scrollingElement.scrollTop = 600; |
- waitForNotification(step1); |
-} |
- |
-function step1() { |
- shouldBeEqualToNumber("entries.length", 0); |
- root.scrollTop = 150; |
- waitForNotification(step2); |
-} |
- |
-function step2() { |
- 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", 261); |
- shouldBeEqualToNumber("entries[0].boundingClientRect.bottom", 361); |
- shouldBeEqualToNumber("entries[0].intersectionRect.left", 11); |
- shouldBeEqualToNumber("entries[0].intersectionRect.right", 111); |
- shouldBeEqualToNumber("entries[0].intersectionRect.top", 261); |
- shouldBeEqualToNumber("entries[0].intersectionRect.bottom", 311); |
- shouldBeEqualToNumber("entries[0].rootBounds.left", 11); |
- shouldBeEqualToNumber("entries[0].rootBounds.right", 111); |
- shouldBeEqualToNumber("entries[0].rootBounds.top", 111); |
- shouldBeEqualToNumber("entries[0].rootBounds.bottom", 311); |
- shouldEvaluateToSameObject("entries[0].target", target); |
- } |
+ runTestCycle(step1, "Not-intersecting notification after setting display:none on target."); |
+ checkLastEntry(entries, 0, [8, 108, 8, 108, 8, 108, 8, 108, 0, 800, 0, 600, target]); |
target.style.display = "none"; |
- waitForNotification(step3); |
} |
-function step3() { |
- 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); |
- } |
+function step1() { |
+ runTestCycle(step2, "Intersecting notification after removing display:none on target."); |
+ checkLastEntry(entries, 1, [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, target]); |
target.style.display = ""; |
- waitForNotification(step4); |
} |
-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", 261); |
- shouldBeEqualToNumber("entries[2].boundingClientRect.bottom", 361); |
- shouldBeEqualToNumber("entries[2].intersectionRect.left", 11); |
- shouldBeEqualToNumber("entries[2].intersectionRect.right", 111); |
- shouldBeEqualToNumber("entries[2].intersectionRect.top", 261); |
- shouldBeEqualToNumber("entries[2].intersectionRect.bottom", 311); |
- shouldBeEqualToNumber("entries[2].rootBounds.left", 11); |
- shouldBeEqualToNumber("entries[2].rootBounds.right", 111); |
- shouldBeEqualToNumber("entries[2].rootBounds.top", 111); |
- shouldBeEqualToNumber("entries[2].rootBounds.bottom", 311); |
- shouldEvaluateToSameObject("entries[2].target", target); |
- } |
- |
- finishJSTest(); |
+function step2() { |
+ checkLastEntry(entries, 2, [8, 108, 8, 108, 8, 108, 8, 108, 0, 800, 0, 600, target]); |
} |
</script> |