RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 23:37:36 +00:00
Code Issues Activity Actions

LibWeb: Implement the math-depth CSS property

Browse source 
This one is a bit fun because it can be `add(<integer>)` or `auto-add`,
but children have to inherit the computed value not the specified one.
We also have to compute it before computing the font-size, because of
`font-size: math` which will be implemented later.
This commit is contained in:
Sam Atkins 2023-09-07 15:29:54 +01:00 • committed by Sam Atkins
parent 53f3ed026a
commit 6476dea898
19 changed files with 285 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

14
Tests/LibWeb/Layout/expected/css-namespace-tag-name-selector.txt
View file

@ -1,6 +1,6 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x201.125 children: not-inline
BlockContainer <body> at (8,8) content-size 784x201.15625 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x155.46875 children: inline
line 0 width: 312, height: 155.46875, bottom: 155.46875, baseline: 152
frag 0 from SVGSVGBox start: 0, length: 0, rect: [9,9 300x150]
@ -16,24 +16,24 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
Box <a> at (8,8) content-size 100x100 children: inline
TextNode <#text>
TextNode <#text>
BlockContainer <div> at (9,164.46875) content-size 782x43.65625 children: inline
line 0 width: 101.453125, height: 43.65625, bottom: 43.65625, baseline: 33.828125
BlockContainer <div> at (9,164.46875) content-size 782x43.6875 children: inline
line 0 width: 101.453125, height: 43.6875, bottom: 43.6875, baseline: 33.84375
frag 0 from TextNode start: 0, length: 5, rect: [10,164.46875 99.453125x43.671875]
"Hello"
InlineNode <a>
TextNode <#text>
BlockContainer <(anonymous)> at (8,209.125) content-size 784x0 children: inline
BlockContainer <(anonymous)> at (8,209.15625) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x201.125]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x201.15625]
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x155.46875]
SVGSVGPaintable (SVGSVGBox<svg>) [8,8 302x152]
TextPaintable (TextNode<#text>)
PaintableBox (Box<math>) [318,50 2x110] overflow: [8,8 100x100]
PaintableBox (Box<a>) [8,8 100x100]
PaintableWithLines (BlockContainer<DIV>) [8,163.46875 784x45.65625] overflow: [9,164.46875 782x43.671875]
PaintableWithLines (BlockContainer<DIV>) [8,163.46875 784x45.6875]
InlinePaintable (InlineNode<A>)
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,209.125 784x0]
PaintableWithLines (BlockContainer(anonymous)) [8,209.15625 784x0]

6
Tests/LibWeb/Text/expected/css/math-depth.txt Normal file
View file

@ -0,0 +1,6 @@
0
1
1
1
2
2

26
Tests/LibWeb/Text/input/css/math-depth.html Normal file
View file

@ -0,0 +1,26 @@
<script src="../include.js"></script>
<script>
test(() => {
println(getComputedStyle(document.getElementById("a")).mathDepth);
println(getComputedStyle(document.getElementById("b")).mathDepth);
println(getComputedStyle(document.getElementById("c")).mathDepth);
println(getComputedStyle(document.getElementById("d")).mathDepth);
println(getComputedStyle(document.getElementById("e")).mathDepth);
println(getComputedStyle(document.getElementById("f")).mathDepth);
});
</script>
<style>
body { math-depth: 0; }
ul > li { math-depth: add(1); }
</style>
<body>
<ul id="a">
<li id="b"></li>
<li id="c">
<ul id="d">
<li id="e"></li>
<li id="f"></li>
</ul>
</li>
</ul>
</body>