CSS Backgrounds and Borders Module Test Suite

Backgrounds (300 tests)

Test Refs Flags Info
+ 3.1 Layering Multiple Background Images
scroll-positioned-multiple-background-images = DOM/JSBitmapsScroll Scroll multiple background images that are positioned
  • When multiple background images are positioned at (0px, 0px) and (0, 60px) of each 60px by 60px in a scrollable element, and the element is scrolled to (0, 60px), only the second image is shown.
+ 3.2 Base Color: the ‘background-color’ property
+ 3.3 Image Sources: the ‘background-image’ property
background-image-first-letter = AhemBitmaps background-image applicability to ::first-letter
  • background-image applicability to ::first-letter
+ 3.4 Tiling Images: the ‘background-repeat’ property
background-repeat-no-repeat = Bitmaps background-repeat:no-repeat
  • The image is placed once in the background positioning area and not repeated in any direction.
background-repeat-repeat-x = Bitmaps background-repeat:repeat-x
  • The image is repeated horizontally as often as needed to cover the background painting area.
background-repeat-repeat-y = Bitmaps background-repeat:repeat-y
  • The image is repeated vertically as often as needed to cover the background painting area.
background-repeat-round = Bitmaps 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 Bitmaps 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-roundup = Bitmaps 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 = Bitmaps 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-size-025 = Bitmaps 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 = Bitmaps 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 = Bitmaps 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 = Bitmaps 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.
+ 3.5 Affixing Images: the ‘background-attachment’ property
background-attachment-fixed Interact 'Background-attachment' with value 'fixed'
  • If 'background-attachment' is given the value 'fixed,' then the background image remains fixed in relation to the user agent viewport when the viewport is scrolled.
background-attachment-local Interact 'Background-attachment' with value 'local'
  • If 'background-attachment' is given the value 'local,' then the background image scrolls with the containing element's content when the element's content is scrolled
+ 3.6 Positioning Images: the ‘background-position’ property
+ 3.7 Painting Area: the ‘background-clip’ property
background-clip-001 DOM/JS 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-paint-order-001 = Background clip and border painting order
  • The background is painted behind the border.
background-size-023 Bitmaps 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 Bitmaps 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').
+ 3.8 Positioning Area: the ‘background-origin’ property
background-origin-001 DOM/JS 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 Bitmaps background-origin - initial value
  • Background-origin with initial value implies to position the background relative to the padding box.
background-origin-003 Bitmaps background-origin - padding-box keyword value
  • Background-origin with 'padding-box' implies to position the background relative to the padding box.
background-origin-004 Bitmaps background-origin - border-box keyword value
  • Background-origin with 'border-box' implies to position the background relative to the border box.
background-origin-005 Bitmaps background-origin - content-box keyword value
  • Background-origin with 'content-box' implies to position the background relative to the content box.
background-origin-006 Bitmaps 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 Bitmaps 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 Bitmaps 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 Bitmaps 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.
+ 3.9 Sizing Images: the ‘background-size’ property
background-intrinsic-001 = SVG Background Intrinsic Sizes: No intrinsic size
  • A background image with no intrinsic size covers the entire padding box.
background-intrinsic-002 = SVG Background Intrinsic Sizes: Intrinsic Width
  • A background image with only an intrinsic width covers its intrinsic width and the height of the padding box.
background-intrinsic-003 = SVG Background Intrinsic Sizes: Intrinsic Height
  • A background image with only an intrinsic height covers its intrinsic height and the width of the padding box.
background-intrinsic-004 = OptionalSVG Background Intrinsic Sizes: Intrinsic Ratio (Match Heights)
  • A background image with only an intrinsic ratio covers largest rectangle at that ratio that exceeds neither the height nor width of the background positioning area.
background-intrinsic-005 = OptionalSVG Background Intrinsic Sizes: Intrinsic Ratio (Match Widths)
  • A background image with only an intrinsic ratio covers largest rectangle at that ratio that exceeds neither the height nor width of the background positioning area.
background-intrinsic-006 = SVG Background Intrinsic Sizes: Intrinsic Percentage Width and Height
  • A background image with only an intrinsic ratio covers largest rectangle at that ratio that exceeds neither the height nor width of the background positioning area.
background-intrinsic-007 = SVG Background Intrinsic Sizes: Intrinsic Width and Ratio
  • A missing background image height is calculated from the width and the ratio.
background-intrinsic-008 = SVG Background Intrinsic Sizes: Intrinsic Height and Ratio
  • A missing background image width is calculated from the height and the ratio.
background-intrinsic-009 = SVG Background Intrinsic Sizes: Intrinsic Width and Height (Vector)
  • A background with an intrinsic width and height is drawn at that size.
background-intrinsic-010 = SVG Background Intrinsic Sizes: Intrinsic Width and Height (Raster)
  • A background with an intrinsic width and height is drawn at that size.
background-size-001 DOM/JS background-size - initial and supported values
  • Check if background-size initial value is auto and supports values auto, cover and contain
background-size-002 Bitmaps background-size - initial value
  • Check if 'background-size' with initial value implies to the intrinsic width and height of the image are to be used. Therefore the used width and height of the background-size in this test should be 60px and 60px.
background-size-005 Bitmaps background-size - one auto keyword value
  • Check if 'background-size' has only one value 'auto', then such value is the width of the correspoding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used width and height of the background-size in this test should be 60px and 60px.
background-size-006 Bitmaps background-size - one <length> value
  • Check if 'background-size' has only one length value, then such value is the width of the corresponding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 45px.
background-size-007 Bitmaps background-size - one <length> value at minimum
  • Check if 'background-size' is '0px', minimum width of the positioning area in length, then such value is the width of the corresponding image and therefore the background image is not to be displayed.
background-size-008 Bitmaps background-size - one <length> value at maximum
  • Check if 'background-size' is '100px', maximum width of the positioning area in length, then such value is the width of the corresponding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 100px.
background-size-009 Bitmaps background-size - one <percentage> value
  • Check if 'background-size' has only one percentage value, then such value is the width of the corresponding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. A percentage is relative to the dimensions of the background positioning area. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 45px.
background-size-010 Bitmaps background-size - one <percentage> value at minimum
  • Check if 'background-size' is '0%', minimum width of the positioning area in percentage, then such value is the width of the corresponding image and therefore the background image is not to be displayed.
background-size-011 Bitmaps background-size - one <percentage> value at maximum
  • Check if 'background-size' is '100%', maximum width of the positioning area in percentage, then such value is the width of the corresponding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 100px.
background-size-012 Bitmaps background-size - two auto keyword values
  • Check if 'background-size' has two values 'auto', then the intrinsic width and/or height of the image should be used. Therefore the used width and height of the background-size in this test should be 60px and 60px.
background-size-013 = Bitmaps background-size - one auto keyword and one <length> values
  • Check if 'background-size' has one 'auto' and one length values, then the second value is the height of the corresponding background image and the first value (corresponding to the width of the background image) is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used width of the background-size in this test should be 100px.
background-size-014 Bitmaps background-size - one auto keyword and one <percentage> values
  • Check if 'background-size' has one 'auto' and one percentage values, then the second value is the height of the corresponding background image and the first value (corresponding to the width of the background image) is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. A percentage is relative to the dimensions of the background positioning area. Therefore the used width of the background-size in this test should be 45px.
background-size-015 = Bitmaps background-size - one <length> and one auto keyword values
  • Check if 'background-size' has one length and one auto values, then the first value is the width of the corresponding background image and the second value (corresponding to the height of the background image) is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 100px.
background-size-016 = Bitmaps background-size - two <length> values
  • Check if 'background-size' has two length values, then such values are the width and height of the corresponding background image. Therefore the used width and height of the background-size in this test should be 100px and 100px.
background-size-017 Bitmaps background-size - one <length> and one <percentage> values
  • Check if 'background-size' has one length and one percentage values, then such values are the width and height of the corresponding background image. Therefore the used width and height of the background-size in this test should be 45px and 45px.
background-size-018 = Bitmaps background-size - one <percentage> and one auto keyword values
  • Check if 'background-size' has one percentage and one auto values, then the first value is the width of the corresponding background image and the second value (corresponding to the height of the background image) is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 100px.
background-size-019 = Bitmaps background-size - one <percentage> and one <length> values
  • Check if 'background-size' has one percentage and one length values, then such values are the width and height of the corresponding background image. Therefore the used width and height of the background-size in this test should be 100px and 100px.
background-size-020 = Bitmaps background-size - two <percentage> values
  • Check if 'background-size' has two percentage values, then such values are the width and height of the corresponding background image. Therefore the used width and height of the background-size in this test should be 45px and 45px.
background-size-021 Bitmaps 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 Bitmaps 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.
background-size-023 Bitmaps 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 Bitmaps 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').
background-size-025 = Bitmaps 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-026 = Bitmaps background-size 'auto' with background-repeat 'repeat'
  • Check if 'background-size' is 'auto' and 'background-repeat' is 'repeat', that the background image is shown at its intrinsic size (98px wide by 99px tall in this test) and repeats in both horizontal and vertical to cover the background painting area (the same as background positioning area in this test).
background-size-027 = Bitmaps 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-028 = Bitmaps background-size '50px' with background-repeat 'repeat'
  • Check if 'background-size' is '50px' and 'background-repeat' is 'repeat', then the background image is shown with a width of 50px and its height is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension, and then it is repeated in both directions.
background-size-029 = Bitmaps 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-030 = Bitmaps background-size '25% 25%' with background-repeat 'repeat'
  • Check if 'background-size' is '25% 25%' and 'background-repeat' is 'repeat', then the background image is shown with a width and height of 25% (in this test, 50px by 50px), and then it is repeated in both directions.
background-size-031 = Bitmaps 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-size-032 Bitmaps background-size - applies to ::first-letter pseudo-element
  • Check if background-size is able to apply to the ::first-letter pseudo-element.
background-size-033 Bitmaps background-size - applies to ::first-line pseudo-element
  • Check if background-size is able to apply to the ::first-line pseudo-element.
background-size-034 = Bitmaps background-size - inherit keyword value
  • Check if background-size supports inherit keyword as its property value.
background-size-contain = Bitmaps background-size:contain
  • The background image is scaled, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.
background-size-contain-001 = Bitmaps background-size - contain keyword value
  • Check if 'background-size' is 'contain' that it scales the background-image, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the largest size such that both its width and its height can fit inside the background positioning area. In this test, the background-image should be scaled to become 100px by 100px.
background-size-contain-002 = Bitmaps background-size - contain keyword value
  • Check if 'background-size' is 'contain' that it scales the background-image, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the largest size such that both its width and its height can fit inside the background positioning area. In this test, the background-image should be scaled to become 100px by 100px.
background-size-cover = Bitmaps background-size:cover
  • The background image is scaled, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.
background-size-cover-001 = Bitmaps background-size - cover keyword value
  • Check if 'background-size' is 'cover' that it scales the background-image, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the smallest size such that both its width and its height can completely cover the background positioning area. In this test, the background-image should be scaled to become 100px by 100px.
background-size-cover-002 = Bitmaps background-size - cover keyword value
  • Check if 'background-size' is 'cover' that it scales the background-image, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the smallest size such that both its width and its height can completely cover the background positioning area. In this test, the background-image should be scaled to become 100px by 100px.
background-size-cover-contain-001 = Bitmaps background-size - cover value and contain value
  • When 'background-size' is 'cover', then the background-image is scaled, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the smallest size such that both its width and its height can completely cover the background positioning area. When 'background-size' is 'contain', then the background-image is scaled, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the largest size such that both its width and its height can fit inside the background positioning area. In this test, the 2 background-images should be scaled to become 100px by 100px.
background-size-cover-contain-002 = Bitmaps background-size - cover value and contain value
  • When 'background-size' is 'cover', then the background-image is scaled, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the smallest size such that both its width and its height can completely cover the background positioning area. When 'background-size' is 'contain', then the background-image is scaled, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the largest size such that both its width and its height can fit inside the background positioning area. In this test, the 2 background-images should be scaled to become 100px by 100px.
background-size-vector-001 = SVG background-size: 16px auto; for nonpercent-width-nonpercent-height-viewbox.svg
background-size-vector-002 = SVG background-size: 16px auto; for nonpercent-width-nonpercent-height.svg
background-size-vector-003 = SVG background-size: 32px auto; for nonpercent-width-omitted-height-viewbox.svg
background-size-vector-004 = SVG background-size: 16px auto; for nonpercent-width-omitted-height.svg
background-size-vector-005 = SVG background-size: 16px auto; for nonpercent-width-percent-height-viewbox.svg
background-size-vector-006 = SVG background-size: 16px auto; for nonpercent-width-percent-height.svg
background-size-vector-007 = SVG background-size: 16px auto; for omitted-width-nonpercent-height-viewbox.svg
background-size-vector-008 = SVG background-size: 16px auto; for omitted-width-nonpercent-height.svg
background-size-vector-009 = SVG background-size: 16px auto; for omitted-width-omitted-height-viewbox.svg
background-size-vector-010 = SVG background-size: 16px auto; for omitted-width-omitted-height.svg
background-size-vector-011 = SVG background-size: 16px auto; for omitted-width-percent-height-viewbox.svg
background-size-vector-012 = SVG background-size: 16px auto; for omitted-width-percent-height.svg
background-size-vector-013 = SVG background-size: 16px auto; for percent-width-nonpercent-height-viewbox.svg
background-size-vector-014 = SVG background-size: 16px auto; for percent-width-nonpercent-height.svg
background-size-vector-015 = SVG background-size: 16px auto; for percent-width-omitted-height-viewbox.svg
background-size-vector-016 = SVG background-size: 16px auto; for percent-width-omitted-height.svg
background-size-vector-017 = SVG background-size: 16px auto; for percent-width-percent-height-viewbox.svg
background-size-vector-018 = SVG background-size: 16px auto; for percent-width-percent-height.svg
background-size-vector-019 = SVG background-size: auto; for nonpercent-width-nonpercent-height-viewbox.svg
background-size-vector-020 = SVG tall background-size: auto; for nonpercent-width-nonpercent-height.svg
background-size-vector-021 = SVG background-size: auto; for nonpercent-width-omitted-height-viewbox.svg
background-size-vector-022 = SVG background-size: auto; for nonpercent-width-omitted-height.svg
background-size-vector-023 = SVG background-size: auto; for nonpercent-width-percent-height-viewbox.svg
background-size-vector-024 = SVG background-size: auto; for nonpercent-width-percent-height.svg
background-size-vector-025 = SVG background-size: auto; for omitted-width-nonpercent-height-viewbox.svg
background-size-vector-026 = SVG background-size: auto; for omitted-width-nonpercent-height.svg
background-size-vector-027 = SVG background-size: auto; for omitted-width-omitted-height-viewbox.svg
background-size-vector-028 = SVG background-size: auto; for omitted-width-omitted-height.svg
background-size-vector-029 = SVG background-size: auto; for omitted-width-percent-height-viewbox.svg
diagonal-percentage-vector-background = SVG scaled vector image without intrinsic dimensions as background, with rendering dependent on the diagonal
tall--auto--omitted-width-percent-height SVG background-size: auto; for omitted-width-percent-height.svg
tall--auto--percent-width-nonpercent-height SVG background-size: auto; for percent-width-nonpercent-height.svg
tall--auto--percent-width-nonpercent-height-viewbox SVG background-size: auto; for percent-width-nonpercent-height-viewbox.svg
tall--auto--percent-width-omitted-height SVG background-size: auto; for percent-width-omitted-height.svg
tall--auto--percent-width-omitted-height-viewbox SVG background-size: auto; for percent-width-omitted-height-viewbox.svg
tall--auto--percent-width-percent-height SVG background-size: auto; for percent-width-percent-height.svg
tall--auto--percent-width-percent-height-viewbox SVG background-size: auto; for percent-width-percent-height-viewbox.svg
tall--auto-32px--nonpercent-width-nonpercent-height SVG background-size: auto 32px; for nonpercent-width-nonpercent-height.svg
tall--auto-32px--nonpercent-width-nonpercent-height-viewbox SVG background-size: auto 32px; for nonpercent-width-nonpercent-height-viewbox.svg
tall--auto-32px--nonpercent-width-omitted-height SVG background-size: auto 32px; for nonpercent-width-omitted-height.svg
tall--auto-32px--nonpercent-width-omitted-height-viewbox SVG background-size: auto 32px; for nonpercent-width-omitted-height-viewbox.svg
tall--auto-32px--nonpercent-width-percent-height SVG background-size: auto 32px; for nonpercent-width-percent-height.svg
tall--auto-32px--nonpercent-width-percent-height-viewbox SVG background-size: auto 32px; for nonpercent-width-percent-height-viewbox.svg
tall--auto-32px--omitted-width-nonpercent-height SVG background-size: auto 32px; for omitted-width-nonpercent-height.svg
tall--auto-32px--omitted-width-nonpercent-height-viewbox SVG background-size: auto 32px; for omitted-width-nonpercent-height-viewbox.svg
tall--auto-32px--omitted-width-omitted-height SVG background-size: auto 32px; for omitted-width-omitted-height.svg
tall--auto-32px--omitted-width-omitted-height-viewbox SVG background-size: auto 32px; for omitted-width-omitted-height-viewbox.svg
tall--auto-32px--omitted-width-percent-height SVG background-size: auto 32px; for omitted-width-percent-height.svg
tall--auto-32px--omitted-width-percent-height-viewbox SVG background-size: auto 32px; for omitted-width-percent-height-viewbox.svg
tall--auto-32px--percent-width-nonpercent-height SVG background-size: auto 32px; for percent-width-nonpercent-height.svg
tall--auto-32px--percent-width-nonpercent-height-viewbox SVG background-size: auto 32px; for percent-width-nonpercent-height-viewbox.svg
tall--auto-32px--percent-width-omitted-height SVG background-size: auto 32px; for percent-width-omitted-height.svg
tall--auto-32px--percent-width-omitted-height-viewbox SVG background-size: auto 32px; for percent-width-omitted-height-viewbox.svg
tall--auto-32px--percent-width-percent-height SVG background-size: auto 32px; for percent-width-percent-height.svg
tall--auto-32px--percent-width-percent-height-viewbox SVG background-size: auto 32px; for percent-width-percent-height-viewbox.svg
tall--contain--height SVG background-size: contain; for nonpercent-width-omitted-height-extreme-viewbox.svg
tall--contain--nonpercent-width-nonpercent-height SVG background-size: contain; for nonpercent-width-nonpercent-height.svg
tall--contain--nonpercent-width-nonpercent-height-viewbox SVG background-size: contain; for nonpercent-width-nonpercent-height-viewbox.svg
tall--contain--nonpercent-width-omitted-height SVG background-size: contain; for nonpercent-width-omitted-height.svg
tall--contain--nonpercent-width-omitted-height-viewbox SVG background-size: contain; for nonpercent-width-omitted-height-viewbox.svg
tall--contain--nonpercent-width-percent-height SVG background-size: contain; for nonpercent-width-percent-height.svg
tall--contain--nonpercent-width-percent-height-viewbox SVG background-size: contain; for nonpercent-width-percent-height-viewbox.svg
tall--contain--omitted-width-nonpercent-height SVG background-size: contain; for omitted-width-nonpercent-height.svg
tall--contain--omitted-width-nonpercent-height-viewbox SVG background-size: contain; for omitted-width-nonpercent-height-viewbox.svg
tall--contain--omitted-width-omitted-height SVG background-size: contain; for omitted-width-omitted-height.svg
tall--contain--omitted-width-omitted-height-viewbox SVG background-size: contain; for omitted-width-omitted-height-viewbox.svg
tall--contain--omitted-width-percent-height SVG background-size: contain; for omitted-width-percent-height.svg
tall--contain--omitted-width-percent-height-viewbox SVG background-size: contain; for omitted-width-percent-height-viewbox.svg
tall--contain--percent-width-nonpercent-height SVG background-size: contain; for percent-width-nonpercent-height.svg
tall--contain--percent-width-nonpercent-height-viewbox SVG background-size: contain; for percent-width-nonpercent-height-viewbox.svg
tall--contain--percent-width-omitted-height SVG background-size: contain; for percent-width-omitted-height.svg
tall--contain--percent-width-omitted-height-viewbox SVG background-size: contain; for percent-width-omitted-height-viewbox.svg
tall--contain--percent-width-percent-height SVG background-size: contain; for percent-width-percent-height.svg
tall--contain--percent-width-percent-height-viewbox SVG background-size: contain; for percent-width-percent-height-viewbox.svg
tall--contain--width SVG background-size: contain; for omitted-width-nonpercent-height-extreme-viewbox.svg
tall--cover--height SVG background-size: cover; for nonpercent-width-omitted-height-extreme-viewbox.svg
tall--cover--nonpercent-width-nonpercent-height SVG background-size: cover; for nonpercent-width-nonpercent-height.svg
tall--cover--nonpercent-width-nonpercent-height--crisp SVG background-size: cover; for nonpercent-width-nonpercent-height.svg
tall--cover--nonpercent-width-nonpercent-height-viewbox SVG background-size: cover; for nonpercent-width-nonpercent-height-viewbox.svg
tall--cover--nonpercent-width-nonpercent-height-viewbox--crisp SVG background-size: cover; for nonpercent-width-nonpercent-height-viewbox.svg
tall--cover--nonpercent-width-omitted-height SVG background-size: cover; for nonpercent-width-omitted-height.svg
tall--cover--nonpercent-width-omitted-height-viewbox SVG background-size: cover; for nonpercent-width-omitted-height-viewbox.svg
tall--cover--nonpercent-width-percent-height SVG background-size: cover; for nonpercent-width-percent-height.svg
tall--cover--nonpercent-width-percent-height-viewbox SVG background-size: cover; for nonpercent-width-percent-height-viewbox.svg
tall--cover--omitted-width-nonpercent-height SVG background-size: cover; for omitted-width-nonpercent-height.svg
tall--cover--omitted-width-nonpercent-height-viewbox SVG background-size: cover; for omitted-width-nonpercent-height-viewbox.svg
tall--cover--omitted-width-omitted-height SVG background-size: cover; for omitted-width-omitted-height.svg
tall--cover--omitted-width-omitted-height-viewbox SVG background-size: cover; for omitted-width-omitted-height-viewbox.svg
tall--cover--omitted-width-percent-height SVG background-size: cover; for omitted-width-percent-height.svg
tall--cover--omitted-width-percent-height-viewbox SVG background-size: cover; for omitted-width-percent-height-viewbox.svg
tall--cover--percent-width-nonpercent-height SVG background-size: cover; for percent-width-nonpercent-height.svg
tall--cover--percent-width-nonpercent-height-viewbox SVG background-size: cover; for percent-width-nonpercent-height-viewbox.svg
tall--cover--percent-width-omitted-height SVG background-size: cover; for percent-width-omitted-height.svg
tall--cover--percent-width-omitted-height-viewbox SVG background-size: cover; for percent-width-omitted-height-viewbox.svg
tall--cover--percent-width-percent-height SVG background-size: cover; for percent-width-percent-height.svg
tall--cover--percent-width-percent-height-viewbox SVG background-size: cover; for percent-width-percent-height-viewbox.svg
tall--cover--width SVG background-size: cover; for omitted-width-nonpercent-height-extreme-viewbox.svg
wide--12px-auto--nonpercent-width-nonpercent-height SVG background-size: 12px auto; for nonpercent-width-nonpercent-height.svg
wide--12px-auto--nonpercent-width-nonpercent-height-viewbox SVG background-size: 12px auto; for nonpercent-width-nonpercent-height-viewbox.svg
wide--12px-auto--nonpercent-width-omitted-height SVG background-size: 12px auto; for nonpercent-width-omitted-height.svg
wide--12px-auto--nonpercent-width-omitted-height-viewbox SVG background-size: 12px auto; for nonpercent-width-omitted-height-viewbox.svg
wide--12px-auto--nonpercent-width-percent-height SVG background-size: 12px auto; for nonpercent-width-percent-height.svg
wide--12px-auto--nonpercent-width-percent-height-viewbox SVG background-size: 12px auto; for nonpercent-width-percent-height-viewbox.svg
wide--12px-auto--omitted-width-nonpercent-height SVG background-size: 12px auto; for omitted-width-nonpercent-height.svg
wide--12px-auto--omitted-width-nonpercent-height-viewbox SVG background-size: 12px auto; for omitted-width-nonpercent-height-viewbox.svg
wide--12px-auto--omitted-width-omitted-height SVG background-size: 12px auto; for omitted-width-omitted-height.svg
wide--12px-auto--omitted-width-omitted-height-viewbox SVG background-size: 12px auto; for omitted-width-omitted-height-viewbox.svg
wide--12px-auto--omitted-width-percent-height SVG background-size: 12px auto; for omitted-width-percent-height.svg
wide--12px-auto--omitted-width-percent-height-viewbox SVG background-size: 12px auto; for omitted-width-percent-height-viewbox.svg
wide--12px-auto--percent-width-nonpercent-height SVG background-size: 12px auto; for percent-width-nonpercent-height.svg
wide--12px-auto--percent-width-nonpercent-height-viewbox SVG background-size: 12px auto; for percent-width-nonpercent-height-viewbox.svg
wide--12px-auto--percent-width-omitted-height SVG background-size: 12px auto; for percent-width-omitted-height.svg
wide--12px-auto--percent-width-omitted-height-viewbox SVG background-size: 12px auto; for percent-width-omitted-height-viewbox.svg
wide--12px-auto--percent-width-percent-height SVG background-size: 12px auto; for percent-width-percent-height.svg
wide--12px-auto--percent-width-percent-height-viewbox SVG background-size: 12px auto; for percent-width-percent-height-viewbox.svg
wide--auto--nonpercent-width-nonpercent-height SVG background-size: auto; for nonpercent-width-nonpercent-height.svg
wide--auto--nonpercent-width-nonpercent-height-viewbox SVG background-size: auto; for nonpercent-width-nonpercent-height-viewbox.svg
wide--auto--nonpercent-width-omitted-height SVG background-size: auto; for nonpercent-width-omitted-height.svg
wide--auto--nonpercent-width-omitted-height-viewbox SVG background-size: auto; for nonpercent-width-omitted-height-viewbox.svg
wide--auto--nonpercent-width-percent-height SVG background-size: auto; for nonpercent-width-percent-height.svg
wide--auto--nonpercent-width-percent-height-viewbox SVG background-size: auto; for nonpercent-width-percent-height-viewbox.svg
wide--auto--omitted-width-nonpercent-height SVG background-size: auto; for omitted-width-nonpercent-height.svg
wide--auto--omitted-width-nonpercent-height-viewbox SVG background-size: auto; for omitted-width-nonpercent-height-viewbox.svg
wide--auto--omitted-width-omitted-height SVG background-size: auto; for omitted-width-omitted-height.svg
wide--auto--omitted-width-omitted-height-viewbox SVG background-size: auto; for omitted-width-omitted-height-viewbox.svg
wide--auto--omitted-width-percent-height SVG background-size: auto; for omitted-width-percent-height.svg
wide--auto--omitted-width-percent-height-viewbox SVG background-size: auto; for omitted-width-percent-height-viewbox.svg
wide--auto--percent-width-nonpercent-height SVG background-size: auto; for percent-width-nonpercent-height.svg
wide--auto--percent-width-nonpercent-height-viewbox SVG background-size: auto; for percent-width-nonpercent-height-viewbox.svg
wide--auto--percent-width-omitted-height SVG background-size: auto; for percent-width-omitted-height.svg
wide--auto--percent-width-omitted-height-viewbox SVG background-size: auto; for percent-width-omitted-height-viewbox.svg
wide--auto--percent-width-percent-height SVG background-size: auto; for percent-width-percent-height.svg
wide--auto--percent-width-percent-height-viewbox SVG background-size: auto; for percent-width-percent-height-viewbox.svg
wide--auto-32px--nonpercent-width-nonpercent-height SVG background-size: auto 32px; for nonpercent-width-nonpercent-height.svg
wide--auto-32px--nonpercent-width-nonpercent-height-viewbox SVG background-size: auto 32px; for nonpercent-width-nonpercent-height-viewbox.svg
wide--auto-32px--nonpercent-width-omitted-height SVG background-size: auto 32px; for nonpercent-width-omitted-height.svg
wide--auto-32px--nonpercent-width-omitted-height-viewbox SVG background-size: auto 32px; for nonpercent-width-omitted-height-viewbox.svg
wide--auto-32px--nonpercent-width-percent-height SVG background-size: auto 32px; for nonpercent-width-percent-height.svg
wide--auto-32px--nonpercent-width-percent-height-viewbox SVG background-size: auto 32px; for nonpercent-width-percent-height-viewbox.svg
wide--auto-32px--omitted-width-nonpercent-height SVG background-size: auto 32px; for omitted-width-nonpercent-height.svg
wide--auto-32px--omitted-width-nonpercent-height-viewbox SVG background-size: auto 32px; for omitted-width-nonpercent-height-viewbox.svg
wide--auto-32px--omitted-width-omitted-height SVG background-size: auto 32px; for omitted-width-omitted-height.svg
wide--auto-32px--omitted-width-omitted-height-viewbox SVG background-size: auto 32px; for omitted-width-omitted-height-viewbox.svg
wide--auto-32px--omitted-width-percent-height SVG background-size: auto 32px; for omitted-width-percent-height.svg
wide--auto-32px--omitted-width-percent-height-viewbox SVG background-size: auto 32px; for omitted-width-percent-height-viewbox.svg
wide--auto-32px--percent-width-nonpercent-height SVG background-size: auto 32px; for percent-width-nonpercent-height.svg
wide--auto-32px--percent-width-nonpercent-height-viewbox SVG background-size: auto 32px; for percent-width-nonpercent-height-viewbox.svg
wide--auto-32px--percent-width-omitted-height SVG background-size: auto 32px; for percent-width-omitted-height.svg
wide--auto-32px--percent-width-omitted-height-viewbox SVG background-size: auto 32px; for percent-width-omitted-height-viewbox.svg
wide--auto-32px--percent-width-percent-height SVG background-size: auto 32px; for percent-width-percent-height.svg
wide--auto-32px--percent-width-percent-height-viewbox SVG background-size: auto 32px; for percent-width-percent-height-viewbox.svg
wide--contain--height SVG background-size: contain; for nonpercent-width-omitted-height-extreme-viewbox.svg
wide--contain--nonpercent-width-nonpercent-height SVG background-size: contain; for nonpercent-width-nonpercent-height.svg
wide--contain--nonpercent-width-nonpercent-height-viewbox SVG background-size: contain; for nonpercent-width-nonpercent-height-viewbox.svg
wide--contain--nonpercent-width-omitted-height SVG background-size: contain; for nonpercent-width-omitted-height.svg
wide--contain--nonpercent-width-omitted-height-viewbox SVG background-size: contain; for nonpercent-width-omitted-height-viewbox.svg
wide--contain--nonpercent-width-percent-height SVG background-size: contain; for nonpercent-width-percent-height.svg
wide--contain--nonpercent-width-percent-height-viewbox SVG background-size: contain; for nonpercent-width-percent-height-viewbox.svg
wide--contain--omitted-width-nonpercent-height SVG background-size: contain; for omitted-width-nonpercent-height.svg
wide--contain--omitted-width-nonpercent-height-viewbox SVG background-size: contain; for omitted-width-nonpercent-height-viewbox.svg
wide--contain--omitted-width-omitted-height SVG background-size: contain; for omitted-width-omitted-height.svg
wide--contain--omitted-width-omitted-height-viewbox SVG background-size: contain; for omitted-width-omitted-height-viewbox.svg
wide--contain--omitted-width-percent-height SVG background-size: contain; for omitted-width-percent-height.svg
wide--contain--omitted-width-percent-height-viewbox SVG background-size: contain; for omitted-width-percent-height-viewbox.svg
wide--contain--percent-width-nonpercent-height SVG background-size: contain; for percent-width-nonpercent-height.svg
wide--contain--percent-width-nonpercent-height-viewbox SVG background-size: contain; for percent-width-nonpercent-height-viewbox.svg
wide--contain--percent-width-omitted-height SVG background-size: contain; for percent-width-omitted-height.svg
wide--contain--percent-width-omitted-height-viewbox SVG background-size: contain; for percent-width-omitted-height-viewbox.svg
wide--contain--percent-width-percent-height SVG background-size: contain; for percent-width-percent-height.svg
wide--contain--percent-width-percent-height-viewbox SVG background-size: contain; for percent-width-percent-height-viewbox.svg
wide--contain--width SVG background-size: contain; for omitted-width-nonpercent-height-extreme-viewbox.svg
wide--cover--height SVG background-size: cover; for nonpercent-width-omitted-height-extreme-viewbox.svg
wide--cover--nonpercent-width-nonpercent-height SVG background-size: cover; for nonpercent-width-nonpercent-height.svg
wide--cover--nonpercent-width-nonpercent-height-viewbox SVG background-size: cover; for nonpercent-width-nonpercent-height-viewbox.svg
wide--cover--nonpercent-width-omitted-height SVG background-size: cover; for nonpercent-width-omitted-height.svg
wide--cover--nonpercent-width-omitted-height-viewbox SVG background-size: cover; for nonpercent-width-omitted-height-viewbox.svg
wide--cover--nonpercent-width-percent-height SVG background-size: cover; for nonpercent-width-percent-height.svg
wide--cover--nonpercent-width-percent-height-viewbox SVG background-size: cover; for nonpercent-width-percent-height-viewbox.svg
wide--cover--omitted-width-nonpercent-height SVG background-size: cover; for omitted-width-nonpercent-height.svg
wide--cover--omitted-width-nonpercent-height-viewbox SVG background-size: cover; for omitted-width-nonpercent-height-viewbox.svg
wide--cover--omitted-width-omitted-height SVG background-size: cover; for omitted-width-omitted-height.svg
wide--cover--omitted-width-omitted-height-viewbox SVG background-size: cover; for omitted-width-omitted-height-viewbox.svg
wide--cover--omitted-width-percent-height SVG background-size: cover; for omitted-width-percent-height.svg
wide--cover--omitted-width-percent-height-viewbox SVG background-size: cover; for omitted-width-percent-height-viewbox.svg
wide--cover--percent-width-nonpercent-height SVG background-size: cover; for percent-width-nonpercent-height.svg
wide--cover--percent-width-nonpercent-height-viewbox SVG background-size: cover; for percent-width-nonpercent-height-viewbox.svg
wide--cover--percent-width-omitted-height SVG background-size: cover; for percent-width-omitted-height.svg
wide--cover--percent-width-omitted-height-viewbox SVG background-size: cover; for percent-width-omitted-height-viewbox.svg
wide--cover--percent-width-percent-height SVG background-size: cover; for percent-width-percent-height.svg
wide--cover--percent-width-percent-height-viewbox SVG background-size: cover; for percent-width-percent-height-viewbox.svg
wide--cover--width SVG background-size: cover; for omitted-width-nonpercent-height-extreme-viewbox.svg
zero-height-ratio-5px-auto SVG zero height ratio, 5px auto
zero-height-ratio-auto-5px SVG zero height ratio, auto 5px
zero-height-ratio-auto-auto SVG zero height ratio, auto auto
zero-height-ratio-contain SVG zero height ratio, contain
zero-height-ratio-cover SVG zero height ratio, cover
zero-ratio-no-dimensions-5px-auto SVG zero ratio, no dimensions, 5px auto
zero-ratio-no-dimensions-auto-5px SVG zero ratio, no dimensions, auto 5px
zero-ratio-no-dimensions-auto-auto SVG zero ratio, no dimensions, auto auto
zero-ratio-no-dimensions-contain SVG zero ratio, no dimensions, contain
zero-ratio-no-dimensions-cover SVG zero ratio, no dimensions, cover
zero-width-ratio-5px-auto SVG zero height ratio, 5px auto
zero-width-ratio-auto-5px SVG zero height ratio, auto 5px
zero-width-ratio-auto-auto SVG zero width ratio, auto auto
zero-width-ratio-contain SVG zero width ratio, contain
zero-width-ratio-cover SVG zero width ratio, cover
+ 3.10 Backgrounds Shorthand: the ‘background’ property
background-331 DOM/JS background shorthand - initial values
  • Check that given a valid declaration, for each layer the shorthand 'backgound' first sets the corresponding layer of each of 'background-image', 'background-position', 'background-size', 'background-repeat', 'background-origin', 'background-clip' and 'background-attachment' to that property's initial value
background-332 DOM/JSBitmaps background shorthand - all values specified
  • Check that given a valid declaration, for each layer the shorthand 'backgound' first sets the corresponding layer of each of 'background-image', 'background-position', 'background-size', 'background-repeat', 'background-origin', 'background-clip' and 'background-attachment' to that property's initial value, then assigns any explicit values specified for this layer in the declaration
background-333 DOM/JS background shorthand - background-color 'red'
  • Check that given a valid declaration, for each layer the shorthand 'backgound' first sets the corresponding layer of each of 'background-image', 'background-position', 'background-size', 'background-repeat', 'background-origin', 'background-clip' and 'background-attachment' to that property's initial value, then assigns any explicit values specified for this layer in the declaration, and finally 'background-color' is set to the specified color, if any, else set to its initial value
background-334 = Bitmaps background shorthand - background-size '100% auto'
  • Background-size with '100% auto' implies to rescale the image horizontally so that it fills the background area width and to rescale the image vertically so that it fills the background area height.
background-335 DOM/JS background shorthand - only one <box> value
  • Check if one <box> value is present then it sets both 'background-origin' and 'background-clip' to that value
background-336 DOM/JS background shorthand - two <box> values
  • Check if two <box> values are present, then the first sets 'background-origin' and the second 'background-clip'
+ 3.11 Backgrounds of Special Elements