LibWeb: Don't mess up the order of nodes when wrapping inline contents

Whenever we introduce a block element in a container that at that point
has only had inline children, we create an anonymous wrapper for all the
inline elements so we can keep the invariant that each container
contains either inline or non-inline children. For some reason, we
ignore all the out-of-flow nodes since they are layed out separately and
it was thought that this shouldn't matter.

However, if we are dealing with inline blocks and floating blocks, the
order of the inline contents _including_ out-of-flow nodes becomes very
important: floating blocks need to take the order of nodes into account
when positioning themselves.

Fix this by simply hoisting the out-of-flow nodes into the anonymous
wrapper as well.

Fixes the order of blocks in #4212. The gap is still not present.
This commit is contained in:
Jelle Raaijmakers 2025-04-23 22:26:45 +02:00 committed by Andreas Kling
commit 6f800caeaa
Notes: github-actions[bot] 2025-04-24 17:13:52 +00:00
14 changed files with 112 additions and 52 deletions

View file

@ -19,8 +19,6 @@
#include <LibWeb/DOM/ShadowRoot.h> #include <LibWeb/DOM/ShadowRoot.h>
#include <LibWeb/Dump.h> #include <LibWeb/Dump.h>
#include <LibWeb/HTML/HTMLInputElement.h> #include <LibWeb/HTML/HTMLInputElement.h>
#include <LibWeb/HTML/HTMLLIElement.h>
#include <LibWeb/HTML/HTMLOListElement.h>
#include <LibWeb/HTML/HTMLSlotElement.h> #include <LibWeb/HTML/HTMLSlotElement.h>
#include <LibWeb/Layout/FieldSetBox.h> #include <LibWeb/Layout/FieldSetBox.h>
#include <LibWeb/Layout/ListItemBox.h> #include <LibWeb/Layout/ListItemBox.h>
@ -128,12 +126,8 @@ static Layout::Node& insertion_parent_for_block_node(Layout::NodeWithStyle& layo
// Parent block has inline-level children (our siblings); wrap these siblings into an anonymous wrapper block. // Parent block has inline-level children (our siblings); wrap these siblings into an anonymous wrapper block.
Vector<GC::Ref<Node>> children; Vector<GC::Ref<Node>> children;
for (GC::Ptr<Node> child = layout_parent.first_child(); child; child = child->next_sibling()) { for (GC::Ptr<Node> child = layout_parent.first_child(); child; child = child->next_sibling())
// NOTE: We let out-of-flow children stay in the parent, to preserve tree structure.
if (child->is_out_of_flow())
continue;
children.append(*child); children.append(*child);
}
auto wrapper = layout_parent.create_anonymous_wrapper(); auto wrapper = layout_parent.create_anonymous_wrapper();
wrapper->set_children_are_inline(true); wrapper->set_children_are_inline(true);

View file

@ -3,15 +3,15 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline
TextNode <#text> TextNode <#text>
BlockContainer <body> at (8,8) content-size 784x34 children: not-inline BlockContainer <body> at (8,8) content-size 784x34 children: not-inline
BlockContainer <div.big-float> at (8,8) content-size 100x100 floating [BFC] children: not-inline
BlockContainer <div.xxx> at (108,8) content-size 29.109375x17 floating [BFC] children: inline
frag 0 from TextNode start: 0, length: 3, rect: [108,8 29.109375x17] baseline: 13.296875
"xxx"
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 784x17 children: inline BlockContainer <(anonymous)> at (8,8) content-size 784x17 children: inline
frag 0 from TextNode start: 1, length: 3, rect: [137.109375,8 27.640625x17] baseline: 13.296875 frag 0 from TextNode start: 1, length: 3, rect: [137.109375,8 27.640625x17] baseline: 13.296875
"bar" "bar"
BlockContainer <div.big-float> at (8,8) content-size 100x100 floating [BFC] children: not-inline
TextNode <#text> TextNode <#text>
BlockContainer <div.xxx> at (108,8) content-size 29.109375x17 floating [BFC] children: inline
frag 0 from TextNode start: 0, length: 3, rect: [108,8 29.109375x17] baseline: 13.296875
"xxx"
TextNode <#text>
TextNode <#text> TextNode <#text>
BlockContainer <div> at (8,25) content-size 784x17 children: inline BlockContainer <div> at (8,25) content-size 784x17 children: inline
frag 0 from TextNode start: 1, length: 3, rect: [129.515625,25 27.203125x17] baseline: 13.296875 frag 0 from TextNode start: 1, length: 3, rect: [129.515625,25 27.203125x17] baseline: 13.296875
@ -28,11 +28,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600] ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x108] PaintableWithLines (BlockContainer<HTML>) [0,0 800x108]
PaintableWithLines (BlockContainer(anonymous)) [0,0 800x0] PaintableWithLines (BlockContainer(anonymous)) [0,0 800x0]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x34] overflow: [8,8 784x100] PaintableWithLines (BlockContainer<BODY>) [8,8 784x34]
PaintableWithLines (BlockContainer<DIV>.big-float) [8,8 100x100]
PaintableWithLines (BlockContainer<DIV>.xxx) [108,8 29.109375x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x17] PaintableWithLines (BlockContainer(anonymous)) [8,8 784x17]
PaintableWithLines (BlockContainer<DIV>.big-float) [8,8 100x100]
PaintableWithLines (BlockContainer<DIV>.xxx) [108,8 29.109375x17]
TextPaintable (TextNode<#text>)
TextPaintable (TextNode<#text>) TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>) [8,25 784x17] PaintableWithLines (BlockContainer<DIV>) [8,25 784x17]
PaintableWithLines (BlockContainer<DIV>.yyy) [108,25 21.515625x17] PaintableWithLines (BlockContainer<DIV>.yyy) [108,25 21.515625x17]

View file

@ -2,9 +2,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x100 children: not-inline BlockContainer <body> at (8,8) content-size 784x100 children: not-inline
BlockContainer <div> at (8,8) content-size 784x100 children: not-inline BlockContainer <div> at (8,8) content-size 784x100 children: not-inline
BlockContainer <div.square.white> at (8,8) content-size 100x100 floating [BFC] children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text> TextNode <#text>
BlockContainer <div.square.white> at (8,8) content-size 100x100 floating [BFC] children: not-inline
TextNode <#text> TextNode <#text>
BlockContainer <div.clearfix> at (8,108) content-size 784x0 children: not-inline BlockContainer <div.clearfix> at (8,108) content-size 784x0 children: not-inline
BlockContainer <(anonymous)> at (8,108) content-size 784x0 children: inline BlockContainer <(anonymous)> at (8,108) content-size 784x0 children: inline
@ -18,8 +18,8 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600] PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x100] PaintableWithLines (BlockContainer<BODY>) [8,8 784x100]
PaintableWithLines (BlockContainer<DIV>) [8,8 784x100] PaintableWithLines (BlockContainer<DIV>) [8,8 784x100]
PaintableWithLines (BlockContainer<DIV>.square.white) [8,8 100x100]
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0] PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
PaintableWithLines (BlockContainer<DIV>.square.white) [8,8 100x100]
PaintableWithLines (BlockContainer<DIV>.clearfix) [8,108 784x0] PaintableWithLines (BlockContainer<DIV>.clearfix) [8,108 784x0]
PaintableWithLines (BlockContainer(anonymous)) [8,108 784x0] PaintableWithLines (BlockContainer(anonymous)) [8,108 784x0]
PaintableWithLines (BlockContainer<DIV>.square.black) [8,108 49x49] PaintableWithLines (BlockContainer<DIV>.square.black) [8,108 49x49]

View file

@ -3,9 +3,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline
TextNode <#text> TextNode <#text>
BlockContainer <body> at (8,8) content-size 784x17 children: not-inline BlockContainer <body> at (8,8) content-size 784x17 children: not-inline
BlockContainer <div#b> at (9,9) content-size 50x50 floating [BFC] children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text> TextNode <#text>
BlockContainer <div#b> at (9,9) content-size 50x50 floating [BFC] children: not-inline
TextNode <#text> TextNode <#text>
BlockContainer <div#a> at (8,8) content-size 784x17 children: inline BlockContainer <div#a> at (8,8) content-size 784x17 children: inline
frag 0 from TextNode start: 0, length: 4, rect: [60,8 37.578125x17] baseline: 13.296875 frag 0 from TextNode start: 0, length: 4, rect: [60,8 37.578125x17] baseline: 13.296875
@ -17,9 +17,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600] ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x60] PaintableWithLines (BlockContainer<HTML>) [0,0 800x60]
PaintableWithLines (BlockContainer(anonymous)) [0,0 800x0] PaintableWithLines (BlockContainer(anonymous)) [0,0 800x0]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x17] overflow: [8,8 784x52] PaintableWithLines (BlockContainer<BODY>) [8,8 784x17]
PaintableWithLines (BlockContainer<DIV>#b) [8,8 52x52]
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0] PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
PaintableWithLines (BlockContainer<DIV>#b) [8,8 52x52]
PaintableWithLines (BlockContainer<DIV>#a) [8,8 784x17] PaintableWithLines (BlockContainer<DIV>#a) [8,8 784x17]
TextPaintable (TextNode<#text>) TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,25 784x0] PaintableWithLines (BlockContainer(anonymous)) [8,25 784x0]

View file

@ -1,8 +1,8 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x157 [BFC] children: not-inline BlockContainer <html> at (0,0) content-size 800x157 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x133 children: not-inline BlockContainer <body> at (8,8) content-size 784x133 children: not-inline
BlockContainer <div.a> at (8,8) content-size 100x100 floating [BFC] children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x100 children: inline BlockContainer <(anonymous)> at (8,8) content-size 784x100 children: inline
BlockContainer <div.a> at (8,8) content-size 100x100 floating [BFC] children: not-inline
TextNode <#text> TextNode <#text>
BreakNode <br.b> BreakNode <br.b>
TextNode <#text> TextNode <#text>
@ -16,8 +16,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600] ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x157] PaintableWithLines (BlockContainer<HTML>) [0,0 800x157]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x133] PaintableWithLines (BlockContainer<BODY>) [8,8 784x133]
PaintableWithLines (BlockContainer<DIV>.a) [8,8 100x100]
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x100] PaintableWithLines (BlockContainer(anonymous)) [8,8 784x100]
PaintableWithLines (BlockContainer<DIV>.a) [8,8 100x100]
PaintableWithLines (BlockContainer<P>) [8,124 784x17] PaintableWithLines (BlockContainer<P>) [8,124 784x17]
TextPaintable (TextNode<#text>) TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,157 784x0] PaintableWithLines (BlockContainer(anonymous)) [8,157 784x0]

View file

@ -1,8 +1,8 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 650x466 [BFC] children: not-inline BlockContainer <html> at (0,0) content-size 650x466 [BFC] children: not-inline
BlockContainer <body> at (8,16) content-size 634x384 children: not-inline BlockContainer <body> at (8,16) content-size 634x384 children: not-inline
BlockContainer <div.a> at (342,16) content-size 300x225 floating [BFC] children: not-inline
BlockContainer <(anonymous)> at (8,16) content-size 634x0 children: inline BlockContainer <(anonymous)> at (8,16) content-size 634x0 children: inline
BlockContainer <div.a> at (342,16) content-size 300x225 floating [BFC] children: not-inline
TextNode <#text> TextNode <#text>
BlockContainer <p> at (8,16) content-size 634x68 children: inline BlockContainer <p> at (8,16) content-size 634x68 children: inline
frag 0 from TextNode start: 0, length: 27, rect: [8,16 232.84375x17] baseline: 13.296875 frag 0 from TextNode start: 0, length: 27, rect: [8,16 232.84375x17] baseline: 13.296875
@ -25,8 +25,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600] ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 650x466] PaintableWithLines (BlockContainer<HTML>) [0,0 650x466]
PaintableWithLines (BlockContainer<BODY>) [8,16 634x384] PaintableWithLines (BlockContainer<BODY>) [8,16 634x384]
PaintableWithLines (BlockContainer<DIV>.a) [342,16 300x225]
PaintableWithLines (BlockContainer(anonymous)) [8,16 634x0] PaintableWithLines (BlockContainer(anonymous)) [8,16 634x0]
PaintableWithLines (BlockContainer<DIV>.a) [342,16 300x225]
PaintableWithLines (BlockContainer<P>) [8,16 634x68] PaintableWithLines (BlockContainer<P>) [8,16 634x68]
TextPaintable (TextNode<#text>) TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,100 634x0] PaintableWithLines (BlockContainer(anonymous)) [8,100 634x0]

View file

@ -1,8 +1,8 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,16) content-size 784x51 children: not-inline BlockContainer <body> at (8,16) content-size 784x51 children: not-inline
BlockContainer <div> at (8,16) content-size 50x50 floating [BFC] children: not-inline
BlockContainer <(anonymous)> at (8,16) content-size 784x0 children: inline BlockContainer <(anonymous)> at (8,16) content-size 784x0 children: inline
BlockContainer <div> at (8,16) content-size 50x50 floating [BFC] children: not-inline
TextNode <#text> TextNode <#text>
BlockContainer <p> at (8,16) content-size 784x51 children: inline BlockContainer <p> at (8,16) content-size 784x51 children: inline
frag 0 from TextNode start: 0, length: 1, rect: [58,16 14.265625x17] baseline: 13.296875 frag 0 from TextNode start: 0, length: 1, rect: [58,16 14.265625x17] baseline: 13.296875
@ -23,8 +23,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600] ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600] PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,16 784x51] overflow: [8,16 784x117] PaintableWithLines (BlockContainer<BODY>) [8,16 784x51] overflow: [8,16 784x117]
PaintableWithLines (BlockContainer<DIV>) [8,16 50x50]
PaintableWithLines (BlockContainer(anonymous)) [8,16 784x0] PaintableWithLines (BlockContainer(anonymous)) [8,16 784x0]
PaintableWithLines (BlockContainer<DIV>) [8,16 50x50]
PaintableWithLines (BlockContainer<P>) [8,16 784x51] PaintableWithLines (BlockContainer<P>) [8,16 784x51]
TextPaintable (TextNode<#text>) TextPaintable (TextNode<#text>)
TextPaintable (TextNode<#text>) TextPaintable (TextNode<#text>)

View file

@ -0,0 +1,40 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x308 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x103 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x103 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [8,8 100x100] baseline: 100
frag 1 from TextNode start: 0, length: 1, rect: [108,94 8x17] baseline: 13.296875
" "
frag 2 from BlockContainer start: 0, length: 0, rect: [116,8 100x100] baseline: 100
TextNode <#text>
BlockContainer <div.a> at (8,8) content-size 100x100 inline-block [BFC] children: not-inline
BlockContainer <div.box.green> at (8,8) content-size 100x100 children: not-inline
TextNode <#text>
BlockContainer <div.b> at (8,108) content-size 784x100 floating [BFC] children: not-inline
BlockContainer <div.box.blue> at (8,108) content-size 100x100 children: not-inline
TextNode <#text>
BlockContainer <div.a> at (116,8) content-size 100x100 inline-block [BFC] children: not-inline
BlockContainer <div.box.green> at (116,8) content-size 100x100 children: not-inline
TextNode <#text>
BlockContainer <div.b> at (8,208) content-size 784x100 floating [BFC] children: not-inline
BlockContainer <div.box.blue> at (8,208) content-size 100x100 children: not-inline
TextNode <#text>
BlockContainer <div> at (8,111) content-size 784x0 children: not-inline
BlockContainer <(anonymous)> at (8,111) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x308]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x103]
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x103]
PaintableWithLines (BlockContainer<DIV>.a) [8,8 100x100]
PaintableWithLines (BlockContainer<DIV>.box.green) [8,8 100x100]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.b) [8,108 784x100]
PaintableWithLines (BlockContainer<DIV>.box.blue) [8,108 100x100]
PaintableWithLines (BlockContainer<DIV>.a) [116,8 100x100]
PaintableWithLines (BlockContainer<DIV>.box.green) [116,8 100x100]
PaintableWithLines (BlockContainer<DIV>.b) [8,208 784x100]
PaintableWithLines (BlockContainer<DIV>.box.blue) [8,208 100x100]
PaintableWithLines (BlockContainer<DIV>) [8,111 784x0]
PaintableWithLines (BlockContainer(anonymous)) [8,111 784x0]

View file

@ -3,19 +3,19 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline
TextNode <#text> TextNode <#text>
BlockContainer <body> at (8,8) content-size 784x600 children: not-inline BlockContainer <body> at (8,8) content-size 784x600 children: not-inline
BlockContainer <div.blue.absolute> at (208,208) content-size 200x200 positioned [BFC] children: inline
TextNode <#text>
BlockContainer <div.red.absolute> at (308,308) content-size 100x100 positioned [BFC] children: not-inline
TextNode <#text>
BlockContainer <div.yellow.absolute> at (258,258) content-size 100x100 positioned [BFC] children: inline
TextNode <#text>
BlockContainer <div.black.absolute> at (308,308) content-size 50x50 positioned [BFC] children: not-inline
TextNode <#text>
TextNode <#text>
BlockContainer <div.green.absolute> at (508,508) content-size 100x100 positioned [BFC] children: not-inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text> TextNode <#text>
BlockContainer <div.blue.absolute> at (208,208) content-size 200x200 positioned [BFC] children: inline
TextNode <#text>
BlockContainer <div.red.absolute> at (308,308) content-size 100x100 positioned [BFC] children: not-inline
TextNode <#text>
BlockContainer <div.yellow.absolute> at (258,258) content-size 100x100 positioned [BFC] children: inline
TextNode <#text>
BlockContainer <div.black.absolute> at (308,308) content-size 50x50 positioned [BFC] children: not-inline
TextNode <#text>
TextNode <#text>
BlockContainer <div.green.absolute> at (508,508) content-size 100x100 positioned [BFC] children: not-inline
TextNode <#text>
TextNode <#text> TextNode <#text>
BlockContainer <div.blue> at (8,8) content-size 200x200 children: not-inline BlockContainer <div.blue> at (8,8) content-size 200x200 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 200x0 children: inline BlockContainer <(anonymous)> at (8,8) content-size 200x0 children: inline
@ -39,12 +39,12 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x616]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x616] PaintableWithLines (BlockContainer<HTML>) [0,0 800x616]
PaintableWithLines (BlockContainer(anonymous)) [0,0 800x0] PaintableWithLines (BlockContainer(anonymous)) [0,0 800x0]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x600] PaintableWithLines (BlockContainer<BODY>) [8,8 784x600]
PaintableWithLines (BlockContainer<DIV>.blue.absolute) [208,208 200x200]
PaintableWithLines (BlockContainer<DIV>.red.absolute) [308,308 100x100]
PaintableWithLines (BlockContainer<DIV>.yellow.absolute) [258,258 100x100]
PaintableWithLines (BlockContainer<DIV>.black.absolute) [308,308 50x50]
PaintableWithLines (BlockContainer<DIV>.green.absolute) [508,508 100x100]
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0] PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
PaintableWithLines (BlockContainer<DIV>.blue.absolute) [208,208 200x200]
PaintableWithLines (BlockContainer<DIV>.red.absolute) [308,308 100x100]
PaintableWithLines (BlockContainer<DIV>.yellow.absolute) [258,258 100x100]
PaintableWithLines (BlockContainer<DIV>.black.absolute) [308,308 50x50]
PaintableWithLines (BlockContainer<DIV>.green.absolute) [508,508 100x100]
PaintableWithLines (BlockContainer<DIV>.blue) [8,8 200x200] overflow: [8,8 200x300] PaintableWithLines (BlockContainer<DIV>.blue) [8,8 200x200] overflow: [8,8 200x300]
PaintableWithLines (BlockContainer(anonymous)) [8,8 200x0] PaintableWithLines (BlockContainer(anonymous)) [8,8 200x0]
PaintableWithLines (BlockContainer<DIV>.red) [8,8 100x100] PaintableWithLines (BlockContainer<DIV>.red) [8,8 100x100]

View file

@ -9,9 +9,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (8,16) content-size 1280x0 children: inline BlockContainer <(anonymous)> at (8,16) content-size 1280x0 children: inline
TextNode <#text> TextNode <#text>
BlockContainer <div> at (8,16) content-size 1280x400 children: not-inline BlockContainer <div> at (8,16) content-size 1280x400 children: not-inline
ImageBox <img> at (488,16) content-size 800x400 floating children: not-inline
BlockContainer <(anonymous)> at (8,16) content-size 1280x0 children: inline BlockContainer <(anonymous)> at (8,16) content-size 1280x0 children: inline
TextNode <#text> TextNode <#text>
ImageBox <img> at (488,16) content-size 800x0 floating children: not-inline
TextNode <#text> TextNode <#text>
BlockContainer <p> at (8,16) content-size 1280x17 children: inline BlockContainer <p> at (8,16) content-size 1280x17 children: inline
frag 0 from TextNode start: 0, length: 4, rect: [8,16 37.21875x17] baseline: 13.296875 frag 0 from TextNode start: 0, length: 4, rect: [8,16 37.21875x17] baseline: 13.296875
@ -32,8 +32,8 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 1288x824]
PaintableWithLines (BlockContainer<DIV>.foo) [8,16 1280x800] PaintableWithLines (BlockContainer<DIV>.foo) [8,16 1280x800]
PaintableWithLines (BlockContainer(anonymous)) [8,16 1280x0] PaintableWithLines (BlockContainer(anonymous)) [8,16 1280x0]
PaintableWithLines (BlockContainer<DIV>) [8,16 1280x400] PaintableWithLines (BlockContainer<DIV>) [8,16 1280x400]
ImagePaintable (ImageBox<IMG>) [488,16 800x400]
PaintableWithLines (BlockContainer(anonymous)) [8,16 1280x0] PaintableWithLines (BlockContainer(anonymous)) [8,16 1280x0]
ImagePaintable (ImageBox<IMG>) [488,16 800x0]
PaintableWithLines (BlockContainer<P>) [8,16 1280x17] PaintableWithLines (BlockContainer<P>) [8,16 1280x17]
TextPaintable (TextNode<#text>) TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,49 1280x0] PaintableWithLines (BlockContainer(anonymous)) [8,49 1280x0]

View file

@ -3,9 +3,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline
TextNode <#text> TextNode <#text>
BlockContainer <body> at (8,16) content-size 784x17 children: not-inline BlockContainer <body> at (8,16) content-size 784x17 children: not-inline
ImageBox <img> at (8,16) content-size 200x100 floating children: not-inline
BlockContainer <(anonymous)> at (8,16) content-size 784x0 children: inline BlockContainer <(anonymous)> at (8,16) content-size 784x0 children: inline
TextNode <#text> TextNode <#text>
ImageBox <img> at (8,16) content-size 200x100 floating children: not-inline
TextNode <#text> TextNode <#text>
BlockContainer <p> at (8,16) content-size 784x17 children: inline BlockContainer <p> at (8,16) content-size 784x17 children: inline
frag 0 from TextNode start: 0, length: 4, rect: [228,16 37.21875x17] baseline: 13.296875 frag 0 from TextNode start: 0, length: 4, rect: [228,16 37.21875x17] baseline: 13.296875
@ -17,9 +17,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600] ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x116] PaintableWithLines (BlockContainer<HTML>) [0,0 800x116]
PaintableWithLines (BlockContainer(anonymous)) [0,0 800x0] PaintableWithLines (BlockContainer(anonymous)) [0,0 800x0]
PaintableWithLines (BlockContainer<BODY>) [8,16 784x17] overflow: [8,16 784x100] PaintableWithLines (BlockContainer<BODY>) [8,16 784x17]
ImagePaintable (ImageBox<IMG>) [8,16 200x100]
PaintableWithLines (BlockContainer(anonymous)) [8,16 784x0] PaintableWithLines (BlockContainer(anonymous)) [8,16 784x0]
ImagePaintable (ImageBox<IMG>) [8,16 200x100]
PaintableWithLines (BlockContainer<P>) [8,16 784x17] PaintableWithLines (BlockContainer<P>) [8,16 784x17]
TextPaintable (TextNode<#text>) TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,49 784x0] PaintableWithLines (BlockContainer(anonymous)) [8,49 784x0]

View file

@ -1,8 +1,8 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x39 [BFC] children: not-inline BlockContainer <html> at (0,0) content-size 800x39 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x23 children: not-inline BlockContainer <body> at (8,8) content-size 784x23 children: not-inline
BlockContainer <div.ref> at (186,10) content-size 16x16 positioned [BFC] children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
BlockContainer <div.ref> at (186,10) content-size 16x16 positioned [BFC] children: not-inline
TextNode <#text> TextNode <#text>
BlockContainer <div.test> at (8,8) content-size 784x23 children: inline BlockContainer <div.test> at (8,8) content-size 784x23 children: inline
frag 0 from TextNode start: 0, length: 1, rect: [8,17 148x14] baseline: 10.890625 frag 0 from TextNode start: 0, length: 1, rect: [8,17 148x14] baseline: 10.890625
@ -16,8 +16,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600] ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x39] PaintableWithLines (BlockContainer<HTML>) [0,0 800x39]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x23] PaintableWithLines (BlockContainer<BODY>) [8,8 784x23]
PaintableWithLines (BlockContainer<DIV>.ref) [184,8 20x20]
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0] PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
PaintableWithLines (BlockContainer<DIV>.ref) [184,8 20x20]
PaintableWithLines (BlockContainer<DIV>.test) [8,8 784x23] PaintableWithLines (BlockContainer<DIV>.test) [8,8 784x23]
TextPaintable (TextNode<#text>) TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<SPAN>) [156,8 20x20] PaintableWithLines (BlockContainer<SPAN>) [156,8 20x20]

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<style>
.a {
display: inline-block;
}
.b {
float: left;
width: 100%;
}
.box {
height: 100px;
width: 100px;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
</style>
<body>
<div class="a"><div class="box green"></div></div>
<div class="b"><div class="box blue"></div></div>
<div class="a"><div class="box green"></div></div>
<div class="b"><div class="box blue"></div></div>
<div></div><!-- This last <div> requires hoisting all inline content into an anonymous wrapper -->

View file

@ -2,5 +2,5 @@ Harness status: OK
Found 1 tests Found 1 tests
1 Fail 1 Pass
Fail #container 1 Pass #container 1