CSS Containment Module Level 1 CR Test Suite

Types of Containment (144 tests)

Test Refs Flags Info
+ 3 Types of Containment
+ 3.1 Size Containment
contain-intrinsic-size-015 = CSS contain-intrinsic-size: inline flex
  • contain-intrinsic-size sizes an inline-flex element
contain-size-001 = size containment on non-atomic inlines
  • size containment does not apply to non atomic inlines
contain-size-002 = size containment on ruby-base
  • size containment does not to apply ruby-base, which is an internal ruby element
contain-size-003 = size containment on ruby-base-container
  • size containment does not to apply ruby-base-container, which is an internal ruby element
contain-size-004 = size containment on ruby-text-container
  • size containment does not to apply ruby-text-container, which is an internal ruby element
contain-size-005 = size containment on ruby-text
  • size containment does not to apply ruby-text, which is an internal ruby element
contain-size-006 = Size containment on table-cell
  • Size containment doesn't apply to table-cell elements.
contain-size-007 = Size containment on table-row-group
  • Size containment doesn't apply to table-row-group elements.
contain-size-008 = Size containment on table-header-group
  • Size containment doesn't apply to table-header-group elements.
contain-size-009 = Size containment on table-footer-group
  • Size containment doesn't apply to table-footer-group elements.
contain-size-010 = Size containment on table-row
  • Size containment doesn't apply to table-row elements.
contain-size-011 = Size containment on table-caption
  • Size containment does apply to table-caption elements.
contain-size-012 = Size containment on display:table
  • Size containment doesn't apply to table boxes.
contain-size-012b = Size containment on display:inline-table
  • Size containment doesn't apply to inline-table boxes.
contain-size-013 = Size containment replaced elements intrinsic size
  • This test checks that intrinsic size of replaced elements with 'contain: size' is zero.
contain-size-021 = 'contain: size' applies to inline-block (basic)
  • This test checks that when laying out an inline-block element with 'contain: size', the inline-block element must be treated as if it would have no contents. In this test, the inline-block element has 1 image and no in-flow block descendant.
contain-size-023 = 'contain: size' applies to inline-block (basic)
  • This test checks that when laying out an inline-block element with 'contain: size', the inline-block element must be treated as if it would have no contents. In this test, the inline-block element has text and no in-flow block descendant.
contain-size-025 = 'contain: size' applies to inline-block
  • This test checks that when laying out an inline-block element with 'contain: size', the inline-block element must be treated as if it would have no contents. In this test, the inline-block element has 2 in-flow block descendants made of images.
contain-size-027 = 'contain: size' applies to inline-block
  • This test checks that when laying out an inline-block element with 'contain: size', the inline-block element must be treated as if it would have no contents. In this test, the inline-block element has 2 in-flow block descendants made of text.
contain-size-041 = 'contain: size' applies to inline replaced element (basic)
  • This test checks that when laying out an inline replaced element with 'contain: size', the inline replaced element must be treated as having an intrinsic width and height of 0.
contain-size-042 = 'contain: size' applies to inline replaced element (basic)
  • This test checks that when laying out an inline replaced element with 'contain: size', the inline replaced element must be treated as having an intrinsic width and height of 0.
contain-size-051 = 'contain: size' does not apply to table-cell element
contain-size-052 = 'contain: size' does not apply to table-cell element
contain-size-056 = 'contain: size' applies to caption element
contain-size-061 = 'contain: size' applies to block box (basic)
contain-size-062 = 'contain: size' applies to block box (basic)
contain-size-063 = 'contain: size' affects intrinsic size
contain-size-064 = size containment: layout in place
  • The size containment box's content (including any pseudo-elements) must be laid out into the now fixed-size size containment box normally.
contain-size-baseline-001 = size containment and baselines
  • contain:size does not suppress baseline alignment
contain-size-borders = contain:size on auto-height block width vertical borders
contain-size-breaks-001 = Ahem size containment and fragmentation
  • size containment makes element monolithic
contain-size-button-001 = Size containment on button
  • Size containment does apply to buttons, thus their size is the same than if they don't have contents.
contain-size-fieldset-001 = Size containment on fieldset
  • Size containment does apply to fieldsets, thus their size is the same than if they don't have contents.
contain-size-fieldset-002 = Size containment on fieldset
  • Size containment does apply to fieldsets, thus their size is the same than if they don't have contents.
contain-size-flexbox-001 = Size containment on flexbox container
  • Size containment does apply to flexbox containers, thus their size is the same than if they don't have contents.
contain-size-flexbox-002 = size
contain-size-grid-001 = Size containment on grid container
  • Size containment does apply to grid containers, thus their size is the same than if they don't have contents.
contain-size-grid-002 = Size containment on grid container with explicit non-intrinsically sized tracks (and gaps)
  • grid-gap, grid-template-columns, and grid-template-rows do affect the size of the grid, even with size containment
contain-size-grid-003 Script Size containment on grid containers
  • Size containment does apply to grid containers, thus their size is the same than if they don't have contents but taking into account the track sizes.
contain-size-grid-004 Script Size containment on grid containers with percentages
  • Checks that grid containers with size containment and their grid items are sized correctly when the track sizing functions contain percentages.
contain-size-monolithic-001 = 'contain: size' element is monolithic
  • This test checks that an element with size containment becomes monolithic. In this test, the only way to break the content of such monolithic element is to break (or slice) the content at each pair of characters. Since column rules are only drawn between two columns that both have content and since the test expects only 1 column filled with content, therefore the column rule should not be painted, thus the 'no red' test success condition.
contain-size-monolithic-002 = absolute positioned 'contain: size' element is monolithic
  • This test checks that an absolute positioned element with size containment is monolithic.
contain-size-multicol-001 = Size containment on a multicol with set column size (and gap)
  • columns and column-gap do affect the size of a multicol, even with size containment
contain-size-replaced-001 = Size containment replaced elements intrinsic size
  • This test checks that intrinsic size of replaced elements with 'contain: size' is zero.
contain-size-replaced-002 = Size containment replaced elements intrinsic size
  • This test checks that intrinsic size of replaced elements with 'contain: size' is zero.
contain-size-replaced-004 = Size containment replaced elements intrinsic size
  • This test checks that intrinsic size of replaced elements with 'contain: size' is zero.
contain-size-replaced-005 = Size containment replaced elements intrinsic size
  • This test checks that intrinsic size of out-of-flow replaced elements with 'contain: size' is zero.
contain-size-replaced-006 = Size containment replaced elements intrinsic size
  • This test checks that min-width/min-height of replaced elements with 'contain: size' works.
contain-size-replaced-007 = Size containment replaced elements intrinsic size
  • This test checks that an aspect ratio computed from width and height attributes is used even with contain: size.
contain-size-scrollbars-001 = Size containment scrollbars
  • This test checks that the size of an element with 'contain: size' includes the scrollbars too.
contain-size-scrollbars-002 = Size containment scrollbars
  • This test checks that the size of a flexbox container with 'contain: size' includes the scrollbars too.
contain-size-scrollbars-003 = Size containment scrollbars
  • This test checks that the size of a grid container with 'contain: size' includes the scrollbars too.
contain-size-scrollbars-004 = Size containment scrollbars
  • This test checks that contain:size element's content and padding are considered for scrollbars.
contain-size-select-001 = Size containment on select
  • <select> elements with 'contain: size' should be treated as having no contents.
contain-size-select-002 = Size containment on select
  • Check that setting 'contain: size' on a <select> elements causes it to be sized as having no contents.
+ 3.2 Layout Containment
contain-content-004 = 'contain: content' applies to 'table-cell' elements
  • In this test, the td#contain should act as the containing block for div#abs-pos .
contain-layout-001 = layout containment on non-atomic inlines
  • layout containment does not apply to non atomic inlines
contain-layout-002 = Ahem layout containment on ruby-base
  • layout containment does not apply to ruby-base
contain-layout-003 = Ahem layout containment on ruby-base-container
  • layout containment does not apply to ruby-base-container
contain-layout-004 = Ahem layout containment on ruby-text-container
  • layout containment does not apply to ruby-text-container
contain-layout-005 = Ahem layout containment on ruby-text
  • layout containment does not apply to ruby-text
contain-layout-006 = Layout containment absolutely positioned descendants
  • Layout containment makes an element to act as containing block for absolutely positioned descendants.
contain-layout-007 = Layout containment fixed positioned descendants
  • Layout containment makes an element to act as containing block for fixed positioned descendants.
contain-layout-009 = Ahem Layout containment on table-row-group
  • Layout containment doesn't apply to table-row-group elements.
contain-layout-010 = Ahem Layout containment on table-header-group
  • Layout containment doesn't apply to table-header-group elements.
contain-layout-011 = Ahem Layout containment on table-footer-group
  • Layout containment doesn't apply to table-footer-group elements.
contain-layout-012 = Ahem Layout containment on table-row
  • Layout containment doesn't apply to table-row elements.
contain-layout-013 = Layout containment on table-cell
  • Layout containment does apply to table-cell elements.
contain-layout-014 = Layout containment on table-caption
  • Layout containment does apply to table-caption elements.
contain-layout-016 = Layout containment stacking context
  • Layout containment elements create a stacking context.
contain-layout-017 = Layout containment stacking context
  • Elements in which layout containment doesn't apply, do not create a stacking context.
contain-layout-018 = Layout containment stacking context
  • Elements in which layout containment doesn't apply, do not create a stacking context.
contain-layout-baseline-001 = layout containment and baselines
  • With contain:layout, for the purpose of the vertical-align property, the containing element is treated as having no baseline.
contain-layout-baseline-002 = Layout containment supress baseline in flex items
  • Flex items with layout containment are treated as having no baseline, for that reason their baseline is synthesized from the flex item's border box when they're baseline aligned.
contain-layout-baseline-003 = Layout containment supress baseline in grid items
  • Grid items with layout containment are treated as having no baseline, for that reason their baseline is synthesized from the grid item's border box when they're baseline aligned.
contain-layout-baseline-004 = Layout containment supress baseline in table cells
  • Table cells with layout containment are treated as having no baseline, for that reason their baseline is synthesized from the cell's border box when they're baseline aligned.
contain-layout-baseline-005 = Layout containment supress baseline
  • This test checks that baseline is suppressed for elements with 'contain: layout', so they are treated as having no baseline (thus its baseline is synthetized).
contain-layout-breaks-001 = layout containment and forced breaks
  • layout containment allows forced breaks.
contain-layout-breaks-002 = layout containment and forced breaks
  • forced breaks within layout containment do not propagate to the parent.
contain-layout-button-001 = Layout containment on button
  • Layout containment does apply to buttons, thus their baseline is their margin-bottom edge.
contain-layout-cell-001 = 'contain: layout' applies to 'table-cell' elements
  • In this test, the div#contain should act as the containing block for div#abs-pos .
contain-layout-cell-002 = 'contain: layout' applies to 'table-cell' elements
  • In this test, the td#contain should act as the containing block for div#abs-pos .
contain-layout-containing-block-absolute-001 = 'contain: layout' element should contain absolute position elements.
contain-layout-containing-block-fixed-001 = 'contain: layout' element should contain fixed position elements.
contain-layout-flexbox-001 = Layout containment on flexbox container
  • Layout containment does apply to flexbox containers, thus their baseline is the same than if they don't have contents.
contain-layout-grid-001 = Layout containment on grid container
  • Layout containment does apply to grid containers, thus their baseline is the same than if they don't have contents.
contain-layout-ifc-022 = 'contain: layout' and creation of an independent formating context: text no longer flowing around a float
  • This test checks that an element with 'contain: layout' will make such element create its own formatting context. In this test, the element with 'contain: layout' acts as if it has its own formatting context independent from div#floated-left element. In other words, the div#with-contain-layout is no longer required to flow its content around the div#floated-left element and current line boxes next to the float are no longer shortened to make room for the margin box of the float.
contain-layout-ignored-cases-no-principal-box-002 = 'contain: layout' element should not contain absolute/fixed position elements when no principal box is generated.
contain-layout-ignored-cases-no-principal-box-003 = 'contain: layout' element should not contain absolute/fixed position elements when no principal box is generated.
contain-layout-independent-formatting-context-001 = Layout containment independent formatting context
  • Layout containment elements establish an independent formatting context. The test checks that this feature of layout containment applies to blocks.
contain-layout-independent-formatting-context-002 = Layout containment independent formatting context
  • Layout containment elements establish an independent formatting context. The test checks that this feature of layout containment applies to inline blocks.
contain-layout-independent-formatting-context-003 = Layout containment independent formatting context
  • Layout containment elements establish an independent formatting context. The test checks that this feature of paint containment does not appliy to inline elements.
contain-layout-ink-overflow-013 = 'contain: layout' and ink overflow
  • This test checks that when the contents of an element with 'contain: layout' overflows, its contents must be treated as ink overflow. In this test, the content overflows the div#inner. If such content was treated as 'overflow: visible', then the div#outer would 'pick up' such content and would make it reachable and accessible via its own generated scrollbar. But the overflowed content must be treated as ink overflow and is therefore treated as a graphical effect that is beyond the scrolling mechanism and outside the scrolling mechanism.
contain-layout-ink-overflow-014 = 'contain: layout' and ink overflow
  • This test checks that when the contents of an element with 'contain: layout' overflows, its contents must be treated as ink overflow. In this test, the content overflows the div#inner. If such content was treated as 'overflow: visible', then the div#outer would 'pick up' such content and would make it reachable and accessible via its own generated scrollbar. But the overflowed content must be treated as ink overflow and is therefore treated as a graphical effect that is beyond the scrolling mechanism and outside the scrolling mechanism.
contain-layout-ink-overflow-015 = 'contain: layout' and ink overflow
  • This test checks that when the contents of an element with 'contain: layout' overflows, its contents must be treated as ink overflow. In this test, the content overflows the div#inner. If such content was treated as 'overflow: visible', then the div#outer would 'pick up' such content and would make it reachable and accessible via its own generated scrollbar. But the overflowed content must be treated as ink overflow and is therefore treated as a graphical effect that is beyond the scrolling mechanism and outside the scrolling mechanism.
contain-layout-ink-overflow-016 = 'contain: layout' and ink overflow
  • This test checks that when the contents of an element with 'contain: layout' overflows, its contents must be treated as ink overflow. In this test, the content overflows the div#inner. If such content was treated as 'overflow: visible', then the div#outer would 'pick up' such content and would make it reachable and accessible via its own generated scrollbar. But the overflowed content must be treated as ink overflow and is therefore treated as a graphical effect that is beyond the scrolling mechanism and outside the scrolling mechanism.
contain-layout-ink-overflow-017 = 'contain: layout' and ink overflow
  • This test checks that when the contents of an element with 'contain: layout' overflows, its contents must be treated as ink overflow. In this test, the content overflows the div#inner. If such content was treated as 'overflow: visible', then the div#outer would 'pick up' such content and would make it reachable and accessible via its own generated scrollbar. But the overflowed content must be treated as ink overflow and is therefore treated as a graphical effect that is beyond the scrolling mechanism and outside the scrolling mechanism.
contain-layout-ink-overflow-018 = 'contain: layout' and ink overflow
  • This test checks that when the contents of an element with 'contain: layout' overflows, its contents must be treated as ink overflow. In this test, the content overflows the div#inner. If such content was treated as 'overflow: visible', then the div#outer would 'pick up' such content and would make it reachable and accessible via its own generated scrollbar. But the overflowed content must be treated as ink overflow and is therefore treated as a graphical effect that is beyond the scrolling mechanism and outside the scrolling mechanism.
contain-layout-ink-overflow-019 = 'contain: layout' on element that overflows and its parent has 'overflow: scroll'
  • This test checks that when the contents of an element with 'contain: layout' overflows, its overflowing content must be treated as ink overflow. Such overflowing content therefore can not be reached and can not be accessed by the scrollbars or by the scrolling mechanism of the parent of such element. In this test, the parent has 'overflow: scroll'.
contain-layout-ink-overflow-020 = 'contain: layout' on element that overflows and its parent has 'overflow: auto'
  • This test checks that when the contents of an element with 'contain: layout' overflows, its overflowing content must be treated as ink overflow. Such overflowing content therefore can not be reached and can not be accessed by the scrollbars or by the scrolling mechanism of the parent of such element. In this test, the parent has 'overflow: auto' and therefore will not create scrollbars or a scrolling mechanism because the ink overflow is not a scrollable region for the parent.
+ 3.3 Paint Containment
clip-path-filter-radius-clips =
  • For crbug.com/1099234, ensure correct clip hierarchy with clip-path, filter and border radius clips
contain-paint-001 = paint containment use the padding edge
  • paint containment clips at the padding edge, not content edge, and takes corner clipping into account
contain-paint-002 = paint containment on non-atomic inlines
  • paint containment does not apply to non atomic inlines
contain-paint-004 = paint containment applies to the principal box for list items
  • paint containment applies to the principal box, which for list items excludes the list marker
contain-paint-005 = paint containment on ruby-base
  • paint containment does not apply to ruby-base
contain-paint-006 = paint containment on ruby-base-container
  • paint containment does not apply to ruby-base-container
contain-paint-007 = paint containment on ruby-text-container
  • paint containment does not apply to ruby-text-container
contain-paint-008 = paint containment on ruby-text
  • paint containment does not apply to ruby-text
contain-paint-009 = Paint containment absolutely positioned descendants
  • Paint containment makes an element to act as containing block for absolutely positioned descendants.
contain-paint-010 = Paint containment fixed positioned descendants
  • Paint containment makes an element to act as containing block for fixed positioned descendants.
contain-paint-011 = Paint containment absolutely positioned descendants
  • Paint containment doesn't apply to non-atomic inline elements so they don't act as containing block for absolutely positioned descendants.
contain-paint-012 = Paint containment fixed positioned descendants
  • Paint containment doesn't apply to non-atomic inline elements so they don't act as containing block for fixed positioned descendants.
contain-paint-014 = Paint containment on table-cell
  • Paint containment does apply to table-cell elements.
contain-paint-015 = Paint containment on table-row-group
  • Paint containment doesn't apply to table-row-group elements.
contain-paint-016 = Paint containment on table-header-group
  • Paint containment doesn't apply to table-header-group elements.
contain-paint-017 = Paint containment on table-footer-group
  • Paint containment doesn't apply to table-footer-group elements.
contain-paint-018 = Paint containment on table-row
  • Paint containment doesn't apply to table-row elements.
contain-paint-019 = Paint containment on table-caption
  • Paint containment does apply to table-caption elements.
contain-paint-020 = Paint containment stacking context
  • Paint containment elements create a stacking context.
contain-paint-021 = Paint containment stacking context
  • Elements in which paint containment doesn't apply, do not create a stacking context.
contain-paint-022 = 'contain: paint' and absolutely positioned descendants
  • This test checks that paint containment applies to atomic inline elements and then they act as containing block for absolutely positioned descendants.
contain-paint-023 = 'contain: paint' and absolutely positioned descendants
  • This test checks that paint containment applies to atomic inline elements so that they can act as containing block for absolutely positioned descendants.
contain-paint-024 = 'contain: paint' and absolutely positioned descendants
  • This test checks that paint containment does not apply to non-atomic inline elements so they do not act as containing block for absolutely positioned descendants.
contain-paint-025 = Paint containment stacking context
  • Elements in which paint containment doesn't apply, do not create a stacking context.
contain-paint-047 = 'contain: paint' and clipping at padding edge
  • This test checks that an element with 'contain: paint' that has its content overflowing will clip at padding edge.
contain-paint-048 = 'contain: paint' and clipping at padding edge
  • This test checks that an element with 'contain: paint' that has its content overflowing will clip at padding edge.
contain-paint-baseline-001 = paint containment and baselines
  • contain:paint does not suppress baseline alignment
contain-paint-cell-001 = 'contain: paint' applies to 'table-cell' elements
  • This test checks that the paint containment applies to table-cell elements. Therefore the content of the table-cell element should be clipped to the padding edge of its principal box.
contain-paint-cell-002 = 'contain: paint' and table-cell elements
  • This test checks that the paint containment applies to table-cell elements. Therefore the content of the table-cell element should be clipped to the padding edge of its principal box.
contain-paint-clip-011 = 'contain: paint' and clipping descendants at padding edge
  • This test checks that the paint of the descendant (a red square image) and its geometry is clipped to the padding edge of the element's principal box.
contain-paint-clip-012 = 'contain: paint' and clipping descendants at padding edge
  • This test checks that the paint of the descendant (a red square image) and its geometry is clipped to the padding edge of the element's principal box.
contain-paint-clip-013 = 'contain: paint' and clipping descendants at padding edge
  • This test checks that the paint of the descendant (a red square image) and its geometry is clipped to the padding edge of the element's principal box.
contain-paint-clip-014 = 'contain: paint' and clipping descendants at padding edge
  • This test checks that the paint of the descendant (a red square image) and its geometry is clipped to the padding edge of the element's principal box.
contain-paint-clip-015 = 'contain: paint' and clipping descendants at padding edge
  • This test checks that the paint of the descendant (a red square image) and its geometry is clipped to the padding edge of the element's principal box, taking corner clipping into account.
contain-paint-clip-016 = 'contain: paint' and clipping descendants at padding edge
  • This test checks that the paint of the descendant (a red square image) and its geometry is clipped to the padding edge of the element's principal box, taking corner clipping into account.
contain-paint-clip-017 = 'contain: paint' and clipping at padding edge (generated ::before content)
  • This test checks that the paint containment of an element clips at its padding edge. In this test, the generated element (a red square image) is located outside the content edge, into what would have been the padding belt of the element.
contain-paint-clip-018 = 'contain: paint' and clipping at padding edge (generated ::after content)
  • This test checks that the paint containment of an element clips at its padding edge. In this test, the generated element (a red square image) is located outside the content edge, into what would have been the padding belt of the element.
contain-paint-clip-019 = 'contain: paint' and clipping prevents scrollbars
  • This test checks that the paint containment of an element clips contents. It should also prevent layout overflow from being propagated to ancestors.
contain-paint-ifc-011 = 'contain: paint' and margin collapsing
  • This test checks that a block element with 'contain: paint' establishes a new block formatting context which is independent and separate from others. This causes margin collapsing to be ineffective among vertically-adjacent boxes. In this test, the top margin of parent boxes and top margin of their respective first in-flow child do not collapse. Also, in this test, the bottom margin of the last in-flow child of boxes and bottom margin of their respective parent boxes do not collapse.
contain-paint-independent-formatting-context-001 = Paint containment independent formatting context
  • Paint containment elements establish an independent formatting context. The test checks that this feature of paint containment applies to blocks.
contain-paint-independent-formatting-context-002 = Paint containment independent formatting context
  • Paint containment elements establish an independent formatting context. The test checks that this feature of paint containment applies to inline blocks.
contain-paint-independent-formatting-context-003 = Paint containment independent formatting context
  • Paint containment elements establish an independent formatting context. The test checks that this feature of paint containment does not appliy to inline elements.
contain-paint-table-001 = 'contain: paint' applies to 'table' elements
  • This test checks that paint containment applies to table elements. Therefore the content of the table element should be clipped to the padding edge of its principal box.
contain-paint-table-002 = 'contain: paint' applies to 'table' elements
  • This test checks that paint containment applies to table elements. Therefore the content of the table element (including its caption) should be clipped to the padding edge of its principal box.