WeasySuite - 3.7 Painting Area: the ‘background-clip’ property

Chapter 3 - Backgrounds - 3.7 Painting Area: the ‘background-clip’ property

Go to the relevant page of the specification.

background-clip-001 (dom, script): background-clip - initial and supported values
Check if background-clip initial value is border-box and supports values border-box, padding-box and content-box
background-clip-002: background-clip - initial value
Background-clip with initial value implies to paint the background within (clipped to) the border box.
background-clip-003: background-clip - border-box keyword value
Background-clip with 'border-box' implies to paint the background within (clipped to) the border box.
background-clip-004: background-clip - padding-box keyword value
Background-clip with 'padding-box' implies to paint the background within (clipped to) the padding box.
background-clip-005: background-clip - content-box keyword value
Background-clip with 'content-box' implies to paint the background within (clipped to) the content box.
background-clip-006: background-clip - inherit keyword value
Background-clip with 'inherit' implies to inherit its parent element value to paint the background area.
background-clip-007: background-clip: content-box with background-color
When 'background-clip' is set to 'content-box', then the background-color shines only through the content area; it does not shine through the padding area nor the border area.
background-clip-008: background-clip: padding-box with background-color
When 'background-clip' is set to 'padding-box', then the background painting area is clipped at the edges of the padding of the element. In this test, the padding box is 0px tall and as wide as the body element; therefore, red should not be visible.
background-clip-009: background-clip: border-box with background-color
When 'background-clip' is set to 'border-box', then the background painting area is clipped at the edges of the borders of the element. In this test, the border box is 96px tall and 96px wide and is made from only the borders.
background-clip-010: background-clip - content-box with background-color
When 'background-clip' is set to 'content-box', then the background painting area is clipped at the edges of the content of the element. In this test, height is 'auto', therefore its used value is '0px'; width is 'auto', therefore its used value is as wide as the body element. So, the content box is 0px tall and as wide as the body element; therefore, red should not be visible.
background-clip-content-box: background-clip_content-box
Test passes if the background color is limited to the content only and border is blue dotted without red
background-clip-content-box-001: background-clip Reference
background-clip with content-box means paint the background within the content box
background-clip-padding-box-with-border-radius: background-clip: padding-box with border-radius
Backgrounds clipped to the padding box should follow the padding box curve, which should be equal to the outer border radius minus the corresponding border thickness.
background-clip-root (image): background-clip on root
The root element has a different background painting area, and thus the 'background-clip' property has no effect when specified on it.
background-clip_padding-box: background-clip_border-box
Test passes if border is blue and dotted without red background
background-paint-order-001: Background clip and border painting order
The background is painted behind the border.
background-size-023 (image): background-size '50% auto' with background-clip 'padding-box'
Check if 'background-size' is '50% auto', then it rescales the background image so that exactly two copies fit the background positioning area (it is 150px by 150px in this test) horizontally. Therefore the used width of the background-size in this test should be 75px.
background-size-024 (image): background-size '100% 100%' with background-clip 'content-box'
Check if 'background-size' is '100% 100%' that it rescales the background image independently in both dimensions to completely cover the background positioning area (it is 150px by 150px in this test), and then the background image is clipped to fit into the content area (it is 100px by 100px as background-clip is 'content-box').
clip-border-box (image): background-clip:border-box
border-box : The background is painted within (clipped to) the border box.
clip-border-box_with_position (image): background-clip:border-box & background-position
border-box : The background is painted within (clipped to) the border box.
clip-border-box_with_radius (image): background-clip:border-box & border-radius
border-box : The background is painted within (clipped to) the border box.
clip-border-box_with_size (image): background-clip:border-box & background-size
border-box : The background is painted within (clipped to) the border box.
clip-content-box (image): background-clip:content-box
content-box : The background is painted within (clipped to) the content box.
clip-content-box_with_position (image): background-clip:content-box & background-position
content-box : The background is painted within (clipped to) the content box.
clip-content-box_with_radius (image): background-clip:content-box & border-radius
content-box : The background is painted within (clipped to) the content box.
clip-content-box_with_size (image): background-clip:content-box & background-size
content-box : The background is painted within (clipped to) the content box.
clip-padding-box (image): background-clip:padding-box
padding-box : The background is painted within (clipped to) the padding box
clip-padding-box_with_position (image): background-clip:padding-box & background-position
padding-box : The background is painted within (clipped to) the padding box
clip-padding-box_with_radius (image): background-clip:padding-box & border-radius
padding-box : The background is painted within (clipped to) the padding box
clip-padding-box_with_size (image): background-clip:padding-box & background-size
padding-box : The background is painted within (clipped to) the padding box
css3-background-clip-border-box: background clip property with value border-box
css3-background-clip-content-box: background clip property with value content-box
css3-background-clip-padding-box: background clip property with value padding-box