<!DOCTYPE html>
<head>
<style>
#box {
width: 100px;
height: 200px;
background-color: lightblue;
border: 10px solid pink;
padding: 10px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script src="../include.js"></script>
<script>
asyncTest(async done => {
const box = document.getElementById("box");
let resolve = null;
function createResizeObserverPromise() {
return new Promise(r => {
resolve = r;
});
}
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
const { width, height } = entry.contentRect;
const borderBoxSize = entry.borderBoxSize[0];
const contentBoxSize = entry.contentBoxSize[0];
const deviceBoxSize = entry.devicePixelContentBoxSize[0];
let string = `contentSize: ${width}px x ${height}px`;
string += `; borderBoxSize [inline=${borderBoxSize.inlineSize}px, block=${borderBoxSize.blockSize}px]`;
string += `; contentBoxSize [inline=${contentBoxSize.inlineSize}px, block=${contentBoxSize.blockSize}px]`;
string += `; deviceBoxSize [inline=${deviceBoxSize.inlineSize}px, block=${deviceBoxSize.blockSize}px]`;
println(string);
}
if (resolve) resolve();
});
let observerCallbackInvocation = createResizeObserverPromise();
resizeObserver.observe(box, { box: "border-box" });
await observerCallbackInvocation;
box.style.borderTopWidth = "50px";
observerCallbackInvocation = createResizeObserverPromise();
await observerCallbackInvocation;
done();
});
</script>
