| <!doctype html><!-- webkit-test-runner [ experimental:ResizeObserverEnabled=true ] --> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <script src="./resources/resizeTestHelper.js"></script> |
| <p>ResizeObserver tests</p> |
| <div id="target1" style="width:100px;height:100px;">t1 |
| <div id="target2" style="width:100px;height:100px;">t2 |
| <iframe id="iframe1" src="./resources/iframe1.html"></iframe> |
| </div> |
| </div> |
| <div id="target3" style="width:100px;height:100px;">t3</div> |
| |
| <div id="log"></div> |
| <script type="text/javascript"> |
| 'use strict'; |
| |
| function test0() { |
| let t1 = document.querySelector('#target1'); |
| let t2 = document.querySelector('#target2'); |
| let it1 = document.querySelector("#iframe1").contentDocument.querySelector("#iframe1-target1"); |
| |
| let helper = new ResizeTestHelper( |
| "test0: depth of target from child frame", |
| [ |
| { |
| setup: observer => { |
| observer.observe(t1); |
| observer.observe(t2); |
| observer.observe(it1); |
| }, |
| notify: (entries, observer) => { |
| assert_equals(entries.length, 3, "3 entries"); |
| assert_equals(entries[0].target, t1, "observe target from child frame"); |
| assert_equals(entries[1].target, t2, "observe target from child frame"); |
| assert_equals(entries[2].target, it1, "observe target from child frame"); |
| } |
| }, |
| { |
| setup: observer => { |
| t2.style.width = "50px"; |
| it1.style.width = "50px"; |
| }, |
| notify: (entries, observer) => { |
| assert_equals(entries.length, 2, "2 entries"); |
| assert_equals(entries[0].target, t2, "t2 deeper than t1"); |
| assert_equals(entries[1].target, it1, "it1 deeper than t1"); |
| } |
| }, |
| { |
| setup: observer => { |
| it1.style.width = "25px"; |
| }, |
| notify: (entries, observer) => { |
| assert_equals(entries.length, 1, "1 entry"); |
| assert_equals(entries[0].target, it1, "it1 deeper than t2"); |
| } |
| } |
| ]); |
| return helper.start(); |
| } |
| |
| function test1() { |
| let t1 = document.querySelector('#target1'); |
| let t3 = document.querySelector('#target3'); |
| let it1 = document.querySelector("#iframe1").contentDocument.querySelector("#iframe1-target1"); |
| |
| let helper = new ResizeTestHelper( |
| "test1: observed element move to new document", |
| [ |
| { |
| setup: observer => { |
| observer.observe(t1); |
| observer.observe(t3); |
| observer.observe(it1); |
| }, |
| notify: (entries, observer) => { |
| assert_equals(entries.length, 3, "3 entries"); |
| assert_equals(entries[0].target, t1, "move to new document"); |
| assert_equals(entries[1].target, t3, "move to new document"); |
| assert_equals(entries[2].target, it1, "move to new document"); |
| } |
| }, |
| { |
| setup: observer => { |
| t3.parentElement.removeChild(t3); |
| it1.parentElement.appendChild(t3); |
| t3.style.width = "25px"; |
| }, |
| notify: (entries, observer) => { |
| assert_equals(entries.length, 1, "1 entry"); |
| assert_equals(entries[0].target, t3, "still observed after moving to new document"); |
| } |
| } |
| ]); |
| return helper.start(); |
| } |
| |
| function startTest() { |
| let guard; |
| test(_ => { |
| assert_own_property(window, "ResizeObserver"); |
| guard = async_test('guard'); |
| }, "ResizeObserver implemented"); |
| |
| test0() |
| .then(() => { return test1(); }) |
| .then(() => { guard.done(); }); |
| } |
| |
| window.addEventListener('message', function(event) { |
| switch(event.data) { |
| case 'readyToTest': |
| startTest(); |
| break; |
| } |
| }); |
| </script> |
