mirror of
https://github.com/servo/servo.git
synced 2025-06-23 16:44:33 +01:00
296fa2512b
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180. - Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
604 lines
No EOL
29 KiB
HTML
604 lines
No EOL
29 KiB
HTML
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>Border Images - CSS Backgrounds and Borders Module Level 3 CR Test Suite</title>
|
|
<style type="text/css">
|
|
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
|
@import "../indices.css";
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h1>CSS Backgrounds and Borders Module Level 3 CR Test Suite</h1>
|
|
<h2>Border Images (44 tests)</h2>
|
|
<table width="100%">
|
|
<col id="test-column"></col>
|
|
<col id="refs-column"></col>
|
|
<col id="flags-column"></col>
|
|
<col id="info-column"></col>
|
|
<thead>
|
|
<tr>
|
|
<th>Test</th>
|
|
<th><abbr title="Rendering References">Refs</abbr></th>
|
|
<th>Flags</th>
|
|
<th>Info</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="s6">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s6">+</a>
|
|
<a href="https://www.w3.org/TR/css3-background/#border-images">6 Border Images</a></th></tr>
|
|
<!-- 3 tests -->
|
|
<tr id="border-image-repeat-round-6" class="">
|
|
<td>
|
|
<a href="border-image-repeat-round.xht">border-image-repeat-round</a></td>
|
|
<td><a href="reference/border-image-repeat-round-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>'border-image-repeat' set as 'round'
|
|
<ul class="assert">
|
|
<li>diamonds in corners should be red, and other diamonds should be orange, it should be 4 orange diamonds on each side.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-round-and-stretch-6" class="">
|
|
<td>
|
|
<a href="border-image-round-and-stretch.xht">border-image-round-and-stretch</a></td>
|
|
<td><a href="reference/border-image-round-and-stretch-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>'border-image' set as 'round' and 'stretch'
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-slice-percentage-6" class="">
|
|
<td>
|
|
<a href="border-image-slice-percentage.xht">border-image-slice-percentage</a></td>
|
|
<td><a href="reference/border-image-slice-percentage-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>'border-image-slice' set by percentage
|
|
<ul class="assert">
|
|
<li>diamonds in corners should be red, and other diamonds should be orange, it should be 4 orange diamonds on each side.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s6.#border-image-border-shorthand-example">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.1">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s6.1">+</a>
|
|
<a href="https://www.w3.org/TR/css3-background/#the-border-image-source">6.1 Image Source: the ‘border-image-source’ property</a></th></tr>
|
|
<!-- 2 tests -->
|
|
<tr id="border-image-1-6.1" class="">
|
|
<td>
|
|
<a href="border-image-1.xht">border-image-1</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>CSS Border and Background: border-image #1 border-image-source
|
|
<ul class="assert">
|
|
<li>Basic support for the border-image-source property</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-11-6.1" class="">
|
|
<td>
|
|
<a href="border-image-11.xht">border-image-11</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>CSS Border and Background: border-image #11 border-image-outset
|
|
<ul class="assert">
|
|
<li>Basic support for the border-image-outset property</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s6.1.#border-image-source">
|
|
<!-- 1 tests -->
|
|
<tr id="css3-border-image-source-6.1.#border-image-source" class="">
|
|
<td>
|
|
<a href="css3-border-image-source.xht">css3-border-image-source</a></td>
|
|
<td><a href="reference/css3-border-image-source-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>border image source property
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s6.2">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s6.2">+</a>
|
|
<a href="https://www.w3.org/TR/css3-background/#the-border-image-slice">6.2 Image Slicing: the ‘border-image-slice’ property</a></th></tr>
|
|
<!-- 5 tests -->
|
|
<tr id="border-image-slice-001-6.2" class="image">
|
|
<td>
|
|
<a href="border-image-slice-001.xht">border-image-slice-001</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>border-image-slice - <percentage>
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-slice-002-6.2" class="image">
|
|
<td>
|
|
<a href="border-image-slice-002.xht">border-image-slice-002</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>border-image-slice - <number>
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-slice-003-6.2" class="image">
|
|
<td>
|
|
<a href="border-image-slice-003.xht">border-image-slice-003</a></td>
|
|
<td><a href="reference/ref-if-there-is-no-red.xht">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>border-image-slice - border-style: none
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-slice-005-6.2" class="image">
|
|
<td>
|
|
<a href="border-image-slice-005.xht">border-image-slice-005</a></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>The 'border-image-slice' property with four percentage values
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-slice-007-6.2" class="image">
|
|
<td>
|
|
<a href="border-image-slice-007.xht">border-image-slice-007</a></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>The 'border-image-slice' property with the 'fill' keyword
|
|
<ul class="assert">
|
|
<li>This test checks that the 'fill' keyword, if present, causes the middle part of the border-image to be preserved.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s6.2.#border-image-slice">
|
|
<!-- 5 tests -->
|
|
<tr id="border-image-2-6.2.#border-image-slice" class="">
|
|
<td>
|
|
<a href="border-image-2.xht">border-image-2</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>CSS Border and Background: border-image #2 border-image-slice
|
|
<ul class="assert">
|
|
<li>Basic support for the border-image-slice property</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-3-6.2.#border-image-slice" class="">
|
|
<td>
|
|
<a href="border-image-3.xht">border-image-3</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>CSS Border and Background: border-image #3 border-image-slice
|
|
<ul class="assert">
|
|
<li>Support for the fill keyword on the border-image-slice property</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-4-6.2.#border-image-slice" class="">
|
|
<td>
|
|
<a href="border-image-4.xht">border-image-4</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>CSS Border and Background: border-image #4 border-image-slice
|
|
<ul class="assert">
|
|
<li>Support for percentage with the border-image-slice property</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-5-6.2.#border-image-slice" class="">
|
|
<td>
|
|
<a href="border-image-5.xht">border-image-5</a></td>
|
|
<td><a href="support/reftest-border-image-5.png">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Border and Background: border-image #5 border-image-slice
|
|
<ul class="assert">
|
|
<li>Negative values for the the border-image-slice property should not be supported</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-6-6.2.#border-image-slice" class="">
|
|
<td>
|
|
<a href="border-image-6.xht">border-image-6</a></td>
|
|
<td><a href="support/reftest-border-image-5.png">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Border and Background: border-image #6 border-image-slice
|
|
<ul class="assert">
|
|
<li>The border-image-slice property default value is 100%</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s6.2.#border-image-slice-fill">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.3">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s6.3">+</a>
|
|
<a href="https://www.w3.org/TR/css3-background/#the-border-image-width">6.3 Drawing Areas: the ‘border-image-width’ property</a></th></tr>
|
|
<!-- 7 tests -->
|
|
<tr id="border-image-10-6.3" class="">
|
|
<td>
|
|
<a href="border-image-10.xht">border-image-10</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>CSS Border and Background: border-image #10 border-image-width
|
|
<ul class="assert">
|
|
<li>Support for 4 values for the border-image-width property</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-7-6.3" class="">
|
|
<td>
|
|
<a href="border-image-7.xht">border-image-7</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>CSS Border and Background: border-image #7 border-image-width
|
|
<ul class="assert">
|
|
<li>Basic support for the border-image-width property</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-8-6.3" class="">
|
|
<td>
|
|
<a href="border-image-8.xht">border-image-8</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>CSS Border and Background: border-image #8 border-image-width
|
|
<ul class="assert">
|
|
<li>Support for 2 values for the border-image-width property</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-9-6.3" class="">
|
|
<td>
|
|
<a href="border-image-9.xht">border-image-9</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>CSS Border and Background: border-image #9 border-image-width
|
|
<ul class="assert">
|
|
<li>Support for 3 values for the border-image-width property</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-width-005-6.3" class="image">
|
|
<td>
|
|
<a href="border-image-width-005.xht">border-image-width-005</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>border image area - border-image-width
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-width-006-6.3" class="image">
|
|
<td>
|
|
<a href="border-image-width-006.xht">border-image-width-006</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>border image area - border-image-width
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-width-007-6.3" class="image">
|
|
<td>
|
|
<a href="border-image-width-007.xht">border-image-width-007</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>border image area - border-image-width
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s6.3.#auto0">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.3.#border-image-width">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.4">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s6.4">+</a>
|
|
<a href="https://www.w3.org/TR/css3-background/#the-border-image-outset">6.4 Edge Overhang: the ‘border-image-outset’ property</a></th></tr>
|
|
<!-- 1 tests -->
|
|
<tr id="border-image-12-6.4" class="">
|
|
<td>
|
|
<a href="border-image-12.xht">border-image-12</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>CSS Border and Background: border-image #12 border-image-outset
|
|
<ul class="assert">
|
|
<li>The border-image-outset property should not trigger scroll</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s6.4.#border-image-area">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.4.#border-image-outset">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.5">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s6.5">+</a>
|
|
<a href="https://www.w3.org/TR/css3-background/#the-border-image-repeat">6.5 Image Tiling: the ‘border-image-repeat’ property</a></th></tr>
|
|
<!-- 13 tests -->
|
|
<tr id="border-image-13-6.5" class="">
|
|
<td>
|
|
<a href="border-image-13.xht">border-image-13</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>CSS Border and Background: border-image #13 border-image-repeat
|
|
<ul class="assert">
|
|
<li>Test for the border-image-repeat property with the value repeat</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-14-6.5" class="">
|
|
<td>
|
|
<a href="border-image-14.xht">border-image-14</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>CSS Border and Background: border-image #14 border-image-repeat
|
|
<ul class="assert">
|
|
<li>Test for the border-image-repeat property with the value round</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-15-6.5" class="">
|
|
<td>
|
|
<a href="border-image-15.xht">border-image-15</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>CSS Border and Background: border-image #15 border-image-repeat
|
|
<ul class="assert">
|
|
<li>Test for the border-image-repeat property with the value space</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-16-6.5" class="">
|
|
<td>
|
|
<a href="border-image-16.xht">border-image-16</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>CSS Border and Background: border-image #16 border-image-repeat
|
|
<ul class="assert">
|
|
<li>Test for the border-image-repeat property with the value stretch</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-repeat-space-1-6.5" class="primary">
|
|
<td><strong>
|
|
<a href="border-image-repeat-space-1.xht">border-image-repeat-space-1</a></strong></td>
|
|
<td><a href="reference/border-image-repeat-space-1-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Border Image: border-image-repeat: space
|
|
<ul class="assert">
|
|
<li>The test checks whether border-image-repeat: 'space' uses the correct formula when a single image fits.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-repeat-space-2-6.5" class="primary">
|
|
<td><strong>
|
|
<a href="border-image-repeat-space-2.xht">border-image-repeat-space-2</a></strong></td>
|
|
<td><a href="reference/border-image-repeat-space-2-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Border Image: border-image-repeat: space
|
|
<ul class="assert">
|
|
<li>The test checks whether border-image-repeat: 'space' uses the correct formula when no images fit.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-repeat-space-3-6.5" class="primary">
|
|
<td><strong>
|
|
<a href="border-image-repeat-space-3.xht">border-image-repeat-space-3</a></strong></td>
|
|
<td><a href="reference/border-image-repeat-space-3-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Border Image: border-image-repeat: space
|
|
<ul class="assert">
|
|
<li>The test checks whether border-image-repeat: 'space' uses the correct formula when multiple images fit.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-repeat-space-4-6.5" class="primary">
|
|
<td><strong>
|
|
<a href="border-image-repeat-space-4.xht">border-image-repeat-space-4</a></strong></td>
|
|
<td><a href="reference/border-image-repeat-space-4-ref-1.xht">=</a> <a href="reference/border-image-repeat-space-4-ref-2.xht">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Border Image: border-image-repeat: space
|
|
<ul class="assert">
|
|
<li>The test checks whether border-image-repeat: 'space' uses the correct formula when a single image fits exactly.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-repeat-space-5-6.5" class="primary">
|
|
<td><strong>
|
|
<a href="border-image-repeat-space-5.xht">border-image-repeat-space-5</a></strong></td>
|
|
<td><a href="reference/border-image-repeat-space-5-ref-1.xht">=</a> <a href="reference/border-image-repeat-space-5-ref-2.xht">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Border Image: border-image-repeat: space
|
|
<ul class="assert">
|
|
<li>The test checks whether border-image-repeat: 'space' uses the correct formula when multiple images fit exactly.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-repeat-space-6-6.5" class="primary">
|
|
<td><strong>
|
|
<a href="border-image-repeat-space-6.xht">border-image-repeat-space-6</a></strong></td>
|
|
<td><a href="reference/border-image-repeat-space-6-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Border Image: border-image-repeat: space
|
|
<ul class="assert">
|
|
<li>The test checks whether border-image-repeat: 'space' with 'fill' uses the correct formula when a single image fits exactly.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-repeat-space-7-6.5" class="primary">
|
|
<td><strong>
|
|
<a href="border-image-repeat-space-7.xht">border-image-repeat-space-7</a></strong></td>
|
|
<td><a href="reference/border-image-repeat-space-7-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Border Image: border-image-repeat: space
|
|
<ul class="assert">
|
|
<li>The test checks whether border-image-repeat: 'space' with 'fill' uses the correct formula when multiple image fit.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-repeat_repeatnegx_none_50px-6.5" class="script">
|
|
<td>
|
|
<a href="border-image-repeat_repeatnegx_none_50px.xht">border-image-repeat_repeatnegx_none_50px</a></td>
|
|
<td></td>
|
|
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>"border-image-repeat:repeat-x;height:200px;width:200px;border-image-source:none;border-image-width:50px" on test div
|
|
<ul class="assert">
|
|
<li>Check if 'border-image-repeat:repeat-x;height:200px;width:200px;border-image-source:none;border-image-width:50px' work on div</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-space-001-6.5" class="">
|
|
<td>
|
|
<a href="border-image-space-001.xht">border-image-space-001</a></td>
|
|
<td><a href="reference/border-image-space-001-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Border Image: box with spaced repeating border image
|
|
<ul class="assert">
|
|
<li>border-image-repeat: space property spaces out background image that doesn't fit an even number of times.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s6.5.#border-image-repeat">
|
|
<!-- 2 tests -->
|
|
<tr id="css3-border-image-repeat-repeat-6.5.#border-image-repeat" class="">
|
|
<td>
|
|
<a href="css3-border-image-repeat-repeat.xht">css3-border-image-repeat-repeat</a></td>
|
|
<td><a href="reference/css3-border-image-repeat-repeat-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>border image repeat property with value repeat
|
|
</td>
|
|
</tr>
|
|
<tr id="css3-border-image-repeat-stretch-6.5.#border-image-repeat" class="">
|
|
<td>
|
|
<a href="css3-border-image-repeat-stretch.xht">css3-border-image-repeat-stretch</a></td>
|
|
<td><a href="reference/css3-border-image-repeat-stretch-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>border image repeat property with value stretch
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s6.5.#repeat0">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.5.#round0">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.5.#space0">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.5.#stretch">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.6">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s6.6">+</a>
|
|
<a href="https://www.w3.org/TR/css3-background/#border-image-process">6.6 Drawing the Border Image</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.7">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s6.7">+</a>
|
|
<a href="https://www.w3.org/TR/css3-background/#the-border-image">6.7 Border Image Shorthand: the ‘border-image’ property</a></th></tr>
|
|
<!-- 5 tests -->
|
|
<tr id="border-image-017-6.7" class="image">
|
|
<td>
|
|
<a href="border-image-017.xht">border-image-017</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>border-image shorthand - with border-image-slice <percentage> and border-image-width <percentage>
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-018-6.7" class="image">
|
|
<td>
|
|
<a href="border-image-018.xht">border-image-018</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>border-image shorthand - with border-image-slice <number> and border-image-width <percentage>
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-019-6.7" class="image">
|
|
<td>
|
|
<a href="border-image-019.xht">border-image-019</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>border-image shorthand - with border-image-slice <percentage> and border-image-width <number>
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-image-020-6.7" class="image">
|
|
<td>
|
|
<a href="border-image-020.xht">border-image-020</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>border-image shorthand - with border-image-slice <number> and border-image-width <number>
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-images-6.7" class="image">
|
|
<td>
|
|
<a href="border-images.xht">border-images</a></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>border-images with round repeat
|
|
<ul class="assert">
|
|
<li>Testing border-image-repeat:round attribute</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s6.7.#border-image">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.8">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s6.8">+</a>
|
|
<a href="https://www.w3.org/TR/css3-background/#border-image-tables">6.8 Effect on Tables</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
</table>
|
|
|
|
</body>
|
|
</html> |