| <!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'; |
| |
| var helper = new ResizeTestHelper(); |
| |
| 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}); |
| |
| var onErrorCalled = false; |
| |
| window.onerror = err => { |
| onErrorCalled = true; |
| } |
| |
| function test0() { |
| |
| let divs = [t1]; |
| |
| helper.createTest( |
| "test0: multiple notifications inside same event loop", |
| setup => { |
| onErrorCalled = false; |
| helper.observer.disconnect(); |
| let t2 = document.createElement('div'); |
| let t3 = document.createElement('div'); |
| t2.appendChild(t3); |
| t1.appendChild(t2); |
| divs.push(t2); |
| divs.push(t3); |
| helper.observer.observe(t1); |
| helper.observer.observe(t2); |
| helper.observer.observe(t3); |
| }, |
| entries => { |
| assert_equals(entries.length, 3, "3 notifications"); |
| helper.nextTest(); |
| } |
| ); |
| let rAF = 0; |
| |
| // This test happens in the same Resize notification loop, |
| // only t2 and t3 get notified |
| helper.createTest( |
| "test0: multiple notifications pt 2", |
| setup => { |
| divs.forEach( el => { el.style.width = "101px";}); |
| window.requestAnimationFrame(_ => { rAF++; }); |
| }, |
| entries => { |
| // t1 is not delivered |
| assert_equals(entries.length, 2, "2 notifications"); |
| helper.nextTest(); |
| } |
| ); |
| // Only t3 gets notified, t2 and t1 are not deep enough |
| helper.createTest( |
| "test0: multiple notifications pt 3", |
| setup => { |
| divs.forEach( el => { el.style.width = "102px";}); |
| }, |
| entries => { |
| assert_equals(entries.length, 1, "1 notifications"); |
| assert_equals(rAF, 0, "same loop"); |
| helper.nextTest(); |
| } |
| ); |
| // t1 and t2 get notified |
| helper.createTest( |
| "test0: multiple notifications pt 4, new loop", |
| setup => { |
| }, |
| entries => { |
| assert_equals(entries.length, 2, "2 notifications"); |
| assert_equals(rAF, 1, "new loop"); |
| assert_equals(onErrorCalled, true, "error was fired"); |
| helper.observer.disconnect(); |
| while (t1.childNodes.length > 0) |
| t1.removeChild(t1.childNodes[0]); |
| test1(); |
| } |
| ); |
| |
| helper.nextTestRaf(); |
| } |
| |
| function test1() { |
| |
| var resizers = [t1]; |
| // Testing depths of shadow roots |
| // DOM: t1 <- t2 <- t3 <-shadow- t4 <- t5 |
| helper.createTest( |
| "test1: limit with shadowRoot", |
| setup => { |
| 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 => helper.observer.observe(el) ); |
| }, |
| entries => { |
| assert_equals(entries.length, 5, "all entries resized"); |
| helper.nextTest(); |
| } |
| ); |
| |
| helper.createTest( |
| "test1: limit with shadowRoot", |
| setup => { |
| resizers.forEach( el => el.style.width = "111px" ); |
| }, |
| entries => { |
| assert_equals(entries.length, 4, "depth limited"); |
| helper.nextTest(); |
| } |
| ); |
| |
| helper.createTest( |
| "test1: limit with shadowRoot", |
| setup => { |
| resizers.forEach( el => el.style.width = "112px" ); |
| }, |
| entries => { |
| assert_equals(entries.length, 3, "depth limited"); |
| helper.nextTest(); |
| } |
| ); |
| |
| helper.createTest( |
| "test1: limit with shadowRoot", |
| setup => { |
| resizers.forEach( el => el.style.width = "113px" ); |
| }, |
| entries => { |
| assert_equals(entries.length, 2, "depth limited"); |
| helper.nextTest(); |
| } |
| ); |
| |
| helper.createTest( |
| "test1: limit with shadowRoot", |
| setup => { |
| resizers.forEach( el => el.style.width = "114px" ); |
| }, |
| entries => { |
| assert_equals(entries.length, 1, "depth limited"); |
| helper.nextTestRaf(); |
| } |
| ); |
| |
| helper.createTest( |
| "test1: limit with shadowRoot end", |
| setup => { |
| }, |
| entries => { |
| assert_equals(entries.length, 4, "limit notifications"); |
| assert_equals(onErrorCalled, true, "breached limit"); |
| helper.observer.disconnect(); |
| t1.removeChild(t1.firstChild); |
| test2(); |
| } |
| ); |
| |
| helper.nextTestRaf(); |
| } |
| |
| 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]; |
| helper.createTest( |
| "test2: move target in dom while inside event loop", |
| setup => { |
| for (let t of targets) |
| helper.observer.observe(t); |
| }, |
| entries => { |
| helper.nextTestRaf(); |
| } |
| ); |
| helper.createTest( |
| "test2, pt2: resize them all", |
| setup => { |
| for (let t of targets) |
| t.style.width = "110px"; |
| }, |
| entries => { |
| assert_equals(entries.length, targets.length); |
| helper.nextTest(); |
| } |
| ); |
| helper.createTest( |
| "test2, pt3: resize all, move dom upwardsa", |
| setup => { |
| // still in same event loop as pt2 |
| for (let t of targets) |
| t.style.width = "120px"; |
| container.appendChild(b2); |
| }, |
| entries => { |
| assert_equals(entries.length, 1); |
| assert_equals(entries[0].target, a2); |
| helper.nextTest(); |
| } |
| ); |
| helper.createTest( |
| "test2, pt4, resize all, move dom downwards", |
| setup => { |
| for (let t of targets) |
| t.style.width = "130px"; |
| a2.appendChild(b2); |
| }, |
| entries => { |
| assert_equals(entries.length, 1); |
| assert_equals(entries[0].target, b2); |
| a1.appendChild(a2); |
| helper.observer.disconnect(); |
| } |
| ); |
| helper.nextTestRaf(); |
| } |
| |
| test0(); |
| |
| </script> |
| |
