WeasySuite - 3.4 Tiling Images: the ‘background-repeat’ property

Chapter 3 - Backgrounds - 3.4 Tiling Images: the ‘background-repeat’ property

Go to the relevant page of the specification.

background-003 (image): Background with repeat
Background shorthand with repeat only sets its background-repeat subproperty. In such case, the other background subproperties are set to their initial values: 'background-image' is set to 'none', 'background-color' is set to transparent, 'background-attachment' is set to 'scroll', 'background-position' is set to '0% 0%'.
background-007: Background with (color repeat)
Background with (color repeat) sets the background of the element to the color specified. Repeat does nothing since there is no image.
background-011 (image): Background with (image repeat)
Background with (image repeat) sets the background to the image specified, tiling it to cover the full width, but not height.
background-014: Background with (repeat color)
Background with (repeat color) sets the background of the element to the color specified. Repeat does nothing since there is no image.
background-015 (image): Background with (repeat image)
Background with (repeat image) sets the background to the image specified, tiling it to cover the full width, but not height.
background-016: Background with (repeat attachment)
Background with (repeat attachment) does not affect the background since image is not set.
background-017: Background with (repeat position)
Background with (repeat position) does not affect the background since image is not set.
background-repeat-no-repeat (image): background-repeat:no-repeat
The image is placed once in the background positioning area and not repeated in any direction.
background-repeat-repeat-x (image): background-repeat:repeat-x
The image is repeated horizontally as often as needed to cover the background painting area.
background-repeat-repeat-y (image): background-repeat:repeat-y
The image is repeated vertically as often as needed to cover the background painting area.
background-repeat-round (image): background-repeat:round
The 'background-repeat: round' declaration must scale an image in one or more dimensions so it fits a whole number of times in the background positioning area.
background-repeat-round-001 (image): background-repeat - one round keyword value
Check if 'background-repeat' is 'round', then the width and height of the corresponding background image is rescaled so that they fit a whole number of times (2 in this test) in the background positioning area. Therefore the used width and height of the background image in this test should be 110px.
background-repeat-round-002 (image): background-repeat: round basic support
The image is repeated as often as will fit within the background positioning area. If it doesn't fit a whole number of times, it is rescaled so that it does.
background-repeat-round-roundup (image): background-repeat:round, rounding up
The 'background-repeat: round' declaration must scale an image in one or more dimensions so it fits a whole number of times in the background positioning area.
background-repeat-space (image): background-repeat:space
The 'background-repeat: space' declaration must space out images in one or more dimensions so they fit a whole number of times in the background positioning area. The first and last images in each row and column must sit along edge(s) of the background positioning area.
background-repeat-space-padding-box: 'Background-repeat: space' when background positioning area is 'padding-box'
When 'background-repeat: space' and background positioning area is set to 'padding-box' the image is repeated as often within the 'padding-box' without being clipped, the images are spaced out to fill the area and the first and last images touch the edges of the 'padding-box'.
background-size-025 (image): background-size 'auto 61px' with background-repeat 'round'
Check if 'background-size' is 'auto 61px' and 'background-repeat' is 'round', then the height of the corresponding background image is rounded (70px in this test) so that it fits a whole number of times (3 in this test) in the background positioning area, and the width of the background image is rescaled (70px in this test) to keep the original aspect ratio.
background-size-027 (image): background-size '52px auto' with background-repeat 'repeat round'
Check if 'background-size' is '52px auto' and 'background-repeat' is 'repeat round', then the width of the corresponding background image is 52px and then repeated while the height is first rescaled from 100px to 52px to keep the original image aspect ratio and then to 60px due to 'round'.
background-size-029 (image): background-size '52px auto' with background-repeat 'round repeat'
Check if 'background-size' is '52px auto' and 'background-repeat' is 'round repeat', then the width is first rescaled to from 100px to 52px and then rescaled to 60px due to 'round' and the height of the corresponding background image is rescaled from 100px to 60px (to keep the original image aspect ratio) and then repeated vertically.
background-size-031 (image): background-size '20% 30%' with background-repeat 'no-repeat round'
Check if 'background-size' is '20% 30%' and 'background-repeat' is 'no-repeat round', then the height of the corresponding background image is 50px so that it fits a whole number of times (3 in this test) in the background positioning area, and the width of the background image is rescaled to 20% (50px in this test) of the background area.
background_repeat_space_border_box: 'Background-repeat: space' when background positioning area is 'border-box'
When 'background-repeat: space' and background positioning area is set to 'border-box' the image is repeated as often within the 'border-box' without being clipped, the images are spaced out to fill the area and the first and last images touch the edges of the 'border-box'.
background_repeat_space_content_box: 'Background-repeat: space' when background positioning area is 'content-box'
When 'background-repeat: space' and background positioning area is set to 'content-box' the image is repeated as often within the 'content-box' without being clipped, the images are spaced out to fill the area and the first and last images touch the edges of the 'content-box'.
background-repeat-round-1a: CSS Background: background-repeat: background image round
Test checks whether background-repeat: 'round' works correctly or not.
background-repeat-round-1b: CSS Background: background-repeat: background image round
Test checks whether background-repeat: 'round round' works correctly or not.
background-repeat-round-1c: CSS Background: background-repeat: background image round
Test checks whether background-repeat: 'repeat round' works correctly or not.
background-repeat-round-1d: CSS Background: background-repeat: background image round
Test checks whether background-repeat: 'round repeat' works correctly or not.
background-repeat-round-1e: CSS Background: background-repeat: background image round
Test checks whether background-repeat: 'repeat round' works correctly or not.
background-repeat-round-2: CSS Background: background-repeat: background image round no-repeat
Test checks whether background-repeat: 'round no-repeat' works correctly or not.
background-repeat-round-3: CSS Background: background-repeat: background image no-repeat round
Test checks whether background-repeat: 'no-repeat round' works correctly or not.
background-repeat-round-4: CSS Background: background-repeat: background image round with specified position
Test checks whether background-repeat: 'round' works correctly or not.
background-repeat-space-10: CSS Background: background-repeat: background image space
Test checks whether background-repeat: 'space' works correctly or not.
background-repeat-space-1a: CSS Background: background-repeat: background image space
Test checks whether background-repeat: 'space' works correctly or not.
background-repeat-space-1b: CSS Background: background-repeat: background image space with position
Test checks whether background-repeat: 'space' works correctly or not.
background-repeat-space-1c: CSS Background: background-repeat: background image space
Test checks whether background-repeat: 'space space' works correctly or not.
background-repeat-space-2: CSS Background: background-repeat: background image round with specified position
Test checks whether background-repeat: 'space' works correctly or not.
background-repeat-space-3: CSS Background: background-repeat: background image round with specified position
Test checks whether background-repeat: 'no-repeat space' and 'space no-repeat' works correctly or not.
background-repeat-space-4: CSS Background: background-repeat: background image space
Test checks whether background-repeat: 'repeat space' works correctly or not.
background-repeat-space-5: CSS Background: background-repeat: background image space
Test checks whether background-repeat: 'space repeat' works correctly or not.
background-repeat-space-6: CSS Background: background-repeat: background image space
Test checks whether background-repeat: 'round space' works correctly or not.
background-repeat-space-7: CSS Background: background-repeat: background image space
Test checks whether background-repeat: 'space round' works correctly or not.
background-repeat-space-8: CSS Background: background-repeat: background image space
Test checks whether background-repeat: 'space' works correctly or not.
background-repeat-space-9: CSS Background: background-repeat: background image space
Test checks whether background-repeat: 'space' works correctly or not.
border-image-repeat-1: CSS Border Image: border-image-repeat with SVG content
The test checks the result of border-image-repeat with SVG content.
border-image-repeat-round-1: CSS Border Image: border-image-repeat: round
The test checks whether border-image-repeat: 'round' uses the correct rounding formula.
border-image-repeat-round-2: CSS Border Image: border-image-repeat: round
The test checks whether border-image-repeat: 'round' uses the correct rounding formula.