<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Percentage for the vertical radius of 'border-top-right-radius' refers to the height of the border box.</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" />
<meta name="assert" content="Percentage for the vertical radius of 'border-top-right-radius' refers to the height of the border box." />
<style type="text/css">
div
{
width: 100px;
height: 60px;
border: 20px solid;
}
td
{
width: 150px;
height: 120px;
}
.red
{
border-color: red;
}
.pos
{
margin-top: -100px;
}
.reference1
{
border-top-right-radius: 20px 97px;
}
.test1
{
border-top-right-radius: 20px 97%;
}
.reference2
{
border-top-right-radius: 20px 51px;
}
.test2
{
border-top-right-radius: 20px 51%;
}
.reference3
{
border-top-right-radius: 20px 25px;
}
.test3
{
border-top-right-radius: 20px 25%;
}
.reference4
{
border-top-right-radius: 20px 11px;
}
.test4
{
border-top-right-radius: 20px 11%;
}
.reference5
{
border-top-right-radius: 20px 7px;
}
.test5
{
border-top-right-radius: 20px 7%;
}
.reference6
{
border-top-right-radius: 20px 5px;
}
.test6
{
border-top-right-radius: 20px 5%;
}
</style>
</head>
<body>
<p>Test passes if the top right corner of each of the boxes is curved and if there is no red visible on the page.</p>
<table>
<tr>
<td>
<div class="red reference1"></div>
<div class="pos test1"></div>
</td>
<td>
<div class="red reference2"></div>
<div class="pos test2"></div>
</td>
</tr>
<tr>
<td>
<div class="red reference3"></div>
<div class="pos test3"></div>
</td>
<td>
<div class="red reference4"></div>
<div class="pos test4"></div>
</td>
</tr>
<tr>
<td>
<div class="red reference5"></div>
<div class="pos test5"></div>
</td>
<td>
<div class="red reference6"></div>
<div class="pos test6"></div>
</td>
</tr>
</table>
</body>
</html>
Codebase Browser
chromium