0ct0pu5/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

LibWeb: Always blockify the root element

Browse source 
This is what the spec tells us to do:

    The root element’s display type is always blockified,
    and its principal box always establishes an independent
    formatting context.

    Additionally, a display of contents computes to block
    on the root element.

Spec link: https://drafts.csswg.org/css-display/#root

Fixes #1562
This commit is contained in:
Andreas Kling 2024-09-29 10:54:46 +02:00 • committed by Andreas Kling
parent f377bf862a
commit f1be662f68
Notes: github-actions[bot] 2024-09-29 09:47:03 +00:00
12 changed files with 44 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
Tests/LibWeb/Layout/expected/css-all-unset.txt
View file

@ -1,5 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: inline
InlineNode <html>
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x17 [BFC] children: inline
InlineNode <head>
InlineNode <style>
frag 0 from TextNode start: 1, length: 18, rect: [0,0 134.984375x17] baseline: 13.296875
@ -11,7 +11,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
InlinePaintable (InlineNode<HTML>)
PaintableWithLines (BlockContainer<HTML>) [0,0 800x17]
InlinePaintable (InlineNode<HEAD>)
InlinePaintable (InlineNode<STYLE>)
TextPaintable (TextNode<#text>)

11
Tests/LibWeb/Layout/expected/html-display-contents.txt Normal file
View file

@ -0,0 +1,11 @@
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 784x17 children: inline
frag 0 from TextNode start: 0, length: 3, rect: [8,8 18.828125x17] baseline: 13.296875
"lol"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x17]
TextPaintable (TextNode<#text>)

11
Tests/LibWeb/Layout/expected/html-display-inline.txt Normal file
View file

@ -0,0 +1,11 @@
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 784x17 children: inline
frag 0 from TextNode start: 0, length: 3, rect: [8,8 18.828125x17] baseline: 13.296875
"lol"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x17]
TextPaintable (TextNode<#text>)

2
Tests/LibWeb/Layout/expected/replaced-within-max-content.txt
View file

@ -7,7 +7,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
frag 0 from ImageBox start: 0, length: 0, rect: [8,8 150x150] baseline: 150
ImageBox <img.replaced> at (8,8) content-size 150x150 children: not-inline
(SVG-as-image isolated context)
Viewport <#document> at (0,0) content-size 150x150 [BFC] children: inline
Viewport <#document> at (0,0) content-size 150x150 [BFC] children: not-inline
SVGSVGBox <svg> at (0,0) content-size 150x150 [SVG] children: not-inline
SVGGeometryBox <path> at (0,0) content-size 150x150 children: not-inline
TextNode <#text>

2
Tests/LibWeb/Layout/expected/svg/svg-as-image-implicit-viewbox.txt
View file

@ -3,7 +3,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <body> at (8,8) content-size 784x100 children: not-inline
ImageBox <img> at (8,8) content-size 50x100 children: not-inline
(SVG-as-image isolated context)
Viewport <#document> at (0,0) content-size 50x100 [BFC] children: inline
Viewport <#document> at (0,0) content-size 50x100 [BFC] children: not-inline
SVGSVGBox <svg> at (0,0) content-size 50x100 [SVG] children: not-inline
SVGGeometryBox <rect> at (0,0) content-size 50x100 children: not-inline

2
Tests/LibWeb/Layout/expected/svg/svg-as-image.txt
View file

@ -3,7 +3,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <body> at (8,8) content-size 784x1568 children: not-inline
ImageBox <img> at (8,8) content-size 784x1568 children: not-inline
(SVG-as-image isolated context)
Viewport <#document> at (0,0) content-size 784x1568 [BFC] children: inline
Viewport <#document> at (0,0) content-size 784x1568 [BFC] children: not-inline
SVGSVGBox <svg> at (0,0) content-size 784x1568 [SVG] children: inline
TextNode <#text>
SVGGeometryBox <rect> at (0,0) content-size 784x1568 children: not-inline

6
Tests/LibWeb/Layout/expected/svg/svg-with-zero-intrinsic-size-and-no-viewbox.txt
View file

@ -1,9 +1,9 @@
Viewport <#document> at (0,0) content-size 800x600 children: inline
InlineNode <svg>
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <svg> at (0,0) content-size 800x0 children: inline
TextNode <#text>
InlineNode <rect>
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
InlinePaintable (InlineNode<svg>)
PaintableWithLines (BlockContainer<svg>) [0,0 800x0]
InlinePaintable (InlineNode<rect>)

2
Tests/LibWeb/Layout/expected/zero-height-viewport-svg-image.txt
View file

@ -4,7 +4,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
frag 0 from ImageBox start: 0, length: 0, rect: [8,8 300x150] baseline: 150
ImageBox <img> at (8,8) content-size 300x150 children: not-inline
(SVG-as-image isolated context)
Viewport <#document> at (0,0) content-size 300x150 [BFC] children: inline
Viewport <#document> at (0,0) content-size 300x150 [BFC] children: not-inline
SVGSVGBox <svg> at (0,0) content-size 300x150 [SVG] children: not-inline
TextNode <#text>

2
Tests/LibWeb/Layout/expected/zero-width-viewport-svg-image.txt
View file

@ -4,7 +4,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
frag 0 from ImageBox start: 0, length: 0, rect: [8,8 300x150] baseline: 150
ImageBox <img> at (8,8) content-size 300x150 children: not-inline
(SVG-as-image isolated context)
Viewport <#document> at (0,0) content-size 300x150 [BFC] children: inline
Viewport <#document> at (0,0) content-size 300x150 [BFC] children: not-inline
SVGSVGBox <svg> at (0,0) content-size 300x150 [SVG] children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]

1
Tests/LibWeb/Layout/input/html-display-contents.html Normal file
View file

@ -0,0 +1 @@
<html style="display:contents"><body>lol

1
Tests/LibWeb/Layout/input/html-display-inline.html Normal file
View file

@ -0,0 +1 @@
<html style="display:inline">lol

10
Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
View file

@ -2177,9 +2177,17 @@ void StyleComputer::transform_box_type_if_needed(StyleProperties& style, DOM::El
// (This has no effect on display types that generate no box at all, such as none or contents.)
auto display = style.display();
if (display.is_none() || display.is_contents())
if (display.is_none() || (display.is_contents() && !element.is_document_element()))
return;
// https://drafts.csswg.org/css-display/#root
// The root element’s display type is always blockified, and its principal box always establishes an independent formatting context.
if (element.is_document_element() && !display.is_block_outside()) {
style.set_property(CSS::PropertyID::Display, DisplayStyleValue::create(Display::from_short(CSS::Display::Short::Block)));
return;
}
auto new_display = display;
if (display.is_math_inside()) {