Index: third_party/WebKit/LayoutTests/intersection-observer/root-margin.html |
diff --git a/third_party/WebKit/LayoutTests/intersection-observer/root-margin.html b/third_party/WebKit/LayoutTests/intersection-observer/root-margin.html |
index c11458c3d5fa3316a307a5dfe9c1e8acb574ece7..0c2bc9ffeb1c6bb9c5f86aabda4a30929ccbc783 100644 |
--- a/third_party/WebKit/LayoutTests/intersection-observer/root-margin.html |
+++ b/third_party/WebKit/LayoutTests/intersection-observer/root-margin.html |
@@ -1,87 +1,77 @@ |
<!DOCTYPE html> |
-<script src="../resources/js-test.js"></script> |
-<script src="../resources/intersection-observer-helper-functions.js"></script> |
-<div style="width:100%; height:700px;"></div> |
-<div style="white-space: nowrap;"> |
- <div style="display: inline-block; width: 1000px; height: 100px"></div> |
- <div id="target" style="display: inline-block; background-color: green; width:100px; height:100px"></div> |
- <div style="display: inline-block; width: 1000px; height: 100px"></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; |
+} |
+#target { |
+ display: inline-block; |
+ width: 100px; |
+ height: 100px; |
+ background-color: green; |
+} |
+.vertical-spacer { |
+ height: 700px; |
+} |
+.horizontal-spacer { |
+ display: inline-block; |
+ width: 1000px; |
+} |
+</style> |
+ |
+<div class="vertical-spacer"></div> |
+<div style="white-space:nowrap;"> |
+ <div class="horizontal-spacer"></div> |
+ <div id="target"></div> |
+ <div class="horizontal-spacer"></div> |
</div> |
-<div style="width:100%; height:700px;"></div> |
+<div class="vertical-spacer"></div> |
<script> |
-description("Intersection observer test with root margin and implicit root."); |
-var target = document.getElementById("target"); |
var entries = []; |
-var observer = new IntersectionObserver( |
- changes => { entries = entries.concat(changes) }, |
- { rootMargin: "10px 20% 40% 30px" } |
-); |
+var target; |
-shouldNotThrow("new IntersectionObserver(c => {}, { rootMargin: '1.4px' })"); |
-shouldNotThrow("new IntersectionObserver(c => {}, { rootMargin: '1.4px 2px' })"); |
-shouldNotThrow("new IntersectionObserver(c => {}, { rootMargin: '1.4px 2px 3%' })"); |
+runTestCycle(function() { |
+ assert_equals(window.innerWidth, 800, "Window must be 800 pixels wide."); |
+ assert_equals(window.innerHeight, 600, "Window must be 600 pixels high."); |
-onload = function() { |
+ target = document.getElementById("target"); |
+ assert_true(!!target, "Target exists"); |
+ var observer = new IntersectionObserver(function(changes) { |
+ entries = entries.concat(changes) |
+ }, { rootMargin: "10px 20% 40% 30px" }); |
observer.observe(target); |
entries = entries.concat(observer.takeRecords()); |
- shouldBeEqualToNumber("entries.length", 0); |
- waitForNotification(step0); |
-} |
+ assert_equals(entries.length, 0, "No initial notifications."); |
+ runTestCycle(step0, "First rAF."); |
+}, "Root margin tests"); |
function step0() { |
- shouldBeEqualToNumber("entries.length", 0); |
document.scrollingElement.scrollLeft = 100; |
- waitForNotification(step1); |
+ runTestCycle(step1, "document.scrollingElement.scrollLeft = 100"); |
+ assert_equals(entries.length, 0, "No notifications after first rAF."); |
} |
function step1() { |
- shouldBeEqualToNumber("entries.length", 1); |
- if (entries.length > 0) { |
- shouldBeEqualToNumber("entries.length", 1); |
- shouldBeEqualToNumber("entries[0].boundingClientRect.left", 912); |
- shouldBeEqualToNumber("entries[0].boundingClientRect.right", 1012); |
- shouldBeEqualToNumber("entries[0].boundingClientRect.top", 708); |
- shouldBeEqualToNumber("entries[0].boundingClientRect.bottom", 808); |
- shouldBeEqualToNumber("entries[0].intersectionRect.left", 912); |
- shouldBeEqualToNumber("entries[0].intersectionRect.right", 942); |
- shouldBeEqualToNumber("entries[0].intersectionRect.top", 708); |
- shouldBeEqualToNumber("entries[0].intersectionRect.bottom", 808); |
- shouldBeEqualToNumber("entries[0].rootBounds.left", -30); |
- shouldBeEqualToNumber("entries[0].rootBounds.right", 942); |
- shouldBeEqualToNumber("entries[0].rootBounds.top", -10); |
- shouldBeEqualToNumber("entries[0].rootBounds.bottom", 819); |
- shouldEvaluateToSameObject("entries[0].target", target); |
- } |
document.scrollingElement.scrollTop = 800; |
- waitForNotification(step2); |
+ runTestCycle(step2, "document.scrollingElement.scrollTop = 800"); |
+ checkLastEntry(entries, 0, [912, 1012, 708, 808, 912, 942, 708, 808, -30, 942, -10, 819, target]); |
} |
function step2() { |
- shouldBeEqualToNumber("entries.length", 1); |
document.scrollingElement.scrollTop = 900; |
- waitForNotification(step3); |
+ runTestCycle(step3, "document.scrollingElement.scrollTop = 900"); |
+ checkLastEntry(entries, 0); |
} |
function step3() { |
- shouldBeEqualToNumber("entries.length", 2); |
- if (entries.length > 1) { |
- shouldBeEqualToNumber("entries[1].boundingClientRect.left", 912); |
- shouldBeEqualToNumber("entries[1].boundingClientRect.right", 1012); |
- shouldBeEqualToNumber("entries[1].boundingClientRect.top", -192); |
- shouldBeEqualToNumber("entries[1].boundingClientRect.bottom", -92); |
- 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", -30); |
- shouldBeEqualToNumber("entries[1].rootBounds.right", 942); |
- shouldBeEqualToNumber("entries[1].rootBounds.top", -10); |
- shouldBeEqualToNumber("entries[1].rootBounds.bottom", 819); |
- shouldEvaluateToSameObject("entries[1].target", target); |
- } |
- finishJSTest(); |
document.scrollingElement.scrollLeft = 0; |
document.scrollingElement.scrollTop = 0; |
+ checkLastEntry(entries, 1, [912, 1012, -192, -92, 0, 0, 0, 0, -30, 942, -10, 819, target]); |
} |
</script> |