WeasySuite - 11.1.1 Overflow: the 'overflow' property

Chapter 11 - Visual effects - 11.1.1 Overflow: the 'overflow' property

Go to the relevant page of the specification.

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-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 (HTMLonly): 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 (may, paged): 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): 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