WeasySuite - 9.2.1 Block-level elements and block boxes

Chapter 9 - Visual formatting model - 9.2.1 Block-level elements and block boxes

Go to the relevant page of the specification.

box-generation-001: Block-level elements generate principal block boxes with block boxes
Block boxes can reside within a principal block box established by a block-level element; inline boxes are outside of the principal block box.
box-generation-002: Block-level elements generate principal block boxes with inline boxes
Inline boxes can reside within a principal block box established by a block-level element; block boxes are outside of the principal block box.
box-generation-003: Additional boxes generated outside the principal block box
Some block-level elements (i.e. 'list-item' elements) can generate additional boxes outside the principal block box.
containing-block-028: Principal block box establishes the containing block
Principal block boxes establish a containing block for descendant boxes.
containing-block-029: Principal block box establishes the containing block for generated content
Principal block boxes establish a containing block for generated content.
list-style-position-001: Marker box position - first-child block box with 'overflow'
The position of a first-child block box inside a principal box must not be affected by 'overflow' being applied to the first-child, when marker box is positioned outside the principal box
list-style-position-002: Marker box position - descendant block box with 'overflow'
The position of a descendant block box inside a principal box must not be affected by 'overflow' being applied to the descendant, when marker box is positioned outside the principal box
list-style-position-003: Marker box position - list-item overflow - 'list-style-position:inside'
'overflow' applied to principal box and presence of child block box (in normal flow) must have no affect on visibility or position of marker box
list-style-position-005: Marker box position (inside principal box) - block box in normal flow (as child of principal box)
Since a marker box is the first inline element in the principal box when 'list-style-position:inside', the following block box (in normal flow) must create a new stacking context below the marker box
list-style-position-006: Marker box position (inside principal box) - block box with 'float:left' (as child of principal box)
Since a marker box is the first inline element in the principal box when 'list-style-position:inside', the following block box (floated to the left) must visually appear before the marker box in the rendered document
list-style-position-007: Marker box position (inside principal box) - block box with 'float:right' (as child of principal box)
list-style-position-008: Marker box position (outside principal box) - floated-left child
A floated element (as a child of the principal box) should not affect the horizontal position of the marker box (positioned outside principal box) in relation to the principal box's content
list-style-position-009: Marker box position (outside principal box) - floated-right child
A floated element (as a child of the principal box) should not affect the horizontal position of the marker box (positioned outside principal box) in relation to the principal box's content
list-style-position-010: Marker box position (outside principal box) - :before pseudo-element list-item ('list-style-position:inside')
When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). The document tree content of the associated element must be placed after the principal box established by the :before pseudo element. The presence of the :before pseudo element in this context, must have no affect on the position of the marker box of the associated element as it must still appear to the outside left edge of it's own principal box (since 'list-style-position:outside').
list-style-position-011: Marker box position (inside principal box) - :before pseudo-element list-item ('list-style-position:outside')
When the :before element is set as a list-item, it establishes a principal box and a marker box which is positioned outside of that principal box (since 'list-style-position:outside). The document tree content of the associated element must be placed after the principal box established by the :before pseudo element. Since the marker box of the associated element must be the first inline element within it's principal box (since 'list-style-position:inside'), that marker box must appear before the marker box and principal box of the :before pseudo-element.
list-style-position-012: Marker box position (inside principal box) - :before pseudo-element list-item ('list-style-position:inside')
When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). The document tree content of the associated element must be placed after the principal box established by the :before pseudo element. Since the marker box of the associated element must be the first inline element within it's principal box (since 'list-style-position:inside'), that marker box must appear before the marker box and principal box of the :before pseudo-element.
list-style-position-013: Marker box position (outside principal box) - :before pseudo-element list-item ('list-style-position:outside')
When the :before element is set as a list-item, it establishes a principal box and a marker box which is positioned outside of that principal box (since 'list-style-position:outside). The document tree content of the associated element must be placed after the principal box established by the :before pseudo element. The position of the marker box of the associated element must still appear to the outside left edge of it's principal box (since 'list-style-position:outside') and should be positioned towards the top of this principal box. Since the marker box of the :before pseudo element should be positioned at the same coordinate as the associated element's marker box, either bullet could appear in front of the other (since stacking levels of marker boxes aren't defined in CSS2.1, in this context).
list-style-position-014: Marker box position (outside principal box) - floated :before pseudo-element list-item ('list-style-position:inside')
When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). Since this :before pseudo element is floated left, the document tree content of the associated element must appear alongside (after) this :before pseudo element. The position of the marker box of the associated element must not be affected, as it must still appear to the outside left edge of it's principal box (since 'list-style-position:outside').
list-style-position-015: Marker box position (inside principal box) - floated :before pseudo-element list-item ('list-style-position:outside')
When the :before element is set as a list-item, it establishes a principal box and a marker box which is positioned outside of that principal box (since 'list-style-position:outside). Since this :before pseudo element is floated left, the principal box (and marker box, since 'list-style-position:inside') of the associated element must appear alongside (after) this :before pseudo element. The position of the marker box of the :before pseudo element must still appear to the outside left edge of it's associated element's principal box (since 'list-style-position:outside').
list-style-position-016: Marker box position (inside principal box) - floated :before pseudo-element list-item ('list-style-position:inside')
When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). Since the :before pseudo element is floated left, the principal box (and marker box, since 'list-style-position:inside') of the associated element must appear alongside (after) the :before pseudo element.
list-style-position-017: Marker box position (outside principal box) - floated :before pseudo-element list-item ('list-style-position:outside')
When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). Since the :before pseudo element is floated left, The document tree content of the associated element must appear alongside (after) the :before pseudo element. Since the marker box of the :before pseudo element should be positioned at the same coordinate as the associated element's marker box, either bullet could appear in front of the other (since stacking levels of marker boxes aren't defined in CSS2.1, in this context).