CSS 2.2 CR Test Suite

Visual formatting model (30 tests)

Test Refs Flags Info
+ 9 Visual formatting model
+ 9.1 Introduction to the visual formatting model
+ 9.1.1 The viewport
+ 9.1.2 Containing blocks
+ 9.2 Controlling box generation
+ 9.2.1 Block-level elements and block boxes
+ 9.2.1.1 Anonymous block boxes
+ 9.2.2 Inline-level elements and inline boxes
+ 9.2.2.1 Anonymous inline boxes
+ 9.2.3 Run-in boxes
+ 9.2.4 The 'display' property
+ 9.3 Positioning schemes
+ 9.3.1 Choosing a positioning scheme: 'position' property
+ 9.3.2 Box offsets: 'top', 'right', 'bottom', 'left'
left-offset-position-fixed-001 = left:auto offset of position:fixed box in a position:relative containing block
  • The 'left' box offset property, for fixed positioning, when set to 'auto' specifies the offset of the box from its 'static-position containing block'. Here, in this test, the 'static-position containing block' is #shifted-column and the containing block for #red is established by the viewport.
right-offset-position-fixed-001 = right:auto offset of position:fixed box in an RTL position:relative containing block
  • The 'right' box offset property, for fixed positioning, when set to 'auto' specifies the offset of the box from its 'static-position containing block'. Here, in this test, the 'static-position containing block' is #shifted-column and the containing block for #red is established by the viewport.
+ 9.4 Normal flow
+ 9.4.1 Block formatting contexts
+ 9.4.2 Inline formatting contexts
inline-formatting-context-001 = Establishing an Inline Formatting Context
  • An inline formatting context is established by a block container box that contains no block-level boxes. In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block.
+ 9.4.3 Relative positioning
+ 9.5 Floats
new-fc-beside-adjoining-float = A new formatting context that fits beside an adjoining float, and thus pulls down the float with its top margin
  • The float is adjoining with the box that establishes a new formatting context when it fits beside it, and will therefore be affected by its margin
new-fc-beside-adjoining-float-2 = A new formatting context that fits beside an adjoining float, and thus pulls down the float with its top margin
  • The float is adjoining with the box that establishes a new formatting context when it fits beside it, and will therefore be affected by its margin
new-fc-separates-from-float = A new formatting context that doesn't fit beside a float make the float non-adjoining
  • Although the 'clear' property isn't specified in this test, a new formatting context that doesn't fit below a float that would otherwise be adjoining will need to separate its margin from the float, so that it doesn't affect the float. This is very similar to clearance.
new-fc-separates-from-float-2 = A new formatting context that doesn't fit beside a float make the float non-adjoining
  • Although the 'clear' property isn't specified in this test, a new formatting context that doesn't fit below a float that would otherwise be adjoining will need to separate its margin from the float, so that it doesn't affect the float. This is very similar to clearance.
+ 9.5.1 Positioning the float: the 'float' property
zero-space-between-floats-001 Script A zero-width new formatting context should fit in a zero-width layout opportunity between floats
zero-space-between-floats-002 Script A zero-width new formatting context should fit in a zero-width layout opportunity between floats, above a 100% wide float
zero-space-between-floats-003 Script Zero-width new formatting context with clearance
zero-space-between-floats-004 Script Zero-width new formatting context with clearance
+ 9.5.2 Controlling flow next to floats: the 'clear' property
adjoining-float-before-clearance = Float that would be adjoining if there were no clearance
  • If the clearance candidate would pull a float down with it (due to margin collapsing) if there were no clearance, clearance needs to be inserted to separate the two, so that the block can go past the float. No matter how large the margin is, it should still be just below the float.
adjoining-float-new-fc = New formatting context next to adjoining float
clear-after-top-margin = Clearance inside block with top margin
clear-on-child-with-margins = Child of block with clear
clear-on-parent = Child of block with clear
clear-on-parent-and-child = Child of block with clear
clear-on-parent-with-margins = Child of block with clear
clear-on-parent-with-margins-no-clearance = Child of block with clear
clear-with-top-margin-after-cleared-empty-block = Clearance on empty block followed by block with large margin and 'clear'
negative-clearance-after-adjoining-float = Negative clearance between adjoining float and child with top margin
negative-clearance-after-bottom-margin = Negative clearance between bottom margin and cleared child with top margin
nested-clearance-new-formatting-context = Nested clearance on new formatting context
new-fc-beside-adjoining-float = A new formatting context that fits beside an adjoining float, and thus pulls down the float with its top margin
  • The float is adjoining with the box that establishes a new formatting context when it fits beside it, and will therefore be affected by its margin
new-fc-beside-adjoining-float-2 = A new formatting context that fits beside an adjoining float, and thus pulls down the float with its top margin
  • The float is adjoining with the box that establishes a new formatting context when it fits beside it, and will therefore be affected by its margin
new-fc-separates-from-float = A new formatting context that doesn't fit beside a float make the float non-adjoining
  • Although the 'clear' property isn't specified in this test, a new formatting context that doesn't fit below a float that would otherwise be adjoining will need to separate its margin from the float, so that it doesn't affect the float. This is very similar to clearance.
new-fc-separates-from-float-2 = A new formatting context that doesn't fit beside a float make the float non-adjoining
  • Although the 'clear' property isn't specified in this test, a new formatting context that doesn't fit below a float that would otherwise be adjoining will need to separate its margin from the float, so that it doesn't affect the float. This is very similar to clearance.
no-clearance-adjoining-opposite-float = No clearance due to large top margin that takes us past the float
  • Check that we don't apply clearance when the top margin of the clearance candidate takes it past the relevant float, and that a preceding empty block with a right float that's adjoining to the clearance candidate doesn't cause confusion
no-clearance-due-to-large-margin = No clearance due to large top margin that takes us past the float
no-clearance-due-to-large-margin-after-left-right = No clearance due to large top margin inside clear:right inside clear:left that takes us past the floats
second-float-inside-empty-cleared-block = Float separated from float inside empty cleared block
second-float-inside-empty-cleared-block-after-margin = Float separated from float inside empty cleared block, margin before clearance
+ 9.6 Absolute positioning
+ 9.6.1 Fixed positioning
+ 9.7 Relationships between 'display', 'position', and 'float'
+ 9.8 Comparison of normal flow, floats, and absolute positioning
+ 9.8.1 Normal flow
+ 9.8.2 Relative positioning
+ 9.8.3 Floating a box
+ 9.8.4 Absolute positioning
+ 9.9 Layered presentation
+ 9.9.1 Specifying the stack level: the 'z-index' property
fixed-pos-stacking-001 = fixed positioning makes a stacking context
  • auto The stack level of the generated box in the current stacking context is 0. If the box has 'position: fixed' or if it is the root, it also establishes a new stacking context.
+ 9.10 Text direction: the 'direction' and 'unicode-bidi' properties
unicode-bidi-parsing-001 DOM/JSScript CSS Writing Modes: parsing unicode-bidi: normal, embed, bidi-override
  • This test asserts the parser and getComputedStyle works correctly for the unicode-bidi: normal, embed, bidi-override.