eliott/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird synced 2026-05-05 06:32:30 +02:00
Code Issues Packages Projects Releases Wiki Activity

Tests: Add test for abspos in foreignObject with ancestor containing box

Browse Source 
This test covers the case where an absolutely positioned element inside
<foreignObject> has a containing block that is an ancestor of the <svg>.
It serves as a regression test for partial SVG relayout that is going
to be introduced in the upcoming changes.
This commit is contained in:
Aliaksandr Kalenik
2026-02-07 19:07:33 +01:00
committed by Alexander Kalenik
parent 5cefa59116
commit b1921f60ce
Notes: github-actions[bot] 2026-02-09 02:04:36 +00:00 
Author: https://github.com/kalenikaliaksandr
Commit: https://github.com/LadybirdBrowser/ladybird/commit/b1921f60ce7
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/7816
2 changed files with 77 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
Tests/LibWeb/Text/input/SVG/svg-foreignObject-abspos-with-ancestor-containing-block.html Normal file
View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<script src="../include.js"></script>
<style>
.container {
position: relative;
width: 200px;
height: 200px;
}
.abspos {
position: absolute;
top: 10px;
left: 10px;
width: 25%;
height: 25%;
background: green;
}
</style>
<div class="container">
<svg width="100" height="100">
<rect id="target" width="50" height="50" fill="blue"/>
<foreignObject width="100" height="100">
<div class="abspos" id="abspos"></div>
</foreignObject>
</svg>
</div>
<script>
asyncTest(done => {
// Force initial layout and capture "before" values without any DOM changes
// (println modifies the DOM, which would cause full relayout instead of partial SVG relayout)
document.body.offsetWidth;
const absposBefore = document.getElementById("abspos").getBoundingClientRect();
// Trigger partial SVG relayout by changing an SVG attribute
document.getElementById("target").setAttribute("transform", "translate(10,10)");
// Wait for layout to happen, then check values
requestAnimationFrame(() => {
requestAnimationFrame(() => {
const absposAfter = document.getElementById("abspos").getBoundingClientRect();
// Now it's safe to print (layout checks are done)
println(`Before SVG relayout:`);
println(` abspos width: ${absposBefore.width}`);
println(` abspos height: ${absposBefore.height}`);
println(` abspos x: ${absposBefore.x}`);
println(` abspos y: ${absposBefore.y}`);
println(`After SVG relayout:`);
println(` abspos width: ${absposAfter.width}`);
println(` abspos height: ${absposAfter.height}`);
println(` abspos x: ${absposAfter.x}`);
println(` abspos y: ${absposAfter.y}`);
println(`Abspos preserved after SVG relayout:`);
println(` width unchanged: ${absposAfter.width === absposBefore.width}`);
println(` height unchanged: ${absposAfter.height === absposBefore.height}`);
println(` x unchanged: ${absposAfter.x === absposBefore.x}`);
println(` y unchanged: ${absposAfter.y === absposBefore.y}`);
done();
});
});
});
</script>