5 files changed, 66 insertions, 15 deletions

diff --git a/src/layout/engine.nim b/src/layout/engine.nim
index ba9248ca..e81c4c25 100644
--- a/src/layout/engine.nim
+++ b/src/layout/engine.nim
@@ -144,6 +144,9 @@ func applySizeConstraint(u: LayoutUnit; availableSize: SizeConstraint):
   of scFitContent:
     return min(u, availableSize.u)
 
+func outerSize(box: BlockBox; dim: DimensionType): LayoutUnit =
+  return box.state.margin.dimSum(dim) + box.state.size[dim]
+
 type
   BlockContext = object
     lctx: LayoutContext
@@ -400,13 +403,12 @@ proc positionAtoms(currentLine: LineBoxState; lctx: LayoutContext): LayoutUnit =
 
 proc shiftAtoms(currentLine: var LineBoxState; marginTop: LayoutUnit;
     cellHeight: int) =
-  let paddingTop = currentLine.paddingTop
   let offsety = currentLine.offsety
+  let shiftTop = marginTop + currentLine.paddingTop
   for atom in currentLine.atoms:
-    let atomy = atom.offset.y
-    atom.offset.y = (atomy + marginTop + paddingTop + offsety).round(cellHeight)
-    currentLine.minHeight = max(currentLine.minHeight,
-      atomy - offsety + atom.size.h)
+    atom.offset.y = (atom.offset.y + shiftTop + offsety).round(cellHeight)
+    let minHeight = atom.offset.y - offsety + atom.size.h
+    currentLine.minHeight = max(currentLine.minHeight, minHeight)
 
 # Align atoms (inline boxes, text, etc.) vertically (i.e. along the block/y
 # axis) inside the line.
@@ -1393,7 +1395,7 @@ proc addInlineBlock(ictx: var InlineContext; state: var InlineState;
     innerbox: box,
     offset: offset(x = sizes.margin.left, y = 0),
     size: size(
-      w = box.state.size.w + sizes.margin.dimSum(dtHorizontal),
+      w = box.outerSize(dtHorizontal),
       h = box.state.size.h
     )
   )
@@ -1416,10 +1418,7 @@ func calcLineHeight(computed: CSSComputedValues; lctx: LayoutContext):
 proc layoutChildren(ictx: var InlineContext; state: var InlineState;
     children: seq[InlineFragment]) =
   for child in children:
-    case child.computed{"display"}
-    of DisplayInline:
-      ictx.layoutInline(child)
-    of DisplayInlineBlock, DisplayInlineTableWrapper, DisplayInlineFlex:
+    if child.box != nil:
       child.state = InlineFragmentState()
       var state = InlineState(
         fragment: child,
@@ -1428,7 +1427,7 @@ proc layoutChildren(ictx: var InlineContext; state: var InlineState;
       let space = availableSpace(w = fitContent(ictx.space.w), h = ictx.space.h)
       ictx.addInlineBlock(state, child.box, space)
     else:
-      assert false
+      ictx.layoutInline(child)
 
 proc layoutInline(ictx: var InlineContext; fragment: InlineFragment) =
   let lctx = ictx.lctx
@@ -1531,9 +1530,6 @@ proc positionRelative(parent, box: BlockBox) =
     box.state.offset.y += parent.state.size.h - box.state.positioned.bottom -
       box.state.size.h
 
-func outerSize(box: BlockBox; dim: DimensionType): LayoutUnit =
-  return box.state.margin.dimSum(dim) + box.state.size[dim]
-
 # Note: caption is not included here
 const RowGroupBox = {
   DisplayTableRowGroup, DisplayTableHeaderGroup, DisplayTableFooterGroup
@@ -2697,7 +2693,7 @@ proc buildFromElem(ctx: var InnerBlockContext; styledNode: StyledNode) =
     of DisplayInlineTable: ctx.buildTable(styledNode)
     of DisplayInlineFlex: ctx.buildFlex(styledNode)
     else: nil
-    let wrapper = InlineFragment(computed: childBox.computed, box: childBox)
+    let wrapper = InlineFragment(computed: computed, box: childBox)
     ctx.ibox.children.add(wrapper)
     ctx.iflush()
   of DisplayTable:
diff --git a/test/layout/colored-inline-block-squares.color.expected b/test/layout/colored-inline-block-squares.color.expected
new file mode 100644
index 00000000..1e805e94
--- /dev/null
+++ b/test/layout/colored-inline-block-squares.color.expected
@@ -0,0 +1,36 @@
+
+
+
+one   ?                            ?                          ??
+                                                       
+                                                       
+                                                       
+                                                       
+                                                       
+                                                       
+                                                       
+                                                       
+                                                       
+
+     ?                   
+                         
+                         
+                         
+                         
+                         
+                         
+                         
+                         
+                         
+                         w
+      ?                    w two
+                          
+                          
+                          
+                          
+                          
+                          
+                          
+                          
+                          
+
diff --git a/test/layout/colored-inline-block-squares.html b/test/layout/colored-inline-block-squares.html
new file mode 100644
index 00000000..47a3acd3
--- /dev/null
+++ b/test/layout/colored-inline-block-squares.html
@@ -0,0 +1,13 @@
+<div>one
+<div style="display: inline-block; margin: 2ch; width: 20ch; height: 20ch; background-color: blue">
+?<br>
+</div>
+<div style="display: inline-block; margin: 6ch; width: 20ch; height: 20ch; background-color: blue">
+?<br>
+</div>
+??
+<div style="display: inline-block; margin-left: 5ch; margin-top: 1em; width: 20ch; background-color: green">?<br><br><br><br><br><br><br><br><br><br><br></div>w
+<br>
+<div style="display: inline-block; margin-left: 6ch; width: 20ch; height: 20ch; background-color: red">?</div>
+w two
+</div>
diff --git a/test/layout/line-height-change.expected b/test/layout/line-height-change.expected
new file mode 100644
index 00000000..ec17045e
--- /dev/null
+++ b/test/layout/line-height-change.expected
@@ -0,0 +1,4 @@
+
+
+one
+two
diff --git a/test/layout/line-height-change.html b/test/layout/line-height-change.html
new file mode 100644
index 00000000..1cae1f85
--- /dev/null
+++ b/test/layout/line-height-change.html
@@ -0,0 +1,2 @@
+<span style="line-height: 2em"><br>one</span><br>
+two