CSS2.1 Test Suite

Visual effects (151 tests)

Test Refs Flags Info
+ 11.1 Overflow and clipping
abspos-overflow-001 Absolutely positioned children of overflow: scroll
abspos-overflow-002 Absolutely positioned children of overflow: scroll
abspos-overflow-003 Absolutely positioned children of overflow: scroll
abspos-overflow-004 Absolutely positioned children of overflow: hidden
abspos-overflow-005 Absolutely positioned children of overflow: hidden
abspos-overflow-006 Absolutely positioned children of overflow: hidden
abspos-overflow-007 Absolutely positioned children of overflow: auto
abspos-overflow-008 Absolutely positioned children of overflow: auto
abspos-overflow-009 Absolutely positioned children of overflow: auto
abspos-overflow-010 Positioning, Overflow, and Stacking: Empty positioned children of 'overflow:auto' boxes
abspos-overflow-011 Positioning, Overflow, and Stacking: 'overflow:auto' as an in-flow sibling of a positioned element
abspos-overflow-012 Positioning, Overflow, and Clipping: Does 'overflow:auto' affect positioned elements that are relative to elements outside the overflow
+ 11.1.1 Overflow: the 'overflow' property
clipping-002 'overflow': Basic Test
clipping-003 CSS test
clipping-004 CSS clipping test
clipping-005 CSS clipping test
clipping-006 CSS clipping test
clipping-007
clipping-008 CSS clipping test
clipping-015 CSS clipping test
max-height-105 max-height - oveflow
  • The 'max-height' property can restrain the used value of height when the used value of height is greater than the declared max-height and not when it is less than the declared max-height and not when it does not exceed the declared max-height.
max-height-107 Ahem max-height - space for scrollbar
  • Any space taken up by the scrollbars should be taken out of (subtracted from the dimensions of) the containing block formed by the element with the scrollbars.
max-height-108 Ahem max-height - overflow
  • The max-height property can restrain the used value of height when the used value of height is greater than the declared max-height and not when it is less than the declared max-height and not when it does not exceed the declared max-height.
max-height-109 Ahem max-height - overflow
  • The 'max-height' property can restrain the used value of height when the used value of height is greater than the declared max-height.
max-height-110 Ahem max-height - space for scrollbar
  • Any space taken up by the scrollbars should be taken out of (subtracted from the dimensions of) the containing block formed by the element with the scrollbars.
max-height-111 Ahem max-height - float and overflow
  • The content of the #test-red-overlapped generates an active horizontal scrollbar. The height of such horizontal scrollbar adds itself to the content making it exceed the max-height constraint of 200px. Therefore, such vertical space taken by the horizontal scrollbar must be substracted from the height of the content. An active vertical scrollbar then must be generated to provide access to the equivalent of the height of the horizontal scrollbar.
max-width-105 Ahem max-width - height and overflow
  • 'max-width' specifies a fixed maximum used width. If the used width is greater than max-width, then the computed value of max-width is used as the computed value for width.
max-width-107 Ahem max-width - height and overflow
  • 'max-width' specifies a fixed maximum used width. If the used width is greater than max-width, then the computed value of max-width is used as the computed value for width.
max-width-108 Ahem max-width - float and overflow
  • 'max-width' specifies a fixed maximum used width. If the used width is greater than max-width, then the computed value of max-width is used as the computed value for width.
min-height-104 Ahem min-height - space for scrollbar
  • Any space taken up by the scrollbars should be taken out of (subtracted from the dimensions of) the containing block formed by the element with the scrollbars.
min-height-105 Ahem min-height - space for scrollbar
  • Any space taken up by the scrollbars should be taken out of (subtracted from the dimensions of) the containing block formed by the element with the scrollbars.
min-height-106 Ahem min-height - float and overflow
  • 'min-height' specifies a fixed minimum used height. If the element requires an horizontal scrollbar, then the horizontal scrollbar height should be subtracted from the height of its containing block so that the resulting used height continues to honor the declared min-height.
overflow-001 Overflow set to 'visible'
  • The 'overflow' property set to 'visible' properly shows all content that extends beyond the containing element.
overflow-002 Overflow set to 'hidden'
  • The 'overflow' property set to 'hidden' properly hides all content that extends beyond the containing element.
overflow-003 Interact Overflow set to 'scroll'
  • The 'overflow' property set to 'scroll' properly applies a scrolling mechanism to access overflowing content.
overflow-004 Interact Overflow set to 'auto'
  • The 'overflow' property set to 'auto' properly applies a scrolling mechanism to access overflowing content.
overflow-005 Interact Overflow set to 'inherit'
  • The 'overflow' property set to 'inherit' properly inherits its value from its parent element.
overflow-006 Floats and overflow
overflow-007 Interact margin and overflow
overflow-008 Interact margin and overflow
overflow-ancestors-001 Interact Overflow affect on children
  • Overflow clipping does not affect elements which are ancestors to the element being clipped.
overflow-applies-to-001 Ahem overflow applied to elements with 'display' set to 'table-row-group'
  • The 'overflow' property does not apply to elements with 'display' set to 'table-row-group'.
overflow-applies-to-002 Ahem overflow applied to elements with 'display' set to 'table-header-group'
  • The 'overflow' property does not apply to elements with 'display' set to 'table-header-group'.
overflow-applies-to-003 Ahem overflow applied to elements with 'display' set to 'table-footer-group'
  • The 'overflow' property does not apply to elements with 'display' set to 'table-footer-group'.
overflow-applies-to-004 Ahem overflow applied to elements with 'display' set to 'table-row'
  • The 'overflow' property does not apply to elements with 'display' set to 'table-row'.
overflow-applies-to-005 Ahem overflow applied to elements with 'display' set to 'table-column-group'
  • The 'overflow' property does not apply to elements with 'display' set to 'table-column-group'.
overflow-applies-to-006 Ahem overflow applied to elements with 'display' set to 'table-column'
  • The 'overflow' property does not apply to elements with 'display' set to 'table-column'.
overflow-applies-to-007 Ahem overflow applied to elements with 'display' set to 'table-cell'
  • The 'overflow' property applies to elements with 'display' set to 'table-cell'.
overflow-applies-to-008 Ahem overflow applied to elements with 'display' set to 'inline'
  • The 'overflow' property does not apply to elements with 'display' set to 'inline'.
overflow-applies-to-009 Ahem overflow applied to elements with 'display' set to 'block'
  • The 'overflow' property applies to elements with 'display' set to 'block'.
overflow-applies-to-010 Ahem overflow applied to elements with 'display' set to 'list-item'
  • The 'overflow' property applies to elements with 'display' set to 'list-item'.
overflow-applies-to-011 Ahem overflow applied to elements with 'display' set to 'run-in'
  • The 'overflow' property applies to elements with 'display' set to 'run-in'.
overflow-applies-to-012 Ahem overflow applied to elements with 'display' set to 'inline-block'
  • The 'overflow' property applies to elements with 'display' set to 'inline-block'.
overflow-applies-to-013 Ahem overflow applied to elements with 'display' set to 'table'
  • The 'overflow' property does apply to elements with 'display' set to 'table'.
overflow-applies-to-014 Ahem overflow applied to elements with 'display' set to 'inline-table'
  • The 'overflow' property does apply to elements with 'display' set to 'inline-table'.
overflow-applies-to-015 Ahem overflow applied to elements with 'display' set to 'table-caption'
  • The 'overflow' property does apply to elements with 'display' set to 'table-caption'.
overflow-html-body-001 Overflow on body propagates to viewport
  • An HTML user agent propagates the 'overflow' property from the 'body' to the viewport.
overflow-parent-001 Overflow hidden on root element
  • Clipping does not affect elements where their parent is the viewport.
overflow-print-001 OptionalPaged Overflow 'scroll' and printing
  • The 'overflow' property set to 'scroll' acts like 'visible' when element is printed.
overflow-root-001 Overflow on root propagates to viewport
  • The 'overflow' property set on the root propagates to the viewport.
overflow-scrollbar-001 Scrollbar placement in overflow scenario
  • The placement of the scrollbar is between the inner border edge and the outer padding edge.
overflow-visible-viewport-001 DOM/JS Overflow set to visible is interpreted as auto on viewport
  • When 'overflow: visible' is set on the viewport it is interpreted as 'auto' but is still returns a computed value of 'visible'.
stack-overflow-001 Stacking order and overflow
+ 11.1.2 Clipping: the 'clip' property
absolute-replaced-height-036 Bitmaps Absolute Replaced Elements: specified 'top' and 'bottom' with auto margins
  • If 'top' and 'bottom' are specified on an absolutely-positioned replaced element, then any remaining space is split amongst the 'auto' vertical margins.
abspos-028 Abspos static position and clear
  • The static position is calculated as if clear had been none.
clip-001 DOM/JS clip - auto value
  • An element must not clip when clip is set to auto.
clip-004 Clip using pixels with a negative zero value, -0px
  • The 'clip' property sets a negative zero value, in pixels, for all sides of the clipping rectangle.
clip-005 Clip using pixels with a zero value, 0px
  • The 'clip' property sets a zero value, in pixels, for all sides of the clipping rectangle.
clip-006 Clip using pixels with a zero value, +0px
  • The 'clip' property sets a zero value, in pixels, for all sides of the clipping rectangle.
clip-007 Clip using pixels with a nominal value, 96px
  • The 'clip' property sets a value of ninety-six pixels, for all sides of the clipping rectangle.
clip-008 Clip using pixels with a positive nominal value, +96px
  • The 'clip' property sets a value of ninety-six pixels, for all sides of the clipping rectangle.
clip-016 Clip using points with a negative zero value, -0pt
  • The 'clip' property sets a negative zero value, in points, for all sides of the clipping rectangle.
clip-017 Clip using points with a zero value, 0pt
  • The 'clip' property sets a zero value, in points, for all sides of the clipping rectangle.
clip-018 Clip using points with a zero value, +0pt
  • The 'clip' property sets a zero value, in points, for all sides of the clipping rectangle.
clip-019 Clip using points with a nominal value, 72pt
  • The 'clip' property sets a of seventy-two points for all sides of the clipping rectangle.
clip-020 Clip using points with a positive nominal value, +72pt
  • The 'clip' property sets a of seventy-two points for all sides of the clipping rectangle.
clip-028 Clip using picas with a negative zero value, -0pc
  • The 'clip' property sets a negative zero value, in picas, for all sides of the clipping rectangle.
clip-029 Clip using picas with a zero value, 0pc
  • The 'clip' property sets a zero value, in picas, for all sides of the clipping rectangle.
clip-030 Clip using picas with a zero value, +0pc
  • The 'clip' property sets a zero value, in picas, for all sides of the clipping rectangle.
clip-031 Clip using picas with a nominal value, 6pc
  • The 'clip' property sets a of six picas for all sides of the clipping rectangle.
clip-032 Clip using picas with a positive nominal value, +6pc
  • The 'clip' property sets a of six picas for all sides of the clipping rectangle.
clip-040 Clip using centimeters with a negative zero value, -0cm
  • The 'clip' property sets a negative zero value, in centimeters, for all sides of the clipping rectangle.
clip-041 Clip using centimeters with a zero value, 0cm
  • The 'clip' property sets a zero value, in centimeters, for all sides of the clipping rectangle.
clip-042 Clip using centimeters with a zero value, +0cm
  • The 'clip' property sets a zero value, in centimeters, for all sides of the clipping rectangle.
clip-043 Clip using centimeters with a nominal value, 2.54cm
  • The 'clip' property sets a value of 2.54 centimeters, for all sides of the clipping rectangle.
clip-044 Clip using centimeters with a positive nominal value, +2.54cm
  • The 'clip' property sets a value of 2.54 centimeters, for all sides of the clipping rectangle.
clip-052 Clip using millimeters with a negative zero value, -0mm
  • The 'clip' property sets a negative zero value, in millimeters, for all sides of the clipping rectangle.
clip-053 Clip using millimeters with a zero value, 0mm
  • The 'clip' property sets a zero value, in millimeters, for all sides of the clipping rectangle.
clip-054 Clip using millimeters with a zero value, +0mm
  • The 'clip' property sets a zero value, in millimeters, for all sides of the clipping rectangle.
clip-055 Clip using millimeters with a nominal value, 25.4mm
  • The 'clip' property sets a value of 25.4 millimeters, for all sides of the clipping rectangle.
clip-056 Clip using millimeters with a positive nominal value, +25.4mm
  • The 'clip' property sets a value of 25.4 millimeters, for all sides of the clipping rectangle.
clip-064 Clip using inches with a negative zero value, -0in
  • The 'clip' property sets a negative zero value, in inches, for all sides of the clipping rectangle.
clip-065 Clip using inches with a zero value, 0in
  • The 'clip' property sets a zero value, in inches, for all sides of the clipping rectangle.
clip-066 Clip using inches with a zero value, +0in
  • The 'clip' property sets a zero value, in inches, for all sides of the clipping rectangle.
clip-067 Clip using inches with a nominal value, 1in
  • The 'clip' property sets a value, in inches, for all sides of the clipping rectangle.
clip-068 Clip using inches with a positive nominal value, +96in
  • The 'clip' property sets a value, in inches, for all sides of the clipping rectangle.
clip-076 Ahem Clip using 'em' units with a negative zero value, -0em
  • The 'clip' property sets a negative zero value, in 'em' units, for all sides of the clipping rectangle.
clip-077 Ahem Clip using 'em' units with a zero value, 0em
  • The 'clip' property sets a zero value, in 'em' units, for all sides of the clipping rectangle.
clip-078 Ahem Clip using 'em' units with a positive zero value, +0em
  • The 'clip' property sets a positive zero value, in 'em' units, for all sides of the clipping rectangle.
clip-079 Ahem Clip using 'em' units with a nominal value, 6em
  • The 'clip' property sets a value, in 'em' units, for all sides of the clipping rectangle.
clip-080 Ahem Clip using 'em' units with a positive nominal value, +6em
  • The 'clip' property sets a value, in 'em' units, for all sides of the clipping rectangle.
clip-088 Ahem Clip using 'ex' units with a negative zero value, -0ex
  • The 'clip' property sets a negative zero value, in 'ex' units, for all sides of the clipping rectangle.
clip-089 Ahem Clip using 'ex' units with a zero value, 0ex
  • The 'clip' property sets a zero value, in 'ex' units, for all sides of the clipping rectangle.
clip-090 Ahem Clip using 'ex' units with a positive zero value, +0ex
  • The 'clip' property sets a positive zero value, in 'ex' units, for all sides of the clipping rectangle.
clip-091 Ahem Clip using 'ex' units with a nominal value, 7.5ex
  • The 'clip' property sets a value, in 'ex' units, for all sides of the clipping rectangle.
clip-092 Ahem Clip using 'ex' units with a positive nominal value, +7.5ex
  • The 'clip' property sets a value, in 'ex' units, for all sides of the clipping rectangle.
clip-097 Clip with a negative zero value with no units, -0
  • The 'clip' property sets a negative zero value and no units, for all sides of the clipping rectangle.
clip-098 Clip with a zero value with no units, 0
  • The 'clip' property sets a zero value and no units, for all sides of the clipping rectangle.
clip-099 Clip with a positive zero value with no units, +0
  • The 'clip' property sets a positive zero value and no units, for all sides of the clipping rectangle.
clip-100 Clip using the 'rect()' function and specifying all values as 'auto'
  • The 'clip' property sets an 'auto' value for all sides of the clipping rectangle.
clip-101 Clip specifying only the value 'auto'
  • The 'clip' properly applies the value of 'auto'.
clip-102 Clip with the value 'inherit'
  • The 'clip' property set to 'inherit' properly inherits the appropriate value for the parent element.
clip-inherit-001 clip: Inheriting 'auto' arguments of rect()
  • The 'auto' keywords in rect() resolve to a used (not computed) value that aligns them with the border edges.
clip-non-absolute-001 Clip on non-positioned element
  • Clip does not apply to non-positioned elements.
clip-rect-001 InvalidOptional clip: Missing commas in rect()
  • User agents may support separation of values within rect() by whitespace instead of commas, but not a combination of whitespace and commas.
clip-shape-001 Clip with other invalid shape
  • A shape value other than 'rect()' is not supported.
clipping-001 'clip': Basic Test
clipping-009
clipping-010 CSS clipping test
clipping-011 CSS clipping test
clipping-012 CSS clipping test
clipping-013 CSS clipping test
clipping-014 CSS clipping test
clipping-016 'clip': Basic Test
clipping-017 Convoluted clip() test
shape-spaces-001 Optional Clip with 'rect()' function values separated
  • User agent may also support separation of the 'rect()' function values 'top', 'right', 'bottom', and 'left' with spaces.
table-anonymous-whitespace-001 Table Anonymous Box Generation - interleaved whitespace
  • Anonymous white space inside a tabular container does not generate any boxes.
+ 11.2 Visibility: the 'visibility' property
visibility-001 Visibility set to 'collapse'
  • A block with 'visibility' set to 'collapse' will not be rendered on the page but will still affect layout flow.
visibility-002 Visibility set to 'hidden'
  • A block with 'visibility' set to 'collapse' will not be rendered on the page but will still affect layout flow.
visibility-003 Visibility set to 'visible'
  • A block with 'visibility' set to 'visible' will be rendered on the page.
visibility-004 Visibility set to 'inherit'
  • A block can inherit its 'visibility' behavior from its parent container.
visibility-005 Ahem visibility - descendants of a 'visibility: hidden' element
  • Descendants of a 'visibility: hidden' element will be visible if they have 'visibility: visible'
visibility-applies-to-001 Visibility applied to elements with 'display' set to 'table-row-group'
  • The 'visibility' property applies to elements with 'display' set to 'table-row-group'.
visibility-applies-to-002 Visibility applied to elements with 'display' set to 'table-header-group'
  • The 'visibility' property applies to elements with 'display' set to 'table-header-group'.
visibility-applies-to-003 Visibility applied to elements with 'display' set to 'table-footer-group'
  • The 'visibility' property applies to elements with 'display' set to 'table-footer-group'.
visibility-applies-to-004 Visibility applied to elements with 'display' set to 'table-row'
  • The 'visibility' property applies to elements with 'display' set to 'table-row'.
visibility-applies-to-005 Visibility applied to elements with 'display' set to 'table-column-group'
  • The 'visibility' property applies to elements with 'display' set to 'table-column-group'.
visibility-applies-to-006 Visibility applied to elements with 'display' set to 'table-column'
  • The 'visibility' property applies to elements with 'display' set to 'table-column'.
visibility-applies-to-007 Visibility applied to elements with 'display' set to 'table-cell'
  • The 'visibility' property applies to elements with 'display' set to 'table-cell'.
visibility-applies-to-008 Visibility applied to elements with 'display' set to 'inline'
  • The 'visibility' property applies to elements with 'display' set to 'inline'.
visibility-applies-to-009 Visibility applied to elements with 'display' set to 'block'
  • The 'visibility' property applies to elements with 'display' set to 'block'.
visibility-applies-to-010 Visibility applied to elements with 'display' set to 'list-item'
  • The 'visibility' property applies to elements with 'display' set to 'list-item'.
visibility-applies-to-011 Visibility applied to elements with 'display' set to 'run-in'
  • The 'visibility' property applies to elements with 'display' set to 'run-in'.
visibility-applies-to-012 Visibility applied to elements with 'display' set to 'inline-block'
  • The 'visibility' property applies to elements with 'display' set to 'inline-block'.
visibility-applies-to-013 Visibility applied to elements with 'display' set to 'table'
  • The 'visibility' property applies to elements with 'display' set to 'table'.
visibility-applies-to-014 Visibility applied to elements with 'display' set to 'inline-table'
  • The 'visibility' property applies to elements with 'display' set to 'inline-table'.
visibility-applies-to-015 Visibility applied to elements with 'display' set to 'table-caption'
  • The 'visibility' property applies to elements with 'display' set to 'table-caption'.
visibility-block-001 Visibility 'collapse' on non-table row or column elements
  • The 'visibility' property set to 'collapse' acts like 'hidden' when applied to non-table row or column elements.
visibility-collapse-001 DOM/JSInteract CSS Tables: Visibility
visibility-descendants-001 Descendents of hidden elements can specify a different visibility
  • Descendents of a hidden element will be visible if they have 'visibility' set to 'visible'.
visibility-layout-001 Hidden elements still affect layout
  • Invisible boxes still affect layout.