mirror of
https://github.com/servo/servo.git
synced 2025-06-20 07:08:59 +01:00
1292 lines
No EOL
58 KiB
HTML
1292 lines
No EOL
58 KiB
HTML
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
<html>
|
|
<head>
|
|
<title>Rounded Corners - 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>Rounded Corners (109 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="s5">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s5">+</a>
|
|
<a href="http://www.w3.org/TR/css3-background/#corners">5 Rounded Corners</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.1">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s5.1">+</a>
|
|
<a href="http://www.w3.org/TR/css3-background/#the-border-radius">5.1 Curve Radii: the ‘border-radius’ properties</a></th></tr>
|
|
<!-- 72 tests -->
|
|
<tr id="border-bottom-left-radius-001-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-left-radius-001.htm">border-bottom-left-radius-001</a></strong></td>
|
|
<td><a href="reference/border-radius-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-left-radius using 0 value
|
|
<ul class="assert">
|
|
<li>To verify the border-bottom-left-radius property, when set with 0, works as expected</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-bottom-left-radius-002-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-left-radius-002.htm">border-bottom-left-radius-002</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-left-radius using one length value: 25px
|
|
<ul class="assert">
|
|
<li>To verify if border-bottom-left-radius property set to one length value, works as expected</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-bottom-left-radius-003-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-left-radius-003.htm">border-bottom-left-radius-003</a></strong></td>
|
|
<td><a href="border-bottom-left-radius-004.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-left-radius using two length values: 40px 20px
|
|
<ul class="assert">
|
|
<li>To verify border-bottom-left-radius property set to two length values, works as expected</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-bottom-left-radius-004-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-left-radius-004.htm">border-bottom-left-radius-004</a></strong></td>
|
|
<td><a href="border-bottom-left-radius-003.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-left-radius using one percentage value: 20%
|
|
<ul class="assert">
|
|
<li>To verify border-bottom-left-radius property set to percentage value, works as expected</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-bottom-left-radius-005-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-left-radius-005.htm">border-bottom-left-radius-005</a></strong></td>
|
|
<td><a href="border-bottom-left-radius-006.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-left-radius using two percentage values: 20% 30%
|
|
<ul class="assert">
|
|
<li>To verify border-bottom-left-radius property set to two precentage value, works as expected</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-bottom-left-radius-006-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-left-radius-006.htm">border-bottom-left-radius-006</a></strong></td>
|
|
<td><a href="border-bottom-left-radius-005.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-left-radius using two values: 40px 30%
|
|
<ul class="assert">
|
|
<li>To verify border-bottom-left-radius property set to two values in different unit, works fine</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-bottom-left-radius-007-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-left-radius-007.htm">border-bottom-left-radius-007</a></strong></td>
|
|
<td><a href="border-bottom-left-radius-009.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-left-radius using two values: 20% 25px
|
|
<ul class="assert">
|
|
<li>To verify border-bottom-left-radius property set to two values in different unit, works fine</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-bottom-left-radius-008-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-left-radius-008.htm">border-bottom-left-radius-008</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-left-radius using two values: 4em 30%
|
|
<ul class="assert">
|
|
<li>To verify border-bottom-left-radius property set to two values in different units, works fine</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-bottom-left-radius-009-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-left-radius-009.htm">border-bottom-left-radius-009</a></strong></td>
|
|
<td><a href="border-bottom-left-radius-007.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-left-radius using "inherit"
|
|
<ul class="assert">
|
|
<li>To verify if inherit feature works, when assigned to border-bottom-left-radius</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-bottom-left-radius-010-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-left-radius-010.htm">border-bottom-left-radius-010</a></strong></td>
|
|
<td><a href="reference/border-radius-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-left-radius using one length value: 25px 0
|
|
<ul class="assert">
|
|
<li>To verify border-bottom-left-radius property set to one length value, works fine</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-bottom-left-radius-011-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-left-radius-011.htm">border-bottom-left-radius-011</a></strong></td>
|
|
<td><a href="reference/border-radius-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-left-radius using one length value: 0 3em
|
|
<ul class="assert">
|
|
<li>To verify border-bottom-left-radius property set to one length value, works fine</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-bottom-left-radius-012-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-left-radius-012.htm">border-bottom-left-radius-012</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-left-radius using two length values: 0.5in 10mm
|
|
<ul class="assert">
|
|
<li>To verify border-bottom-left-radius property set to two length values (with diferent units), works as expected</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-bottom-left-radius-013-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-left-radius-013.htm">border-bottom-left-radius-013</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-left-radius using two length values: 40pt 2pc
|
|
<ul class="assert">
|
|
<li>To verify border-bottom-left-radius property set to two length values (with different units), works as expected</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-bottom-left-radius-014-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-left-radius-014.htm">border-bottom-left-radius-014</a></strong></td>
|
|
<td><a href="reference/border-radius-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-left-radius using two length values: 50px -25px
|
|
<ul class="assert">
|
|
<li>To verify if one length value is negative in border-bottom-left-radius, then the corner is not rounded.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-bottom-right-radius-001-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-right-radius-001.htm">border-bottom-right-radius-001</a></strong></td>
|
|
<td><a href="reference/border-radius-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-right-radius using 0 value
|
|
<ul class="assert">
|
|
<li>To verify border-bottom-right-radius property, when set with 0, works as expected</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-bottom-right-radius-002-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-right-radius-002.htm">border-bottom-right-radius-002</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-right-radius using one length value: 25px
|
|
<ul class="assert">
|
|
<li>To verify border-bottom-right-radius property set with one length value, works as expected</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-bottom-right-radius-003-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-right-radius-003.htm">border-bottom-right-radius-003</a></strong></td>
|
|
<td><a href="border-bottom-right-radius-004.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-right-radius using two length values: 40px 20px
|
|
<ul class="assert">
|
|
<li>To verify border-bottom-right-radius property set with two length values, works as expected</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-bottom-right-radius-004-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-right-radius-004.htm">border-bottom-right-radius-004</a></strong></td>
|
|
<td><a href="border-bottom-right-radius-003.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-right-radius using one percentage value: 20%
|
|
<ul class="assert">
|
|
<li>To verify border-bottom-right-radius property set with one percentage value, works as expected</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-bottom-right-radius-005-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-right-radius-005.htm">border-bottom-right-radius-005</a></strong></td>
|
|
<td><a href="border-bottom-right-radius-006.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-right-radius using two percentage value: 20% 30%
|
|
<ul class="assert">
|
|
<li>To verify border-bottom-right-radius property set with two percentage value works as expected</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-bottom-right-radius-006-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-right-radius-006.htm">border-bottom-right-radius-006</a></strong></td>
|
|
<td><a href="border-bottom-right-radius-005.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-right-radius using two value: 40px 30%
|
|
<ul class="assert">
|
|
<li>To verify border-bottom-right-radius property set to two value with different unit, works as expected</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-bottom-right-radius-007-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-right-radius-007.htm">border-bottom-right-radius-007</a></strong></td>
|
|
<td><a href="border-bottom-right-radius-009.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-right-radius using two value: 20% 25px
|
|
<ul class="assert">
|
|
<li>To verify border-bottom-right-radius property set to two value with different unit, works as expected</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-bottom-right-radius-008-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-right-radius-008.htm">border-bottom-right-radius-008</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-right-radius using two values: 4em 30%
|
|
<ul class="assert">
|
|
<li>To verify border-bottom-right-radius property set to two values with different units, works as expected</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-bottom-right-radius-009-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-right-radius-009.htm">border-bottom-right-radius-009</a></strong></td>
|
|
<td><a href="border-bottom-right-radius-007.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-right-radius using "inherit"
|
|
<ul class="assert">
|
|
<li>To verify if inherit feature works, when assigned to "borderbottomrightradius" property</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-bottom-right-radius-010-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-right-radius-010.htm">border-bottom-right-radius-010</a></strong></td>
|
|
<td><a href="reference/border-radius-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-right-radius using one length value: 25px 0
|
|
<ul class="assert">
|
|
<li>To verify border-bottom-right-radius property set with one length value, works as expected</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-bottom-right-radius-011-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-right-radius-011.htm">border-bottom-right-radius-011</a></strong></td>
|
|
<td><a href="reference/border-radius-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-right-radius using one length value: 0 3em
|
|
<ul class="assert">
|
|
<li>To verify border-bottom-right-radius property set with one length value, works as expected</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-bottom-right-radius-012-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-right-radius-012.htm">border-bottom-right-radius-012</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-right-radius using two length values: 0.5in 10mm
|
|
<ul class="assert">
|
|
<li>To verify border-bottom-right-radius property set with two values (with different units), works as expected</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-bottom-right-radius-013-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-right-radius-013.htm">border-bottom-right-radius-013</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-right-radius using two length values: 40pt 2pc
|
|
<ul class="assert">
|
|
<li>To verify border-bottom-right-radius property set with two values (with different units), works fine</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-bottom-right-radius-014-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-bottom-right-radius-014.htm">border-bottom-right-radius-014</a></strong></td>
|
|
<td><a href="reference/border-radius-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-bottom-right-radius using two length values: 50px -25px
|
|
<ul class="assert">
|
|
<li>To verify if one length value is negative in border-bottom-right-radius, then the corner is not rounded.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-001-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-001.htm">border-radius-001</a></strong></td>
|
|
<td><a href="reference/border-radius-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. border
|
|
<ul class="assert">
|
|
<li>To verify when border-radius property, when set to zero, works as expected.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-002-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-002.htm">border-radius-002</a></strong></td>
|
|
<td><a href="reference/border-radius-002-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. border
|
|
<ul class="assert">
|
|
<li>To verify border-radius property set with one length value, works as expected</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-003-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-003.htm">border-radius-003</a></strong></td>
|
|
<td><a href="reference/border-radius-003-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. border
|
|
<ul class="assert">
|
|
<li>To verify border-radius property set with one length value along with a zero, works as expected</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-004-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-004.htm">border-radius-004</a></strong></td>
|
|
<td><a href="reference/border-radius-004-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. border
|
|
<ul class="assert">
|
|
<li>To verify border-radius property set with value using slash, works as expected</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-005-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-005.htm">border-radius-005</a></strong></td>
|
|
<td><a href="reference/border-radius-005-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. border
|
|
<ul class="assert">
|
|
<li>To verify border-radius property set with value using slash, works as expected</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-006-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-006.htm">border-radius-006</a></strong></td>
|
|
<td><a href="reference/border-radius-006-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. border
|
|
<ul class="assert">
|
|
<li>To verify border-radius property set with values using slash, works as expected</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-007-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-007.htm">border-radius-007</a></strong></td>
|
|
<td><a href="reference/border-radius-007-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. border
|
|
<ul class="assert">
|
|
<li>To verify border-radius property set with values (in different units) using slash, works as expected</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-008-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-008.htm">border-radius-008</a></strong></td>
|
|
<td><a href="reference/border-radius-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. border
|
|
<ul class="assert">
|
|
<li>To verify border-radius property set with excess values, works as expected</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-009-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-009.htm">border-radius-009</a></strong></td>
|
|
<td><a href="reference/border-radius-009-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. border
|
|
<ul class="assert">
|
|
<li>To verify inherit feature works, when it is assigned to border-radius</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-010-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-010.htm">border-radius-010</a></strong></td>
|
|
<td><a href="reference/border-radius-010-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. border
|
|
<ul class="assert">
|
|
<li>To verify inherit feature works, when it is assigned to border-radius</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-011-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-011.htm">border-radius-011</a></strong></td>
|
|
<td><a href="reference/border-radius-011-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. border
|
|
<ul class="assert">
|
|
<li>If border-radius is zero, all corners are square.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-horizontal-value-is-zero-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-horizontal-value-is-zero.htm">border-radius-horizontal-value-is-zero</a></strong></td>
|
|
<td><a href="reference/border-radius-horizontal-value-is-zero-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>border-radius property if horizontal value is zero
|
|
<ul class="assert">
|
|
<li>If the horizontal radius length is zero, the corner is square, not rounded.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-shorthand-002-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-shorthand-002.htm">border-radius-shorthand-002</a></strong></td>
|
|
<td><a href="reference/border-radius-shorthand-002-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders Radius Shorthand.
|
|
<ul class="assert">
|
|
<li>The shorthand border radius property can be used to specify all four eliptical corners of a box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-left-radius-001-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-left-radius-001.htm">border-top-left-radius-001</a></strong></td>
|
|
<td><a href="reference/border-radius-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-top-left-radius using 0 value
|
|
<ul class="assert">
|
|
<li>To verify if the border-top-left-radius property, when set with 0, works as expected.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-left-radius-002-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-left-radius-002.htm">border-top-left-radius-002</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Borders. Border-top-left-radius using one length value: 25px
|
|
<ul class="assert">
|
|
<li>To verify border-top-left-radius property set to one length value, works fine</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-left-radius-003-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-left-radius-003.htm">border-top-left-radius-003</a></strong></td>
|
|
<td><a href="border-top-left-radius-004.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-top-left-radius using two length values: 40px 20px
|
|
<ul class="assert">
|
|
<li>To verify border-top-left-radius property set to two length values, works fine</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-left-radius-004-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-left-radius-004.htm">border-top-left-radius-004</a></strong></td>
|
|
<td><a href="border-top-left-radius-003.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-top-left-radius using one percentage value: 20%
|
|
<ul class="assert">
|
|
<li>To verify border-top-left-radius property set to one percentage value, works fine</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-left-radius-005-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-left-radius-005.htm">border-top-left-radius-005</a></strong></td>
|
|
<td><a href="border-top-left-radius-006.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-top-left-radius using two percentage values: 20% 30%
|
|
<ul class="assert">
|
|
<li>To verify border-top-left-radius property set to two percentage values, works fine</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-left-radius-006-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-left-radius-006.htm">border-top-left-radius-006</a></strong></td>
|
|
<td><a href="border-top-left-radius-005.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-top-left-radius using two values: 40px 30%
|
|
<ul class="assert">
|
|
<li>To verify border-top-left-radius property set to two values with different units, works fine</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-left-radius-007-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-left-radius-007.htm">border-top-left-radius-007</a></strong></td>
|
|
<td><a href="border-top-left-radius-009.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-top-left-radius using two values: 20% 25px
|
|
<ul class="assert">
|
|
<li>To verify border-top-left-radius property set to two values with different units, works fine</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-left-radius-008-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-left-radius-008.htm">border-top-left-radius-008</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Borders. Border-top-left-radius using two values: 4em 30%
|
|
<ul class="assert">
|
|
<li>To verify border-top-left-radius property set to two values with different units, works fine</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-left-radius-009-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-left-radius-009.htm">border-top-left-radius-009</a></strong></td>
|
|
<td><a href="border-top-left-radius-007.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-top-left-radius using "inherit"
|
|
<ul class="assert">
|
|
<li>To verify inherit feature works, when it is assigned to border-top-left-radius.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-left-radius-010-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-left-radius-010.htm">border-top-left-radius-010</a></strong></td>
|
|
<td><a href="reference/border-radius-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-top-left-radius using one length value: 25px 0
|
|
<ul class="assert">
|
|
<li>To verify if either length is 0, then the corner is not rounded.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-left-radius-011-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-left-radius-011.htm">border-top-left-radius-011</a></strong></td>
|
|
<td><a href="reference/border-radius-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-top-left-radius using one length value: 0 3em
|
|
<ul class="assert">
|
|
<li>To verify if either length is 0, then the corner is not rounded.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-left-radius-012-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-left-radius-012.htm">border-top-left-radius-012</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Borders. Border-top-left-radius using two length values: 0.5in 10mm
|
|
<ul class="assert">
|
|
<li>To verify border-top-left-radius property set to two length values (with different units), works fine</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-left-radius-013-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-left-radius-013.htm">border-top-left-radius-013</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Borders. Border-top-left-radius using two length values: 40pt 2pc
|
|
<ul class="assert">
|
|
<li>To verify border-top-left-radius property set to two length values (with different units), works fine</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-left-radius-014-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-left-radius-014.htm">border-top-left-radius-014</a></strong></td>
|
|
<td><a href="reference/border-radius-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-top-left-radius using two length values: 50px -25px
|
|
<ul class="assert">
|
|
<li>To verify if one length value is negative in border-top-left-radius, then the corner is not rounded.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-right-radius-001-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-right-radius-001.htm">border-top-right-radius-001</a></strong></td>
|
|
<td><a href="reference/border-radius-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-top-right-radius using 0 value
|
|
<ul class="assert">
|
|
<li>To verify if the border-top-right-radius property, when set with 0, works as expected</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-right-radius-002-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-right-radius-002.htm">border-top-right-radius-002</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Borders. Border-top-right-radius using one length value: 25px
|
|
<ul class="assert">
|
|
<li>To verify border-top-right-radius property set to one length value, works fine</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-right-radius-003-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-right-radius-003.htm">border-top-right-radius-003</a></strong></td>
|
|
<td><a href="border-top-right-radius-004.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-top-right-radius using two length values: 40px 20px
|
|
<ul class="assert">
|
|
<li>To verify border-top-right-radius property set to two length values, works fine</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-right-radius-004-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-right-radius-004.htm">border-top-right-radius-004</a></strong></td>
|
|
<td><a href="border-top-right-radius-003.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-top-right-radius using one percentage value: 20%
|
|
<ul class="assert">
|
|
<li>To verify border-top-right-radius property set to one percentage value, works fine</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-right-radius-005-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-right-radius-005.htm">border-top-right-radius-005</a></strong></td>
|
|
<td><a href="border-top-right-radius-006.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-top-right-radius using two percentage values: 20% 30%
|
|
<ul class="assert">
|
|
<li>To verify border-top-right-radius property set to two percentage values, works fine</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-right-radius-006-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-right-radius-006.htm">border-top-right-radius-006</a></strong></td>
|
|
<td><a href="border-top-right-radius-005.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-top-right-radius using two values: 40px 30%
|
|
<ul class="assert">
|
|
<li>To verify border-top-right-radius property set to two values with different units, works fine</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-right-radius-007-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-right-radius-007.htm">border-top-right-radius-007</a></strong></td>
|
|
<td><a href="border-top-right-radius-009.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-top-right-radius using two values: 20% 25px
|
|
<ul class="assert">
|
|
<li>To verify border-top-right-radius property set to two values with different units, works fine</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-right-radius-008-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-right-radius-008.htm">border-top-right-radius-008</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Borders. Border-top-right-radius using two values: 4em 30%
|
|
<ul class="assert">
|
|
<li>To verify border-top-right-radius property set to two values with different units, works fine</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-right-radius-009-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-right-radius-009.htm">border-top-right-radius-009</a></strong></td>
|
|
<td><a href="border-top-right-radius-007.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-top-right-radius using "inherit"
|
|
<ul class="assert">
|
|
<li>To verify inherit feature works, when it is assigned to border-top-right-radius.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-right-radius-010-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-right-radius-010.htm">border-top-right-radius-010</a></strong></td>
|
|
<td><a href="reference/border-radius-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-top-right-radius using one length value: 25px 0
|
|
<ul class="assert">
|
|
<li>To verify if either length is 0, then the corner is not rounded.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-right-radius-011-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-right-radius-011.htm">border-top-right-radius-011</a></strong></td>
|
|
<td><a href="reference/border-radius-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-top-right-radius using one length value: 0 3em
|
|
<ul class="assert">
|
|
<li>To verify if either length is 0, then the corner is not rounded.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-right-radius-012-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-right-radius-012.htm">border-top-right-radius-012</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Borders. Border-top-right-radius using two length values: 0.5in 10mm
|
|
<ul class="assert">
|
|
<li>To verify border-top-right-radius property sets to two length values (with different units), works fine</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-right-radius-013-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-right-radius-013.htm">border-top-right-radius-013</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Borders. Border-top-right-radius using two length values: 40pt 2pc
|
|
<ul class="assert">
|
|
<li>To verify border-top-right-radius property sets to two length values (with different units), works fine</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-right-radius-014-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-right-radius-014.htm">border-top-right-radius-014</a></strong></td>
|
|
<td><a href="reference/border-radius-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Borders. Border-top-right-radius using two length values: 50px -25px
|
|
<ul class="assert">
|
|
<li>To verify if one length value is negative for border-top-right-radius, then the element is not rounded.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css-border-radius-001-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="css-border-radius-001.htm">css-border-radius-001</a></strong></td>
|
|
<td><a href="reference/css-border-radius-ref-001.htm">=</a> </td>
|
|
<td></td>
|
|
<td>CSS border-radius Test
|
|
<ul class="assert">
|
|
<li></li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css-border-radius-002-5.1" class="primary">
|
|
<td><strong>
|
|
<a href="css-border-radius-002.htm">css-border-radius-002</a></strong></td>
|
|
<td><a href="reference/css-border-radius-ref-002.htm">=</a> </td>
|
|
<td></td>
|
|
<td>CSS border-radius Test
|
|
<ul class="assert">
|
|
<li>if there is more then one graph and one color</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css-box-shadow-001-5.1" class="">
|
|
<td>
|
|
<a href="css-box-shadow-001.htm">css-box-shadow-001</a></td>
|
|
<td><a href="reference/css-box-shadow-ref-001.htm">=</a> </td>
|
|
<td></td>
|
|
<td>CSS box-shadow Test
|
|
<ul class="assert">
|
|
<li></li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s5.1.#border-bottom-left-radius">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.1.#border-bottom-right-radius">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.1.#border-radius">
|
|
<!-- 30 tests -->
|
|
<tr id="border-radius-applies-to-001-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-applies-to-001.htm">border-radius-applies-to-001</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Border-radius' applied to element with 'display' set to inline
|
|
<ul class="assert">
|
|
<li>When 'border-radius' is applied to an element with 'displaye: inline' it produces rounded corners.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-applies-to-002-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-applies-to-002.htm">border-radius-applies-to-002</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Border-radius' applied to element with a display of 'block'.
|
|
<ul class="assert">
|
|
<li>When 'border-radius' is applied to an element with 'displaye: block' it produces rounded corners.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-applies-to-003-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-applies-to-003.htm">border-radius-applies-to-003</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Border-radius' applied to element with 'display' set to list-item.
|
|
<ul class="assert">
|
|
<li>When 'border-radius' is applied to an element with 'displaye: list-item' it produces rounded corners.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-applies-to-004-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-applies-to-004.htm">border-radius-applies-to-004</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Border-radius' applied to element with 'display' set to run-in.
|
|
<ul class="assert">
|
|
<li>When 'border-radius' is applied to an element with 'displaye: run-in' it produces rounded corners.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-applies-to-005-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-applies-to-005.htm">border-radius-applies-to-005</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Border-radius' applied to element with 'display' set to inline-block.
|
|
<ul class="assert">
|
|
<li>When 'border-radius' is applied to an element with 'displaye: inline-block' it produces rounded corners.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-applies-to-006-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-applies-to-006.htm">border-radius-applies-to-006</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Border-radius' applied to element with 'display' set to 'table'.
|
|
<ul class="assert">
|
|
<li>When 'border-radius' is applied to an element with 'displaye: table' it produces rounded corners.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-applies-to-007-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-applies-to-007.htm">border-radius-applies-to-007</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Border-radius' applied to element with 'display' set to 'table-caption'.
|
|
<ul class="assert">
|
|
<li>When 'border-radius' is applied to an element with 'displaye: table-caption' it produces rounded corners.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-applies-to-008-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-applies-to-008.htm">border-radius-applies-to-008</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Border-radius' applied to element with 'display' set to 'table-cell'.
|
|
<ul class="assert">
|
|
<li>When 'border-radius' is applied to an element with 'displaye: table-cell' it produces rounded corners.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-applies-to-009-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-applies-to-009.htm">border-radius-applies-to-009</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Border-radius' should be ignored when in element with 'display' set to 'table-row' when 'border-collapse: collapse'.
|
|
<ul class="assert">
|
|
<li>'Border-radius' should be ignored when in element with 'display' set to 'table-row' when 'border-collapse: collapse'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-applies-to-010-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-applies-to-010.htm">border-radius-applies-to-010</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Border-radius' applied to element with a display of 'none'.
|
|
<ul class="assert">
|
|
<li>When 'border-radius' property is applied to elements with a display of 'none' then it continues to not have a layout.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-applies-to-011-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-applies-to-011.htm">border-radius-applies-to-011</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Border-radius' applied to element with a display of 'inline-table'.
|
|
<ul class="assert">
|
|
<li>When 'border-radius' is applied to an element with 'displaye: inline-table' it produces rounded corners.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-applies-to-012-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-applies-to-012.htm">border-radius-applies-to-012</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Border-radius' should be ignored in element with 'display' set to 'table-column' when 'border-collapse: collapse'.
|
|
<ul class="assert">
|
|
<li>'Border-radius' should not produce rounded corners when applied to an element with 'display' set to 'table-column' when 'border-collapse: collapse'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-applies-to-013-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-applies-to-013.htm">border-radius-applies-to-013</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Border-radius' should be ignored in element with 'display' set to 'table-row-group' when 'border-collapse: collapse'.
|
|
<ul class="assert">
|
|
<li>'Border-radius' should not produce rounded corners when applied to an element with 'display' set to 'table-row-group' when 'border-collapse: collapse'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-applies-to-014-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-applies-to-014.htm">border-radius-applies-to-014</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Border-radius' should be ignored in element with 'display' set to 'table-header-group' when 'border-collapse: collapse'.
|
|
<ul class="assert">
|
|
<li>'Border-radius' should not produce rounded corners when applied to an element with 'display' set to 'table-header-group' when 'border-collapse: collapse'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-applies-to-015-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-applies-to-015.htm">border-radius-applies-to-015</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Border-radius' should be ignored in element with 'display' set to 'table-footer-group' when 'border-collapse: collapse'.
|
|
<ul class="assert">
|
|
<li>'Border-radius' should not produce rounded corners when applied to an element with 'display' set to 'table-footer-group' when 'border-collapse: collapse'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-applies-to-016-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-applies-to-016.htm">border-radius-applies-to-016</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Border-radius' should be ignored in element with 'display' set to 'table-column-group' when 'border-collapse: collapse'.
|
|
<ul class="assert">
|
|
<li>'Border-radius' should not produce rounded corners when applied to an element with 'display' set to 'table-column-group' when 'border-collapse: collapse'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-applies-to-017-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-applies-to-017.htm">border-radius-applies-to-017</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Border-radius' applied to element with 'display' set to 'inherit'.
|
|
<ul class="assert">
|
|
<li>When 'border-radius' is applied to an element with 'displaye: inherit' it produces rounded corners.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-clip-001-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-clip-001.htm">border-radius-clip-001</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Overflow' clips to the curve of the rounded corner.
|
|
<ul class="assert">
|
|
<li>'Overflow' clips to the curve of the rounded corner.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-clip-002-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-clip-002.htm">border-radius-clip-002</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Background is clipped to the curve of the content-box when 'background-clip: content-box'
|
|
<ul class="assert">
|
|
<li>Background is clipped to the curve of the content-box when 'background-clip: content-box'</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-content-edge-001-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-content-edge-001.htm">border-radius-content-edge-001</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Border-radius' set to 'img'
|
|
<ul class="assert">
|
|
<li>The content of replaced element 'img' is trimmed to the content edge curve of a rounded corner.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-different-width-001-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-different-width-001.htm">border-radius-different-width-001</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Adjoining borders with different thicknesses show a smooth transition between the thicker and the thinner borders.
|
|
<ul class="assert">
|
|
<li>When 'border-radius' is applied to two adjoining sides with different thicknesses the border shows a smooth transition between the thicker and the thinner sides.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-initial-value-001-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-initial-value-001.htm">border-radius-initial-value-001</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Initial value of 'border-radius' is 0
|
|
<ul class="assert">
|
|
<li>Initial value of 'border-radius' is 0.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-not-inherited-001-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-not-inherited-001.htm">border-radius-not-inherited-001</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Border-radius' is not inherited by default
|
|
<ul class="assert">
|
|
<li>'Border-radius' is not inherited by default.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-shorthand-001-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-shorthand-001.htm">border-radius-shorthand-001</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Border-radius' shorthand is used to set all four 'border-[*]-radius' properties.
|
|
<ul class="assert">
|
|
<li>'Border-radius' shorthand sets all four 'border-[*]-radius' properties.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-sum-of-radii-001-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-sum-of-radii-001.htm">border-radius-sum-of-radii-001</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Different variations on the sum of border-radius for adjacent corners
|
|
<ul class="assert">
|
|
<li>If the sum of any two adjacent corner radii exceeds the size of the border box, all the corner radii are reduced proportionally until none of them overlap.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-sum-of-radii-002-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-sum-of-radii-002.htm">border-radius-sum-of-radii-002</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Different variations on the value of 'f'
|
|
<ul class="assert">
|
|
<li>When the value of 'f' is less than 1, then all corner radii are reduced by multiplying them with 'f'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-with-three-values-001-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-with-three-values-001.htm">border-radius-with-three-values-001</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Border-radius' property with three values
|
|
<ul class="assert">
|
|
<li>If bottom-left radius is omitted in the 'border-radius' property then the bottom-left radius is the same as the top-right radius.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-with-two-values-001-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-with-two-values-001.htm">border-radius-with-two-values-001</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Border-radius' property with two values
|
|
<ul class="assert">
|
|
<li>If bottom-right radius is omitted in the 'border-radius' property then the bottom-right radius is the same as the top-left radius.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-left-radius-values-004-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-left-radius-values-004.htm">border-top-left-radius-values-004</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Percentage for the horizontal radius of 'border-top-left-radius' refers to the width of the border box.
|
|
<ul class="assert">
|
|
<li>Percentage for the horizontal radius of 'border-top-left-radius' refers to the width of the border box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-right-radius-values-004-5.1.#border-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-right-radius-values-004.htm">border-top-right-radius-values-004</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Percentage for the vertical radius of 'border-top-right-radius' refers to the height of the border box.
|
|
<ul class="assert">
|
|
<li>Percentage for the vertical radius of 'border-top-right-radius' refers to the height of the border box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s5.1.#border-top-left-radius">
|
|
<!-- 3 tests -->
|
|
<tr id="border-top-left-radius-values-001-5.1.#border-top-left-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-left-radius-values-001.htm">border-top-left-radius-values-001</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Border-top-left-radius' with two values.
|
|
<ul class="assert">
|
|
<li>The first value of the 'border-top-left-radius' is the horizontal radius of the rounded corner and the second value is its vertical radius.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-left-radius-values-002-5.1.#border-top-left-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-left-radius-values-002.htm">border-top-left-radius-values-002</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Border-top-left-radius' with one value.
|
|
<ul class="assert">
|
|
<li>'Border-top-left-radius' with an omitted second value has the vertical radius of the rounded corner equal to its horizontal radius.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-top-left-radius-values-003-5.1.#border-top-left-radius" class="primary">
|
|
<td><strong>
|
|
<a href="border-top-left-radius-values-003.htm">border-top-left-radius-values-003</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Border-top-left-radius' with one value as 0.
|
|
<ul class="assert">
|
|
<li>If either value of 'border-top-left-radius' is 0 then the corner is a square.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s5.1.#border-top-right-radius">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.2">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s5.2">+</a>
|
|
<a href="http://www.w3.org/TR/css3-background/#corner-shaping">5.2 Corner Shaping</a></th></tr>
|
|
<!-- 1 tests -->
|
|
<tr id="background-clip-padding-box-with-border-radius-5.2" class="">
|
|
<td>
|
|
<a href="background-clip-padding-box-with-border-radius.htm">background-clip-padding-box-with-border-radius</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>background-clip: padding-box with border-radius
|
|
<ul class="assert">
|
|
<li>Backgrounds clipped to the padding box should follow the padding box curve, which should be equal to the outer border radius minus the corresponding border thickness.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s5.3">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s5.3">+</a>
|
|
<a href="http://www.w3.org/TR/css3-background/#corner-clipping">5.3 Corner Clipping</a></th></tr>
|
|
<!-- 2 tests -->
|
|
<tr id="border-radius-clipping-5.3" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-clipping.htm">border-radius-clipping</a></strong></td>
|
|
<td><a href="reference/border-radius-clipping-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Border radius clipping
|
|
<ul class="assert">
|
|
<li>When set with 'overflow: hidden', outer container should clip background of an element insides at the corners.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-radius-overflow-hidden-5.3" class="primary">
|
|
<td><strong>
|
|
<a href="border-radius-overflow-hidden.htm">border-radius-overflow-hidden</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Clipping to the border-radius curve
|
|
<ul class="assert">
|
|
<li>Effects that clip to the border or padding edge (such as &acirc;&#8364;&#732;overflow&acirc;&#8364;&#8482; other than &acirc;&#8364;&#732;visible&acirc;&#8364;&#8482;) must clip to the curve</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s5.4">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s5.4">+</a>
|
|
<a href="http://www.w3.org/TR/css3-background/#corner-transitions">5.4 Color and Style Transitions</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.5">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s5.5">+</a>
|
|
<a href="http://www.w3.org/TR/css3-background/#corner-overlap">5.5 Overlapping Curves</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.5.#reduced-radius">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.6">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s5.6">+</a>
|
|
<a href="http://www.w3.org/TR/css3-background/#border-radius-tables">5.6 Effect on Tables</a></th></tr>
|
|
<!-- 1 tests -->
|
|
<tr id="ttwf-reftest-borderradius-5.6" class="primary">
|
|
<td><strong>
|
|
<a href="ttwf-reftest-borderRadius.htm">ttwf-reftest-borderradius</a></strong></td>
|
|
<td><a href="reference/ttwf-reftest-borderRadius-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Test Background and border
|
|
<ul class="assert">
|
|
<li>Table with 'border-collapse: collapse;' declaration, it's 'border-radius' style will not work.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</body>
|
|
</html> |