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

LibWeb: Improve style propagation to anonymous wrappers

Browse source 
- We now propagate changes in font and line-height to anonymous wrappers
  when doing a partial style update after invalidation.

- We no longer (incorrectly) propagate style from table wrapper boxes
  to the table root, since inheritance works in the other direction.

Fixes #22395
This commit is contained in:
Andreas Kling 2024-01-07 13:05:20 +01:00
parent 242d1d8eba
commit 4a35693dd7
6 changed files with 94 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

21
Tests/LibWeb/Layout/expected/style-invalidation-line-height-propagation.txt Normal file
View file

@ -0,0 +1,21 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x36 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x20 children: not-inline
BlockContainer <div> at (8,8) content-size 784x10 children: inline
line 0 width: 98, height: 10, bottom: 10, baseline: 9.796875
frag 0 from TextNode start: 0, length: 11, rect: [8,8 98x10]
"foo bar baz"
TextNode <#text>
BlockContainer <(anonymous)> at (8,18) content-size 784x10 children: inline
line 0 width: 98, height: 10, bottom: 10, baseline: 9.796875
frag 0 from TextNode start: 0, length: 11, rect: [8,18 98x10]
"foo bar baz"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x36]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x20]
PaintableWithLines (BlockContainer<DIV>) [8,8 784x10]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,18 784x10]
TextPaintable (TextNode<#text>)

20
Tests/LibWeb/Layout/expected/table/style-invalidation-propagation-to-table-wrapper.txt Normal file
View file

@ -0,0 +1,20 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x120 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x104 children: not-inline
BlockContainer <center> at (8,8) content-size 784x104 children: not-inline
TableWrapper <(anonymous)> at (204,8) content-size 392x104 [BFC] children: not-inline
Box <table> at (204,8) content-size 392x104 table-box [TFC] children: not-inline
Box <tbody> at (204,8) content-size 388x100 table-row-group children: not-inline
Box <tr> at (206,10) content-size 388x100 table-row children: not-inline
BlockContainer <td> at (207,60) content-size 386x0 table-cell [BFC] children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x120]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x104]
PaintableWithLines (BlockContainer<CENTER>) [8,8 784x104]
PaintableWithLines (TableWrapper(anonymous)) [204,8 392x104]
PaintableBox (Box<TABLE>) [204,8 392x104]
PaintableBox (Box<TBODY>) [204,8 388x100] overflow: [204,8 390x102]
PaintableBox (Box<TR>) [206,10 388x100]
PaintableWithLines (BlockContainer<TD>) [206,10 388x100]

13
Tests/LibWeb/Layout/input/style-invalidation-line-height-propagation.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html><style>
* {
outline: 1px solid black;
}
body {
line-height: 20px;
}
</style><script>
document.addEventListener("DOMContentLoaded", function() {
document.body.offsetWidth // Force a layout
document.body.style.lineHeight = '10px' // Trigger a line-height change that everyone should inherit
});
</script><body><div>foo bar baz</div>foo bar baz

17
Tests/LibWeb/Layout/input/table/style-invalidation-propagation-to-table-wrapper.html Normal file
View file

@ -0,0 +1,17 @@
<!doctype html><style>
body {
background: black;
}
table {
background: white;
width: 50%;
}
td {
height: 100px;
background: magenta;
}
</style><center><table><td><script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelector("center").style.left = "1px";
});
</script>