RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 06:57:44 +00:00
Code Issues Activity Actions

LibWeb: Implement gathering and broadcasting of resize observations

Browse source 
Extends event loop processing steps to include gathering and
broadcasting resize observations.

Moves layout updates from Navigable::paint() to event loop processing
steps. This ensures resize observation processing occurs between layout
updates and painting.
This commit is contained in:
Aliaksandr Kalenik 2024-02-19 05:10:05 +01:00 • committed by Andreas Kling
parent 8ba18dfd40
commit fcf293a8df
8 changed files with 287 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

57
Tests/LibWeb/Text/input/ResizeObserver/observe-border-box.html Normal file
View file

@ -0,0 +1,57 @@
<!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>

52
Tests/LibWeb/Text/input/ResizeObserver/observe.html Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<head>
<style>
#box {
width: 200px;
height: 200px;
background-color: lightblue;
}
</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;
println(`Size changed: ${width}px x ${height}px`);
}
if (resolve) resolve();
});
let observerCallbackInvocation = createResizeObserverPromise();
resizeObserver.observe(box);
await observerCallbackInvocation;
// Change size of box multiple times.
// Observer callback is expected to be invoked only once.
box.style.width = "300px";
box.style.height = "300px";
box.style.width = "400px";
box.style.height = "400px";
observerCallbackInvocation = createResizeObserverPromise();
await observerCallbackInvocation;
done();
});
</script>