Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] [BFC] children: not-inline
  BlockContainer <html> at [0,0] [0+0+0 800 0+0+0] [0+0+0 1096 0+0+0] [BFC] children: not-inline
    BlockContainer <body> at [8,8] [8+0+0 400 0+0+392] [8+0+0 988 0+0+8] children: not-inline
      BlockContainer <(anonymous)> at [8,8] [0+0+0 400 0+0+0] [0+0+0 16 0+0+0] children: inline
        BreakNode <br> (not painted)
        BlockContainer <div.a> at [8,24] floating [0+0+0 100 0+0+0] [0+0+0 100 0+0+0] [BFC] children: not-inline
      Box <div.c> at [8,124] flex-container(row) [0+0+0 400 0+0+0] [0+0+0 100 0+0+0] [FFC] children: not-inline
        BlockContainer <(anonymous)> at [8,124] flex-item [0+0+0 257.3125 0+0+0] [0+0+0 100 0+0+0] [BFC] children: inline
          frag 0 from TextNode start: 0, length: 31, rect: [8,124 257.3125x16] baseline: 12.796875
              "This should clear the blue box."
          TextNode <#text> (not painted)
      BlockContainer <(anonymous)> at [8,224] [0+0+0 400 0+0+0] [0+0+0 0 0+0+0] children: inline
        TextNode <#text> (not painted)
      BlockContainer <hr> at [9,233] [0+1+0 398 0+1+0] [8+1+0 0 0+1+8] [BFC] children: not-inline
      BlockContainer <div.a> at [8,242] floating [0+0+0 100 0+0+0] [0+0+0 100 0+0+0] [BFC] children: not-inline
      BlockContainer <div.b> at [358,242] floating [0+0+0 50 0+0+0] [0+0+0 200 0+0+0] [BFC] children: not-inline
      Box <div.c> at [8,442] flex-container(row) [0+0+0 400 0+0+0] [0+0+0 100 0+0+0] [FFC] children: not-inline
        BlockContainer <(anonymous)> at [8,442] flex-item [0+0+0 268.5625 0+0+0] [0+0+0 100 0+0+0] [BFC] children: inline
          frag 0 from TextNode start: 0, length: 32, rect: [8,442 268.5625x16] baseline: 12.796875
              "This should clear the green box."
          TextNode <#text> (not painted)
      BlockContainer <(anonymous)> at [8,542] [0+0+0 400 0+0+0] [0+0+0 0 0+0+0] children: inline
        TextNode <#text> (not painted)
      BlockContainer <hr> at [9,551] [0+1+0 398 0+1+0] [8+1+0 0 0+1+8] [BFC] children: not-inline
      BlockContainer <div.a> at [8,560] floating [0+0+0 100 0+0+0] [0+0+0 100 0+0+0] [BFC] children: not-inline
      BlockContainer <div.b> at [358,560] floating [0+0+0 50 0+0+0] [0+0+0 200 0+0+0] [BFC] children: not-inline
      Box <div.d> at [58,660] flex-container(row) [50+0+0 300 0+0+0] [0+0+0 100 0+0+0] [FFC] children: not-inline
        BlockContainer <(anonymous)> at [58,660] flex-item [0+0+0 300 0+0+0] [0+0+0 100 0+0+0] [BFC] children: inline
          frag 0 from TextNode start: 0, length: 34, rect: [58,660 287.78125x16] baseline: 12.796875
              "This should clear the blue box and"
          frag 1 from TextNode start: 35, length: 32, rect: [58,676 258.65625x16] baseline: 12.796875
              "sit flush against the green box."
          TextNode <#text> (not painted)
      BlockContainer <(anonymous)> at [8,760] [0+0+0 400 0+0+0] [0+0+0 0 0+0+0] children: inline
        TextNode <#text> (not painted)
      BlockContainer <hr> at [9,769] [0+1+0 398 0+1+0] [8+1+0 0 0+1+8] [BFC] children: not-inline
      BlockContainer <div.a> at [8,778] floating [0+0+0 100 0+0+0] [0+0+0 100 0+0+0] [BFC] children: not-inline
      Box <div.e> at [148,778] flex-container(row) [50+0+40 150 0+0+60] [0+0+0 100 0+0+0] [FFC] children: not-inline
        BlockContainer <(anonymous)> at [148,778] flex-item [0+0+0 150 0+0+0] [0+0+0 100 0+0+0] [BFC] children: inline
          frag 0 from TextNode start: 0, length: 15, rect: [148,778 123.125x16] baseline: 12.796875
              "This should sit"
          frag 1 from TextNode start: 16, length: 17, rect: [148,794 136.578125x16] baseline: 12.796875
              "flush against the"
          frag 2 from TextNode start: 34, length: 14, rect: [148,810 114.703125x16] baseline: 12.796875
              "blue box, with"
          frag 3 from TextNode start: 49, length: 15, rect: [148,826 125.484375x16] baseline: 12.796875
              "40px of padding"
          frag 4 from TextNode start: 65, length: 12, rect: [148,842 88.6875x16] baseline: 12.796875
              "to the left."
          TextNode <#text> (not painted)
      BlockContainer <(anonymous)> at [8,878] [0+0+0 400 0+0+0] [0+0+0 0 0+0+0] children: inline
        TextNode <#text> (not painted)
      BlockContainer <hr> at [9,887] [0+1+0 398 0+1+0] [8+1+0 0 0+1+8] [BFC] children: not-inline
      BlockContainer <div.a> at [8,896] floating [0+0+0 100 0+0+0] [0+0+0 100 0+0+0] [BFC] children: not-inline
      BlockContainer <div.b> at [358,896] floating [0+0+0 50 0+0+0] [0+0+0 200 0+0+0] [BFC] children: not-inline
      Box <div.f> at [133,896] flex-container(row) [25+0+0 200 0+0+25] [0+0+0 100 0+0+0] [FFC] children: not-inline
        BlockContainer <(anonymous)> at [133,896] flex-item [0+0+0 200 0+0+0] [0+0+0 100 0+0+0] [BFC] children: inline
          frag 0 from TextNode start: 0, length: 23, rect: [133,896 196.75x16] baseline: 12.796875
              "This should be centered"
          frag 1 from TextNode start: 24, length: 20, rect: [133,912 171.1875x16] baseline: 12.796875
              "between the blue and"
          frag 2 from TextNode start: 45, length: 12, rect: [133,928 103.375x16] baseline: 12.796875
              "green boxes."
          TextNode <#text> (not painted)
      BlockContainer <(anonymous)> at [8,996] [0+0+0 400 0+0+0] [0+0+0 0 0+0+0] children: inline
        TextNode <#text> (not painted)

ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x1096]
  PaintableWithLines (BlockContainer<HTML>) [0,0 800x1096]
    PaintableWithLines (BlockContainer<BODY>) [8,8 400x988]
      PaintableWithLines (BlockContainer(anonymous)) [8,8 400x16]
        PaintableWithLines (BlockContainer<DIV>.a) [8,24 100x100]
      Paintable (Box<DIV>.c) [8,124 400x100]
        PaintableWithLines (BlockContainer(anonymous)) [8,124 257.3125x100]
      PaintableWithLines (BlockContainer(anonymous)) [8,224 400x0]
      PaintableWithLines (BlockContainer<HR>) [8,232 400x2]
      PaintableWithLines (BlockContainer<DIV>.a) [8,242 100x100]
      PaintableWithLines (BlockContainer<DIV>.b) [358,242 50x200]
      Paintable (Box<DIV>.c) [8,442 400x100]
        PaintableWithLines (BlockContainer(anonymous)) [8,442 268.5625x100]
      PaintableWithLines (BlockContainer(anonymous)) [8,542 400x0]
      PaintableWithLines (BlockContainer<HR>) [8,550 400x2]
      PaintableWithLines (BlockContainer<DIV>.a) [8,560 100x100]
      PaintableWithLines (BlockContainer<DIV>.b) [358,560 50x200]
      Paintable (Box<DIV>.d) [58,660 300x100]
        PaintableWithLines (BlockContainer(anonymous)) [58,660 300x100]
      PaintableWithLines (BlockContainer(anonymous)) [8,760 400x0]
      PaintableWithLines (BlockContainer<HR>) [8,768 400x2]
      PaintableWithLines (BlockContainer<DIV>.a) [8,778 100x100]
      Paintable (Box<DIV>.e) [108,778 190x100]
        PaintableWithLines (BlockContainer(anonymous)) [148,778 150x100]
      PaintableWithLines (BlockContainer(anonymous)) [8,878 400x0]
      PaintableWithLines (BlockContainer<HR>) [8,886 400x2]
      PaintableWithLines (BlockContainer<DIV>.a) [8,896 100x100]
      PaintableWithLines (BlockContainer<DIV>.b) [358,896 50x200]
      Paintable (Box<DIV>.f) [133,896 200x100]
        PaintableWithLines (BlockContainer(anonymous)) [133,896 200x100]
      PaintableWithLines (BlockContainer(anonymous)) [8,996 400x0]

SC for Viewport<#document> [0,0 800x600] (z-index: auto)
 SC for BlockContainer<HTML> [0,0 800x1096] (z-index: auto)
