<!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>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 (108 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="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> <!-- 71 tests --> <tr id="border-bottom-left-radius-001-5.1" class="primary"> <td><strong> <a href="border-bottom-left-radius-001.xht">border-bottom-left-radius-001</a></strong></td> <td><a href="reference/border-radius-001-ref.xht">=</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.xht">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.xht">border-bottom-left-radius-003</a></strong></td> <td><a href="border-bottom-left-radius-004.xht">=</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.xht">border-bottom-left-radius-004</a></strong></td> <td><a href="border-bottom-left-radius-003.xht">=</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.xht">border-bottom-left-radius-005</a></strong></td> <td><a href="border-bottom-left-radius-006.xht">=</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.xht">border-bottom-left-radius-006</a></strong></td> <td><a href="border-bottom-left-radius-005.xht">=</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.xht">border-bottom-left-radius-007</a></strong></td> <td><a href="border-bottom-left-radius-009.xht">=</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.xht">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.xht">border-bottom-left-radius-009</a></strong></td> <td><a href="border-bottom-left-radius-007.xht">=</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.xht">border-bottom-left-radius-010</a></strong></td> <td><a href="reference/border-radius-001-ref.xht">=</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.xht">border-bottom-left-radius-011</a></strong></td> <td><a href="reference/border-radius-001-ref.xht">=</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.xht">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.xht">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.xht">border-bottom-left-radius-014</a></strong></td> <td><a href="reference/border-radius-001-ref.xht">=</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.xht">border-bottom-right-radius-001</a></strong></td> <td><a href="reference/border-radius-001-ref.xht">=</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.xht">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.xht">border-bottom-right-radius-003</a></strong></td> <td><a href="border-bottom-right-radius-004.xht">=</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.xht">border-bottom-right-radius-004</a></strong></td> <td><a href="border-bottom-right-radius-003.xht">=</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.xht">border-bottom-right-radius-005</a></strong></td> <td><a href="border-bottom-right-radius-006.xht">=</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.xht">border-bottom-right-radius-006</a></strong></td> <td><a href="border-bottom-right-radius-005.xht">=</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.xht">border-bottom-right-radius-007</a></strong></td> <td><a href="border-bottom-right-radius-009.xht">=</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.xht">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.xht">border-bottom-right-radius-009</a></strong></td> <td><a href="border-bottom-right-radius-007.xht">=</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.xht">border-bottom-right-radius-010</a></strong></td> <td><a href="reference/border-radius-001-ref.xht">=</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.xht">border-bottom-right-radius-011</a></strong></td> <td><a href="reference/border-radius-001-ref.xht">=</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.xht">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.xht">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.xht">border-bottom-right-radius-014</a></strong></td> <td><a href="reference/border-radius-001-ref.xht">=</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.xht">border-radius-001</a></strong></td> <td><a href="reference/border-radius-001-ref.xht">=</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.xht">border-radius-002</a></strong></td> <td><a href="reference/border-radius-002-ref.xht">=</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.xht">border-radius-003</a></strong></td> <td><a href="reference/border-radius-003-ref.xht">=</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.xht">border-radius-004</a></strong></td> <td><a href="reference/border-radius-004-ref.xht">=</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.xht">border-radius-005</a></strong></td> <td><a href="reference/border-radius-005-ref.xht">=</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.xht">border-radius-006</a></strong></td> <td><a href="reference/border-radius-006-ref.xht">=</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.xht">border-radius-007</a></strong></td> <td><a href="reference/border-radius-007-ref.xht">=</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.xht">border-radius-008</a></strong></td> <td><a href="reference/border-radius-001-ref.xht">=</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.xht">border-radius-009</a></strong></td> <td><a href="reference/border-radius-009-ref.xht">=</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.xht">border-radius-010</a></strong></td> <td><a href="reference/border-radius-010-ref.xht">=</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.xht">border-radius-011</a></strong></td> <td><a href="reference/border-radius-011-ref.xht">=</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.xht">border-radius-horizontal-value-is-zero</a></strong></td> <td><a href="reference/border-radius-horizontal-value-is-zero-ref.xht">=</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-top-left-radius-001-5.1" class="primary"> <td><strong> <a href="border-top-left-radius-001.xht">border-top-left-radius-001</a></strong></td> <td><a href="reference/border-radius-001-ref.xht">=</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.xht">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.xht">border-top-left-radius-003</a></strong></td> <td><a href="border-top-left-radius-004.xht">=</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.xht">border-top-left-radius-004</a></strong></td> <td><a href="border-top-left-radius-003.xht">=</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.xht">border-top-left-radius-005</a></strong></td> <td><a href="border-top-left-radius-006.xht">=</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.xht">border-top-left-radius-006</a></strong></td> <td><a href="border-top-left-radius-005.xht">=</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.xht">border-top-left-radius-007</a></strong></td> <td><a href="border-top-left-radius-009.xht">=</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.xht">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.xht">border-top-left-radius-009</a></strong></td> <td><a href="border-top-left-radius-007.xht">=</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.xht">border-top-left-radius-010</a></strong></td> <td><a href="reference/border-radius-001-ref.xht">=</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.xht">border-top-left-radius-011</a></strong></td> <td><a href="reference/border-radius-001-ref.xht">=</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.xht">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.xht">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.xht">border-top-left-radius-014</a></strong></td> <td><a href="reference/border-radius-001-ref.xht">=</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.xht">border-top-right-radius-001</a></strong></td> <td><a href="reference/border-radius-001-ref.xht">=</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.xht">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.xht">border-top-right-radius-003</a></strong></td> <td><a href="border-top-right-radius-004.xht">=</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.xht">border-top-right-radius-004</a></strong></td> <td><a href="border-top-right-radius-003.xht">=</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.xht">border-top-right-radius-005</a></strong></td> <td><a href="border-top-right-radius-006.xht">=</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.xht">border-top-right-radius-006</a></strong></td> <td><a href="border-top-right-radius-005.xht">=</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.xht">border-top-right-radius-007</a></strong></td> <td><a href="border-top-right-radius-009.xht">=</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.xht">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.xht">border-top-right-radius-009</a></strong></td> <td><a href="border-top-right-radius-007.xht">=</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.xht">border-top-right-radius-010</a></strong></td> <td><a href="reference/border-radius-001-ref.xht">=</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.xht">border-top-right-radius-011</a></strong></td> <td><a href="reference/border-radius-001-ref.xht">=</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.xht">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.xht">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.xht">border-top-right-radius-014</a></strong></td> <td><a href="reference/border-radius-001-ref.xht">=</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.xht">css-border-radius-001</a></strong></td> <td><a href="reference/css-border-radius-ref-001.xht">=</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.xht">css-border-radius-002</a></strong></td> <td><a href="reference/css-border-radius-ref-002.xht">=</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.xht">css-box-shadow-001</a></td> <td><a href="reference/css-box-shadow-ref-001.xht">=</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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">border-radius-clipping</a></strong></td> <td><a href="reference/border-radius-clipping-ref.xht">=</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.xht">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.xht">ttwf-reftest-borderradius</a></strong></td> <td><a href="reference/ttwf-reftest-borderRadius-ref.xht">=</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>