CSS Backgrounds and Borders Module Level 3 CR Test Suite

Backgrounds (68 tests)

Test Refs Flags Info
+ 2 Backgrounds
+ 2.1 Layering Multiple Background Images
+ 2.2 Base Color: the background-color property
background-color-animation =
background-color-animation-fallback-missing-0-percent =
background-color-animation-fallback-missing-100-percent =
background-color-animation-fallback-replace =
background-color-animation-fragmented =
background-color-animation-in-body =
background-color-animation-single-keyframe =
background-color-animation-three-keyframes1 =
background-color-animation-three-keyframes2 =
background-color-animation-three-keyframes3 =
background-color-animation-with-images =
background-color-animation-with-table1 =
background-color-animation-with-table2 =
background-color-animation-with-table3 =
background-color-animation-with-table4 =
background-color-animation-with-zero-alpha =
background-color-animation-with-zero-playbackrate =
background-color-clip = Background Color Clip
  • Check that the background color is clipped according to the background-clip value associated with the bottom-most background image layer.
background-color-interpolation Script
background-color-transition =
background-color-transition-obscured =
background-color-transition-with-delay =
background-color-transition-with-initially-transparent =
background-color-transparent-animation-in-body =
bg-color-with-gradient =
simple-bg-color =
two-background-color-animation-diff-length1 =
two-background-color-animation-diff-length2 =
two-background-color-animation-diff-length3 =
inline-background-rtl-001 = background to inline boxes in RTL
+ 2.3 Image Sources: the background-image property
background-image-blur-repaint = CSS Filters: Repaint of element with background-image and blur filter
  • An element with background-image and a filter should be rendered correctly after other elements on the page change size. You should see a 50x50 green box over a blurred background.
background-image-interpolation Script
background-size-near-zero-gradient = Gradient background with near-zero background-size
background-size-near-zero-png = PNG background with near-zero background-size
background-size-near-zero-svg = SVG background with near-zero background-size
background-image-large-with-auto = Large images with one auto size are correctly sized
background-image-table-cells-zoomed = A background image on table cells with collapsed borders should fill the table
+ 2.4 Tiling Images: the background-repeat property
gradient-repeat-spaced-with-borders = Tiled gradient with spaces is repeated behind the border.
+ 2.5 Affixing Images: the background-attachment property
table-cell-background-local = Tests rendering of table cell's background-image with local attachment.
  • The local attachment background image of a table cell with overflow:hidden should be positioned in the scrolling area and clipped
background-attachment-margin-root-001 = Background-attachment: scroll should be positioned relative to the root element and should extend to cover the entire canvas in the presence of fixed backgrounds
background-attachment-margin-root-002 = Background-attachment: fixed should be positioned relative to the view and should extend to cover the entire canvas in the presence of scroll backgrounds
+ 2.6 Positioning Images: the background-position property
background-position-interpolation Script
background-position-negative-percentage-comparison =
background-position-origin-interpolation Script
background-position-subpixel-at-border.tentative = CSS Backgrounds: Subpixel positions adjacent to the borders
background-position-x-interpolation Script
background-position-y-interpolation Script
subpixel-position-center.tentative = CSS Backgrounds: Subpixel position center is centered
transition-background-position-with-edge-offset Script transition-property - background-position
  • Test checks that the 'background-position' property with edge offset is animatable.
transition-property-006-manual transition-property - background-position
  • Test checks that the 'background-position' property is animatable.
background-image-centered = Centered Background Gradient
background-image-centered-with-border-radius = Centered background image with border radius
+ 2.7 Painting Area: the background-clip property
background-clip-001 = Collapsed borders and background-clip
  • background-clip on a cell with collapsed borders is calculated correctly
background-clip-content-box-001 = background-clip Reference
+ 2.8 Positioning Area: the background-origin property
background-gradient-subpixel-fills-area = Gradient backgrounds should fill the positioning area
gradient-border-box = Gradient Background aligned to Content Box
  • The background-origin: border-box; statement is understood.
gradient-content-box = Gradient Background aligned to Content Box
  • The background-origin: content-box; statement is understood.
+ 2.9 Sizing Images: the background-size property
background-size-interpolation Script
background-size-near-zero-color = Color background with near-zero background-size
background-size-near-zero-gradient = Gradient background with near-zero background-size
background-size-near-zero-png = PNG background with near-zero background-size
background-size-near-zero-svg = SVG background with near-zero background-size
tiled-conic-gradients = Checkerboard using conic gradients
  • Gradients are correctly repeated.
tiled-gradients = Eight Red Triangles on White Ground (with gradients)
  • Gradients are correctly repeated.
tiled-radial-gradients = Two Ellipses with Custom Placement (with gradients)
  • Gradients are correctly repeated.
background-image-cover-zoomed-1 = background-size:cover should cover at zoom
background-size-cover-svg = A SVG background should fully cover the positioning area
+ 2.10 Backgrounds Shorthand: the background property
+ 2.11 Backgrounds of Special Elements
+ 2.11.1 The Canvas Background and the Root Element
background-attachment-margin-root-001 = Background-attachment: scroll should be positioned relative to the root element and should extend to cover the entire canvas in the presence of fixed backgrounds
background-attachment-margin-root-002 = Background-attachment: fixed should be positioned relative to the view and should extend to cover the entire canvas in the presence of scroll backgrounds
background-margin-iframe-root = Backgrounds on the root element of an iframe should extend to cover the entire canvas of the iframe in the presence of margin
background-margin-root = Backgrounds on the root element should extend to cover the entire canvas in the presence of margin
background-margin-transformed-root = Backgrounds on the root element should extend to cover the entire canvas in the presence of margin and transform
background-margin-will-change-root = Backgrounds on the root element should extend to cover the entire canvas in the presence of margin and will-change: transform
+ 2.11.2 The Canvas Background and the HTML Element
+ 2.11.3 The ::first-line Pseudo-element‘s Background