| <!doctype html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <script src="./resources/resizeTestHelper.js"></script> |
| <style> |
| div { |
| border: 1px dotted gray |
| } |
| </style> |
| <p>ResizeObserver notification event loop tests</p> |
| <div id="target1" style="width:100px;height:100px;">t1 |
| </div> |
| <div id="container"> |
| <div id="a1" style="width:100px;height:100px"> |
| <div id="a2" style="width:100px;height:100px"> |
| </div> |
| </div> |
| <div id="b1" style="width:100px;height:100px"> |
| <div id="b2" style="width:100px;height:100px"> |
| </div> |
| </div> |
| </div> |
| <script> |
| 'use strict'; |
| |
| let t1 = document.querySelector('#target1'); |
| |
| // allow uncaught exception because ResizeObserver posts exceptions |
| // to window error handler when limit is exceeded. |
| // This codepath is tested in this file. |
| |
| setup({allow_uncaught_exception: true}); |
| |
| function template() { |
| let helper = new ResizeTestHelper( |
| "test0: title", |
| [ |
| { |
| setup: observer => { |
| }, |
| notify: (entries, observer) => { |
| return true; // Delay next step |
| } |
| } |
| ]); |
| return helper.start(); |
| } |
| |
| var onErrorCalled = false; |
| |
| window.onerror = err => { |
| onErrorCalled = true; |
| } |
| |
| function test0() { |
| |
| let divs = [t1]; |
| let rAF = 0; |
| let helper = new ResizeTestHelper( |
| "test0: multiple notifications inside same event loop", |
| [ |
| { |
| setup: observer => { |
| onErrorCalled = false; |
| let t2 = document.createElement('div'); |
| let t3 = document.createElement('div'); |
| t2.appendChild(t3); |
| t1.appendChild(t2); |
| divs.push(t2); |
| divs.push(t3); |
| observer.observe(t1); |
| observer.observe(t2); |
| observer.observe(t3); |
| }, |
| notify: (entries, observer) => { |
| assert_equals(entries.length, 3, "3 notifications"); |
| } |
| }, |
| { |
| setup: observer => { |
| helper.startCountingRaf(); |
| divs.forEach( el => { el.style.width = "101px";}); |
| }, |
| notify: (entries, observer) => { |
| // t1 is not delivered |
| assert_equals(entries.length, 2, "2 notifications"); |
| assert_equals(helper.rafCount, 0, "still in same loop"); |
| } |
| }, |
| { |
| setup: observer => { |
| divs.forEach( el => { el.style.width = "102px";}); |
| }, |
| notify: (entries, observer) => { |
| assert_equals(entries.length, 1, "1 notifications"); |
| assert_equals(helper.rafCount, 0, "same loop"); |
| } |
| }, |
| { // t1 and t2 get notified |
| setup: observer => { |
| }, |
| notify: (entries, observer) => { |
| assert_equals(entries.length, 2, "2 notifications"); |
| assert_equals(helper.rafCount, 1, "new loop"); |
| assert_equals(onErrorCalled, true, "error was fired"); |
| observer.disconnect(); |
| while (t1.childNodes.length > 0) |
| t1.removeChild(t1.childNodes[0]); |
| } |
| } |
| ]); |
| return helper.start(); |
| } |
| |
| function test1() { |
| |
| var resizers = [t1]; |
| // Testing depths of shadow roots |
| // DOM: t1 <- t2 <- t3 <-shadow- t4 <- t5 |
| let helper = new ResizeTestHelper( |
| "test1: depths of shadow roots", |
| [ |
| { |
| setup: observer => { |
| onErrorCalled = false; |
| let t2 = document.createElement('div'); |
| t1.appendChild(t2); |
| resizers.push(t2); |
| let t3 = document.createElement('div'); |
| resizers.push(t3); |
| t2.appendChild(t3); |
| let shadow = t3.createShadowRoot(); |
| let t4 = document.createElement('div'); |
| resizers.push(t4); |
| shadow.appendChild(t4); |
| let t5 = document.createElement('div'); |
| resizers.push(t5); |
| t4.appendChild(t5); |
| resizers.forEach( el => observer.observe(el) ); |
| }, |
| notify: (entries, observer) => { |
| assert_equals(entries.length, 5, "all entries resized"); |
| } |
| }, |
| { |
| setup: observer => { |
| resizers.forEach( el => el.style.width = "111px" ); |
| }, |
| notify: (entries, observer) => { |
| assert_equals(entries.length, 4, "depth limited"); |
| } |
| }, |
| { |
| setup: observer => { |
| resizers.forEach( el => el.style.width = "112px" ); |
| }, |
| notify: (entries, observer) => { |
| assert_equals(entries.length, 3, "depth limited"); |
| } |
| }, |
| { |
| setup: observer => { |
| resizers.forEach( el => el.style.width = "113px" ); |
| }, |
| notify: (entries, observer) => { |
| assert_equals(entries.length, 2, "depth limited"); |
| } |
| }, |
| { |
| setup: observer => { |
| resizers.forEach( el => el.style.width = "114px" ); |
| }, |
| notify: (entries, observer) => { |
| assert_equals(entries.length, 1, "depth limited"); |
| } |
| }, |
| { |
| setup: observer => { |
| }, |
| notify: (entries, observer) => { |
| assert_equals(entries.length, 4, "limit notifications"); |
| assert_equals(onErrorCalled, true, "breached limit"); |
| observer.disconnect(); |
| t1.removeChild(t1.firstChild); |
| } |
| }, |
| ]); |
| return helper.start(); |
| } |
| |
| function test2() { |
| let container = document.querySelector('#container'); |
| let a1 = document.querySelector('#a1'); |
| let a2 = document.querySelector('#a2'); |
| let b1 = document.querySelector('#b1'); |
| let b2 = document.querySelector('#b2'); |
| let targets = [a1, a2, b1, b2]; |
| |
| let helper = new ResizeTestHelper( |
| "test2: move target in dom while inside event loop", |
| [ |
| { |
| setup: observer => { |
| for (let t of targets) |
| observer.observe(t); |
| }, |
| notify: (entries, observer) => { |
| return true; // delay next observation |
| } |
| }, |
| { // resize them all |
| setup: observer => { |
| for (let t of targets) |
| t.style.width = "110px"; |
| }, |
| notify: (entries, observer) => { |
| assert_equals(entries.length, targets.length, "all targets observed"); |
| } |
| }, |
| { // resize all, move dom upwards |
| setup: observer => { |
| for (let t of targets) |
| t.style.width = "130px"; |
| container.appendChild(b2); |
| }, |
| notify: (entries, observer) => { |
| assert_equals(entries.length, 1, "b2 moved upwards"); |
| assert_equals(entries[0].target, a2); |
| } |
| }, |
| { // resize all, move dom downwards |
| setup: observer => { |
| for (let t of targets) |
| t.style.width = "130px"; |
| a2.appendChild(b2); |
| }, |
| notify: (entries, observer) => { |
| assert_equals(entries.length, 1, "b2 moved downwards"); |
| assert_equals(entries[0].target, b2); |
| a1.appendChild(a2); |
| } |
| }, |
| ]); |
| return helper.start(); |
| } |
| |
| let guard = async_test('guard'); |
| test0() |
| .then(() => { return test1(); }) |
| .then(() => { return test2(); }) |
| .then(() => { guard.done(); }); |
| |
| </script> |
| |
