CSS Backgrounds and Borders Module Level 3 CR Test Suite

Border Images (34 tests)

Test Refs Flags Info
+ 6 Border Images
border-image-repeat-round = 'border-image-repeat' set as 'round'
  • diamonds in corners should be red, and other diamonds should be orange, it should be 4 orange diamonds on each side.
border-image-round-and-stretch = 'border-image' set as 'round' and 'stretch'
  • orange diamonds on top and bottom border should be repeated 12 times, and orange diamonds on left and right border should be stretched, diamonds in corners should be red, and other diamonds should be orange.
border-image-slice-percentage = 'border-image-slice' set by percentage
  • diamonds in corners should be red, and other diamonds should be orange, it should be 4 orange diamonds on each side.
+ 6.1 Image Source: the ‘border-image-source’ property
border-image-1 CSS Border and Background: border-image #1 border-image-source
  • Basic support for the border-image-source property
border-image-11 CSS Border and Background: border-image #11 border-image-outset
  • Basic support for the border-image-outset property
css3-border-image-source = border image source property
+ 6.2 Image Slicing: the ‘border-image-slice’ property
border-image-slice-001 = Bitmaps border-image-slice - <percentage>
  • Percentage values for 'border-image-slice' are relative to the size of the image: the width of the image for the horizontal (left and right) offsets, the height for vertical (top and bottom) offsets. 'border-image-slice' specifies inward offsets from the top, right, bottom, and left edges (in that order) of the image. In this test, the image serving as 'border-image-source' is a 100px by 100px image which has 5px of green at the top, 10px of green on the right, 15px of green at the bottom and 20px of green at the left; the remaining center (which has a width of 70px and a height of 80px) is all red.
border-image-slice-002 = Bitmaps border-image-slice - <number>
  • Number values for 'border-image-slice' are pixels in the image: the width of the image for the horizontal (left and right) offsets, the height for vertical (top and bottom) offsets. 'border-image-slice' specifies inward offsets from the top, right, bottom, and left edges (in that order) of the image. In this test, the image serving as 'border-image-source' is a 100px by 100px image which has 5px of green at the top, 10px of green on the right, 15px of green at the bottom and 20px of green at the left; the remaining center (which has a width of 70px and a height of 80px) is all red.
border-image-slice-003 = Bitmaps border-image-slice - border-style: none
  • If 'border-style' is not declared, then it defaults to 'none' in which case the computed border-widths on all 4 sides is 0 in which case the border area to be painted with the border-image is also 0. So, we should see no red in this test.
border-image-slice-005 Bitmaps The 'border-image-slice' property with four percentage values
  • This test checks that the border image is sliced into nine regions with inward offsets, '40%' from the top, '15%' from the right,'20%' from the bottom, and '5%' from the left edges of the image. Percentages are relative to the size of the image: the width of the image for the horizontal offsets, the height for vertical offsets.
border-image-slice-007 Bitmaps The 'border-image-slice' property with the 'fill' keyword
  • This test checks that the 'fill' keyword, if present, causes the middle part of the border-image to be preserved.
border-image-2 CSS Border and Background: border-image #2 border-image-slice
  • Basic support for the border-image-slice property
border-image-3 CSS Border and Background: border-image #3 border-image-slice
  • Support for the fill keyword on the border-image-slice property
border-image-4 CSS Border and Background: border-image #4 border-image-slice
  • Support for percentage with the border-image-slice property
border-image-5 = CSS Border and Background: border-image #5 border-image-slice
  • Negative values for the the border-image-slice property should not be supported
border-image-6 = CSS Border and Background: border-image #6 border-image-slice
  • The border-image-slice property default value is 100%
+ 6.3 Drawing Areas: the ‘border-image-width’ property
border-image-10 CSS Border and Background: border-image #10 border-image-width
  • Support for 4 values for the border-image-width property
border-image-7 CSS Border and Background: border-image #7 border-image-width
  • Basic support for the border-image-width property
border-image-8 CSS Border and Background: border-image #8 border-image-width
  • Support for 2 values for the border-image-width property
border-image-9 CSS Border and Background: border-image #9 border-image-width
  • Support for 3 values for the border-image-width property
+ 6.4 Edge Overhang: the ‘border-image-outset’ property
border-image-12 CSS Border and Background: border-image #12 border-image-outset
  • The border-image-outset property should not trigger scroll
+ 6.5 Image Tiling: the ‘border-image-repeat’ property
border-image-13 CSS Border and Background: border-image #13 border-image-repeat
  • Test for the border-image-repeat property with the value repeat
border-image-14 CSS Border and Background: border-image #14 border-image-repeat
  • Test for the border-image-repeat property with the value round
border-image-15 CSS Border and Background: border-image #15 border-image-repeat
  • Test for the border-image-repeat property with the value space
border-image-16 CSS Border and Background: border-image #16 border-image-repeat
  • Test for the border-image-repeat property with the value stretch
border-image-repeat_repeatnegx_none_50px Script "border-image-repeat:repeat-x;height:200px;width:200px;border-image-source:none;border-image-width:50px" on test div
  • Check if 'border-image-repeat:repeat-x;height:200px;width:200px;border-image-source:none;border-image-width:50px' work on div
border-image-space-001 = Border Image: box with spaced repeating border image
  • border-image-repeat: space property spaces out background image that doesn't fit an even number of times.
css3-border-image-repeat-repeat = border image repeat property with value repeat
css3-border-image-repeat-stretch = border image repeat property with value stretch
+ 6.6 Drawing the Border Image
+ 6.7 Border Image Shorthand: the ‘border-image’ property
border-image-017 = Bitmaps border-image shorthand - with border-image-slice <percentage> and border-image-width <percentage>
  • Percentage values for 'border-image-slice' are relative to the size of the image: the width of the image for the horizontal (left and right) offsets, the height for vertical (top and bottom) offsets. 'border-image-slice' specifies inward offsets from the top, right, bottom, and left edges (in that order) of the image. In this test, the image serving as 'border-image-source' is a 100px by 100px image which has 5px of green at the top, 10px of green on the right, 15px of green at the bottom and 20px of green at the left; the remaining center (which has a width of 70px and a height of 80px) is all red.
border-image-018 = Bitmaps border-image shorthand - with border-image-slice <number> and border-image-width <percentage>
  • Number values for 'border-image-slice' are pixels in the image: the width of the image for the horizontal (left and right) offsets, the height for vertical (top and bottom) offsets. 'border-image-slice' specifies inward offsets from the top, right, bottom, and left edges (in that order) of the image. In this test, the image serving as 'border-image-source' is a 100px by 100px image which has 5px of green at the top, 10px of green on the right, 15px of green at the bottom and 20px of green at the left; the remaining center (which has a width of 70px and a height of 80px) is all red.
border-image-019 = Bitmaps border-image shorthand - with border-image-slice <percentage> and border-image-width <number>
  • Percentage values for 'border-image-slice' are relative to the size of the image: the width of the image for the horizontal (left and right) offsets, the height for vertical (top and bottom) offsets. 'border-image-slice' specifies inward offsets from the top, right, bottom, and left edges (in that order) of the image. In this test, the image serving as 'border-image-source' is a 100px by 100px image which has 5px of green at the top, 10px of green on the right, 15px of green at the bottom and 20px of green at the left; the remaining center (which has a width of 70px and a height of 80px) is all red.
border-image-020 = Bitmaps border-image shorthand - with border-image-slice <number> and border-image-width <number>
  • Number values for 'border-image-slice' are pixels in the image: the width of the image for the horizontal (left and right) offsets, the height for vertical (top and bottom) offsets. 'border-image-slice' specifies inward offsets from the top, right, bottom, and left edges (in that order) of the image. In this test, the image serving as 'border-image-source' is a 100px by 100px image which has 5px of green at the top, 10px of green on the right, 15px of green at the bottom and 20px of green at the left; the remaining center (which has a width of 70px and a height of 80px) is all red.
border-images Bitmaps border-images with round repeat
  • Testing border-image-repeat:round attribute
+ 6.8 Effect on Tables