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 [1,1] [0+1+0 798 0+1+0] [0+1+0 422 0+1+0] [BFC] children: not-inline
    BlockContainer <body> at [10,10] [8+1+0 780 0+1+8] [8+1+0 404 0+1+8] children: not-inline
      Box <div.grid> at [11,11] [0+1+0 500 0+1+278] [0+1+0 402 0+1+0] [GFC] children: not-inline
        BlockContainer <(anonymous)> (not painted) [BFC] children: inline
          TextNode <#text> (not painted)
        BlockContainer <div.left-margin-auto.right-margin-auto> at [99.71875,12] [87.71875+1+0 322.5625 0+1+87.71875] [0+1+0 16 0+1+0] [BFC] children: inline
          frag 0 from TextNode start: 0, length: 38, rect: [99.71875,12 322.5625x16] baseline: 12.796875
              "auto horizontal margins and auto width"
          TextNode <#text> (not painted)
        BlockContainer <(anonymous)> (not painted) [BFC] children: inline
          TextNode <#text> (not painted)
        BlockContainer <div.left-margin-auto> at [252.375,30] [240.375+1+0 257.625 0+1+0] [0+1+0 16 0+1+0] [BFC] children: inline
          frag 0 from TextNode start: 0, length: 31, rect: [252.375,30 257.625x16] baseline: 12.796875
              "auto left margin and auto width"
          TextNode <#text> (not painted)
        BlockContainer <(anonymous)> (not painted) [BFC] children: inline
          TextNode <#text> (not painted)
        BlockContainer <div.right-margin-auto> at [12,48] [0+1+0 268.484375 0+1+229.515625] [0+1+0 16 0+1+0] [BFC] children: inline
          frag 0 from TextNode start: 0, length: 32, rect: [12,48 268.484375x16] baseline: 12.796875
              "auto right margin and auto width"
          TextNode <#text> (not painted)
        BlockContainer <(anonymous)> (not painted) [BFC] children: inline
          TextNode <#text> (not painted)
        BlockContainer <div.left-margin-auto.right-margin-auto.fit-content-width> at [75.25,66] [63.25+1+0 371.484375 0+1+63.25] [0+1+0 16 0+1+0] [BFC] children: inline
          frag 0 from TextNode start: 0, length: 45, rect: [75.25,66 371.484375x16] baseline: 12.796875
              "auto horizontal margins and fit-content width"
          TextNode <#text> (not painted)
        BlockContainer <(anonymous)> (not painted) [BFC] children: inline
          TextNode <#text> (not painted)
        BlockContainer <div.left-margin-auto.fit-content-width> at [203.453125,84] [191.453125+1+0 306.546875 0+1+0] [0+1+0 16 0+1+0] [BFC] children: inline
          frag 0 from TextNode start: 0, length: 38, rect: [203.453125,84 306.546875x16] baseline: 12.796875
              "auto left margin and fit-content width"
          TextNode <#text> (not painted)
        BlockContainer <(anonymous)> (not painted) [BFC] children: inline
          TextNode <#text> (not painted)
        BlockContainer <div.right-margin-auto.fit-content-width> at [12,102] [0+1+0 317.40625 0+1+180.59375] [0+1+0 16 0+1+0] [BFC] children: inline
          frag 0 from TextNode start: 0, length: 39, rect: [12,102 317.40625x16] baseline: 12.796875
              "auto right margin and fit-content width"
          TextNode <#text> (not painted)
        BlockContainer <(anonymous)> (not painted) [BFC] children: inline
          TextNode <#text> (not painted)
        BlockContainer <div.left-margin-auto.right-margin-auto.fixed-width> at [236,120] [224+1+0 50 0+1+224] [0+1+0 96 0+1+0] [BFC] children: inline
          frag 0 from TextNode start: 0, length: 4, rect: [236,120 36.328125x16] baseline: 12.796875
              "auto"
          frag 1 from TextNode start: 5, length: 10, rect: [236,136 81.84375x16] baseline: 12.796875
              "horizontal"
          frag 2 from TextNode start: 16, length: 7, rect: [236,152 61.453125x16] baseline: 12.796875
              "margins"
          frag 3 from TextNode start: 24, length: 3, rect: [236,168 26.8125x16] baseline: 12.796875
              "and"
          frag 4 from TextNode start: 28, length: 5, rect: [236,184 37.28125x16] baseline: 12.796875
              "fixed"
          frag 5 from TextNode start: 34, length: 5, rect: [236,200 39.796875x16] baseline: 12.796875
              "width"
          TextNode <#text> (not painted)
        BlockContainer <(anonymous)> (not painted) [BFC] children: inline
          TextNode <#text> (not painted)
        BlockContainer <div.left-margin-auto.fixed-width> at [460,218] [448+1+0 50 0+1+0] [0+1+0 96 0+1+0] [BFC] children: inline
          frag 0 from TextNode start: 0, length: 4, rect: [460,218 36.328125x16] baseline: 12.796875
              "auto"
          frag 1 from TextNode start: 5, length: 4, rect: [460,234 26.25x16] baseline: 12.796875
              "left"
          frag 2 from TextNode start: 10, length: 6, rect: [460,250 52.109375x16] baseline: 12.796875
              "margin"
          frag 3 from TextNode start: 17, length: 3, rect: [460,266 26.8125x16] baseline: 12.796875
              "and"
          frag 4 from TextNode start: 21, length: 5, rect: [460,282 37.28125x16] baseline: 12.796875
              "fixed"
          frag 5 from TextNode start: 27, length: 5, rect: [460,298 39.796875x16] baseline: 12.796875
              "width"
          TextNode <#text> (not painted)
        BlockContainer <(anonymous)> (not painted) [BFC] children: inline
          TextNode <#text> (not painted)
        BlockContainer <div.right-margin-auto.fixed-width> at [12,316] [0+1+0 50 0+1+448] [0+1+0 96 0+1+0] [BFC] children: inline
          frag 0 from TextNode start: 0, length: 4, rect: [12,316 36.328125x16] baseline: 12.796875
              "auto"
          frag 1 from TextNode start: 5, length: 5, rect: [12,332 37.109375x16] baseline: 12.796875
              "right"
          frag 2 from TextNode start: 11, length: 6, rect: [12,348 52.109375x16] baseline: 12.796875
              "margin"
          frag 3 from TextNode start: 18, length: 3, rect: [12,364 26.8125x16] baseline: 12.796875
              "and"
          frag 4 from TextNode start: 22, length: 5, rect: [12,380 37.28125x16] baseline: 12.796875
              "fixed"
          frag 5 from TextNode start: 28, length: 5, rect: [12,396 39.796875x16] baseline: 12.796875
              "width"
          TextNode <#text> (not painted)
        BlockContainer <(anonymous)> (not painted) [BFC] children: inline
          TextNode <#text> (not painted)
      BlockContainer <(anonymous)> at [10,414] [0+0+0 780 0+0+0] [0+0+0 0 0+0+0] children: inline
        TextNode <#text> (not painted)

ViewportPaintable (Viewport<#document>) [0,0 800x600]
  PaintableWithLines (BlockContainer<HTML>) [0,0 800x424]
    PaintableWithLines (BlockContainer<BODY>) [9,9 782x406]
      Paintable (Box<DIV>.grid) [10,10 502x404]
        PaintableWithLines (BlockContainer<DIV>.left-margin-auto.right-margin-auto) [98.71875,11 324.5625x18]
        PaintableWithLines (BlockContainer<DIV>.left-margin-auto) [251.375,29 259.625x18]
        PaintableWithLines (BlockContainer<DIV>.right-margin-auto) [11,47 270.484375x18]
        PaintableWithLines (BlockContainer<DIV>.left-margin-auto.right-margin-auto.fit-content-width) [74.25,65 373.484375x18]
        PaintableWithLines (BlockContainer<DIV>.left-margin-auto.fit-content-width) [202.453125,83 308.546875x18]
        PaintableWithLines (BlockContainer<DIV>.right-margin-auto.fit-content-width) [11,101 319.40625x18]
        PaintableWithLines (BlockContainer<DIV>.left-margin-auto.right-margin-auto.fixed-width) [235,119 52x98]
        PaintableWithLines (BlockContainer<DIV>.left-margin-auto.fixed-width) [459,217 52x98]
        PaintableWithLines (BlockContainer<DIV>.right-margin-auto.fixed-width) [11,315 52x98]
      PaintableWithLines (BlockContainer(anonymous)) [10,414 780x0]

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