mirror of
https://github.com/servo/servo.git
synced 2025-08-16 02:45:36 +01:00
Update web-platform-tests to revision e426a6933a05bf144eba06a1d4c47ba876a4e2d1
This commit is contained in:
WPT Sync Bot
parent
415b26e4f1
commit
5e5eccabf8
495 changed files with 14920 additions and 784 deletions
|
|
@ -1,57 +1,57 @@
|
|||
<!doctype html>
|
||||
<title>ResizeObserver tests</title>
|
||||
<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>
|
||||
<div id="target2" style="width:100px;height:100px;">t2</div>
|
||||
<img id="target3" style="width:100px;height:100px;">
|
||||
<iframe src="./resources/iframe.html" width="300px" height="100px" style="display:block"></iframe>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
let t1 = document.querySelector('#target1');
|
||||
let t2 = document.querySelector('#target2');
|
||||
|
||||
// allow uncaught exception because ResizeObserver posts exceptions
|
||||
// to window error handler when limit is exceeded.
|
||||
setup({allow_uncaught_exception: true});
|
||||
|
||||
function test0() {
|
||||
let t = createAndAppendElement("div");
|
||||
t.style.width = "100px";
|
||||
|
||||
let helper = new ResizeTestHelper(
|
||||
"test0: simple observation",
|
||||
[
|
||||
{
|
||||
setup: observer => {
|
||||
observer.observe(t1);
|
||||
t1.style.width = "5px";
|
||||
observer.observe(t);
|
||||
t.style.width = "5px";
|
||||
},
|
||||
notify: entries => {
|
||||
assert_equals(entries.length, 1, "1 pending notification");
|
||||
assert_equals(entries[0].target, t1, "target is t1");
|
||||
assert_equals(entries[0].target, t, "target is t");
|
||||
assert_equals(entries[0].contentRect.width, 5, "target width");
|
||||
}
|
||||
}
|
||||
]);
|
||||
return helper.start();
|
||||
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(t1);
|
||||
observer.observe(t1);
|
||||
t1.style.width = "10px";
|
||||
observer.observe(t);
|
||||
observer.observe(t);
|
||||
t.style.width = "10px";
|
||||
},
|
||||
notify: entries => {
|
||||
assert_equals(entries.length, 1, "1 pending notification");
|
||||
}
|
||||
}
|
||||
]);
|
||||
return helper.start();
|
||||
return helper.start(() => t.remove());
|
||||
}
|
||||
|
||||
function test2() {
|
||||
|
|
@ -67,6 +67,11 @@ function test2() {
|
|||
}
|
||||
|
||||
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", [
|
||||
{
|
||||
|
|
@ -84,10 +89,18 @@ function test3() {
|
|||
}
|
||||
}
|
||||
]);
|
||||
return helper.start();
|
||||
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", [
|
||||
{
|
||||
|
|
@ -105,61 +118,83 @@ function test4() {
|
|||
}
|
||||
}
|
||||
]);
|
||||
return helper.start();
|
||||
return helper.start(() => {
|
||||
t1.remove();
|
||||
t2.remove();
|
||||
});
|
||||
}
|
||||
|
||||
function test5() {
|
||||
let t3 = document.querySelector('#target3');
|
||||
let img = createAndAppendElement("img");
|
||||
img.style.width = "15px";
|
||||
img.style.height = "15px";
|
||||
img.src = "resources/image.png";
|
||||
|
||||
var helper = new ResizeTestHelper("test5: observe img",[
|
||||
{
|
||||
setup: observer => {
|
||||
observer.observe(t3);
|
||||
observer.observe(img);
|
||||
},
|
||||
notify: entries => {
|
||||
}
|
||||
},
|
||||
{
|
||||
setup: observer => {
|
||||
t3.style.width = "100.5px";
|
||||
img.style.width = "15.5px";
|
||||
},
|
||||
notify: entries => {
|
||||
assert_equals(entries.length, 1);
|
||||
assert_equals(entries[0].contentRect.width, 100.5);
|
||||
assert_equals(entries[0].contentRect.width, 15.5);
|
||||
}
|
||||
}
|
||||
]);
|
||||
return helper.start();
|
||||
return new Promise((resolve, reject) => {
|
||||
img.onload = () => resolve();
|
||||
}).then(() => {
|
||||
return helper.start(() => img.remove());
|
||||
});
|
||||
}
|
||||
|
||||
function test6() {
|
||||
let resolvePromise;
|
||||
let promise = new Promise((resolve) => {
|
||||
resolvePromise = resolve;
|
||||
});
|
||||
let test = async_test('test6: iframe notifications');
|
||||
let testRequested = false;
|
||||
let iframe = document.querySelector('iframe');
|
||||
window.addEventListener('message', event => {
|
||||
switch(event.data) {
|
||||
case 'readyToTest':
|
||||
if (!testRequested) {
|
||||
iframe.contentWindow.postMessage('startTest', '*');
|
||||
testRequested = true;
|
||||
}
|
||||
break;
|
||||
case 'success':
|
||||
case 'fail':
|
||||
window.requestAnimationFrame(() => {
|
||||
test.step( () => {
|
||||
assert_equals(event.data, 'success');
|
||||
test.done();
|
||||
resolvePromise();
|
||||
let iframe = createAndAppendElement("iframe");
|
||||
iframe.src = "./resources/iframe.html";
|
||||
iframe.width = "300px";
|
||||
iframe.height = "100px";
|
||||
iframe.style.display = "block";
|
||||
|
||||
return new Promise(function(resolve, reject) {
|
||||
iframe.onload = () => resolve();
|
||||
}).then(() => {
|
||||
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(() => {
|
||||
test.step( () => {
|
||||
assert_equals(event.data, 'success');
|
||||
test.done();
|
||||
resolvePromise();
|
||||
});
|
||||
});
|
||||
});
|
||||
break;
|
||||
}
|
||||
}, false);
|
||||
return promise;
|
||||
break;
|
||||
}
|
||||
}, false);
|
||||
return promise;
|
||||
});
|
||||
}
|
||||
|
||||
function test7() {
|
||||
|
|
@ -181,13 +216,427 @@ function test7() {
|
|||
});
|
||||
}
|
||||
);
|
||||
ro.observe(t1);
|
||||
|
||||
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.inlineSize, 100,
|
||||
"target content-box inline size");
|
||||
assert_equals(entries[0].contentBoxSize.blockSize, 100,
|
||||
"target content-box block size");
|
||||
assert_equals(entries[0].borderBoxSize.inlineSize, 100,
|
||||
"target border-box inline size");
|
||||
assert_equals(entries[0].borderBoxSize.blockSize, 100,
|
||||
"target border-box block size");
|
||||
}
|
||||
},
|
||||
{
|
||||
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.inlineSize, 90,
|
||||
"target content-box inline size");
|
||||
assert_equals(entries[0].contentBoxSize.blockSize, 90,
|
||||
"target content-box block size");
|
||||
assert_equals(entries[0].borderBoxSize.inlineSize, 90,
|
||||
"target border-box inline size");
|
||||
assert_equals(entries[0].borderBoxSize.blockSize, 90,
|
||||
"target border-box block size");
|
||||
}
|
||||
},
|
||||
{
|
||||
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.inlineSize, 100,
|
||||
"target content-box inline size");
|
||||
assert_equals(entries[0].contentBoxSize.blockSize, 100,
|
||||
"target content-box block size");
|
||||
assert_equals(entries[0].borderBoxSize.inlineSize, 100,
|
||||
"target border-box inline size");
|
||||
assert_equals(entries[0].borderBoxSize.blockSize, 100,
|
||||
"target border-box block size");
|
||||
}
|
||||
},
|
||||
{
|
||||
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.inlineSize, 92,
|
||||
"target content-box inline size");
|
||||
assert_equals(entries[0].contentBoxSize.blockSize, 92,
|
||||
"target content-box block size");
|
||||
assert_equals(entries[0].borderBoxSize.inlineSize, 100,
|
||||
"target border-box inline size");
|
||||
assert_equals(entries[0].borderBoxSize.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.inlineSize, 100,
|
||||
"target content-box inline size");
|
||||
assert_equals(entries[0].contentBoxSize.blockSize, 100,
|
||||
"target content-box block size");
|
||||
assert_equals(entries[0].borderBoxSize.inlineSize, 100,
|
||||
"target border-box inline size");
|
||||
assert_equals(entries[0].borderBoxSize.blockSize, 100,
|
||||
"target border-box block size");
|
||||
}
|
||||
},
|
||||
{
|
||||
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.inlineSize, 100,
|
||||
"target content-box inline size");
|
||||
assert_equals(entries[0].contentBoxSize.blockSize, 100,
|
||||
"target content-box block size");
|
||||
assert_equals(entries[0].borderBoxSize.inlineSize, 108,
|
||||
"target border-box inline size");
|
||||
assert_equals(entries[0].borderBoxSize.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.inlineSize, 50,
|
||||
"target content-box inline size");
|
||||
assert_equals(entries[0].contentBoxSize.blockSize, 50,
|
||||
"target content-box block size");
|
||||
assert_equals(entries[0].borderBoxSize.inlineSize, 50,
|
||||
"target border-box inline size");
|
||||
assert_equals(entries[0].borderBoxSize.blockSize, 50,
|
||||
"target border-box block size");
|
||||
}
|
||||
},
|
||||
{
|
||||
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.inlineSize, 50,
|
||||
"target content-box inline size");
|
||||
assert_equals(entries[0].contentBoxSize.blockSize, 75,
|
||||
"target content-box block size");
|
||||
assert_equals(entries[0].borderBoxSize.inlineSize, 50,
|
||||
"target border-box inline size");
|
||||
assert_equals(entries[0].borderBoxSize.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.inlineSize, 100,
|
||||
"target content-box inline size");
|
||||
assert_equals(entries[0].contentBoxSize.blockSize, 50,
|
||||
"target content-box block size");
|
||||
}
|
||||
},
|
||||
{
|
||||
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.inlineSize, 100,
|
||||
"target content-box inline size");
|
||||
assert_equals(entries[0].contentBoxSize.blockSize, 50,
|
||||
"target content-box block size");
|
||||
}
|
||||
},
|
||||
{
|
||||
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.inlineSize, 50,
|
||||
"target content-box inline size");
|
||||
assert_equals(entries[0].contentBoxSize.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.inlineSize, 100,
|
||||
"target content-box inline size");
|
||||
assert_equals(entries[0].contentBoxSize.blockSize, 100,
|
||||
"target content-box block size");
|
||||
assert_equals(entries[0].borderBoxSize.inlineSize, 100,
|
||||
"target border-box inline size");
|
||||
assert_equals(entries[0].borderBoxSize.blockSize, 100,
|
||||
"target border-box block size");
|
||||
}
|
||||
},
|
||||
{
|
||||
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.inlineSize, 100,
|
||||
"target content-box inline size");
|
||||
assert_equals(entries[0].contentBoxSize.blockSize, 100,
|
||||
"target content-box block size");
|
||||
assert_equals(entries[0].borderBoxSize.inlineSize, 108,
|
||||
"target border-box inline size");
|
||||
assert_equals(entries[0].borderBoxSize.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());
|
||||
}
|
||||
|
||||
let guard;
|
||||
test(_ => {
|
||||
assert_own_property(window, "ResizeObserver");
|
||||
|
|
@ -195,13 +644,20 @@ test(_ => {
|
|||
}, "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(() => { guard.done(); });
|
||||
.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(() => guard.done());
|
||||
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue