| 11.1.1 Overflow: the 'overflow' property |
|---|
Overflow set to 'visible'
- The 'overflow' property set to 'visible' properly shows all content that extends beyond the containing element.
|
|
Overflow set to 'hidden'
- The 'overflow' property set to 'hidden' properly hides all content that extends beyond the containing element.
|
|
Overflow set to 'scroll'
- The 'overflow' property set to 'scroll' properly applies a scrolling mechanism to access overflowing content.
|
I |
Overflow set to 'auto'
- The 'overflow' property set to 'auto' properly applies a scrolling mechanism to access overflowing content.
|
I |
Overflow set to 'inherit'
- The 'overflow' property set to 'inherit' properly inherits its value from its parent element.
|
I |
Overflow affect on children
- Overflow clipping does not affect elements which are ancestors to the element being clipped.
|
I |
overflow applied to elements with 'display' set to 'table-row-group'
- The 'overflow' property applies to elements with 'display' set to 'table-row-group'.
|
A |
overflow applied to elements with 'display' set to 'table-header-group'
- The 'overflow' property applies to elements with 'display' set to 'table-header-group'.
|
A |
overflow applied to elements with 'display' set to 'table-footer-group'
- The 'overflow' property applies to elements with 'display' set to 'table-footer-group'.
|
A |
overflow applied to elements with 'display' set to 'table-row'
- The 'overflow' property applies to elements with 'display' set to 'table-row'.
|
A |
overflow applied to elements with 'display' set to 'table-column-group'
- The 'overflow' property applies to elements with 'display' set to 'table-column-group'.
|
A |
overflow applied to elements with 'display' set to 'table-column'
- The 'overflow' property applies to elements with 'display' set to 'table-column'.
|
A |
overflow applied to elements with 'display' set to 'table-cell'
- The 'overflow' property applies to elements with 'display' set to 'table-cell'.
|
A |
overflow applied to elements with 'display' set to 'inline'
- The 'overflow' property applies to elements with 'display' set to 'inline'.
|
A |
overflow applied to elements with 'display' set to 'block'
- The 'overflow' property applies to elements with 'display' set to 'block'.
|
A |
overflow applied to elements with 'display' set to 'list-item'
- The 'overflow' property applies to elements with 'display' set to 'list-item'.
|
A |
overflow applied to elements with 'display' set to 'run-in'
- The 'overflow' property applies to elements with 'display' set to 'run-in'.
|
A |
overflow applied to elements with 'display' set to 'inline-block'
- The 'overflow' property applies to elements with 'display' set to 'inline-block'.
|
A |
overflow applied to elements with 'display' set to 'table'
- The 'overflow' property applies to elements with 'display' set to 'table'.
|
A |
overflow applied to elements with 'display' set to 'inline-table'
- The 'overflow' property applies to elements with 'display' set to 'inline-table'.
|
A |
overflow applied to elements with 'display' set to 'table-caption'
- The 'overflow' property applies to elements with 'display' set to 'table-caption'.
|
A |
Overflow on body propagates to viewport
- An HTML user agent propagates the 'overflow' property from the 'body' to the viewport.
|
|
Overflow hidden on root element
- Clipping does not affect elements where their parent is the viewport.
|
|
Overflow 'scroll' and printing
- The 'overflow' property set to 'scroll' acts like 'visible' when element is printed.
|
P |
Overflow on root propagates to viewport
- The 'overflow' property set on the root propagates to the viewport.
|
|
Scrollbar placement in overflow scenario
- The placement of the scrollbar is between the inner border edge and the outer padding edge.
|
|
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 - 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.
|
A |
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.
|
A |
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.
|
A |
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.
|
A |
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.
|
A |
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.
|
A |
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.
|
A |
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.
|
A |
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.
|
A |
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.
|
A |
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.
|
A |
| 11.1.2 Clipping: the 'clip' property |
|---|
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 using pixels with a zero value, 0px
- The 'clip' property sets a zero value, in pixels, for all sides of the clipping rectangle.
|
|
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 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 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 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 using points with a zero value, 0pt
- The 'clip' property sets a zero value, in points, for all sides of the clipping rectangle.
|
|
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 using points with a nominal value, 72pt
- The 'clip' property sets a of seventy-two points for all sides of the clipping rectangle.
|
|
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 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 using picas with a zero value, 0pc
- The 'clip' property sets a zero value, in picas, for all sides of the clipping rectangle.
|
|
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 using picas with a nominal value, 6pc
- The 'clip' property sets a of six picas for all sides of the clipping rectangle.
|
|
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 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 using centimeters with a zero value, 0cm
- The 'clip' property sets a zero value, in centimeters, for all sides of the clipping rectangle.
|
|
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 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 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 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 using millimeters with a zero value, 0mm
- The 'clip' property sets a zero value, in millimeters, for all sides of the clipping rectangle.
|
|
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 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 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 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 using inches with a zero value, 0in
- The 'clip' property sets a zero value, in inches, for all sides of the clipping rectangle.
|
|
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 using inches with a nominal value, 1in
- The 'clip' property sets a value, in inches, for all sides of the clipping rectangle.
|
|
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 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.
|
A |
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.
|
A |
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.
|
A |
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.
|
A |
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.
|
A |
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.
|
A |
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.
|
A |
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.
|
A |
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.
|
A |
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.
|
A |
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 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 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 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 specifying only the value 'auto'
- The 'clip' properly applies the value of 'auto'.
|
|
Clip with the value 'inherit'
- The 'clip' property set to 'inherit' properly inherits the appropriate value for the parent element.
|
|
Clip on non-positioned element
- Clip does not apply to non-positioned elements.
|
|
Clip with other invalid shape
- A shape value other than 'rect()' is not supported.
|
|
Clip with 'rect()' function values separated
- User agent may also support separation of the 'rect()' function values 'top', 'right', 'bottom', and 'left' with spaces.
|
|
clip - auto value
- An element must not clip when clip is set to auto.
|
O |
| 11.2 Visibility: the 'visibility' property |
|---|
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 set to 'hidden'
- A block with 'visibility' set to 'collapse' will not be rendered on the page but will still affect layout flow.
|
|
Visibility set to 'visible'
- A block with 'visibility' set to 'visible' will be rendered on the page.
|
|
Visibility set to 'inherit'
- A block can inherit its 'visibility' behavior from its parent container.
|
|
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 applied to elements with 'display' set to 'table-header-group'
- The 'visibility' property applies to elements with 'display' set to 'table-header-group'.
|
|
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 applied to elements with 'display' set to 'table-row'
- The 'visibility' property applies to elements with 'display' set to 'table-row'.
|
|
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 applied to elements with 'display' set to 'table-column'
- The 'visibility' property applies to elements with 'display' set to 'table-column'.
|
|
Visibility applied to elements with 'display' set to 'table-cell'
- The 'visibility' property applies to elements with 'display' set to 'table-cell'.
|
|
Visibility applied to elements with 'display' set to 'inline'
- The 'visibility' property applies to elements with 'display' set to 'inline'.
|
|
Visibility applied to elements with 'display' set to 'block'
- The 'visibility' property applies to elements with 'display' set to 'block'.
|
|
Visibility applied to elements with 'display' set to 'list-item'
- The 'visibility' property applies to elements with 'display' set to 'list-item'.
|
|
Visibility applied to elements with 'display' set to 'run-in'
- The 'visibility' property applies to elements with 'display' set to 'run-in'.
|
|
Visibility applied to elements with 'display' set to 'inline-block'
- The 'visibility' property applies to elements with 'display' set to 'inline-block'.
|
|
Visibility applied to elements with 'display' set to 'table'
- The 'visibility' property applies to elements with 'display' set to 'table'.
|
|
Visibility applied to elements with 'display' set to 'inline-table'
- The 'visibility' property applies to elements with 'display' set to 'inline-table'.
|
|
Visibility applied to elements with 'display' set to 'table-caption'
- The 'visibility' property applies to elements with 'display' set to 'table-caption'.
|
|
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.
|
|
Descendents of hidden elements can specify a different visibility
- Descendents of a hidden element will be visible if they have 'visibility' set to 'visible'.
|
|
Hidden elements still affect layout
- Invisible boxes still affect layout.
|
|
visibility
- Descendants of a 'visibility: hidden' element will be visible if they have 'visibility: visible'
|
A |
text-decoration:underline - visibility:hidden 1
- Inline element with 'visibility:hidden' must not prevent a text-decoration value being applied to the line box
|
|
text-decoration:underline - visibility:hidden 2
- Inline element with 'visibility:hidden' must not prevent a text-decoration value being applied to the line box
|
|
text-decoration:underline - visibility:hidden 3
- Inline element with 'visibility:hidden' must not prevent a text-decoration value being applied to the line box
|
|
text-decoration:underline - visibility:hidden 4
- Inline element with 'visibility:hidden' must not prevent a text-decoration value being applied to the line box
|
|
text-decoration:overline - visibility:hidden 5
- Inline element with 'visibility:hidden' must not prevent a text-decoration value being applied to the line box
|
|
text-decoration:overline - visibility:hidden 6
- Inline element with 'visibility:hidden' must not prevent a text-decoration value being applied to the line box
|
|
text-decoration:overline - visibility:hidden 7
- Inline element with 'visibility:hidden' must not prevent a text-decoration value being applied to the line box
|
|
text-decoration:overline - visibility:hidden 8
- Inline element with 'visibility:hidden' must not prevent a text-decoration value being applied to the line box
|
|
text-decoration:line-through - visibility:hidden 9
- Inline element with 'visibility:hidden' must not prevent a text-decoration value being applied to the line box
|
|
text-decoration:line-through - visibility:hidden 10
- Inline element with 'visibility:hidden' must not prevent a text-decoration value being applied to the line box
|
|
text-decoration:line-through - visibility:hidden 11
- Inline element with 'visibility:hidden' must not prevent a text-decoration value being applied to the line box
|
|
text-decoration:line-through - visibility:hidden 12
- Inline element with 'visibility:hidden' must not prevent a text-decoration value being applied to the line box
|
|