| <!doctype html> | |
| <title>ResizeObserver tests</title> | |
| <script src="/resources/testharness.js"></script> | |
| <script src="/resources/testharnessreport.js"></script> | |
| <script src="./resources/resizeTestHelper.js"></script> | |
| <body> | |
| <div id="log"></div> | |
| <script> | |
| 'use strict'; | |
| function test0() { | |
| let t = createAndAppendElement("div"); | |
| t.style.width = "100px"; | |
| let helper = new ResizeTestHelper( | |
| "test0: simple observation", | |
| [ | |
| { | |
| setup: observer => { | |
| observer.observe(t); | |
| t.style.width = "5px"; | |
| }, | |
| notify: entries => { | |
| assert_equals(entries.length, 1, "1 pending notification"); | |
| assert_equals(entries[0].target, t, "target is t"); | |
| assert_equals(entries[0].contentRect.width, 5, "target width"); | |
| } | |
| } | |
| ]); | |
| return helper.start(() => t.remove()); | |
| } | |
| function test1() { | |
| let t = createAndAppendElement("div"); | |
| t.style.width = "100px"; | |
| let helper = new ResizeTestHelper( | |
| "test1: multiple observation on same element trigger only one", | |
| [ | |
| { | |
| setup: observer => { | |
| observer.observe(t); | |
| observer.observe(t); | |
| t.style.width = "10px"; | |
| }, | |
| notify: entries => { | |
| assert_equals(entries.length, 1, "1 pending notification"); | |
| } | |
| } | |
| ]); | |
| return helper.start(() => t.remove()); | |
| } | |
| function test2() { | |
| test(() => { | |
| assert_throws_js(TypeError, _=> { | |
| let ro = new ResizeObserver(() => {}); | |
| ro.observe({}); | |
| }); | |
| }, | |
| "test2: throw exception when observing non-element" | |
| ); | |
| return Promise.resolve(); | |
| } | |
| function test3() { | |
| let t1 = createAndAppendElement("div"); | |
| let t2 = createAndAppendElement("div"); | |
| t1.style.width = "100px"; | |
| t2.style.width = "100px"; | |
| let helper = new ResizeTestHelper( | |
| "test3: disconnect stops all notifications", [ | |
| { | |
| setup: observer => { | |
| observer.observe(t1); | |
| observer.observe(t2); | |
| observer.disconnect(); | |
| t1.style.width = "30px"; | |
| }, | |
| notify: entries => { | |
| assert_unreached("no entries should be observed"); | |
| }, | |
| timeout: () => { | |
| // expected | |
| } | |
| } | |
| ]); | |
| return helper.start(() => { | |
| t1.remove(); | |
| t2.remove(); | |
| }); | |
| } | |
| function test4() { | |
| let t1 = createAndAppendElement("div"); | |
| let t2 = createAndAppendElement("div"); | |
| t1.style.width = "100px"; | |
| t2.style.width = "100px"; | |
| let helper = new ResizeTestHelper( | |
| "test4: unobserve target stops notifications, unobserve non-observed does nothing", [ | |
| { | |
| setup: observer => { | |
| observer.observe(t1); | |
| observer.observe(t2); | |
| observer.unobserve(t1); | |
| observer.unobserve(document.body); | |
| t1.style.width = "40px"; | |
| t2.style.width = "40px"; | |
| }, | |
| notify: entries => { | |
| assert_equals(entries.length, 1, "only t2"); | |
| assert_equals(entries[0].target, t2, "t2 was observed"); | |
| } | |
| } | |
| ]); | |
| return helper.start(() => { | |
| t1.remove(); | |
| t2.remove(); | |
| }); | |
| } | |
| function test5() { | |
| const img = new Image(); | |
| img.style.width = "15px"; | |
| img.style.height = "15px"; | |
| img.src = "resources/image.png"; | |
| return img.decode().then(() => { | |
| return new Promise(resolve => { | |
| requestAnimationFrame(() => { | |
| document.body.appendChild(img); | |
| resolve(); | |
| }); | |
| }); | |
| }).then(() => { | |
| let helper = new ResizeTestHelper("test5: observe img",[ | |
| { | |
| setup: observer => { | |
| observer.observe(img); | |
| }, | |
| notify: entries => { | |
| return true; | |
| } | |
| }, | |
| { | |
| setup: observer => { | |
| img.style.width = "15.5px"; | |
| }, | |
| notify: entries => { | |
| assert_equals(entries.length, 1); | |
| assert_equals(entries[0].contentRect.width, 15.5); | |
| } | |
| } | |
| ]); | |
| return helper.start(() => img.remove()); | |
| }, () => { | |
| // dummy test for dumping the error message. | |
| test(_ => { | |
| assert_unreached("decode image failed"); | |
| }, "test5: observe img"); | |
| }); | |
| } | |
| function test6() { | |
| let iframe = createAndAppendElement("iframe"); | |
| iframe.width = "300px"; | |
| iframe.height = "100px"; | |
| iframe.style.display = "block"; | |
| let resolvePromise; | |
| let promise = new Promise((resolve) => { | |
| resolvePromise = resolve; | |
| }); | |
| let test = async_test('test6: iframe notifications'); | |
| let testRequested = false; | |
| test.add_cleanup(() => iframe.remove()); | |
| window.addEventListener('message', event => { | |
| switch(event.data) { | |
| case 'readyToTest': | |
| if (!testRequested) { | |
| iframe.contentWindow.postMessage('startTest', '*'); | |
| testRequested = true; | |
| } | |
| break; | |
| case 'success': | |
| case 'fail': | |
| window.requestAnimationFrame(() => { | |
| resolvePromise(); | |
| test.step(() => { | |
| assert_equals(event.data, 'success'); | |
| test.done(); | |
| }); | |
| }); | |
| break; | |
| } | |
| }, false); | |
| iframe.src = "./resources/iframe.html"; | |
| return new Promise(function(resolve, reject) { | |
| iframe.onload = () => resolve(); | |
| iframe.onerror = () => reject(); | |
| }).then(() => { | |
| return promise; | |
| }).catch(error => { | |
| test.step(() => { | |
| assert_unreached("loading iframe is error"); | |
| }); | |
| }); | |
| } | |
| function test7() { | |
| let harnessTest = async_test("test7: callback.this"); | |
| let resolvePromise; | |
| let ro = new ResizeObserver( function(entries, obs) { | |
| let callbackThis = this; | |
| harnessTest.step(() => { | |
| assert_equals(callbackThis, ro, "callback.this is ResizeObserver"); | |
| assert_equals(obs, ro, "2nd argument is ResizeObserver"); | |
| ro.disconnect(); | |
| // every reference to RO must be null before test completes | |
| // to avoid triggering test leak-detection | |
| ro = null; | |
| callbackThis = null; | |
| obs = null; | |
| harnessTest.step_timeout( _ => { | |
| harnessTest.done(); | |
| resolvePromise(); | |
| }, 0); | |
| }); | |
| } | |
| ); | |
| let t = createAndAppendElement("div"); | |
| t.style.width = "100px"; | |
| harnessTest.add_cleanup(() => t.remove()); | |
| ro.observe(t); | |
| return new Promise( (resolve, reject) => { | |
| resolvePromise = resolve; | |
| }); | |
| } | |
| function test8() { | |
| let t = createAndAppendElement("div"); | |
| t.style.width = "100px"; | |
| t.style.height = "100px"; | |
| let helper = new ResizeTestHelper( | |
| "test8: simple content-box observation", | |
| [ | |
| { | |
| setup: observer => { | |
| observer.observe(t, { box: "content-box" }); | |
| }, | |
| notify: entries => { | |
| assert_equals(entries.length, 1, "1 pending notification"); | |
| assert_equals(entries[0].target, t, "target is t"); | |
| assert_equals(entries[0].contentRect.width, 100, "target width"); | |
| assert_equals(entries[0].contentRect.height, 100, "target height"); | |
| assert_equals(entries[0].contentRect.top, 0, "target top padding"); | |
| assert_equals(entries[0].contentRect.left, 0, "target left padding"); | |
| assert_equals(entries[0].contentBoxSize[0].inlineSize, 100, | |
| "target content-box inline size"); | |
| assert_equals(entries[0].contentBoxSize[0].blockSize, 100, | |
| "target content-box block size"); | |
| assert_equals(entries[0].borderBoxSize[0].inlineSize, 100, | |
| "target border-box inline size"); | |
| assert_equals(entries[0].borderBoxSize[0].blockSize, 100, | |
| "target border-box block size"); | |
| return true; | |
| } | |
| }, | |
| { | |
| setup: observer => { | |
| t.style.width = "90px"; | |
| t.style.height = "90px"; | |
| }, | |
| notify: entries => { | |
| assert_equals(entries.length, 1, "1 pending notification"); | |
| assert_equals(entries[0].target, t, "target is t"); | |
| assert_equals(entries[0].contentRect.width, 90, "target width"); | |
| assert_equals(entries[0].contentRect.height, 90, "target height"); | |
| assert_equals(entries[0].contentRect.top, 0, "target top padding"); | |
| assert_equals(entries[0].contentRect.left, 0, "target left padding"); | |
| assert_equals(entries[0].contentBoxSize[0].inlineSize, 90, | |
| "target content-box inline size"); | |
| assert_equals(entries[0].contentBoxSize[0].blockSize, 90, | |
| "target content-box block size"); | |
| assert_equals(entries[0].borderBoxSize[0].inlineSize, 90, | |
| "target border-box inline size"); | |
| assert_equals(entries[0].borderBoxSize[0].blockSize, 90, | |
| "target border-box block size"); | |
| return true; | |
| } | |
| }, | |
| { | |
| setup: observer => { | |
| t.style.padding = "5px"; | |
| }, | |
| notify: entries => { | |
| assert_unreached("the 'content-box' ResizeObserver shouldn't fire " + | |
| "for restyles that don't affect the content-box size"); | |
| }, | |
| timeout: () => { | |
| // expected | |
| // Note: the border-box size is 100px x 100px right now. | |
| } | |
| } | |
| ]); | |
| return helper.start(() => t.remove()); | |
| } | |
| function test9() { | |
| let t = createAndAppendElement("div"); | |
| t.style.width = "100px"; | |
| t.style.height = "100px"; | |
| let helper = new ResizeTestHelper( | |
| "test9: simple content-box observation but keep border-box size unchanged", | |
| [ | |
| { | |
| setup: observer => { | |
| observer.observe(t, { box: "content-box" }); | |
| }, | |
| notify: entries => { | |
| assert_equals(entries.length, 1, "1 pending notification"); | |
| assert_equals(entries[0].target, t, "target is t"); | |
| assert_equals(entries[0].contentRect.width, 100, "target width"); | |
| assert_equals(entries[0].contentRect.height, 100, "target height"); | |
| assert_equals(entries[0].contentRect.top, 0, "target top padding"); | |
| assert_equals(entries[0].contentRect.left, 0, "target left padding"); | |
| assert_equals(entries[0].contentBoxSize[0].inlineSize, 100, | |
| "target content-box inline size"); | |
| assert_equals(entries[0].contentBoxSize[0].blockSize, 100, | |
| "target content-box block size"); | |
| assert_equals(entries[0].borderBoxSize[0].inlineSize, 100, | |
| "target border-box inline size"); | |
| assert_equals(entries[0].borderBoxSize[0].blockSize, 100, | |
| "target border-box block size"); | |
| return true; | |
| } | |
| }, | |
| { | |
| setup: observer => { | |
| // Keep the border-box size the same, and change the content-box size. | |
| t.style.width = "92px"; | |
| t.style.height = "92px"; | |
| t.style.padding = "4px"; | |
| }, | |
| notify: entries => { | |
| assert_equals(entries.length, 1, "1 pending notification"); | |
| assert_equals(entries[0].target, t, "target is t"); | |
| assert_equals(entries[0].contentRect.width, 92, "target width"); | |
| assert_equals(entries[0].contentRect.height, 92, "target height"); | |
| assert_equals(entries[0].contentRect.top, 4, "target top padding"); | |
| assert_equals(entries[0].contentRect.left, 4, "target left padding"); | |
| assert_equals(entries[0].contentBoxSize[0].inlineSize, 92, | |
| "target content-box inline size"); | |
| assert_equals(entries[0].contentBoxSize[0].blockSize, 92, | |
| "target content-box block size"); | |
| assert_equals(entries[0].borderBoxSize[0].inlineSize, 100, | |
| "target border-box inline size"); | |
| assert_equals(entries[0].borderBoxSize[0].blockSize, 100, | |
| "target border-box block size"); | |
| } | |
| } | |
| ]); | |
| return helper.start(() => t.remove()); | |
| } | |
| function test10() { | |
| let t = createAndAppendElement("div"); | |
| t.style.width = "100px"; | |
| t.style.height = "100px"; | |
| let helper = new ResizeTestHelper( | |
| "test10: simple border-box observation", | |
| [ | |
| { | |
| setup: observer => { | |
| observer.observe(t, { box: "border-box" }); | |
| }, | |
| notify: entries => { | |
| assert_equals(entries.length, 1, "1 pending notification"); | |
| assert_equals(entries[0].target, t, "target is t"); | |
| assert_equals(entries[0].contentRect.width, 100, "target width"); | |
| assert_equals(entries[0].contentRect.height, 100, "target height"); | |
| assert_equals(entries[0].contentRect.top, 0, "target top padding"); | |
| assert_equals(entries[0].contentRect.left, 0, "target left padding"); | |
| assert_equals(entries[0].contentBoxSize[0].inlineSize, 100, | |
| "target content-box inline size"); | |
| assert_equals(entries[0].contentBoxSize[0].blockSize, 100, | |
| "target content-box block size"); | |
| assert_equals(entries[0].borderBoxSize[0].inlineSize, 100, | |
| "target border-box inline size"); | |
| assert_equals(entries[0].borderBoxSize[0].blockSize, 100, | |
| "target border-box block size"); | |
| return true; | |
| } | |
| }, | |
| { | |
| setup: observer => { | |
| t.style.padding = "4px"; | |
| }, | |
| notify: entries => { | |
| assert_equals(entries.length, 1, "1 pending notification"); | |
| assert_equals(entries[0].target, t, "target is t"); | |
| assert_equals(entries[0].contentRect.width, 100, "target width"); | |
| assert_equals(entries[0].contentRect.height, 100, "target height"); | |
| assert_equals(entries[0].contentRect.top, 4, "target top padding"); | |
| assert_equals(entries[0].contentRect.left, 4, "target left padding"); | |
| assert_equals(entries[0].contentBoxSize[0].inlineSize, 100, | |
| "target content-box inline size"); | |
| assert_equals(entries[0].contentBoxSize[0].blockSize, 100, | |
| "target content-box block size"); | |
| assert_equals(entries[0].borderBoxSize[0].inlineSize, 108, | |
| "target border-box inline size"); | |
| assert_equals(entries[0].borderBoxSize[0].blockSize, 108, | |
| "target border-box block size"); | |
| } | |
| }, | |
| { | |
| setup: observer => { | |
| t.style.width = "104px"; | |
| t.style.height = "104px"; | |
| t.style.padding = "2px"; | |
| }, | |
| notify: entries => { | |
| assert_unreached("the 'border-box' ResizeObserver shouldn't fire " + | |
| "for restyles that don't affect the border-box size"); | |
| }, | |
| timeout: () => { | |
| // expected: 104 + 2 * 2 = 108. The border-box size is the same. | |
| } | |
| } | |
| ]); | |
| return helper.start(() => t.remove()); | |
| } | |
| function test11() { | |
| let wrapper = createAndAppendElement("div"); | |
| wrapper.style.width = "100px"; | |
| wrapper.style.height = "100px"; | |
| wrapper.style.writingMode = "vertical-rl"; | |
| let t = createAndAppendElement("div", wrapper); | |
| t.style.inlineSize = "50px"; | |
| t.style.blockSize = "50px"; | |
| let helper = new ResizeTestHelper( | |
| "test11: simple observation with vertical writing mode", | |
| [ | |
| { | |
| setup: observer => { | |
| observer.observe(t); | |
| }, | |
| notify: entries => { | |
| assert_equals(entries.length, 1, "1 pending notification"); | |
| assert_equals(entries[0].target, t, "target is t"); | |
| assert_equals(entries[0].contentRect.width, 50, "target width"); | |
| assert_equals(entries[0].contentRect.height, 50, "target height"); | |
| assert_equals(entries[0].contentBoxSize[0].inlineSize, 50, | |
| "target content-box inline size"); | |
| assert_equals(entries[0].contentBoxSize[0].blockSize, 50, | |
| "target content-box block size"); | |
| assert_equals(entries[0].borderBoxSize[0].inlineSize, 50, | |
| "target border-box inline size"); | |
| assert_equals(entries[0].borderBoxSize[0].blockSize, 50, | |
| "target border-box block size"); | |
| return true; | |
| } | |
| }, | |
| { | |
| setup: observer => { | |
| t.style.blockSize = "75px"; | |
| }, | |
| notify: entries => { | |
| assert_equals(entries.length, 1, "1 pending notification"); | |
| assert_equals(entries[0].target, t, "target is t"); | |
| assert_equals(entries[0].contentRect.width, 75, "target width"); | |
| assert_equals(entries[0].contentRect.height, 50, "target height"); | |
| assert_equals(entries[0].contentBoxSize[0].inlineSize, 50, | |
| "target content-box inline size"); | |
| assert_equals(entries[0].contentBoxSize[0].blockSize, 75, | |
| "target content-box block size"); | |
| assert_equals(entries[0].borderBoxSize[0].inlineSize, 50, | |
| "target border-box inline size"); | |
| assert_equals(entries[0].borderBoxSize[0].blockSize, 75, | |
| "target border-box block size"); | |
| } | |
| } | |
| ]); | |
| return helper.start(() => { | |
| t.remove(); | |
| wrapper.remove(); | |
| }); | |
| } | |
| function test12() { | |
| let t = createAndAppendElement("div"); | |
| t.style.writingMode = "vertical-lr"; | |
| t.style.inlineSize = "100px"; | |
| t.style.blockSize = "50px"; | |
| let helper = new ResizeTestHelper( | |
| "test12: no observation is fired after the change of writing mode when " + | |
| "box's specified size comes from logical size properties.", | |
| [ | |
| { | |
| setup: observer => { | |
| observer.observe(t); | |
| }, | |
| notify: entries => { | |
| assert_equals(entries.length, 1, "1 pending notification"); | |
| assert_equals(entries[0].target, t, "target is t"); | |
| assert_equals(entries[0].contentRect.width, 50, "target width"); | |
| assert_equals(entries[0].contentRect.height, 100, "target height"); | |
| assert_equals(entries[0].contentBoxSize[0].inlineSize, 100, | |
| "target content-box inline size"); | |
| assert_equals(entries[0].contentBoxSize[0].blockSize, 50, | |
| "target content-box block size"); | |
| return true; | |
| } | |
| }, | |
| { | |
| setup: observer => { | |
| t.style.writingMode = "horizontal-tb"; | |
| }, | |
| notify: entries => { | |
| assert_unreached("the logical size of content-box doesn't change"); | |
| }, | |
| timeout: () => { | |
| // expected: We don't change the logical size of content-box. | |
| } | |
| } | |
| ]); | |
| return helper.start(() => t.remove()); | |
| } | |
| function test13() { | |
| let t = createAndAppendElement("div"); | |
| t.style.writingMode = "vertical-lr"; | |
| t.style.height = "100px"; | |
| t.style.width = "50px"; | |
| let helper = new ResizeTestHelper( | |
| "test13: an observation is fired after the change of writing mode when " + | |
| "box's specified size comes from physical size properties.", | |
| [ | |
| { | |
| setup: observer => { | |
| observer.observe(t); | |
| }, | |
| notify: entries => { | |
| assert_equals(entries.length, 1, "1 pending notification"); | |
| assert_equals(entries[0].target, t, "target is t"); | |
| assert_equals(entries[0].contentRect.width, 50, "target width"); | |
| assert_equals(entries[0].contentRect.height, 100, "target height"); | |
| assert_equals(entries[0].contentBoxSize[0].inlineSize, 100, | |
| "target content-box inline size"); | |
| assert_equals(entries[0].contentBoxSize[0].blockSize, 50, | |
| "target content-box block size"); | |
| return true; | |
| } | |
| }, | |
| { | |
| setup: observer => { | |
| t.style.writingMode = "horizontal-tb"; | |
| }, | |
| notify: entries => { | |
| assert_equals(entries.length, 1, "1 pending notification"); | |
| assert_equals(entries[0].target, t, "target is t"); | |
| assert_equals(entries[0].contentRect.width, 50, "target width"); | |
| assert_equals(entries[0].contentRect.height, 100, "target height"); | |
| assert_equals(entries[0].contentBoxSize[0].inlineSize, 50, | |
| "target content-box inline size"); | |
| assert_equals(entries[0].contentBoxSize[0].blockSize, 100, | |
| "target content-box block size"); | |
| }, | |
| } | |
| ]); | |
| return helper.start(() => t.remove()); | |
| } | |
| function test14() { | |
| let t = createAndAppendElement("div"); | |
| t.style.width = "100px"; | |
| t.style.height = "100px"; | |
| let helper = new ResizeTestHelper( | |
| "test14: observe the same target but using a different box should " + | |
| "override the previous one", | |
| [ | |
| { | |
| setup: observer => { | |
| observer.observe(t, { box: "content-box" }); | |
| observer.observe(t, { box: "border-box" }); | |
| }, | |
| notify: entries => { | |
| assert_equals(entries.length, 1, "1 pending notification"); | |
| assert_equals(entries[0].target, t, "target is t"); | |
| assert_equals(entries[0].contentRect.width, 100, "target width"); | |
| assert_equals(entries[0].contentRect.height, 100, "target height"); | |
| assert_equals(entries[0].contentRect.top, 0, "target top padding"); | |
| assert_equals(entries[0].contentRect.left, 0, "target left padding"); | |
| assert_equals(entries[0].contentBoxSize[0].inlineSize, 100, | |
| "target content-box inline size"); | |
| assert_equals(entries[0].contentBoxSize[0].blockSize, 100, | |
| "target content-box block size"); | |
| assert_equals(entries[0].borderBoxSize[0].inlineSize, 100, | |
| "target border-box inline size"); | |
| assert_equals(entries[0].borderBoxSize[0].blockSize, 100, | |
| "target border-box block size"); | |
| return true; | |
| } | |
| }, | |
| { | |
| setup: observer => { | |
| // Change border-box size. | |
| t.style.padding = "4px"; | |
| }, | |
| notify: entries => { | |
| assert_equals(entries.length, 1, "1 pending notification"); | |
| assert_equals(entries[0].target, t, "target is t"); | |
| assert_equals(entries[0].contentRect.width, 100, "target width"); | |
| assert_equals(entries[0].contentRect.height, 100, "target height"); | |
| assert_equals(entries[0].contentRect.top, 4, "target top padding"); | |
| assert_equals(entries[0].contentRect.left, 4, "target left padding"); | |
| assert_equals(entries[0].contentBoxSize[0].inlineSize, 100, | |
| "target content-box inline size"); | |
| assert_equals(entries[0].contentBoxSize[0].blockSize, 100, | |
| "target content-box block size"); | |
| assert_equals(entries[0].borderBoxSize[0].inlineSize, 108, | |
| "target border-box inline size"); | |
| assert_equals(entries[0].borderBoxSize[0].blockSize, 108, | |
| "target border-box block size"); | |
| } | |
| }, | |
| { | |
| setup: observer => { | |
| // Change only content-box size. | |
| t.style.width = "104px"; | |
| t.style.height = "104px"; | |
| t.style.padding = "2px"; | |
| }, | |
| notify: entries => { | |
| assert_unreached("the 'border-box' ResizeObserver shouldn't fire " + | |
| "for restyles that don't affect the border-box size"); | |
| }, | |
| timeout: () => { | |
| // expected: 104 + 2 * 2 = 108. The border-box size is the same. | |
| } | |
| } | |
| ]); | |
| return helper.start(() => t.remove()); | |
| } | |
| function test15() { | |
| let t = createAndAppendElement("div"); | |
| t.style.height = "100px"; | |
| t.style.width = "50px"; | |
| let helper = new ResizeTestHelper( | |
| "test15: an observation is fired with box dimensions 0 when element's " + | |
| "display property is set to inline", | |
| [ | |
| { | |
| setup: observer => { | |
| observer.observe(t); | |
| }, | |
| notify: entries => { | |
| assert_equals(entries.length, 1, "1 pending notification"); | |
| assert_equals(entries[0].target, t, "target is t"); | |
| assert_equals(entries[0].contentRect.width, 50, "target width"); | |
| assert_equals(entries[0].contentRect.height, 100, "target height"); | |
| assert_equals(entries[0].contentBoxSize[0].inlineSize, 50, | |
| "target content-box inline size"); | |
| assert_equals(entries[0].contentBoxSize[0].blockSize, 100, | |
| "target content-box block size"); | |
| assert_equals(entries[0].borderBoxSize[0].inlineSize, 50, | |
| "target content-box inline size"); | |
| assert_equals(entries[0].borderBoxSize[0].blockSize, 100, | |
| "target content-box block size"); | |
| return true; | |
| } | |
| }, | |
| { | |
| setup: observer => { | |
| t.style.display = "inline"; | |
| }, | |
| notify: entries => { | |
| assert_equals(entries[0].contentRect.width, 0, "target width"); | |
| assert_equals(entries[0].contentRect.height, 0, "target height"); | |
| assert_equals(entries[0].contentBoxSize[0].inlineSize, 0, | |
| "target content-box inline size"); | |
| assert_equals(entries[0].contentBoxSize[0].blockSize, 0, | |
| "target content-box block size"); | |
| assert_equals(entries[0].borderBoxSize[0].inlineSize, 0, | |
| "target border-box inline size"); | |
| assert_equals(entries[0].borderBoxSize[0].blockSize, 0, | |
| "target border-box block size"); | |
| } | |
| } | |
| ]); | |
| return helper.start(() => t.remove()); | |
| } | |
| function test16() { | |
| let t = createAndAppendElement("span"); | |
| let helper = new ResizeTestHelper( | |
| // See: https://drafts.csswg.org/resize-observer/#intro. | |
| "test16: observations do not fire for non-replaced inline elements", | |
| [ | |
| { | |
| setup: observer => { | |
| observer.observe(t); | |
| }, | |
| notify: entries => { | |
| assert_unreached("No observation should fire for non box element") | |
| }, | |
| timeout: () => {} | |
| } | |
| ]); | |
| return helper.start(() => t.remove()); | |
| } | |
| function test17() { | |
| // <div id="outer"> | |
| // <div id="nested"> | |
| // </div> | |
| // </div> | |
| let outer = document.createElement('div'); | |
| outer.style.width = "100px"; | |
| outer.style.height = "100px"; | |
| outer.style.padding = "10px"; | |
| outer.style.border = "1px solid blue" | |
| let nested = document.createElement('div'); | |
| nested.style.width = "60px"; | |
| nested.style.height = "50px"; | |
| nested.style.padding = "5%"; | |
| nested.style.boxSizing = "border-box"; | |
| nested.style.border = "5px solid black"; | |
| outer.appendChild(nested); | |
| document.body.appendChild(outer); | |
| let helper = new ResizeTestHelper( | |
| "test17: Box sizing snd Resize Observer notifications", | |
| [ | |
| { | |
| setup: observer => { | |
| observer.observe(nested, { box: "content-box" }); | |
| }, | |
| notify: entries => { | |
| assert_equals(entries.length, 1, "1 pending notification"); | |
| assert_equals(entries[0].target, nested, "target is nested"); | |
| assert_equals(entries[0].contentRect.width, 40, "target width"); | |
| assert_equals(entries[0].contentRect.height, 30, "target height"); | |
| assert_equals(entries[0].contentRect.top, 5, "target top padding"); | |
| assert_equals(entries[0].contentRect.left, 5, "target left padding"); | |
| assert_equals(entries[0].contentBoxSize[0].inlineSize, 40, | |
| "target content-box inline size"); | |
| assert_equals(entries[0].contentBoxSize[0].blockSize, 30, | |
| "target content-box block size"); | |
| assert_equals(entries[0].borderBoxSize[0].inlineSize, 60, | |
| "target border-box inline size"); | |
| assert_equals(entries[0].borderBoxSize[0].blockSize, 50, | |
| "target border-box block size"); | |
| return true; | |
| } | |
| }, | |
| { | |
| // Changes to a parent's dimensions with a child's padding set as a percentage | |
| // should fire observation if content-box is being observed | |
| setup: observer => { | |
| outer.style.height = "200px"; | |
| outer.style.width = "200px"; | |
| }, | |
| notify: entries => { | |
| assert_equals(entries.length, 1, "1 pending notification"); | |
| assert_equals(entries[0].target, nested, "target is nested"); | |
| assert_equals(entries[0].contentRect.width, 30, "target width"); | |
| assert_equals(entries[0].contentRect.height, 20, "target height"); | |
| assert_equals(entries[0].contentRect.top, 10, "target top padding"); | |
| assert_equals(entries[0].contentRect.left, 10, "target left padding"); | |
| assert_equals(entries[0].contentBoxSize[0].inlineSize, 30, | |
| "target content-box inline size"); | |
| assert_equals(entries[0].contentBoxSize[0].blockSize, 20, | |
| "target content-box block size"); | |
| assert_equals(entries[0].borderBoxSize[0].inlineSize, 60, | |
| "target border-box inline size"); | |
| assert_equals(entries[0].borderBoxSize[0].blockSize, 50, | |
| "target border-box block size"); | |
| return true; | |
| } | |
| }, | |
| { | |
| // Changes to a parent's dimensions with a child's padding set as a percentage | |
| // should fire observation if content-box is being observed | |
| setup: observer => { | |
| nested.style.border = "1px solid black"; | |
| }, | |
| notify: entries => { | |
| assert_equals(entries.length, 1, "1 pending notification"); | |
| assert_equals(entries[0].target, nested, "target is nested"); | |
| assert_equals(entries[0].contentRect.width, 38, "target width"); | |
| assert_equals(entries[0].contentRect.height, 28, "target height"); | |
| assert_equals(entries[0].contentRect.top, 10, "target top padding"); | |
| assert_equals(entries[0].contentRect.left, 10, "target left padding"); | |
| assert_equals(entries[0].contentBoxSize[0].inlineSize, 38, | |
| "target content-box inline size"); | |
| assert_equals(entries[0].contentBoxSize[0].blockSize, 28, | |
| "target content-box block size"); | |
| assert_equals(entries[0].borderBoxSize[0].inlineSize, 60, | |
| "target border-box inline size"); | |
| assert_equals(entries[0].borderBoxSize[0].blockSize, 50, | |
| "target border-box block size"); | |
| return true; | |
| } | |
| }, | |
| { | |
| setup: observer => { | |
| observer.observe(nested, { box: "border-box" }); | |
| }, | |
| notify: entries => { | |
| assert_equals(entries.length, 1, "1 pending notification"); | |
| assert_equals(entries[0].target, nested, "target is nested"); | |
| assert_equals(entries[0].contentRect.width, 38, "target width"); | |
| assert_equals(entries[0].contentRect.height, 28, "target height"); | |
| assert_equals(entries[0].contentRect.top, 10, "target top padding"); | |
| assert_equals(entries[0].contentRect.left, 10, "target left padding"); | |
| assert_equals(entries[0].contentBoxSize[0].inlineSize, 38, | |
| "target content-box inline size"); | |
| assert_equals(entries[0].contentBoxSize[0].blockSize, 28, | |
| "target content-box block size"); | |
| assert_equals(entries[0].borderBoxSize[0].inlineSize, 60, | |
| "target border-box inline size"); | |
| assert_equals(entries[0].borderBoxSize[0].blockSize, 50, | |
| "target border-box block size"); | |
| return true; | |
| } | |
| }, | |
| { | |
| // Changes to a parent's dimensions with a child's padding set as a percentage | |
| // should not fire observation if border-box is being observed | |
| setup: observer => { | |
| outer.style.height = "100px"; | |
| }, | |
| notify: entries => { | |
| assert_unreached("No observation should be fired when nested border box remains constant"); | |
| }, | |
| timeout: () => { | |
| // expected | |
| } | |
| }, | |
| ]); | |
| return helper.start(() => nested.remove()); | |
| } | |
| function test18() { | |
| let t = createAndAppendElement("div"); | |
| t.style.height = "100px"; | |
| t.style.width = "50px"; | |
| let helper = new ResizeTestHelper( | |
| "test18: an observation is fired when device-pixel-content-box is being " + | |
| "observed", | |
| [ | |
| { | |
| setup: observer => { | |
| observer.observe(t, {box: "device-pixel-content-box"}); | |
| }, | |
| notify: entries => { | |
| assert_equals(entries.length, 1, "1 pending notification"); | |
| assert_equals(entries[0].target, t, "target is t"); | |
| assert_equals(entries[0].contentRect.width, 50, "target width"); | |
| assert_equals(entries[0].contentRect.height, 100, "target height"); | |
| assert_equals(entries[0].contentBoxSize[0].inlineSize, 50, | |
| "target content-box inline size"); | |
| assert_equals(entries[0].contentBoxSize[0].blockSize, 100, | |
| "target content-box block size"); | |
| assert_equals(entries[0].borderBoxSize[0].inlineSize, 50, | |
| "target border-box inline size"); | |
| assert_equals(entries[0].borderBoxSize[0].blockSize, 100, | |
| "target border-box block size"); | |
| assert_equals(entries[0].devicePixelContentBoxSize[0].inlineSize, 50, | |
| "target device-pixel-content-box inline size"); | |
| assert_equals(entries[0].devicePixelContentBoxSize[0].blockSize, 100, | |
| "target device-pixel-content-box block size"); | |
| } | |
| }, | |
| ]); | |
| return helper.start(() => t.remove()); | |
| } | |
| function test19() { | |
| // zoom is not a standard css property, so we should check it first. If the | |
| // browser doesn't support it, we skip this test. | |
| if (!CSS.supports("zoom", "3")) { | |
| return Promise.resolve(); | |
| } | |
| let t = createAndAppendElement("div"); | |
| t.style.height = "100px"; | |
| t.style.width = "50px"; | |
| let helper = new ResizeTestHelper( | |
| "test19: an observation is fired when device-pixel-content-box is being " + | |
| "observed and zoom change", | |
| [ | |
| { | |
| setup: observer => { | |
| observer.observe(t, {box: "device-pixel-content-box"}); | |
| }, | |
| notify: entries => { | |
| // No need to test again (see test18), so skip this event loop. | |
| return true; | |
| } | |
| }, | |
| { | |
| setup: observer => { | |
| document.body.style.zoom = 3; | |
| }, | |
| notify: entries => { | |
| assert_equals(entries.length, 1, "1 pending notification"); | |
| assert_equals(entries[0].target, t, "target is t"); | |
| assert_equals(entries[0].contentRect.width, 50, "target width"); | |
| assert_equals(entries[0].contentRect.height, 100, "target height"); | |
| assert_equals(entries[0].contentBoxSize[0].inlineSize, 50, | |
| "target content-box inline size"); | |
| assert_equals(entries[0].contentBoxSize[0].blockSize, 100, | |
| "target content-box block size"); | |
| assert_equals(entries[0].borderBoxSize[0].inlineSize, 50, | |
| "target border-box inline size"); | |
| assert_equals(entries[0].borderBoxSize[0].blockSize, 100, | |
| "target border-box block size"); | |
| assert_equals(entries[0].devicePixelContentBoxSize[0].inlineSize, 150, | |
| "target device-pixel-content-box inline size"); | |
| assert_equals(entries[0].devicePixelContentBoxSize[0].blockSize, 300, | |
| "target device-pixel-content-box block size"); | |
| return true; | |
| } | |
| }, | |
| { | |
| setup: observer => { | |
| document.body.style.zoom = ''; | |
| }, | |
| notify: entries => {} | |
| } | |
| ]); | |
| return helper.start(() => t.remove()); | |
| } | |
| let guard; | |
| test(_ => { | |
| assert_own_property(window, "ResizeObserver"); | |
| guard = async_test('guard'); | |
| }, "ResizeObserver implemented") | |
| test0() | |
| .then(() => test1()) | |
| .then(() => test2()) | |
| .then(() => test3()) | |
| .then(() => test4()) | |
| .then(() => test5()) | |
| .then(() => test6()) | |
| .then(() => test7()) | |
| .then(() => test8()) | |
| .then(() => test9()) | |
| .then(() => test10()) | |
| .then(() => test11()) | |
| .then(() => test12()) | |
| .then(() => test13()) | |
| .then(() => test14()) | |
| .then(() => test15()) | |
| .then(() => test16()) | |
| .then(() => test17()) | |
| .then(() => test18()) | |
| .then(() => test19()) | |
| .then(() => guard.done()); | |
| </script> |