Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /resize-observer/observe-009.html - WPT Dashboard Interop Dashboard
<!doctype html>
<title>ResizeObserver test: simple content-box observation</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 test() {
let t = createAndAppendElement("div");
t.style.width = "100px";
t.style.height = "100px";
let helper = new ResizeTestHelper(
"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());
}
(async () => await test())();
</script>