mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-25 03:36:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

Tests: Add some tests for partial layout tree updates

Browse source
This commit is contained in:
Andreas Kling 2025-01-13 15:53:03 +01:00 • committed by Andreas Kling
commit b798b1c07d
Notes: github-actions[bot] 2025-01-18 20:02:29 +00:00
10 changed files with 180 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

3
Tests/LibWeb/Text/expected/layout-tree-update/partial-layout-tree-update-1.txt Normal file
View file

@ -0,0 +1,3 @@
200px
100px
0px

3
Tests/LibWeb/Text/expected/layout-tree-update/partial-layout-tree-update-2.txt Normal file
View file

@ -0,0 +1,3 @@
200px
100px
0px

3
Tests/LibWeb/Text/expected/layout-tree-update/partial-layout-tree-update-3.txt Normal file
View file

@ -0,0 +1,3 @@
200px
100px
200px

3
Tests/LibWeb/Text/expected/layout-tree-update/partial-layout-tree-update-4.txt Normal file
View file

@ -0,0 +1,3 @@
18.8125px
36.625px
54.79688px

5
Tests/LibWeb/Text/expected/layout-tree-update/partial-layout-tree-update-5.txt Normal file
View file

@ -0,0 +1,5 @@
foo width: 160px
a width: 50px
b width: 50px
c width: 100px
foo width: 220px

37
Tests/LibWeb/Text/input/layout-tree-update/partial-layout-tree-update-1.html Normal file
View file

@ -0,0 +1,37 @@
<!doctype html>
<style>
* {
outline: 1px solid black;
}
#foo {
width: max-content;
display: flex;
}
</style>
<script src="../include.js"></script>
<body>
<div id="foo">
<template shadowrootmode="open">
<style>
div {
outline: 1px solid black;
width: 100px;
height: 100px;
}
</style>
<div id="a">a</div>
<div id="b">b</div>
</template>
</div>
</body>
<script>
test(() => {
const a = foo.shadowRoot.getElementById("a");
const b = foo.shadowRoot.getElementById("b");
println(getComputedStyle(foo).width);
a.remove();
println(getComputedStyle(foo).width);
b.remove();
println(getComputedStyle(foo).width);
});
</script>

30
Tests/LibWeb/Text/input/layout-tree-update/partial-layout-tree-update-2.html Normal file
View file

@ -0,0 +1,30 @@
<!doctype html>
<style>
* {
outline: 1px solid black;
}
#foo {
width: max-content;
display: flex;
}
#a, #b {
width: 100px;
height: 100px;
}
</style>
<script src="../include.js"></script>
<body>
<div id="foo">
<div id="a">a</div>
<div id="b">b</div>
</div>
</body>
<script>
test(() => {
println(getComputedStyle(foo).width);
a.remove();
println(getComputedStyle(foo).width);
b.remove();
println(getComputedStyle(foo).width);
});
</script>

32
Tests/LibWeb/Text/input/layout-tree-update/partial-layout-tree-update-3.html Normal file
View file

@ -0,0 +1,32 @@
<!doctype html>
<style>
* {
outline: 1px solid black;
}
#foo {
width: max-content;
display: flex;
}
#a, #b {
width: 100px;
height: 100px;
}
</style>
<script src="../include.js"></script>
<body>
<div id="foo">
<div id="a">a</div>
<div id="b">b</div>
</div>
</body>
<script>
test(() => {
const a = document.getElementById("a");
const b = document.getElementById("b");
println(getComputedStyle(foo).width);
a.remove();
println(getComputedStyle(foo).width);
foo.insertBefore(a, b);
println(getComputedStyle(foo).width);
});
</script>

26
Tests/LibWeb/Text/input/layout-tree-update/partial-layout-tree-update-4.html Normal file
View file

@ -0,0 +1,26 @@
<!doctype html>
<style>
* {
outline: 1px solid black;
}
#foo {
width: max-content;
display: flex;
}
</style>
<script src="../include.js"></script>
<body>
<div id="foo">
<div id="a">a</div>
<div id="b">b</div>
</div>
</body>
<script>
test(() => {
println(getComputedStyle(foo).width);
a.textContent = "foo";
println(getComputedStyle(foo).width);
b.textContent = "bar";
println(getComputedStyle(foo).width);
});
</script>

38
Tests/LibWeb/Text/input/layout-tree-update/partial-layout-tree-update-5.html Normal file
View file

@ -0,0 +1,38 @@
<!doctype html>
<style>
* {
outline: 1px solid black;
}
#foo {
width: max-content;
display: flex;
gap: 10px;
}
#foo div {
background: green;
width: 50px;
height: 50px;
}
#foo #c {
background: orange;
width: 100px;
height: 100px;
}
#container {
display: contents;
}
</style>
<script src="../include.js"></script>
<body><div id="foo"><div id="container"><div id="a"></div></div><div id="c"></div></body>
<script>
test(() => {
println("foo width: " + getComputedStyle(foo).width);
let b = document.createElement("div");
b.setAttribute("id", "b");
container.appendChild(b);
println("a width: " + getComputedStyle(a).width);
println("b width: " + getComputedStyle(b).width);
println("c width: " + getComputedStyle(c).width);
println("foo width: " + getComputedStyle(foo).width);
});
</script>