<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Borders - 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>Borders (25 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="s4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4">+</a>
<a href="https://www.w3.org/TR/css3-background/#borders">4 Borders</a></th></tr>
<!-- 5 tests -->
<tr id="border-001-4" class="">
<td>
<a href="border-001.htm">border-001</a></td>
<td><a href="reference/border-001-ref.htm">=</a> </td>
<td></td>
<td>Border set using border-width
<ul class="assert">
<li>The 'border' shorthand property properly accepts and sets border-width.</li>
</ul>
</td>
</tr>
<tr id="border-003-4" class="">
<td>
<a href="border-003.htm">border-003</a></td>
<td><a href="reference/border-003-ref.htm">=</a> </td>
<td></td>
<td>Border set using border-color
<ul class="assert">
<li>The 'border' shorthand property properly accepts and sets border-color.</li>
</ul>
</td>
</tr>
<tr id="border-005-4" class="">
<td>
<a href="border-005.htm">border-005</a></td>
<td><a href="reference/border-005-ref.htm">=</a> </td>
<td></td>
<td>Border set using border-width border-color
<ul class="assert">
<li>The 'border' shorthand property properly accepts and sets 'border-width' and 'border-color'.</li>
</ul>
</td>
</tr>
<tr id="border-006-4" class="">
<td>
<a href="border-006.htm">border-006</a></td>
<td><a href="reference/border-006-ref.htm">=</a> </td>
<td></td>
<td>Border set using border-style border-width
<ul class="assert">
<li>The 'border' shorthand property properly accepts and sets 'border-style' and 'border-width'.</li>
</ul>
</td>
</tr>
<tr id="border-008-4" class="">
<td>
<a href="border-008.htm">border-008</a></td>
<td><a href="reference/border-005-ref.htm">=</a> </td>
<td></td>
<td>Border set using border-color border-width
<ul class="assert">
<li>The 'border' shorthand property properly accepts and sets 'border-color' and 'border-width'.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s4.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.1">+</a>
<a href="https://www.w3.org/TR/css3-background/#the-border-color">4.1 Line Colors: the ‘border-color’ properties</a></th></tr>
<!-- 7 tests -->
<tr id="border-color_transparent-4.1" class="">
<td>
<a href="border-color_transparent.htm">border-color_transparent</a></td>
<td></td>
<td></td>
<td>border-clip_border-box
<ul class="assert">
<li>Test transparent of border-color</li>
</ul>
</td>
</tr>
<tr id="border-radius-style-001-4.1" class="">
<td>
<a href="border-radius-style-001.htm">border-radius-style-001</a></td>
<td></td>
<td></td>
<td>'Border-radius' is set with 'border-style: dotted'
<ul class="assert">
<li>'Border-style: dotted' follows the curve of the border.</li>
</ul>
</td>
</tr>
<tr id="ttwf-css3background-border-color-4.1" class="image">
<td>
<a href="ttwf-css3background-border-color.htm">ttwf-css3background-border-color</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>border_color
<ul class="assert">
<li>'Border-color' is a shorthand for the four 'border-*-color' properties. The four values set the top, right, bottom and left border, respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top.</li>
</ul>
</td>
</tr>
<tr id="ttwf-css3background-border-color-shorthand-4.1" class="image">
<td>
<a href="ttwf-css3background-border-color-shorthand.htm">ttwf-css3background-border-color-shorthand</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>border_color_shorthand
<ul class="assert">
<li>'Border-color' is a shorthand for the four 'border-*-color' properties. The four values set the top, right, bottom and left border, respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top.</li>
</ul>
</td>
</tr>
<tr id="ttwf-css3background-border-color-shorthand-missing-bottom-4.1" class="image">
<td>
<a href="ttwf-css3background-border-color-shorthand-missing-bottom.htm">ttwf-css3background-border-color-shorthand-missing-bottom</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>border_color_shorthand_missing_bottom
<ul class="assert">
<li>'Border-color' is a shorthand for the four 'border-*-color' properties. The four values set the top, right, bottom and left border, respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top.</li>
</ul>
</td>
</tr>
<tr id="ttwf-css3background-border-color-shorthand-missing-left-4.1" class="image">
<td>
<a href="ttwf-css3background-border-color-shorthand-missing-left.htm">ttwf-css3background-border-color-shorthand-missing-left</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>border_color_shorthand_missing_left
<ul class="assert">
<li>'Border-color' is a shorthand for the four 'border-*-color' properties. The four values set the top, right, bottom and left border, respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top.</li>
</ul>
</td>
</tr>
<tr id="ttwf-css3background-border-color-shorthand-missing-right-4.1" class="image">
<td>
<a href="ttwf-css3background-border-color-shorthand-missing-right.htm">ttwf-css3background-border-color-shorthand-missing-right</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>border_color_shorthand_missing_right
<ul class="assert">
<li>'Border-color' is a shorthand for the four 'border-*-color' properties. The four values set the top, right, bottom and left border, respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s4.1.#border-bottom-color">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#border-color">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#border-left-color">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#border-right-color">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#border-top-color">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.2">+</a>
<a href="https://www.w3.org/TR/css3-background/#the-border-style">4.2 Line Patterns: the ‘border-style’ properties</a></th></tr>
<!-- 10 tests -->
<tr id="border-radius-style-002-4.2" class="">
<td>
<a href="border-radius-style-002.htm">border-radius-style-002</a></td>
<td></td>
<td></td>
<td>'Border-radius' is set with 'border-style: dashed'
<ul class="assert">
<li>'Border-style: dashed' follows the curve of the border.</li>
</ul>
</td>
</tr>
<tr id="border-radius-style-003-4.2" class="">
<td>
<a href="border-radius-style-003.htm">border-radius-style-003</a></td>
<td></td>
<td></td>
<td>'Border-radius' is set with 'border-style: double'
<ul class="assert">
<li>'Border-style: double' follows the curve of the border.</li>
</ul>
</td>
</tr>
<tr id="border-radius-style-004-4.2" class="">
<td>
<a href="border-radius-style-004.htm">border-radius-style-004</a></td>
<td></td>
<td></td>
<td>'Border-radius' is set with 'border-style: solid'
<ul class="assert">
<li>'Border-style: solid' follows the curve of the border.</li>
</ul>
</td>
</tr>
<tr id="border-radius-style-005-4.2" class="">
<td>
<a href="border-radius-style-005.htm">border-radius-style-005</a></td>
<td></td>
<td></td>
<td>'Border-radius' is set with 'border-style: none'
<ul class="assert">
<li>'Border-style: none' follows the curve of the border.</li>
</ul>
</td>
</tr>
<tr id="ttwf-css3background-border-style-4.2" class="image">
<td>
<a href="ttwf-css3background-border-style.htm">ttwf-css3background-border-style</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>border_style
<ul class="assert">
<li>'Border-style' is a shorthand for the other four. Its four values set the top, right, bottom and left border respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top.</li>
</ul>
</td>
</tr>
<tr id="ttwf-css3background-border-style-double-4.2" class="image">
<td>
<a href="ttwf-css3background-border-style-double.htm">ttwf-css3background-border-style-double</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>border_style_double
<ul class="assert">
<li>'Border-style' is a shorthand for the other four. Its four values set the top, right, bottom and left border respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top. 'double': Two parallel solid lines with some space between them. (The thickness of the lines is not specified, but the sum of the lines and the space must equal 'border-width'.)</li>
</ul>
</td>
</tr>
<tr id="ttwf-css3background-border-style-shorthand-4.2" class="image">
<td>
<a href="ttwf-css3background-border-style-shorthand.htm">ttwf-css3background-border-style-shorthand</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>border_style_shorthand
<ul class="assert">
<li>'Border-style' is a shorthand for the other four. Its four values set the top, right, bottom and left border respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top.</li>
</ul>
</td>
</tr>
<tr id="ttwf-css3background-border-style-shorthand-missing-bottom-4.2" class="image">
<td>
<a href="ttwf-css3background-border-style-shorthand-missing-bottom.htm">ttwf-css3background-border-style-shorthand-missing-bottom</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>border_style
<ul class="assert">
<li>'Border-style' is a shorthand for the other four. Its four values set the top, right, bottom and left border respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top.</li>
</ul>
</td>
</tr>
<tr id="ttwf-css3background-border-style-shorthand-missing-left-4.2" class="image">
<td>
<a href="ttwf-css3background-border-style-shorthand-missing-left.htm">ttwf-css3background-border-style-shorthand-missing-left</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>border_style
<ul class="assert">
<li>'Border-style' is a shorthand for the other four. Its four values set the top, right, bottom and left border respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top.</li>
</ul>
</td>
</tr>
<tr id="ttwf-css3background-border-style-values-4.2" class="">
<td>
<a href="ttwf-css3background-border-style-values.htm">ttwf-css3background-border-style-values</a></td>
<td></td>
<td></td>
<td>border_style_values
<ul class="assert">
<li>'Border-style' is a shorthand for the other four. Its four values set the top, right, bottom and left border respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top. <border-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s4.2.#border-bottom-style">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#border-left-style">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#border-right-style">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#border-style">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#border-top-style">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#dashed">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#dotted">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#double">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#groove">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#hidden">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#inset">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#ltline-stylegt">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#none0">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#outset">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#ridge">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#solid">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.3">+</a>
<a href="https://www.w3.org/TR/css3-background/#the-border-width">4.3 Line Thickness: the ‘border-width’ properties</a></th></tr>
<!-- 3 tests -->
<tr id="css3-background-clip-4.3" class="">
<td>
<a href="css3-background-clip.htm">css3-background-clip</a></td>
<td><a href="reference/css3-background-clip-ref.htm">=</a> </td>
<td></td>
<td>the background is pruned to content box
</td>
</tr>
<tr id="css3-background-size-4.3" class="">
<td>
<a href="css3-background-size.htm">css3-background-size</a></td>
<td><a href="reference/css3-background-size-ref.htm">=</a> </td>
<td></td>
<td>the size of the background image
</td>
</tr>
<tr id="css3-box-shadow-4.3" class="">
<td>
<a href="css3-box-shadow.htm">css3-box-shadow</a></td>
<td><a href="reference/css3-box-shadow-ref.htm">=</a> </td>
<td></td>
<td>the test passes if adding one or more shadow to the box
</td>
</tr>
</tbody>
<tbody id="s4.3.#border-bottom-width">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#border-left-width">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#border-right-width">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#border-top-width">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#border-width">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ltline-widthgt">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.4">+</a>
<a href="https://www.w3.org/TR/css3-background/#the-border-shorthands">4.4 Border Shorthand Properties</a></th></tr>
<!-- 5 tests -->
<tr id="border-001-4.4" class="">
<td>
<a href="border-001.htm">border-001</a></td>
<td><a href="reference/border-001-ref.htm">=</a> </td>
<td></td>
<td>Border set using border-width
<ul class="assert">
<li>The 'border' shorthand property properly accepts and sets border-width.</li>
</ul>
</td>
</tr>
<tr id="border-003-4.4" class="">
<td>
<a href="border-003.htm">border-003</a></td>
<td><a href="reference/border-003-ref.htm">=</a> </td>
<td></td>
<td>Border set using border-color
<ul class="assert">
<li>The 'border' shorthand property properly accepts and sets border-color.</li>
</ul>
</td>
</tr>
<tr id="border-005-4.4" class="">
<td>
<a href="border-005.htm">border-005</a></td>
<td><a href="reference/border-005-ref.htm">=</a> </td>
<td></td>
<td>Border set using border-width border-color
<ul class="assert">
<li>The 'border' shorthand property properly accepts and sets 'border-width' and 'border-color'.</li>
</ul>
</td>
</tr>
<tr id="border-006-4.4" class="">
<td>
<a href="border-006.htm">border-006</a></td>
<td><a href="reference/border-006-ref.htm">=</a> </td>
<td></td>
<td>Border set using border-style border-width
<ul class="assert">
<li>The 'border' shorthand property properly accepts and sets 'border-style' and 'border-width'.</li>
</ul>
</td>
</tr>
<tr id="border-008-4.4" class="">
<td>
<a href="border-008.htm">border-008</a></td>
<td><a href="reference/border-005-ref.htm">=</a> </td>
<td></td>
<td>Border set using border-color border-width
<ul class="assert">
<li>The 'border' shorthand property properly accepts and sets 'border-color' and 'border-width'.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s4.4.#border">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#border-bottom">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#border-left">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#border-right">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#border-top">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>