CSS 2.1 Conformance Test Suite

Visual effects (156 tests)

Test Refs Flags Info
+ 11 Visual effects
+ 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
absolute-non-replaced-width-028 BitmapsScroll width - absolutely positioned non-replaced element with scrollbar and percentage height of inline replaced child
  • This test checks interaction of percentage height of an inline replaced element with its parent having scrollbars and with the parent's width determined by 'shrink-to-fit' width algorithm. In this test, the image height should be 100px minus scrollbar height since space taken up by generated scrollbars should be taken out of (subtracted from the dimensions of) the containing block formed by the element with the scrollbars. Then the width of parent should be (used image height == 100px minus scrollbar) * (intrinsic ratio == 5width:1height).
abspos-zero-width-001 Bitmaps Absolute positioned elements still affect scrolling mechanism
  • Zero width absolute positioned elements still affects scrolling mechanism even though they are out of flow of the content.
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
float-non-replaced-width-013 BitmapsScroll width - non-replaced float with scrollbar and percentage height of inline replaced child
  • This test checks interaction of percentage height of an inline replaced element with its parent having scrollbars and with the parent's width determined by 'shrink-to-fit' width algorithm. In this test, the image height should be 100px minus scrollbar height since space taken up by generated scrollbars should be taken out of (subtracted from the dimensions of) the containing block formed by the element with the scrollbars. Then the width of parent should be (used image height == 100px minus scrollbar) * (intrinsic ratio == 5width:1height).
height-applies-to-010a = height set to 0 to elements with 'display' set to 'list-item'
  • If height of content exceeds the set height of a block-level non-replaced element in normal flow (like a list-item element such as in this test), then the content should overflow according to the 'overflow' property.
inline-block-non-replaced-width-005 BitmapsScroll width - non-replaced inline-block with scrollbar and percentage height of inline replaced child
  • This test checks interaction of percentage height of an inline replaced element with its parent having scrollbars and with the parent's width determined by 'shrink-to-fit' width algorithm. In this test, the image height should be 100px minus scrollbar height since space taken up by generated scrollbars should be taken out of (subtracted from the dimensions of) the containing block formed by the element with the scrollbars. Then the width of parent should be (used image height == 100px minus scrollbar) * (intrinsic ratio == 5width:1height).
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 applies 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 applies 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 applies 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
bidi-overflow-scroll-001 overflow:scroll in rtl context
  • Scrolling UI created by overflow should be positioned on the left in rtl context
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-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 applies 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 applies 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 applies to elements with 'display' set to 'table-caption'.
+ 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.
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.
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.
+ 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.
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-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'.