Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-06-20 07:08:59 +01:00
Code Issues Projects Releases Packages Wiki Activity
servo/tests/wpt/css-tests/css-backgrounds-3_dev/html4/chapter-6.htm

494 lines
No EOL
24 KiB
HTML
Raw Blame History

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<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 (34 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<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="http://www.w3.org/TR/css3-background/#border-images">6 Border Images</a></th></tr>
<!-- 3 tests -->
<tr id="border-image-repeat-round-6" class="primary">
<td><strong>
<a href="border-image-repeat-round.htm">border-image-repeat-round</a></strong></td>
<td><a href="reference/border-image-repeat-round-ref.htm">=</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="primary">
<td><strong>
<a href="border-image-round-and-stretch.htm">border-image-round-and-stretch</a></strong></td>
<td><a href="reference/border-image-round-and-stretch-ref.htm">=</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="primary">
<td><strong>
<a href="border-image-slice-percentage.htm">border-image-slice-percentage</a></strong></td>
<td><a href="reference/border-image-slice-percentage-ref.htm">=</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="http://www.w3.org/TR/css3-background/#the-border-image-source">6.1 Image Source: the &#8216;border-image-source&#8217; property</a></th></tr>
<!-- 2 tests -->
<tr id="border-image-1-6.1" class="primary">
<td><strong>
<a href="border-image-1.htm">border-image-1</a></strong></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="primary">
<td><strong>
<a href="border-image-11.htm">border-image-11</a></strong></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="primary">
<td><strong>
<a href="css3-border-image-source.htm">css3-border-image-source</a></strong></td>
<td><a href="reference/css3-border-image-source-ref.htm">=</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="http://www.w3.org/TR/css3-background/#the-border-image-slice">6.2 Image Slicing: the &#8216;border-image-slice&#8217; property</a></th></tr>
<!-- 5 tests -->
<tr id="border-image-slice-001-6.2" class="primary image">
<td><strong>
<a href="border-image-slice-001.htm">border-image-slice-001</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>border-image-slice - &lt;percentage&gt;
<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="primary image">
<td><strong>
<a href="border-image-slice-002.htm">border-image-slice-002</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>border-image-slice - &lt;number&gt;
<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="primary image">
<td><strong>
<a href="border-image-slice-003.htm">border-image-slice-003</a></strong></td>
<td><a href="reference/ref-if-there-is-no-red.htm">=</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. So, we should see no red in this test.</li>
</ul>
</td>
</tr>
<tr id="border-image-slice-005-6.2" class="primary image">
<td><strong>
<a href="border-image-slice-005.htm">border-image-slice-005</a></strong></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="primary image">
<td><strong>
<a href="border-image-slice-007.htm">border-image-slice-007</a></strong></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="primary">
<td><strong>
<a href="border-image-2.htm">border-image-2</a></strong></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="primary">
<td><strong>
<a href="border-image-3.htm">border-image-3</a></strong></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="primary">
<td><strong>
<a href="border-image-4.htm">border-image-4</a></strong></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="primary">
<td><strong>
<a href="border-image-5.htm">border-image-5</a></strong></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="primary">
<td><strong>
<a href="border-image-6.htm">border-image-6</a></strong></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="http://www.w3.org/TR/css3-background/#the-border-image-width">6.3 Drawing Areas: the &#8216;border-image-width&#8217; property</a></th></tr>
<!-- 4 tests -->
<tr id="border-image-10-6.3" class="primary">
<td><strong>
<a href="border-image-10.htm">border-image-10</a></strong></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="primary">
<td><strong>
<a href="border-image-7.htm">border-image-7</a></strong></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="primary">
<td><strong>
<a href="border-image-8.htm">border-image-8</a></strong></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="primary">
<td><strong>
<a href="border-image-9.htm">border-image-9</a></strong></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>
</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="http://www.w3.org/TR/css3-background/#the-border-image-outset">6.4 Edge Overhang: the &#8216;border-image-outset&#8217; property</a></th></tr>
<!-- 1 tests -->
<tr id="border-image-12-6.4" class="primary">
<td><strong>
<a href="border-image-12.htm">border-image-12</a></strong></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="http://www.w3.org/TR/css3-background/#the-border-image-repeat">6.5 Image Tiling: the &#8216;border-image-repeat&#8217; property</a></th></tr>
<!-- 6 tests -->
<tr id="border-image-13-6.5" class="primary">
<td><strong>
<a href="border-image-13.htm">border-image-13</a></strong></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="primary">
<td><strong>
<a href="border-image-14.htm">border-image-14</a></strong></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="primary">
<td><strong>
<a href="border-image-15.htm">border-image-15</a></strong></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="primary">
<td><strong>
<a href="border-image-16.htm">border-image-16</a></strong></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_repeatnegx_none_50px-6.5" class="primary script">
<td><strong>
<a href="border-image-repeat_repeatnegx_none_50px.htm">border-image-repeat_repeatnegx_none_50px</a></strong></td>
<td></td>
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>&quot;border-image-repeat:repeat-x;height:200px;width:200px;border-image-source:none;border-image-width:50px&quot; 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="primary">
<td><strong>
<a href="border-image-space-001.htm">border-image-space-001</a></strong></td>
<td><a href="reference/border-image-space-001-ref.htm">=</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="primary">
<td><strong>
<a href="css3-border-image-repeat-repeat.htm">css3-border-image-repeat-repeat</a></strong></td>
<td><a href="reference/css3-border-image-repeat-repeat-ref.htm">=</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="primary">
<td><strong>
<a href="css3-border-image-repeat-stretch.htm">css3-border-image-repeat-stretch</a></strong></td>
<td><a href="reference/css3-border-image-repeat-stretch-ref.htm">=</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="http://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="http://www.w3.org/TR/css3-background/#the-border-image">6.7 Border Image Shorthand: the &#8216;border-image&#8217; property</a></th></tr>
<!-- 5 tests -->
<tr id="border-image-017-6.7" class="primary image">
<td><strong>
<a href="border-image-017.htm">border-image-017</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>border-image shorthand - with border-image-slice &lt;percentage&gt; and border-image-width &lt;percentage&gt;
<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="primary image">
<td><strong>
<a href="border-image-018.htm">border-image-018</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>border-image shorthand - with border-image-slice &lt;number&gt; and border-image-width &lt;percentage&gt;
<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="primary image">
<td><strong>
<a href="border-image-019.htm">border-image-019</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>border-image shorthand - with border-image-slice &lt;percentage&gt; and border-image-width &lt;number&gt;
<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="primary image">
<td><strong>
<a href="border-image-020.htm">border-image-020</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>border-image shorthand - with border-image-slice &lt;number&gt; and border-image-width &lt;number&gt;
<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="primary image">
<td><strong>
<a href="border-images.htm">border-images</a></strong></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="http://www.w3.org/TR/css3-background/#border-image-tables">6.8 Effect on Tables</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>
Reference in a new issue View git blame Copy permalink