Chromium Code Reviews Chromium Code Reviews
Issue 2560253004:
IntersectionObserver: convert tests to testharness.js (Closed)
| Index: third_party/WebKit/LayoutTests/intersection-observer/edge-inclusive-intersection.html |
| diff --git a/third_party/WebKit/LayoutTests/intersection-observer/edge-inclusive-intersection.html b/third_party/WebKit/LayoutTests/intersection-observer/edge-inclusive-intersection.html |
| index 10e9f3e55e4302fe3a8708d400b7ef5a9a033bd5..17a73c2ca88771279e4be3d41f4da3b66bb93b48 100644 |
| --- a/third_party/WebKit/LayoutTests/intersection-observer/edge-inclusive-intersection.html |
| +++ b/third_party/WebKit/LayoutTests/intersection-observer/edge-inclusive-intersection.html |
| @@ -1,7 +1,14 @@ |
| <!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> |
| +pre, #log { |
| + position: absolute; |
| + top: 0; |
| + left: 200px; |
| +} |
| #root { |
| width: 200px; |
| height: 200px; |
| @@ -11,79 +18,52 @@ |
| background-color: green; |
| } |
| </style> |
| + |
| <div id="root"> |
| <div id="target" style="width: 100px; height: 100px; transform: translateY(250px)"></div> |
| </div> |
| <script> |
| -description("Verifies that IntersectionObserver detects edge-inclusive intersections."); |
| -var root = document.getElementById('root'); |
| -var target = document.getElementById('target'); |
| var entries = []; |
| -var observer = new IntersectionObserver( |
| - changes => { entries.push(...changes) }, |
| - { root: 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 root = document.getElementById('root'); |
| + assert_true(!!root, "root element exists."); |
| + var target = document.getElementById('target'); |
| + assert_true(!!target, "target element exists."); |
| + var observer = new IntersectionObserver(function(changes) { |
| + entries = entries.concat(changes); |
| + }, { root: root }); |
| observer.observe(target); |
| - entries.push(...observer.takeRecords()); |
| - shouldBeEqualToNumber("entries.length", 0); |
| - waitForNotification(step0); |
| -}; |
| + entries = entries.concat(observer.takeRecords()); |
| + assert_equals(entries.length, 0, "No initial notifications."); |
| + runTestCycle(step0, "No notifications after first rAF."); |
| +}, "IntersectionObserver should detect and report edge-adjacent and zero-area intersections."); |
| function step0() { |
| - shouldBeEqualToNumber("entries.length", 0); |
| - waitForNotification(step1); |
| + runTestCycle(step1, "Set transform=translateY(200px) on target."); |
| + assert_equals(entries.length, 0, "entries.length == 0"); |
|
foolip
2017/01/11 13:42:53
" == 0" is superfluous
szager1
2017/01/23 23:18:03
Done.
|
| target.style.transform = "translateY(200px)"; |
| } |
| function step1() { |
| - shouldBeEqualToNumber("entries.length", 1); |
| - if (entries.length > 0) { |
| - shouldBeEqualToNumber("entries[0].boundingClientRect.left", 8); |
| - shouldBeEqualToNumber("entries[0].boundingClientRect.right", 108); |
| - shouldBeEqualToNumber("entries[0].boundingClientRect.top", 208); |
| - shouldBeEqualToNumber("entries[0].boundingClientRect.bottom", 308); |
| - shouldBeEqualToNumber("entries[0].intersectionRect.left", 8); |
| - shouldBeEqualToNumber("entries[0].intersectionRect.right", 108); |
| - shouldBeEqualToNumber("entries[0].intersectionRect.top", 208); |
| - shouldBeEqualToNumber("entries[0].intersectionRect.bottom", 208); |
| - shouldBeEqualToNumber("entries[0].rootBounds.left", 8); |
| - shouldBeEqualToNumber("entries[0].rootBounds.right", 208); |
| - shouldBeEqualToNumber("entries[0].rootBounds.top", 8); |
| - shouldBeEqualToNumber("entries[0].rootBounds.bottom", 208); |
| - shouldEvaluateToSameObject("entries[0].target", target); |
| - } |
| - waitForNotification(step2); |
| + runTestCycle(step2, "Set transform=translateY(201px) on target."); |
| + checkEntry(entries, 0, [8, 108, 208, 308, 8, 108, 208, 208, 8, 208, 8, 208, target]); |
| target.style.transform = "translateY(201px)"; |
| } |
| function step2() { |
| - shouldBeEqualToNumber("entries.length", 2); |
| - waitForNotification(step3); |
| + runTestCycle(step3, "Set transform=translateY(185px) on target."); |
| + checkEntry(entries, 1); |
| target.style.height = "0px"; |
| target.style.width = "300px"; |
| target.style.transform = "translateY(185px)"; |
| } |
| function step3() { |
| - shouldBeEqualToNumber("entries.length", 3); |
| - if (entries.length > 2) { |
| - shouldBeEqualToNumber("entries[2].boundingClientRect.left", 8); |
| - shouldBeEqualToNumber("entries[2].boundingClientRect.right", 308); |
| - shouldBeEqualToNumber("entries[2].boundingClientRect.top", 193); |
| - shouldBeEqualToNumber("entries[2].boundingClientRect.bottom", 193); |
| - shouldBeEqualToNumber("entries[2].intersectionRect.left", 8); |
| - shouldBeEqualToNumber("entries[2].intersectionRect.right", 208); |
| - shouldBeEqualToNumber("entries[2].intersectionRect.top", 193); |
| - shouldBeEqualToNumber("entries[2].intersectionRect.bottom", 193); |
| - shouldBeEqualToNumber("entries[2].rootBounds.left", 8); |
| - shouldBeEqualToNumber("entries[2].rootBounds.right", 208); |
| - shouldBeEqualToNumber("entries[2].rootBounds.top", 8); |
| - shouldBeEqualToNumber("entries[2].rootBounds.bottom", 208); |
| - shouldEvaluateToSameObject("entries[2].target", target); |
| - } |
| - finishJSTest(); |
| + checkEntry(entries, 2, [8, 308, 193, 193, 8, 208, 193, 193, 8, 208, 8, 208, target]); |
| } |
| </script> |
