LibWeb: Account for collapsed top margins in BFC root height calculation
By the time we're measuring the height of a BFC root, we've already collapsed all relevant margins for the root and its descendants. Given this, we should simply use 0 (relative to the BFC root) as the lowest block axis coordinate (i.e Y value) for the margin edges. This fixes a long-standing issue where BFC roots were sometimes not tall enough to contain their children due to margins.
Author: https://github.com/awesomekling Commit: https://github.com/LadybirdBrowser/ladybird/commit/16662ab2309 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3670
|
@ -362,6 +362,10 @@ CSSPixels FormattingContext::compute_auto_height_for_block_formatting_context_ro
|
|||
// If it has block-level children, the height is the distance between
|
||||
// the top margin-edge of the topmost block-level child box
|
||||
// and the bottom margin-edge of the bottommost block-level child box.
|
||||
|
||||
// NOTE: The top margin edge of the topmost block-level child box is the same as the top content edge of the root box.
|
||||
top = 0;
|
||||
|
||||
root.for_each_child_of_type<Box>([&](Layout::Box& child_box) {
|
||||
// Absolutely positioned children are ignored,
|
||||
// and relatively positioned boxes are considered without their offset.
|
||||
|
@ -375,12 +379,8 @@ CSSPixels FormattingContext::compute_auto_height_for_block_formatting_context_ro
|
|||
|
||||
auto const& child_box_state = m_state.get(child_box);
|
||||
|
||||
CSSPixels child_box_top = child_box_state.offset.y() - child_box_state.margin_box_top();
|
||||
CSSPixels child_box_bottom = child_box_state.offset.y() + child_box_state.content_height() + child_box_state.margin_box_bottom();
|
||||
|
||||
if (!top.has_value() || child_box_top < top.value())
|
||||
top = child_box_top;
|
||||
|
||||
if (!bottom.has_value() || child_box_bottom > bottom.value())
|
||||
bottom = child_box_bottom;
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x89.4375 [BFC] children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x102.875 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,21.4375) content-size 784x73.4375 children: not-inline
|
||||
BlockContainer <h1> at (8,21.4375) content-size 784x35 children: inline
|
||||
frag 0 from TextNode start: 0, length: 6, rect: [8,21.4375 105.53125x35] baseline: 27.09375
|
||||
|
@ -11,7 +11,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x89.4375] overflow: [0,0 800x94.875]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x102.875]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,21.4375 784x73.4375]
|
||||
PaintableWithLines (BlockContainer<H1>) [8,21.4375 784x35]
|
||||
TextPaintable (TextNode<#text>)
|
||||
|
|
|
@ -0,0 +1,15 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 100x308 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,200) content-size 100x100 children: not-inline
|
||||
BlockContainer <div#pink> at (8,200) content-size 100x100 children: not-inline
|
||||
BlockContainer <div#orange> at (8,200) content-size 50x17 children: inline
|
||||
frag 0 from TextNode start: 0, length: 3, rect: [8,200 18.828125x17] baseline: 13.296875
|
||||
"lol"
|
||||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 100x308] overflow: [0,0 108x308]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,200 100x100]
|
||||
PaintableWithLines (BlockContainer<DIV>#pink) [8,200 100x100]
|
||||
PaintableWithLines (BlockContainer<DIV>#orange) [8,200 50x17]
|
||||
TextPaintable (TextNode<#text>)
|
|
@ -1,5 +1,5 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x128 [BFC] children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x136 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,16) content-size 784x102 children: not-inline
|
||||
BlockContainer <div.box> at (18,26) content-size 200x100 floating [BFC] children: not-inline
|
||||
BlockContainer <ul> at (48,16) content-size 744x102 children: not-inline
|
||||
|
@ -35,7 +35,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|||
ListItemMarkerBox <(anonymous)> at (304,101) content-size 12x17 children: not-inline
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x128] overflow: [0,0 800x136]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x136]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,16 784x102] overflow: [8,16 784x120]
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [8,16 220x120]
|
||||
PaintableWithLines (BlockContainer<UL>) [8,16 784x102]
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x116 [BFC] children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x138 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,30) content-size 784x100 children: not-inline
|
||||
BlockContainer <div.not-bfc> at (8,30) content-size 784x20 children: not-inline
|
||||
BlockContainer <div.bfc> at (8,80) content-size 784x0 [BFC] children: not-inline
|
||||
BlockContainer <div.not-bfc> at (8,110) content-size 784x20 children: not-inline
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x116] overflow: [0,0 800x130]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x138]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,30 784x100]
|
||||
PaintableWithLines (BlockContainer<DIV>.not-bfc) [8,30 784x20]
|
||||
PaintableWithLines (BlockContainer<DIV>.bfc) [8,80 784x0]
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x1710 [BFC] children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x1772 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,70) content-size 784x1632 children: not-inline
|
||||
BlockContainer <p.min-block-test> at (8,70) content-size 784x700 children: inline
|
||||
frag 0 from TextNode start: 0, length: 2, rect: [8,70 85.875x76] baseline: 58.984375
|
||||
|
@ -24,8 +24,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|||
BlockContainer <(anonymous)> at (8,1772) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x1710]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x1710]
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x1772]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x1772]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,70 784x1632]
|
||||
PaintableWithLines (BlockContainer<P>.min-block-test) [8,70 784x700]
|
||||
TextPaintable (TextNode<#text>)
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x83 [BFC] children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x91 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,16) content-size 784x67 children: not-inline
|
||||
BlockContainer <p> at (8,16) content-size 784x17 children: inline
|
||||
frag 0 from TextNode start: 0, length: 36, rect: [18.625,16 300x17] baseline: 13.296875
|
||||
|
@ -16,7 +16,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x83]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x91]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,16 784x67]
|
||||
PaintableWithLines (BlockContainer<P>) [8,16 784x17]
|
||||
PaintableWithLines (InlineNode(anonymous))
|
||||
|
|
|
@ -1,18 +1,18 @@
|
|||
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 784x36.59375 children: not-inline
|
||||
FieldSetBox <fieldset> at (24,15.59375) content-size 752x17 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x22.5 children: not-inline
|
||||
FieldSetBox <fieldset> at (24,15.59375) content-size 752x2.90625 [BFC] children: not-inline
|
||||
LegendBox <legend> at (26,1.5) content-size 36.328125x17 children: inline
|
||||
frag 0 from TextNode start: 0, length: 5, rect: [26,1.5 36.328125x17] baseline: 13.296875
|
||||
"login"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,44.59375) content-size 784x0 children: inline
|
||||
BlockContainer <(anonymous)> at (8,30.5) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x36.59375] overflow: [8,1.5 784x51.09375]
|
||||
FieldSetPaintable (FieldSetBox<FIELDSET>) [10,8 780x36.59375] overflow: [12,1.5 776x51.09375]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x22.5] overflow: [8,1.5 784x37]
|
||||
FieldSetPaintable (FieldSetBox<FIELDSET>) [10,8 780x22.5] overflow: [12,1.5 776x37]
|
||||
PaintableWithLines (LegendBox<LEGEND>) [24,1.5 40.328125x17]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,44.59375 784x0]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,30.5 784x0]
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x41 [BFC] children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x49 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,16) content-size 784x17 children: not-inline
|
||||
Box <ul.globalnav-list> at (48,16) content-size 744x17 flex-container(row) [FFC] children: not-inline
|
||||
BlockContainer <div#item-1> at (48,16) content-size 46.734375x17 flex-item [BFC] children: inline
|
||||
|
@ -12,7 +12,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x41]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x49]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,16 784x17]
|
||||
PaintableBox (Box<UL>.globalnav-list) [8,16 784x17]
|
||||
PaintableWithLines (BlockContainer<DIV>#item-1) [48,16 46.734375x17]
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x120 [BFC] children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x122 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,10) content-size 784x104 children: not-inline
|
||||
BlockContainer <div.container> at (8,10) content-size 200x104 children: inline
|
||||
frag 0 from Box start: 0, length: 0, rect: [8,10 104x104] baseline: 104
|
||||
|
@ -19,7 +19,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x120]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x122]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,10 784x104]
|
||||
PaintableWithLines (BlockContainer<DIV>.container) [8,10 200x104]
|
||||
PaintableBox (Box<DIV>.grid) [8,10 104x104]
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x986 [BFC] children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x1048 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,70) content-size 784x908 children: not-inline
|
||||
BlockContainer <p.min-inline-test> at (8,70) content-size 784x200 children: inline
|
||||
frag 0 from TextNode start: 0, length: 2, rect: [8,70 85.875x76] baseline: 58.984375
|
||||
|
@ -24,8 +24,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|||
BlockContainer <(anonymous)> at (8,1048) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x986]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x986]
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x1048]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x1048]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,70 784x908]
|
||||
PaintableWithLines (BlockContainer<P>.min-inline-test) [8,70 784x200]
|
||||
TextPaintable (TextNode<#text>)
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x158 [BFC] children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x175 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,25) content-size 784x125 children: not-inline
|
||||
BlockContainer <div.empty_content> at (33,25) content-size 50x50 children: not-inline
|
||||
BlockContainer <(anonymous)> at (33,75) content-size 50x0 children: inline
|
||||
|
@ -11,7 +11,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x158]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x175]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,25 784x125]
|
||||
PaintableWithLines (BlockContainer<DIV>.empty_content) [33,25 50x50]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [33,25 50x50]
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
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 784x84 children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x101 children: not-inline
|
||||
TableWrapper <(anonymous)> at (8,8) content-size 2x2 [BFC] children: not-inline
|
||||
Box <table#empty-table> at (8,8) content-size 2x2 table-box [TFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,10) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
TableWrapper <(anonymous)> at (8,10) content-size 99.171875x82 [BFC] children: not-inline
|
||||
TableWrapper <(anonymous)> at (8,10) content-size 99.171875x99 [BFC] children: not-inline
|
||||
Box <table#full-table> at (8,27) content-size 99.171875x65 table-box [TFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
|
@ -64,16 +64,16 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,92) content-size 784x0 children: inline
|
||||
BlockContainer <(anonymous)> at (8,109) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x84]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x101]
|
||||
PaintableWithLines (TableWrapper(anonymous)) [8,8 2x2]
|
||||
PaintableBox (Box<TABLE>#empty-table) [8,8 2x2]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,10 784x0]
|
||||
PaintableWithLines (TableWrapper(anonymous)) [8,10 99.171875x82]
|
||||
PaintableWithLines (TableWrapper(anonymous)) [8,10 99.171875x99]
|
||||
PaintableBox (Box<TABLE>#full-table) [8,27 99.171875x65]
|
||||
PaintableWithLines (BlockContainer<CAPTION>) [8,10 82.734375x17] overflow: [8,10 90.953125x17]
|
||||
TextPaintable (TextNode<#text>)
|
||||
|
@ -89,4 +89,4 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
|||
PaintableBox (Box<TR>) [10,71 95.171875x19]
|
||||
PaintableWithLines (BlockContainer<TD>) [10,71 95.171875x19]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,92 784x0]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,109 784x0]
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x125 [BFC] children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x157 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <body> at (8,8) content-size 784x109 children: not-inline
|
||||
TableWrapper <(anonymous)> at (8,8) content-size 63.046875x109 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x141 children: not-inline
|
||||
TableWrapper <(anonymous)> at (8,8) content-size 63.046875x141 [BFC] children: not-inline
|
||||
Box <table#full-table> at (10,42) content-size 59.046875x71 table-box [TFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
|
@ -81,14 +81,14 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,117) content-size 784x0 children: inline
|
||||
BlockContainer <(anonymous)> at (8,149) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x125]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x157]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [0,0 800x0]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x109]
|
||||
PaintableWithLines (TableWrapper(anonymous)) [8,8 63.046875x109]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x141]
|
||||
PaintableWithLines (TableWrapper(anonymous)) [8,8 63.046875x141]
|
||||
PaintableBox (Box<TABLE>#full-table) [8,40 63.046875x75]
|
||||
PaintableWithLines (BlockContainer<CAPTION>) [8,8 59.046875x34]
|
||||
TextPaintable (TextNode<#text>)
|
||||
|
@ -110,4 +110,4 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
|||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<TD>) [39.25,90 27.796875x21]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,117 784x0]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,149 784x0]
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x312 [BFC] children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x404 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,100) content-size 784x204 children: not-inline
|
||||
TableWrapper <(anonymous)> at (108,100) content-size 89.34375x204 [BFC] children: not-inline
|
||||
Box <table> at (109,101) content-size 87.34375x202 table-box [TFC] children: not-inline
|
||||
|
@ -13,7 +13,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x312]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x404]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,100 784x204]
|
||||
PaintableWithLines (TableWrapper(anonymous)) [108,100 89.34375x204]
|
||||
PaintableBox (Box<TABLE>) [108,100 89.34375x204]
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
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 784x60 children: not-inline
|
||||
TableWrapper <(anonymous)> at (8,8) content-size 60.46875x60 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x87 children: not-inline
|
||||
TableWrapper <(anonymous)> at (8,8) content-size 60.46875x87 [BFC] children: not-inline
|
||||
Box <table> at (8,35) content-size 60.46875x23 table-box [TFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) children: inline
|
||||
TextNode <#text>
|
||||
|
@ -26,8 +26,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,-2 800x602]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600] overflow: [0,-2 800x602]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x60] overflow: [8,-2 784x70]
|
||||
PaintableWithLines (TableWrapper(anonymous)) [8,8 60.46875x60] overflow: [8,-2 60.46875x70]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x87] overflow: [8,-2 784x97]
|
||||
PaintableWithLines (TableWrapper(anonymous)) [8,8 60.46875x87] overflow: [8,-2 60.46875x97]
|
||||
PaintableBox (Box<TABLE>) [8,35 60.46875x23]
|
||||
PaintableWithLines (BlockContainer<CAPTION>) [8,-2 60.46875x37]
|
||||
TextPaintable (TextNode<#text>)
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x41 [BFC] children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x49 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,16) content-size 784x17 children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,16) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
|
@ -11,7 +11,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x41]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x49]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,16 784x17]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,16 784x0]
|
||||
PaintableWithLines (BlockContainer<P>) [8,16 784x17]
|
||||
|
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html><style>
|
||||
* {
|
||||
outline: 1px solid black;
|
||||
}
|
||||
html {
|
||||
width: 100px;
|
||||
}
|
||||
body {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
div#pink {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-top: 100px;
|
||||
background: pink;
|
||||
}
|
||||
div#orange {
|
||||
margin-top: 200px;
|
||||
margin-right: 50px;
|
||||
margin-bottom: 100px;
|
||||
background: orange;
|
||||
}
|
||||
</style><body><div id="pink"><div id="orange">lol
|
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 91 KiB |
Before Width: | Height: | Size: 343 KiB After Width: | Height: | Size: 257 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 2.9 KiB |
Before Width: | Height: | Size: 590 KiB After Width: | Height: | Size: 534 KiB |