CSS Box Alignment Module Level 3 CR Test Suite

Gaps Between Boxes (85 tests)

Test Refs Flags Info
+ 8 Gaps Between Boxes
flexbox-gap-position-absolute = Test flexbox intrinsic inline-size, gap, and absolute-positioned children
  • This test verifies the absolute-positioned children do not contribute the gap size to the flexbox's intrinsic inline-size.
gap-002-lr = gap - vertical with vertical LR writing mode
  • The 'gap' property enables putting space exclusively between items
gap-002-ltr = gap - vertical
  • The 'gap' property enables putting space exclusively between items
gap-002-rl = gap - vertical with vertical RL writing mode
  • The 'gap' property enables putting space exclusively between items
gap-002-rtl = gap - RTL vertical
  • The 'gap' property enables putting space exclusively between items
grid-gutters-014 = Percentage gap, content-based width/height (via float)
  • Tests that percentage gaps contribute zero to intrinsic sizing, then resolve against corresponding axis of containing block for layout.
grid-gutters-015 =
grid-gutters-016 =
grid-gutters-and-alignment AhemScript gutters with align and justify properties
  • This test checks that gutters do not interfere with align and justify computation, with or without borders, paddings, margins and negative space.
+ 8.1 Row and Column Gutters: the row-gap and column-gap properties
column-gap-animation-001 Script column-gap test animation
  • This test checks that column-gap property is interpolable.
column-gap-animation-002 Script column-gap normal test animation
  • This test checks that 'normal' value for column-gap property is not interpolable.
column-gap-animation-003 Script Default column-gap test animation
  • This test checks that the default value for column-gap property, which is 'normal', is not interpolable.
column-gap-parsing-001 Script column-gap parsing
gap-001-lr = gap - horizontal with vertical LR writing mode
  • The 'gap' property enables putting space exclusively between items
gap-001-ltr = gap - horizontal
  • The 'gap' property enables putting space exclusively between items
gap-001-rl = gap - horizontal with vertical RL writing mode
  • The 'gap' property enables putting space exclusively between items
gap-001-rtl = gap - horizontal with RTL writing mode
  • The 'gap' property enables putting space exclusively between items
gap-003-lr = gap - lr rows and columns
  • The 'gap' property enables putting space exclusively between items
gap-003-ltr = gap - rows and columns
  • The 'gap' property enables putting space exclusively between items
gap-003-rl = gap - rl rows and columns
  • The 'gap' property enables putting space exclusively between items
gap-003-rtl = gap - RTL rows and columns
  • The 'gap' property enables putting space exclusively between items
gap-004-lr = gap - vertical LR intrinsic horizontal
  • The 'gap' property enables putting space exclusively between items
gap-004-ltr = gap - intrinsic horizontal
  • The 'gap' property enables putting space exclusively between items
gap-004-rl = gap - vertical RL intrinsic horizontal
  • The 'gap' property enables putting space exclusively between items
gap-004-rtl = gap - RTL intrinsic horizontal
  • The 'gap' property enables putting space exclusively between items
gap-005-lr = gap - vertical LR intrinsic vertical
  • The 'gap' property enables putting space exclusively between items
gap-005-ltr = gap - intrinsic vertical
  • The 'gap' property enables putting space exclusively between items
gap-005-rl = gap - vertical rl intrinsic vertical
  • The 'gap' property enables putting space exclusively between items
gap-005-rtl = gap - intrinsic vertical
  • The 'gap' property enables putting space exclusively between items
gap-006-lr = gap - wrap lr horizontal
  • The 'gap' property enables putting space exclusively between items
gap-006-ltr = gap - wrap horizontal
  • The 'gap' property enables putting space exclusively between items
gap-006-rl = gap - wrap rl horizontal
  • The 'gap' property enables putting space exclusively between items
gap-006-rtl = gap - wrap rtl horizontal
  • The 'gap' property enables putting space exclusively between items
gap-007-lr = gap - lr wrap vertical
  • The 'gap' property enables putting space exclusively between items
gap-007-ltr = gap - wrap vertical
  • The 'gap' property enables putting space exclusively between items
gap-007-rl = gap - rl wrap vertical
  • The 'gap' property enables putting space exclusively between items
gap-007-rtl = gap - rtl wrap vertical
  • The 'gap' property enables putting space exclusively between items
gap-008-ltr = gap - row and column gap
  • The 'gap' property enables putting space exclusively between items
gap-009-ltr = gap - mixed units
  • The 'gap' property enables putting space exclusively between items
gap-010-ltr = gap - calc gap
  • The 'gap' property enables putting space exclusively between items
gap-animation-001 Script gap test animation
  • This test checks that gap property is interpolable.
gap-animation-002 Script gap normal test animation
  • This test checks that 'normal' value for gap property is not interpolable.
gap-animation-003 Script Default gap test animation
  • This test checks that the default value for gap property, which is 'normal', is not interpolable.
gap-animation-004 Script gap test animation
  • This test checks that gap property is interpolable for each longhand (row-gap and column-gap) independently.
gap-normal-computed-001 Script computed value of normal on *-gap properties
gap-normal-used-001 = used value of *-gap:normal on grid
gap-normal-used-002 = used value of *-gap:normal on flexbox
grid-gutters-005 = Support for row-gap and column-gap properties
grid-gutters-006 = Support for grid-row-gap alias for row-gap and grid-column-gap for column-gap
grid-gutters-and-alignment AhemScript gutters with align and justify properties
  • This test checks that gutters do not interfere with align and justify computation, with or without borders, paddings, margins and negative space.
row-gap-animation-001 Script row-gap test animation
  • This test checks that row-gap property is interpolable.
row-gap-animation-002 Script row-gap normal test animation
  • This test checks that 'normal' value for row-gap property is not interpolable.
row-gap-animation-003 Script Default row-gap test animation
  • This test checks that the default value for row-gap property, which is 'normal', is not interpolable.
row-gap-parsing-001 Script row-gap parsing
column-gap-composition Script column-gap composition
  • column-gap supports animation by computed value type
column-gap-computed Script CSS Box Alignment Level 3: getComputedStyle().columnGap
  • column-gap computed value is as specified.
column-gap-interpolation Script column-gap interpolation
  • column-gap supports animation by computed value type
column-gap-invalid Script CSS Box Alignment Level 3: parsing column-gap with invalid values
  • column-gap supports only the grammar '<length-percentage> | normal'.
  • column-gap rejects negative <length-percentage>.
column-gap-valid Script CSS Box Alignment Level 3: parsing column-gap with valid values
  • column-gap supports the full grammar '<length-percentage> | normal'.
row-gap-composition Script row-gap composition
  • row-gap supports animation by computed value type
row-gap-computed Script CSS Box Alignment Level 3: getComputedStyle().rowGap
  • row-gap computed value is a specified keyword or a computed <length-percentage>.
row-gap-interpolation Script row-gap interpolation
  • row-gap supports animation by computed value type
row-gap-invalid Script CSS Box Alignment Level 3: parsing row-gap with invalid values
  • row-gap supports only the grammar 'normal | <length-percentage>'.
row-gap-valid Script CSS Box Alignment Level 3: parsing row-gap with valid values
  • row-gap supports the full grammar 'normal | <length-percentage>'.
+ 8.2 Gap Shorthand: the gap property
grid-gutters-001 = Support for gap shorthand property of row-gap and column-gap
grid-gutters-002 = Support for grid-gap shorthand property as an alias for gap
grid-gutters-003 = Support for gap shorthand property of row-gap and column-gap setting both to different values
grid-gutters-004 = Support for grid-gap shorthand property as an alias for gap setting both to different values
grid-gutters-007 = Support for percentage values for gap with definite height and width for grid
grid-gutters-008 = Support for aliased support to gap of percentage values for grid-gap
grid-gutters-009 = Support for percentage values for gap with indefinite percentage basis
grid-gutters-010 = Support for percentage values for grid-gap with indefinite percentage basis
grid-gutters-011 = Support for calc mixing fixed and percentage values for gap
grid-gutters-012 = Support for calc mixing fixed and percentage values for grid-gap as alias for gap
grid-gutters-013 = Gutters adjacent to collapsed tracks also collapse
  • This test checks that gutters adjacent to collapsed tracks don't reduce the space available for aligning adjacent grid items.
gap-computed Script CSS Box Alignment Level 3: getComputedStyle().gap
  • gap computed value is a pair of keyword or <length-percentage> values.
gap-invalid Script CSS Box Alignment Level 3: parsing gap with invalid values
  • gap supports only the grammar '<row-gap> <column-gap>?'.
gap-shorthand Script CSS Box Alignment Level 3: gap sets longhands
  • row-gap supports the full grammar '<row-gap> <column-gap>?'.
gap-valid Script CSS Box Alignment Level 3: parsing gap with valid values
  • row-gap supports the full grammar '<row-gap> <column-gap>?'.
+ 8.3 Legacy Gap Properties: the grid-row-gap, grid-column-gap, and grid-gap properties
gap-001-lr = gap - horizontal with vertical LR writing mode
  • The 'gap' property enables putting space exclusively between items
gap-001-ltr = gap - horizontal
  • The 'gap' property enables putting space exclusively between items
gap-001-rl = gap - horizontal with vertical RL writing mode
  • The 'gap' property enables putting space exclusively between items
gap-001-rtl = gap - horizontal with RTL writing mode
  • The 'gap' property enables putting space exclusively between items
gap-003-lr = gap - lr rows and columns
  • The 'gap' property enables putting space exclusively between items
gap-003-ltr = gap - rows and columns
  • The 'gap' property enables putting space exclusively between items
gap-003-rl = gap - rl rows and columns
  • The 'gap' property enables putting space exclusively between items
gap-003-rtl = gap - RTL rows and columns
  • The 'gap' property enables putting space exclusively between items
gap-004-lr = gap - vertical LR intrinsic horizontal
  • The 'gap' property enables putting space exclusively between items
gap-004-ltr = gap - intrinsic horizontal
  • The 'gap' property enables putting space exclusively between items
gap-004-rl = gap - vertical RL intrinsic horizontal
  • The 'gap' property enables putting space exclusively between items
gap-004-rtl = gap - RTL intrinsic horizontal
  • The 'gap' property enables putting space exclusively between items
gap-005-lr = gap - vertical LR intrinsic vertical
  • The 'gap' property enables putting space exclusively between items
gap-005-ltr = gap - intrinsic vertical
  • The 'gap' property enables putting space exclusively between items
gap-005-rl = gap - vertical rl intrinsic vertical
  • The 'gap' property enables putting space exclusively between items
gap-005-rtl = gap - intrinsic vertical
  • The 'gap' property enables putting space exclusively between items
gap-006-lr = gap - wrap lr horizontal
  • The 'gap' property enables putting space exclusively between items
gap-006-ltr = gap - wrap horizontal
  • The 'gap' property enables putting space exclusively between items
gap-006-rl = gap - wrap rl horizontal
  • The 'gap' property enables putting space exclusively between items
gap-006-rtl = gap - wrap rtl horizontal
  • The 'gap' property enables putting space exclusively between items
gap-007-lr = gap - lr wrap vertical
  • The 'gap' property enables putting space exclusively between items
gap-007-ltr = gap - wrap vertical
  • The 'gap' property enables putting space exclusively between items
gap-007-rl = gap - rl wrap vertical
  • The 'gap' property enables putting space exclusively between items
gap-007-rtl = gap - rtl wrap vertical
  • The 'gap' property enables putting space exclusively between items
gap-008-ltr = gap - row and column gap
  • The 'gap' property enables putting space exclusively between items
gap-009-ltr = gap - mixed units
  • The 'gap' property enables putting space exclusively between items
gap-010-ltr = gap - calc gap
  • The 'gap' property enables putting space exclusively between items
grid-column-gap-parsing-001 Script grid-column-gap parsing
grid-gap-parsing-001 Script gap shorthand parsing
grid-gutters-002 = Support for grid-gap shorthand property as an alias for gap
grid-gutters-004 = Support for grid-gap shorthand property as an alias for gap setting both to different values
grid-gutters-006 = Support for grid-row-gap alias for row-gap and grid-column-gap for column-gap
grid-gutters-008 = Support for aliased support to gap of percentage values for grid-gap
grid-gutters-013 = Gutters adjacent to collapsed tracks also collapse
  • This test checks that gutters adjacent to collapsed tracks don't reduce the space available for aligning adjacent grid items.
grid-row-gap-parsing-001 Script grid-row-gap parsing
grid-auto-fill-columns-001 Script CSS Grid: auto-fill columns
  • Check that auto-fill columns are properly computed in a grid container
grid-auto-fit-columns-001 Script CSS Grid: auto-fit columns
  • Check that auto-fit columns are properly computed in a grid container
grid-auto-fill-rows-001 Script CSS Grid: auto-fill rows
  • Check that auto-fill rows are properly computed in a grid container
grid-auto-fit-rows-001 Script CSS Grid: auto-fit rows
  • Check that auto-fit rows are properly computed in a grid container