|
+
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.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 because the default border-image-width is 1 which means 1 time the computed border-width. 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.
|
|
+
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
|
|
border-image-width-005 |
= |
Bitmaps |
border image area - border-image-width
- This test checks that the border image area can still exists even if the border area (or border belt) of an element is inexistent. In this test, the border image fills the content area, the padding area and 25px of the extended-beyond-border-belt area, 25px into the margin area of the element.
|
|
border-image-width-006 |
= |
Bitmaps |
border image area - border-image-width
- This test checks that the border image area can still exists even if the border area (or border belt) of an element is inexistent, even if the content area of an element is inexistent. In this test, the border image fills the padding area and 25px of the extended-beyond-border-belt area, 25px into the margin area of the element.
|
|
border-image-width-007 |
= |
Bitmaps |
border image area - border-image-width
- This test checks that the border image area can still exists even if the border area (or border belt) of an element is inexistent, even if the padding area (or padding belt) is inexistent and even if the content area is inexistent. In this test, the border image fills the margin area of the element. In this test, the whole border image area is outside the border box of the element.
|
|
+
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-space-1 |
= |
|
CSS Border Image: border-image-repeat: space
- The test checks whether border-image-repeat: 'space' uses the correct formula when a single image fits.
|
|
border-image-repeat-space-2 |
= |
|
CSS Border Image: border-image-repeat: space
- The test checks whether border-image-repeat: 'space' uses the correct formula when no images fit.
|
|
border-image-repeat-space-3 |
= |
|
CSS Border Image: border-image-repeat: space
- The test checks whether border-image-repeat: 'space' uses the correct formula when multiple images fit.
|
|
border-image-repeat-space-4 |
= = |
|
CSS Border Image: border-image-repeat: space
- The test checks whether border-image-repeat: 'space' uses the correct formula when a single image fits exactly.
|
|
border-image-repeat-space-5 |
= = |
|
CSS Border Image: border-image-repeat: space
- The test checks whether border-image-repeat: 'space' uses the correct formula when multiple images fit exactly.
|
|
border-image-repeat-space-6 |
= |
|
CSS Border Image: border-image-repeat: space
- The test checks whether border-image-repeat: 'space' with 'fill' uses the correct formula when a single image fits exactly.
|
|
border-image-repeat-space-7 |
= |
|
CSS Border Image: border-image-repeat: space
- The test checks whether border-image-repeat: 'space' with 'fill' uses the correct formula when multiple image fit.
|
|
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.
|
|
+
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
|
