3.8 Positioning Area: the ‘background-origin’ property

Chapter 3 - Backgrounds - 3.8 Positioning Area: the ‘background-origin’ property

Go to the relevant page of the specification.

background-origin-001 (dom, script)

background-origin - initial and supported values
Check if background-origin initial value is padding-box and supports values border-box, padding-box and content-box

background-origin-002 (image)

background-origin - initial value
Background-origin with initial value implies to position the background relative to the padding box.

background-origin-003 (image)

background-origin - padding-box keyword value
Background-origin with 'padding-box' implies to position the background relative to the padding box.

background-origin-004 (image)

background-origin - border-box keyword value
Background-origin with 'border-box' implies to position the background relative to the border box.

background-origin-005 (image)

background-origin - content-box keyword value
Background-origin with 'content-box' implies to position the background relative to the content box.

background-origin-006 (image)

background-origin 'content-box' with background-attachment 'fixed'
Check if the 'background-attachment' value is 'fixed' that expecting 'background-origin' has no effect and the background positioning area is the initial containing block.

background-origin-007 (image)

background-origin 'border-box' with background-clip 'padding-box'
Check if 'background-clip' is 'padding-box', 'background-origin' is 'border-box', 'background-position' is 'top left' (the initial value), and the element has a non-zero border, that expecting the top and left of the background image will be clipped.

background-origin-008

background-origin - inherit keyword value
Background-origin with 'inherit' implies to inherit its parent element value to position the background area.

background-size-021 (image)

background-size '100% 100%' with background-origin '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 100px by 100px as background-origin is 'content-box'). In this test, the background-image should be scaled from 40px wide and 20px tall to become 100px by 100px.

background-size-022 (image)

background-size '50% auto' with background-origin 'border-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 160px by 160px in this test) horizontally. Therefore the used width of the background-size in this test should be 80px.

css3-background-origin-border-box

background origin property with value border-box

css3-background-origin-content-box

background origin property with value content-box

css3-background-origin-padding-box

background origin property with value content-box

origin-border-box (image)

background-origin:border-box
border-box : The position is relative to the border box.

origin-border-box_with_position (image)

background-origin:border-box & background-position
border-box : The position is relative to the border box.

origin-border-box_with_radius (image)

background-origin:border-box & border-radius
border-box : The position is relative to the border box.

origin-border-box_with_size (image)

background-origin:border-box & background-size
border-box : The position is relative to the border box.

origin-content-box (image)

background-origin:content-box
content-box : The position is relative to the content box.

origin-content-box_with_position (image)

background-origin:content-box & background-position
content-box : The position is relative to the content box.

origin-content-box_with_radius (image)

background-origin:content-box & border-radius
content-box : The position is relative to the content box.

origin-content-box_with_size (image)

background-origin:content-box & background-size
content-box : The position is relative to the content box.

origin-padding-box (image)

background-origin:padding-box
padding-box : The position is relative to the padding box. (For single boxes ‘0 0’ is the upper left corner of the padding edge, ‘100% 100%’ is the lower right corner.)

origin-padding-box_with_position (image)

background-origin:padding-box & background-position
padding-box : The position is relative to the padding box. (For single boxes ‘0 0’ is the upper left corner of the padding edge, ‘100% 100%’ is the lower right corner.)

origin-padding-box_with_radius (image)

background-origin:padding-box & border-radius
padding-box : The position is relative to the padding box. (For single boxes ‘0 0’ is the upper left corner of the padding edge, ‘100% 100%’ is the lower right corner.)

origin-padding-box_with_size (image)

background-origin:padding-box & background-size
padding-box : The position is relative to the padding box. (For single boxes ‘0 0’ is the upper left corner of the padding edge, ‘100% 100%’ is the lower right corner.)