| <!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> |
| <style> |
| div { |
| border: 1px dotted gray |
| } |
| .transform { |
| transform: scale(2,2) rotate(90deg) |
| } |
| </style> |
| <p>ResizeObserver tests</p> |
| <div id="target1" style="width:100px;height:100px;">t1 |
| <div id="target2" style="width:100px;height:100px;">t2 |
| <div id="target3" style="width:100px;height:100px;">t3 |
| <span id="inline">inline</span> |
| </div> |
| </div> |
| </div> |
| <div id="absolute" style="width:100.5px;height:100.5px;position:absolute;top:10.3px;left:10.3px"></div> |
| <script> |
| 'use strict'; |
| |
| let t1 = document.querySelector('#target1'); |
| let t2 = document.querySelector('#target2'); |
| let t3 = document.querySelector('#target3'); |
| let abs = document.querySelector('#absolute'); |
| let inline = document.querySelector('#inline'); |
| |
| function test0() { |
| let helper = new ResizeTestHelper( |
| "test0: notification ordering", |
| [ |
| { |
| setup: observer => { |
| observer.observe(t3); |
| observer.observe(t2); |
| observer.observe(t1); |
| t1.style.width = "5px"; |
| t3.style.width = "5px"; |
| t2.style.width = "5px"; |
| }, |
| notify: (entries, observer) => { |
| assert_equals(entries.length, 3, "3 resizes"); |
| assert_equals(entries[0].target, t3, "ordering"); |
| assert_equals(entries[1].target, t2, "ordering"); |
| assert_equals(entries[2].target, t1, "ordering"); |
| observer.disconnect(); |
| t1.style.width = "100px"; |
| t2.style.width = "100px"; |
| t3.style.width = "100px"; |
| } |
| } |
| ]); |
| return helper.start(); |
| } |
| |
| function test1() { |
| let helper = new ResizeTestHelper( |
| "test1: display:none triggers notification", |
| [ |
| { |
| setup: observer => { |
| observer.observe(t1); |
| }, |
| notify: (entries, observer) => { |
| return true; // Delay next step |
| } |
| }, |
| { |
| setup: observer => { |
| t1.style.display = "none"; |
| }, |
| notify: (entries, observer) => { |
| t1.style.display = ""; |
| } |
| } |
| ]); |
| return helper.start(); |
| } |
| |
| |
| function test2() { |
| let helper = new ResizeTestHelper( |
| "test2: remove/appendChild trigger notification", |
| [ |
| { |
| setup: observer => { |
| observer.observe(t1); |
| }, |
| notify: (entries, observer) => { |
| return true; // Delay next step |
| } |
| }, |
| { // "removeChild triggers notification" |
| setup: observer => { |
| t1.parentNode.removeChild(t1); |
| }, |
| notify: (entries, observer) => { |
| assert_equals(entries[0].target, t1); |
| return true; // Delay next step |
| } |
| }, |
| { // "appendChild triggers notification", |
| setup: observer => { |
| document.body.appendChild(t1); |
| }, |
| notify: (entries, observer) => { |
| assert_equals(entries[0].target, t1) |
| } |
| } |
| ]); |
| return helper.start(); |
| } |
| |
| |
| function test3() { |
| let helper = new ResizeTestHelper( |
| "test3: dimensions match", |
| [ |
| { |
| setup: observer => { |
| observer.observe(t1); |
| t1.style.width = "200.5px"; |
| t1.style.height = "100px"; |
| t1.style.paddingLeft = "20px"; |
| t1.style.paddingTop = "10px"; |
| }, |
| notify: (entries, observer) => { |
| assert_equals(entries[0].contentRect.left,20); |
| assert_equals(entries[0].contentRect.top,10); |
| assert_between_inclusive(entries[0].contentRect.width, 200.4, 200.6, "width is not rounded"); |
| assert_equals(entries[0].contentRect.height, 100); |
| } |
| } |
| ]); |
| return helper.start(); |
| } |
| |
| function test4() { |
| let helper = new ResizeTestHelper( |
| "test4: transform do not cause notifications", |
| [ |
| { |
| setup: observer => { |
| observer.observe(t2); |
| }, |
| notify: (entries, observer) => { |
| return true; // Delay next step |
| } |
| }, |
| { |
| setup: observer => { |
| t2.classList.add("transform"); |
| }, |
| notify: (entries, observer) => { |
| assert_unreached("transform must not trigger notifications"); |
| }, |
| timeout: () => { |
| t2.classList.remove("transform"); |
| } |
| } |
| ]); |
| return helper.start(); |
| } |
| |
| function test5() { |
| let helper = new ResizeTestHelper( |
| "test5: moving an element does not trigger notifications", |
| [ |
| { |
| setup: observer => { |
| observer.observe(abs); |
| }, |
| notify: (entries, observer) => { |
| return true; // Delay next step |
| } |
| }, |
| { |
| setup: observer => { |
| abs.style.top = "20.33px"; |
| abs.style.left = "20.33px"; |
| }, |
| notify: (entries, observer) => { |
| assert_unreached("movement should not cause resize notifications"); |
| }, |
| timeout: () => { |
| } |
| } |
| ]); |
| return helper.start(); |
| } |
| |
| function test6() { |
| let helper = new ResizeTestHelper( |
| "test6: inline element does not notify", |
| [ |
| { |
| setup: observer => { |
| observer.observe(inline); |
| observer.observe(t1); |
| t1.style.width = "66px"; |
| inline.style.width = "66px"; |
| }, |
| notify: (entries, observer) => { |
| assert_equals(entries.length, 1, "inline elements must not trigger notifications"); |
| assert_equals(entries[0].target, t1, "inline elements must not trigger notifications"); |
| return true; // Delay next step |
| } |
| }, |
| { // "inline element that becomes block should notify", |
| setup: observer => { |
| inline.style.display = "block"; |
| }, |
| notify: (entries, observer) => { |
| assert_equals(entries[0].target, inline); |
| } |
| } |
| ]); |
| return helper.start(); |
| } |
| |
| function test7() { |
| let helper = new ResizeTestHelper( |
| "test7: unobserve inside notify callback", |
| [ |
| { |
| setup: observer => { |
| observer.observe(t1); |
| observer.observe(t2); |
| }, |
| notify: (entries, observer) => { |
| t1.style.width = "777px"; |
| t2.style.width = "777px"; |
| observer.unobserve(t1); |
| return true; // Delay next step |
| } |
| }, |
| { |
| setup: observer => { |
| }, |
| notify: (entries, observer) => { |
| assert_equals(entries.length, 1, "only t2 is observed"); |
| assert_equals(entries[0].target, t2, "only t2 is observed"); |
| } |
| } |
| ]); |
| return helper.start(); |
| } |
| |
| function test8() { |
| let helper = new ResizeTestHelper( |
| "test8: observe inside notify callback", |
| [ |
| { |
| setup: observer => { |
| observer.observe(t1); |
| }, |
| notify: (entries, observer) => { |
| observer.observe(t2); |
| t2.style.width = "888px"; |
| return true; // Delay next step |
| } |
| }, |
| { |
| setup: observer => { |
| }, |
| notify: (entries, observer) => { |
| assert_equals(entries.length, 1, "only t2 is observed"); |
| assert_equals(entries[0].target, t2, "only t2 is observed"); |
| } |
| } |
| ]); |
| return helper.start(); |
| } |
| |
| function test9() { |
| let helper = new ResizeTestHelper( |
| "test9: disconnect inside notify callback", |
| [ |
| { |
| setup: observer => { |
| observer.observe(t1); |
| }, |
| notify: (entries, observer) => { |
| t1.style.width = "999px"; |
| observer.disconnect(); |
| return true; // Delay next step |
| } |
| }, |
| { |
| setup: observer => { |
| }, |
| notify: (entries, observer) => { |
| assert_unreached("there should be no notifications after disconnect"); |
| }, |
| timeout: () => { |
| } |
| } |
| ]); |
| return helper.start(); |
| } |
| |
| function test10() { |
| var parent = t1.parentNode; |
| let helper = new ResizeTestHelper( |
| "test10: element notifies when parent removed", |
| [ |
| { |
| setup: observer => { |
| observer.observe(t3); |
| }, |
| notify: (entries, observer) => { |
| return true; // Delay next step |
| } |
| }, |
| { |
| setup: observer => { |
| t1.parentNode.removeChild(t1); |
| }, |
| notify: (entries, observer) => { |
| assert_equals(entries.length, 1); |
| assert_equals(entries[0].target, t3); |
| parent.appendChild(t1); |
| } |
| } |
| ]); |
| return helper.start(); |
| } |
| |
| let guard; |
| test(_ => { |
| assert_own_property(window, "ResizeObserver"); |
| guard = async_test('guard'); |
| }, "ResizeObserver implemented") |
| |
| test0() |
| .then(() => { return test1(); }) |
| .then(() => { return test2(); }) |
| .then(() => { return test3(); }) |
| .then(() => { return test4(); }) |
| .then(() => { return test5(); }) |
| .then(() => { return test6(); }) |
| .then(() => { return test7(); }) |
| .then(() => { return test8(); }) |
| .then(() => { return test9(); }) |
| .then(() => { return test10(); }) |
| .then(() => { guard.done(); }); |
| |
| </script> |