mirror of
https://github.com/servo/servo.git
synced 2025-08-07 06:25:32 +01:00
Update CSS tests to revision 939546644b4d333218fd9c2c0f68c60752ff1e95
This commit is contained in:
parent
b26fac3f78
commit
0ad6e78b23
435 changed files with 7534 additions and 3290 deletions
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html><!-- Submitted from TestTWF Paris --><head>
|
||||
|
||||
<title>CSS Backgrounds and Borders Test: background-repeat: round basic support</title>
|
||||
<link href="http://lea.verou.me" rel="author" title="Lea Verou">
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-background-repeat" rel="help">
|
||||
<meta content="image" name="flags">
|
||||
<meta content="The image is repeated as often as will fit within the background positioning area. If it doesn't fit a whole number of times, it is rescaled so that it does." name="assert">
|
||||
<style>
|
||||
|
||||
html {
|
||||
background: red url('support/swatch-green.png') no-repeat;
|
||||
background-repeat: round;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is green and <strong>no red</strong>.</p>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
|
@ -1,25 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html><!-- Submitted from TestTWF Paris --><head>
|
||||
|
||||
<title>CSS Backgrounds and Borders Test: background-repeat: round basic support</title>
|
||||
<link href="http://lea.verou.me" rel="author" title="Lea Verou">
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-background-repeat" rel="help">
|
||||
<meta content="image" name="flags">
|
||||
<meta content="The image is repeated as often as will fit within the background positioning area. If it doesn't fit a whole number of times, it is rescaled so that it does." name="assert">
|
||||
<style>
|
||||
|
||||
html {
|
||||
background: red url('support/swatch-green.png') no-repeat;
|
||||
background-repeat: round;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is green and <strong>no red</strong>.</p>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: background-repeat:round</title>
|
||||
<link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/">
|
||||
<link rel="match" href="reference/background-repeat-round.htm">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat">
|
||||
<meta name="flags" content="image">
|
||||
<meta name="assert" content="The 'background-repeat: round' declaration must scale an image in one or more dimensions so it fits a whole number of times in the background positioning area.">
|
||||
<style type="text/css">
|
||||
|
||||
div {
|
||||
background-image: url("support/rectangle-96x60.png");
|
||||
background-repeat: round;
|
||||
height: 204px;
|
||||
width: 236px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p><img src="support/rectangle-96x60.png" alt="Image download support must be enabled"></p>
|
||||
<p>Test passes if the above image repeats in the below rectangle 6 times exactly: 2 columns, 3 rows. The top border of the containing rectangle should be orange, the right border yellow, the bottom border green, and the left border blue.</p>
|
||||
<p>Test fails if the above image repeats in below rectangle more than 6 times, with partial images lining the right and the bottom.</p>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Test: Value of 'auto' is used for y dimension in 'background-size'</title>
|
||||
<link href="http://www.microsoft.com/" rel="author" title="Microsoft">
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="An 'auto' value for y dimension in 'background-size' is resolved by using the image's intrinsic ratio and the size provided for the x dimension." name="assert">
|
||||
<style type="text/css">
|
||||
.test
|
||||
{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("support/red_color.png");
|
||||
background-size: 50px auto;
|
||||
}
|
||||
.reference
|
||||
{
|
||||
margin-top: -100px;
|
||||
background: black;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div class="test"></div>
|
||||
<div class="reference"></div>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Test: The 'border-image-slice' property with four percentage values</title>
|
||||
<link href="http://www.microsoft.com/" rel="author" title="Microsoft">
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-border-image-slice" rel="help">
|
||||
<meta content="image" name="flags">
|
||||
<meta content="This test checks that the border image is sliced into nine regions with inward offsets, '40%' from the top, '15%' from the right,'20%' from the bottom, and '5%' from the left edges of the image. Percentages are relative to the size of the image: the width of the image for the horizontal offsets, the height for vertical offsets." name="assert">
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
border: 40px double red;
|
||||
border-image-slice: 40% 15% 20% 5%;
|
||||
border-image-source: url("../support/9grid40-30-20-10-red.png");
|
||||
height: 100px;
|
||||
margin: 50px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Borders Radius Shorthand. </title>
|
||||
<link href="mailto:arno@arno.org" rel="author" title="Arno">
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-border-radius" rel="help">
|
||||
<link href="reference/border-radius-shorthand-002-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<meta content="The shorthand border radius property can be used to specify all four eliptical corners of a box." name="assert">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
{
|
||||
border-radius: 29px 43px 19px 13px / 5px 11px 23px 17px;
|
||||
|
||||
background: #dddddd;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
}
|
||||
/* ]]> */
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
There should be one box, with four rounded corners, each corner a different radius.
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if the box below has four rounded corners.</li>
|
||||
<li>FAIL if the corners are not rounded.</li>
|
||||
</ul>
|
||||
|
||||
<div></div>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
|
@ -1,36 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test Background: Box-Shadow property</title>
|
||||
<link href="mailto:silverman@adobe.com" rel="author" title="Marc Silverman">
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-box-shadow" rel="help">
|
||||
<link href="reference/box-shadow-001-ref.htm" rel="match">
|
||||
<meta content="Testing simple drop shadow with the box-shadow property" name="assert">
|
||||
<style type="text/css">
|
||||
#shadow-div {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 5px;
|
||||
box-shadow: rgba(0,255,0,1) 10px 10px;
|
||||
background-color: #000;
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
}
|
||||
#error {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 15px;
|
||||
background-color: red;
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green drop shadow and no red.</p>
|
||||
<div id="error">
|
||||
</div>
|
||||
<div id="shadow-div">
|
||||
</div>
|
||||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Test: Positive value of horizontal offset</title>
|
||||
<link href="http://www.microsoft.com/" rel="author" title="Microsoft">
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-box-shadow" rel="help">
|
||||
<meta content="internal" name="flags">
|
||||
<meta content="A positive value for the horizontal offset of the 'box-shadow' draws a shadow that is offset to the right of the box." name="assert">
|
||||
<style type="text/css">
|
||||
#reference
|
||||
{
|
||||
width: 2in;
|
||||
height: 1in;
|
||||
background: red;
|
||||
border: thin solid black;
|
||||
}
|
||||
div div
|
||||
{
|
||||
width: 1in;
|
||||
height: 1in;
|
||||
border: thin solid black;
|
||||
background: white;
|
||||
box-shadow: black 96px 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div id="reference">
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test Background: Box-Shadow property</title>
|
||||
<link href="mailto:silverman@adobe.com" rel="author" title="Marc Silverman">
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-box-shadow" rel="help">
|
||||
<link href="reference/box-shadow-005-ref.htm" rel="match">
|
||||
<meta content="Testing simple drop shadow with the box-shadow property" name="assert">
|
||||
<style type="text/css">
|
||||
#shadow-div {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 5px;
|
||||
box-shadow: rgba(0,255,0,1) 10px 10px;
|
||||
background-color: #000;
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
}
|
||||
#error {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 15px;
|
||||
background-color: red;
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green drop shadow and no red.</p>
|
||||
<div id="error">
|
||||
</div>
|
||||
<div id="shadow-div">
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Backgrounds and Borders Module Level 3 CR Test Suite</h1>
|
||||
<h2>Backgrounds (383 tests)</h2>
|
||||
<h2>Backgrounds (385 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
|
@ -271,7 +271,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.4">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-background/#the-background-repeat">3.4 Tiling Images: the ‘background-repeat’ property</a></th></tr>
|
||||
<!-- 22 tests -->
|
||||
<!-- 23 tests -->
|
||||
<tr id="background-003-3.4" class="image">
|
||||
<td>
|
||||
<a href="background-003.htm">background-003</a></td>
|
||||
|
@ -385,11 +385,11 @@
|
|||
<tr id="background-repeat-round-3.4" class="primary image">
|
||||
<td><strong>
|
||||
<a href="background-repeat-round.htm">background-repeat-round</a></strong></td>
|
||||
<td></td>
|
||||
<td><a href="reference/background-repeat-round.htm">=</a> </td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>background-repeat: round basic support
|
||||
<td>background-repeat:round
|
||||
<ul class="assert">
|
||||
<li>The image is repeated as often as will fit within the background positioning area. If it doesn't fit a whole number of times, it is rescaled so that it does.</li>
|
||||
<li>The 'background-repeat: round' declaration must scale an image in one or more dimensions so it fits a whole number of times in the background positioning area.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -404,6 +404,17 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="background-repeat-round-002-3.4" class="primary image">
|
||||
<td><strong>
|
||||
<a href="background-repeat-round-002.htm">background-repeat-round-002</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>background-repeat: round basic support
|
||||
<ul class="assert">
|
||||
<li>The image is repeated as often as will fit within the background positioning area. If it doesn't fit a whole number of times, it is rescaled so that it does.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="background-repeat-round-roundup-3.4" class="primary image">
|
||||
<td><strong>
|
||||
<a href="background-repeat-round-roundup.htm">background-repeat-round-roundup</a></strong></td>
|
||||
|
@ -1502,7 +1513,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.9">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-background/#the-background-size">3.9 Sizing Images: the ‘background-size’ property</a></th></tr>
|
||||
<!-- 262 tests -->
|
||||
<!-- 263 tests -->
|
||||
<tr id="background-intrinsic-001-3.9" class="svg">
|
||||
<td>
|
||||
<a href="background-intrinsic-001.htm">background-intrinsic-001</a></td>
|
||||
|
@ -1635,6 +1646,17 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="background-size-003-3.9" class="primary">
|
||||
<td><strong>
|
||||
<a href="background-size-003.htm">background-size-003</a></strong></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>Value of 'auto' is used for y dimension in 'background-size'
|
||||
<ul class="assert">
|
||||
<li>An 'auto' value for y dimension in 'background-size' is resolved by using the image's intrinsic ratio and the size provided for the x dimension.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="background-size-005-3.9" class="primary image">
|
||||
<td><strong>
|
||||
<a href="background-size-005.htm">background-size-005</a></strong></td>
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Backgrounds and Borders Module Level 3 CR Test Suite</h1>
|
||||
<h2>Rounded Corners (108 tests)</h2>
|
||||
<h2>Rounded Corners (109 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
|
@ -37,7 +37,7 @@
|
|||
<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 -->
|
||||
<!-- 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>
|
||||
|
@ -478,6 +478,17 @@
|
|||
</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>
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Backgrounds and Borders Module Level 3 CR Test Suite</h1>
|
||||
<h2>Border Images (33 tests)</h2>
|
||||
<h2>Border Images (34 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
|
@ -112,7 +112,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-background/#the-border-image-slice">6.2 Image Slicing: the ‘border-image-slice’ property</a></th></tr>
|
||||
<!-- 4 tests -->
|
||||
<!-- 5 tests -->
|
||||
<tr id="border-image-slice-001-6.2" class="primary image">
|
||||
<td><strong>
|
||||
<a href="border-image-slice-001.htm">border-image-slice-001</a></strong></td>
|
||||
|
@ -146,9 +146,20 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="border-image-slice-004-6.2" class="primary image">
|
||||
<tr id="border-image-slice-005-6.2" class="primary image">
|
||||
<td><strong>
|
||||
<a href="border-image-slice-004.htm">border-image-slice-004</a></strong></td>
|
||||
<a href="border-image-slice-005.htm">border-image-slice-005</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>The 'border-image-slice' property with four percentage values
|
||||
<ul class="assert">
|
||||
<li>This test checks that the border image is sliced into nine regions with inward offsets, '40%' from the top, '15%' from the right,'20%' from the bottom, and '5%' from the left edges of the image. Percentages are relative to the size of the image: the width of the image for the horizontal offsets, the height for vertical offsets.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="border-image-slice-007-6.2" class="primary image">
|
||||
<td><strong>
|
||||
<a href="border-image-slice-007.htm">border-image-slice-007</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>The 'border-image-slice' property with the 'fill' keyword
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Backgrounds and Borders Module Level 3 CR Test Suite</h1>
|
||||
<h2>Miscellaneous Effects (10 tests)</h2>
|
||||
<h2>Miscellaneous Effects (11 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
|
@ -37,15 +37,15 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-background/#the-box-shadow">7.1 Drop Shadows: the ‘box-shadow’ property</a></th></tr>
|
||||
<!-- 10 tests -->
|
||||
<tr id="box-shadow-001-7.1" class="primary">
|
||||
<!-- 11 tests -->
|
||||
<tr id="box-shadow-001-7.1" class="primary internal">
|
||||
<td><strong>
|
||||
<a href="box-shadow-001.htm">box-shadow-001</a></strong></td>
|
||||
<td><a href="reference/box-shadow-001-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Box-Shadow property
|
||||
<td><abbr class="internal" title=""></abbr></td>
|
||||
<td>Positive value of horizontal offset
|
||||
<ul class="assert">
|
||||
<li>Testing simple drop shadow with the box-shadow property</li>
|
||||
<li>A positive value for the horizontal offset of the 'box-shadow' draws a shadow that is offset to the right of the box.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -71,6 +71,17 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="box-shadow-005-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="box-shadow-005.htm">box-shadow-005</a></strong></td>
|
||||
<td><a href="reference/box-shadow-005-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Box-Shadow property
|
||||
<ul class="assert">
|
||||
<li>Testing simple drop shadow with the box-shadow property</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="box-shadow-blur-definition-001-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="box-shadow-blur-definition-001.htm">box-shadow-blur-definition-001</a></strong></td>
|
||||
|
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Border radius shorthand reference</title>
|
||||
<link href="mailto:arno@arno.org" rel="author" title="arno">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
{
|
||||
border-top-left-radius: 29px 5px;
|
||||
border-top-right-radius: 43px 11px;
|
||||
border-bottom-left-radius: 13px 17px;
|
||||
border-bottom-right-radius: 19px 23px;
|
||||
background: #dddddd;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
}
|
||||
/* ]]> */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
There should be one box, with four rounded corners, each corner a different radius.
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if the box below has four rounded corners.</li>
|
||||
<li>FAIL if the corners are not rounded.</li>
|
||||
</ul>
|
||||
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
|
@ -640,6 +640,14 @@
|
|||
<td rowspan="1"><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="background-repeat-round" class="image">
|
||||
<tr>
|
||||
<td rowspan="1" title="background-repeat:round">
|
||||
<a href="background-repeat-round.htm">background-repeat-round</a></td>
|
||||
<td><a href="reference/background-repeat-round.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="background-repeat-round-roundup" class="image">
|
||||
<tr>
|
||||
<td rowspan="1" title="background-repeat:round, rounding up">
|
||||
|
@ -1576,6 +1584,14 @@
|
|||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="border-radius-shorthand-002" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="Borders Radius Shorthand.">
|
||||
<a href="border-radius-shorthand-002.htm">border-radius-shorthand-002</a></td>
|
||||
<td><a href="reference/border-radius-shorthand-002-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="border-top-left-radius-001" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="Borders. Border-top-left-radius using 0 value">
|
||||
|
@ -1736,11 +1752,11 @@
|
|||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="box-shadow-001" class="">
|
||||
<tbody id="box-shadow-005" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="Box-Shadow property">
|
||||
<a href="box-shadow-001.htm">box-shadow-001</a></td>
|
||||
<td><a href="reference/box-shadow-001-ref.htm">=</a> </td>
|
||||
<a href="box-shadow-005.htm">box-shadow-005</a></td>
|
||||
<td><a href="reference/box-shadow-005-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
@ -76,6 +76,7 @@ background-paint-order-001.htm == reference/background-paint-order-001-ref.htm
|
|||
background-repeat-no-repeat.htm == reference/background-repeat-no-repeat.htm
|
||||
background-repeat-repeat-x.htm == reference/background-repeat-repeat-x.htm
|
||||
background-repeat-repeat-y.htm == reference/background-repeat-repeat-y.htm
|
||||
background-repeat-round.htm == reference/background-repeat-round.htm
|
||||
background-repeat-round-roundup.htm == reference/background-repeat-round-roundup.htm
|
||||
background-repeat-space.htm == reference/background-repeat-space.htm
|
||||
background-size-002.htm == reference/background-size-002-ref.htm
|
||||
|
@ -193,6 +194,7 @@ border-radius-010.htm == reference/border-radius-010-ref.htm
|
|||
border-radius-011.htm == reference/border-radius-011-ref.htm
|
||||
border-radius-clipping.htm == reference/border-radius-clipping-ref.htm
|
||||
border-radius-horizontal-value-is-zero.htm == reference/border-radius-horizontal-value-is-zero-ref.htm
|
||||
border-radius-shorthand-002.htm == reference/border-radius-shorthand-002-ref.htm
|
||||
border-top-left-radius-001.htm == reference/border-radius-001-ref.htm
|
||||
border-top-left-radius-003.htm == border-top-left-radius-004.htm
|
||||
border-top-left-radius-004.htm == border-top-left-radius-003.htm
|
||||
|
@ -213,7 +215,7 @@ border-top-right-radius-009.htm == border-top-right-radius-007.htm
|
|||
border-top-right-radius-010.htm == reference/border-radius-001-ref.htm
|
||||
border-top-right-radius-011.htm == reference/border-radius-001-ref.htm
|
||||
border-top-right-radius-014.htm == reference/border-radius-001-ref.htm
|
||||
box-shadow-001.htm == reference/box-shadow-001-ref.htm
|
||||
box-shadow-005.htm == reference/box-shadow-005-ref.htm
|
||||
box-shadow-inset-spread-without-border-radius.htm == reference/box-shadow-inset-spread-without-border-radius.htm
|
||||
box-shadow-inset-without-border-radius.htm == reference/box-shadow-inset-without-border-radius.htm
|
||||
box-shadow-outset-spread-without-border-radius.htm == reference/box-shadow-outset-spread-without-border-radius.htm
|
||||
|
|
|
@ -32,7 +32,7 @@
|
|||
<tbody id="s3">
|
||||
<tr><th><a href="chapter-3.htm">Chapter 3 -
|
||||
Backgrounds</a></th>
|
||||
<td>(383 Tests)</td></tr>
|
||||
<td>(385 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s4">
|
||||
<tr><th><a href="chapter-4.htm">Chapter 4 -
|
||||
|
@ -42,17 +42,17 @@
|
|||
<tbody id="s5">
|
||||
<tr><th><a href="chapter-5.htm">Chapter 5 -
|
||||
Rounded Corners</a></th>
|
||||
<td>(108 Tests)</td></tr>
|
||||
<td>(109 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s6">
|
||||
<tr><th><a href="chapter-6.htm">Chapter 6 -
|
||||
Border Images</a></th>
|
||||
<td>(33 Tests)</td></tr>
|
||||
<td>(34 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s7">
|
||||
<tr><th><a href="chapter-7.htm">Chapter 7 -
|
||||
Miscellaneous Effects</a></th>
|
||||
<td>(10 Tests)</td></tr>
|
||||
<td>(11 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s8">
|
||||
<tr><th><a href="chapter-8.htm">Chapter 8 -
|
||||
|
|
|
@ -201,10 +201,12 @@ html4/background-repeat-repeat-y.htm 5be38e2f02e45a57583bba37adad815886fad866 ?
|
|||
xhtml1/background-repeat-repeat-y.xht 5be38e2f02e45a57583bba37adad815886fad866 ?
|
||||
html4/background-repeat-round-001.htm 488d2b77d15b0460f580db27ef68620e29b38709 ?
|
||||
xhtml1/background-repeat-round-001.xht 488d2b77d15b0460f580db27ef68620e29b38709 ?
|
||||
html4/background-repeat-round-002.htm 1a0c1c29e5c5ad357f96277b024066b65e8dbda8 ?
|
||||
xhtml1/background-repeat-round-002.xht 1a0c1c29e5c5ad357f96277b024066b65e8dbda8 ?
|
||||
html4/background-repeat-round-roundup.htm e34726ee89c303590c6c76d60d62fbfb3a522858 ?
|
||||
xhtml1/background-repeat-round-roundup.xht e34726ee89c303590c6c76d60d62fbfb3a522858 ?
|
||||
html4/background-repeat-round.htm 1a0c1c29e5c5ad357f96277b024066b65e8dbda8 ?
|
||||
xhtml1/background-repeat-round.xht 1a0c1c29e5c5ad357f96277b024066b65e8dbda8 ?
|
||||
html4/background-repeat-round.htm 30a7f3206852c485f18f345482a4664d60ad31f8 ?
|
||||
xhtml1/background-repeat-round.xht 30a7f3206852c485f18f345482a4664d60ad31f8 ?
|
||||
html4/background-repeat-space-padding-box.htm 16bd520231befa9ed931f103d28d2ce8745bc65c ?
|
||||
xhtml1/background-repeat-space-padding-box.xht 16bd520231befa9ed931f103d28d2ce8745bc65c ?
|
||||
html4/background-repeat-space.htm 61acbfe3d798516727be3376412ab8c116a00d50 ?
|
||||
|
@ -213,6 +215,8 @@ html4/background-size-001.htm ae9fed313c355776a869c710b2c96cc066a3d9d0 ?
|
|||
xhtml1/background-size-001.xht ae9fed313c355776a869c710b2c96cc066a3d9d0 ?
|
||||
html4/background-size-002.htm 25c622e0bcbf420d7b5053a9f2efc893505700f6 ?
|
||||
xhtml1/background-size-002.xht 25c622e0bcbf420d7b5053a9f2efc893505700f6 ?
|
||||
html4/background-size-003.htm a9a83cfab328e894706c5fac465f1958bd98d95f ?
|
||||
xhtml1/background-size-003.xht a9a83cfab328e894706c5fac465f1958bd98d95f ?
|
||||
html4/background-size-005.htm 5b1eae2d4a42d5dd9ad0d77bfeb06c5450df8636 ?
|
||||
xhtml1/background-size-005.xht 5b1eae2d4a42d5dd9ad0d77bfeb06c5450df8636 ?
|
||||
html4/background-size-006.htm fc850e8bb8486d6c7086c40b535a5f1ba14d9bca ?
|
||||
|
@ -491,8 +495,10 @@ html4/border-image-slice-002.htm c8d317551460dd21040412489996a6c738894628 ?
|
|||
xhtml1/border-image-slice-002.xht c8d317551460dd21040412489996a6c738894628 ?
|
||||
html4/border-image-slice-003.htm 2a0dfc8496d5d5a90972a635ced57cc9b3a26ea2 ?
|
||||
xhtml1/border-image-slice-003.xht 2a0dfc8496d5d5a90972a635ced57cc9b3a26ea2 ?
|
||||
html4/border-image-slice-004.htm f425ef8e3feb8e574627efb81478a607bd715055 ?
|
||||
xhtml1/border-image-slice-004.xht f425ef8e3feb8e574627efb81478a607bd715055 ?
|
||||
html4/border-image-slice-005.htm c795fb86f3a99c061832e0c3f708bf7c8650a895 ?
|
||||
xhtml1/border-image-slice-005.xht c795fb86f3a99c061832e0c3f708bf7c8650a895 ?
|
||||
html4/border-image-slice-007.htm f425ef8e3feb8e574627efb81478a607bd715055 ?
|
||||
xhtml1/border-image-slice-007.xht f425ef8e3feb8e574627efb81478a607bd715055 ?
|
||||
html4/border-image-slice-percentage.htm 96c66681062840b53a027278203512f40dc13523 ?
|
||||
xhtml1/border-image-slice-percentage.xht 96c66681062840b53a027278203512f40dc13523 ?
|
||||
html4/border-image-space-001.htm 7f295d8a8471c3a6127a95f0cceb6be824571926 ?
|
||||
|
@ -575,6 +581,8 @@ html4/border-radius-overflow-hidden.htm b387ba83b820a0718c10a1b9e2087971282efde3
|
|||
xhtml1/border-radius-overflow-hidden.xht b387ba83b820a0718c10a1b9e2087971282efde3 ?
|
||||
html4/border-radius-shorthand-001.htm c10da19070dbaf8b93b34577df2a0b7187e58bc6 ?
|
||||
xhtml1/border-radius-shorthand-001.xht c10da19070dbaf8b93b34577df2a0b7187e58bc6 ?
|
||||
html4/border-radius-shorthand-002.htm bfed421505cd493d7968e3149b638a98cc229e7f ?
|
||||
xhtml1/border-radius-shorthand-002.xht bfed421505cd493d7968e3149b638a98cc229e7f ?
|
||||
html4/border-radius-style-001.htm b0f47b7c8b8fb99c43466d068216b2f5b043637e ?
|
||||
xhtml1/border-radius-style-001.xht b0f47b7c8b8fb99c43466d068216b2f5b043637e ?
|
||||
html4/border-radius-style-002.htm 93fd139c58650a9b67ddac477b0370a3209c5c49 ?
|
||||
|
@ -659,14 +667,16 @@ html4/border-top-right-radius-014.htm da34f4b7b8e9fa8b5f62323c478a8ce6ca5add2b ?
|
|||
xhtml1/border-top-right-radius-014.xht da34f4b7b8e9fa8b5f62323c478a8ce6ca5add2b ?
|
||||
html4/border-top-right-radius-values-004.htm b0b8efe5ffbb9afb0e6430321784891fd69d1da3 ?
|
||||
xhtml1/border-top-right-radius-values-004.xht b0b8efe5ffbb9afb0e6430321784891fd69d1da3 ?
|
||||
html4/box-shadow-001.htm 5937733dbf81339f32c8be0e25aa99021a4841b9 ?
|
||||
xhtml1/box-shadow-001.xht 5937733dbf81339f32c8be0e25aa99021a4841b9 ?
|
||||
html4/box-shadow-001.htm 1c8548de168515500a4953975a935d49352c76d8 ?
|
||||
xhtml1/box-shadow-001.xht 1c8548de168515500a4953975a935d49352c76d8 ?
|
||||
html4/box-shadow-002.htm 51e9728d7bb6c05d90f699ee55f11a6aac8c0dc8 ?
|
||||
xhtml1/box-shadow-002.xht 51e9728d7bb6c05d90f699ee55f11a6aac8c0dc8 ?
|
||||
html4/box-shadow-003.htm 2e612545b32f7aa9da6ba0fcc4a230f5229ea0c8 ?
|
||||
xhtml1/box-shadow-003.xht 2e612545b32f7aa9da6ba0fcc4a230f5229ea0c8 ?
|
||||
html4/box-shadow-004.htm ab393af60215943f4f47e4a7455d41fe6fb2de5e ?
|
||||
xhtml1/box-shadow-004.xht ab393af60215943f4f47e4a7455d41fe6fb2de5e ?
|
||||
html4/box-shadow-005.htm 6f76f6e7f61c8282c602e59357cfc104033595ce ?
|
||||
xhtml1/box-shadow-005.xht 6f76f6e7f61c8282c602e59357cfc104033595ce ?
|
||||
html4/box-shadow-blur-definition-001.htm 54dbeb7c7726669361ca287a664b40433ccdeace ?
|
||||
xhtml1/box-shadow-blur-definition-001.xht 54dbeb7c7726669361ca287a664b40433ccdeace ?
|
||||
html4/box-shadow-inset-spread-without-border-radius.htm f9daf687adc6dd3741682f4b1af08ca29adb97d2 ?
|
||||
|
|
|
@ -132,6 +132,7 @@
|
|||
<p>Many thanks to the following for their contributions:</p>
|
||||
<ul>
|
||||
<li>anping</li>
|
||||
<li>Arno</li>
|
||||
<li>babyliner</li>
|
||||
<li>disound</li>
|
||||
<li>Dong An</li>
|
||||
|
|
|
@ -132,6 +132,7 @@
|
|||
<p>Many thanks to the following for their contributions:</p>
|
||||
<ul>
|
||||
<li>anping</li>
|
||||
<li>Arno</li>
|
||||
<li>babyliner</li>
|
||||
<li>disound</li>
|
||||
<li>Dong An</li>
|
||||
|
|
|
@ -97,13 +97,15 @@ background-paint-order-001 reference/background-paint-order-001-ref Background c
|
|||
background-repeat-no-repeat reference/background-repeat-no-repeat background-repeat:no-repeat image http://www.w3.org/TR/CSS21/colors.html#propdef-background-repeat,http://www.w3.org/TR/css3-background/#the-background-repeat 11682036f813de6bd77295409e7884259d8d2595 `Jeffrey Carl Faden`<http://www.jeffreyatw.com/> The image is placed once in the background positioning area and not repeated in any direction.
|
||||
background-repeat-repeat-x reference/background-repeat-repeat-x background-repeat:repeat-x image http://www.w3.org/TR/CSS21/colors.html#propdef-background-repeat,http://www.w3.org/TR/css3-background/#the-background-repeat 2045d4adc4d0e306dda4bed6d1f643a92151e211 `Jeffrey Carl Faden`<http://www.jeffreyatw.com/> The image is repeated horizontally as often as needed to cover the background painting area.
|
||||
background-repeat-repeat-y reference/background-repeat-repeat-y background-repeat:repeat-y image http://www.w3.org/TR/CSS21/colors.html#propdef-background-repeat,http://www.w3.org/TR/css3-background/#the-background-repeat 5be38e2f02e45a57583bba37adad815886fad866 `Jeffrey Carl Faden`<http://www.jeffreyatw.com/> The image is repeated vertically as often as needed to cover the background painting area.
|
||||
background-repeat-round background-repeat: round basic support image http://www.w3.org/TR/css3-background/#the-background-repeat 1a0c1c29e5c5ad357f96277b024066b65e8dbda8 `Lea Verou`<http://lea.verou.me> The image is repeated as often as will fit within the background positioning area. If it doesn't fit a whole number of times, it is rescaled so that it does.
|
||||
background-repeat-round reference/background-repeat-round background-repeat:round image http://www.w3.org/TR/css3-background/#the-background-repeat 30a7f3206852c485f18f345482a4664d60ad31f8 `Jeffrey Carl Faden`<http://www.jeffreyatw.com/> The 'background-repeat: round' declaration must scale an image in one or more dimensions so it fits a whole number of times in the background positioning area.
|
||||
background-repeat-round-001 background-repeat - one round keyword value image http://www.w3.org/TR/css3-background/#the-background-repeat 488d2b77d15b0460f580db27ef68620e29b38709 `Intel`<http://www.intel.com> Check if 'background-repeat' is 'round', then the width and height of the corresponding background image is rescaled so that they fit a whole number of times (2 in this test) in the background positioning area. Therefore the used width and height of the background image in this test should be 110px.
|
||||
background-repeat-round-002 background-repeat: round basic support image http://www.w3.org/TR/css3-background/#the-background-repeat 1a0c1c29e5c5ad357f96277b024066b65e8dbda8 `Lea Verou`<http://lea.verou.me> The image is repeated as often as will fit within the background positioning area. If it doesn't fit a whole number of times, it is rescaled so that it does.
|
||||
background-repeat-round-roundup reference/background-repeat-round-roundup background-repeat:round, rounding up image http://www.w3.org/TR/css3-background/#the-background-repeat e34726ee89c303590c6c76d60d62fbfb3a522858 `Jeffrey Carl Faden`<http://www.jeffreyatw.com/> The 'background-repeat: round' declaration must scale an image in one or more dimensions so it fits a whole number of times in the background positioning area.
|
||||
background-repeat-space reference/background-repeat-space background-repeat:space image http://www.w3.org/TR/css3-background/#the-background-repeat 61acbfe3d798516727be3376412ab8c116a00d50 `Jeffrey Carl Faden`<http://www.jeffreyatw.com/> The 'background-repeat: space' declaration must space out images in one or more dimensions so they fit a whole number of times in the background positioning area. The first and last images in each row and column must sit along edge(s) of the background positioning area.
|
||||
background-repeat-space-padding-box 'Background-repeat: space' when background positioning area is 'padding-box' http://www.w3.org/TR/css3-background/#the-background-repeat 16bd520231befa9ed931f103d28d2ce8745bc65c `Microsoft`<http://www.microsoft.com/> When 'background-repeat: space' and background positioning area is set to 'padding-box' the image is repeated as often within the 'padding-box' without being clipped, the images are spaced out to fill the area and the first and last images touch the edges of the 'padding-box'.
|
||||
background-size-001 background-size - initial and supported values dom,script http://www.w3.org/TR/css3-background/#the-background-size ae9fed313c355776a869c710b2c96cc066a3d9d0 `Intel`<http://www.intel.com> Check if background-size initial value is auto and supports values auto, cover and contain
|
||||
background-size-002 reference/background-size-002-ref background-size - initial value image http://www.w3.org/TR/css3-background/#the-background-size 25c622e0bcbf420d7b5053a9f2efc893505700f6 `Intel`<http://www.intel.com> Check if 'background-size' with initial value implies to the intrinsic width and height of the image are to be used. Therefore the used width and height of the background-size in this test should be 60px and 60px.
|
||||
background-size-003 Value of 'auto' is used for y dimension in 'background-size' http://www.w3.org/TR/css3-background/#the-background-size a9a83cfab328e894706c5fac465f1958bd98d95f `Microsoft`<http://www.microsoft.com/> An 'auto' value for y dimension in 'background-size' is resolved by using the image's intrinsic ratio and the size provided for the x dimension.
|
||||
background-size-005 reference/background-size-002-ref background-size - one auto keyword value image http://www.w3.org/TR/css3-background/#the-background-size 5b1eae2d4a42d5dd9ad0d77bfeb06c5450df8636 `Intel`<http://www.intel.com> Check if 'background-size' has only one value 'auto', then such value is the width of the correspoding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used width and height of the background-size in this test should be 60px and 60px.
|
||||
background-size-006 reference/background-size-006-ref background-size - one <length> value image http://www.w3.org/TR/css3-background/#the-background-size fc850e8bb8486d6c7086c40b535a5f1ba14d9bca `Intel`<http://www.intel.com> Check if 'background-size' has only one length value, then such value is the width of the corresponding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 45px.
|
||||
background-size-007 reference/ref-filled-green-100px-square background-size - one <length> value at minimum image http://www.w3.org/TR/css3-background/#the-background-size 22b9aec99f6bebb1f5d3929f3b615b75d5c72f61 `Intel`<http://www.intel.com> Check if 'background-size' is '0px', minimum width of the positioning area in length, then such value is the width of the corresponding image and therefore the background image is not to be displayed.
|
||||
|
@ -243,7 +245,8 @@ border-image-round-and-stretch reference/border-image-round-and-stretch-ref 'bor
|
|||
border-image-slice-001 reference/ref-filled-green-100px-square border-image-slice - <percentage> image http://www.w3.org/TR/css3-background/#the-border-image-slice 65c72cac44f48927ec95a402775c42d8f17d480d `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> Percentage values for 'border-image-slice' are relative to the size of the image: the width of the image for the horizontal (left and right) offsets, the height for vertical (top and bottom) offsets. 'border-image-slice' specifies inward offsets from the top, right, bottom, and left edges (in that order) of the image. In this test, the image serving as 'border-image-source' is a 100px by 100px image which has 5px of green at the top, 10px of green on the right, 15px of green at the bottom and 20px of green at the left; the remaining center (which has a width of 70px and a height of 80px) is all red.
|
||||
border-image-slice-002 reference/ref-filled-green-100px-square border-image-slice - <number> image http://www.w3.org/TR/css3-background/#the-border-image-slice c8d317551460dd21040412489996a6c738894628 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> Number values for 'border-image-slice' are pixels in the image: the width of the image for the horizontal (left and right) offsets, the height for vertical (top and bottom) offsets. 'border-image-slice' specifies inward offsets from the top, right, bottom, and left edges (in that order) of the image. In this test, the image serving as 'border-image-source' is a 100px by 100px image which has 5px of green at the top, 10px of green on the right, 15px of green at the bottom and 20px of green at the left; the remaining center (which has a width of 70px and a height of 80px) is all red.
|
||||
border-image-slice-003 reference/ref-if-there-is-no-red border-image-slice - border-style: none image http://www.w3.org/TR/css3-background/#the-border-image-slice 2a0dfc8496d5d5a90972a635ced57cc9b3a26ea2 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> If 'border-style' is not declared, then it defaults to 'none' in which case the computed border-widths on all 4 sides is 0 in which case the border area to be painted with the border-image is also 0. So, we should see no red in this test.
|
||||
border-image-slice-004 The 'border-image-slice' property with the 'fill' keyword image http://www.w3.org/TR/css3-background/#the-border-image-slice f425ef8e3feb8e574627efb81478a607bd715055 `Microsoft`<http://www.microsoft.com/> This test checks that the 'fill' keyword, if present, causes the middle part of the border-image to be preserved.
|
||||
border-image-slice-005 The 'border-image-slice' property with four percentage values image http://www.w3.org/TR/css3-background/#the-border-image-slice c795fb86f3a99c061832e0c3f708bf7c8650a895 `Microsoft`<http://www.microsoft.com/> This test checks that the border image is sliced into nine regions with inward offsets, '40%' from the top, '15%' from the right,'20%' from the bottom, and '5%' from the left edges of the image. Percentages are relative to the size of the image: the width of the image for the horizontal offsets, the height for vertical offsets.
|
||||
border-image-slice-007 The 'border-image-slice' property with the 'fill' keyword image http://www.w3.org/TR/css3-background/#the-border-image-slice f425ef8e3feb8e574627efb81478a607bd715055 `Microsoft`<http://www.microsoft.com/> This test checks that the 'fill' keyword, if present, causes the middle part of the border-image to be preserved.
|
||||
border-image-slice-percentage reference/border-image-slice-percentage-ref 'border-image-slice' set by percentage http://www.w3.org/TR/css3-background/#border-images 96c66681062840b53a027278203512f40dc13523 `Ren Jing`<mailto:reni2046@gmail.com> diamonds in corners should be red, and other diamonds should be orange, it should be 4 orange diamonds on each side.
|
||||
border-image-space-001 reference/border-image-space-001-ref Border Image: box with spaced repeating border image http://www.w3.org/TR/css3-background/#the-border-image-repeat 7f295d8a8471c3a6127a95f0cceb6be824571926 `Levi Weintraub`<mailto:leviw@chromium.org> border-image-repeat: space property spaces out background image that doesn't fit an even number of times.
|
||||
border-images border-images with round repeat image http://www.w3.org/TR/css3-background/#the-border-image 4d4052e1cc45e8c09db0459361452d1b5d5fd146 `babyliner`<mailto:babyliner1026@gmail.com> Testing border-image-repeat:round attribute
|
||||
|
@ -285,6 +288,7 @@ border-radius-initial-value-001 Initial value of 'border-radius' is 0 http://w
|
|||
border-radius-not-inherited-001 'Border-radius' is not inherited by default http://www.w3.org/TR/css3-background/#border-radius eb45d4478864422c50e2a68c5e329e75268b29d5 `Microsoft`<http://www.microsoft.com/> 'Border-radius' is not inherited by default.
|
||||
border-radius-overflow-hidden Clipping to the border-radius curve http://www.w3.org/TR/css3-background/#corner-clipping b387ba83b820a0718c10a1b9e2087971282efde3 `Lea Verou`<http://lea.verou.me> Effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) must clip to the curve
|
||||
border-radius-shorthand-001 'Border-radius' shorthand is used to set all four 'border-[*]-radius' properties. http://www.w3.org/TR/css3-background/#border-radius c10da19070dbaf8b93b34577df2a0b7187e58bc6 `Microsoft`<http://www.microsoft.com/> 'Border-radius' shorthand sets all four 'border-[*]-radius' properties.
|
||||
border-radius-shorthand-002 reference/border-radius-shorthand-002-ref Borders Radius Shorthand. http://www.w3.org/TR/css3-background/#the-border-radius bfed421505cd493d7968e3149b638a98cc229e7f `Arno`<mailto:arno@arno.org> The shorthand border radius property can be used to specify all four eliptical corners of a box.
|
||||
border-radius-style-001 'Border-radius' is set with 'border-style: dotted' http://www.w3.org/TR/css3-background/#the-border-color b0f47b7c8b8fb99c43466d068216b2f5b043637e `Microsoft`<http://www.microsoft.com/> 'Border-style: dotted' follows the curve of the border.
|
||||
border-radius-style-002 'Border-radius' is set with 'border-style: dashed' http://www.w3.org/TR/css3-background/#the-border-style 93fd139c58650a9b67ddac477b0370a3209c5c49 `Microsoft`<http://www.microsoft.com/> 'Border-style: dashed' follows the curve of the border.
|
||||
border-radius-style-003 'Border-radius' is set with 'border-style: double' http://www.w3.org/TR/css3-background/#the-border-style c518dbdb422a407068f81a2b6f9592a24db4cdce `Microsoft`<http://www.microsoft.com/> 'Border-style: double' follows the curve of the border.
|
||||
|
@ -327,10 +331,11 @@ border-top-right-radius-012 Borders. Border-top-right-radius using two length v
|
|||
border-top-right-radius-013 Borders. Border-top-right-radius using two length values: 40pt 2pc http://www.w3.org/TR/css3-background/#the-border-radius 3cd7b5e00e8ee28be18076ef7204312707b643da `Nokia`<http://www.nokia.com/> To verify border-top-right-radius property sets to two length values (with different units), works fine
|
||||
border-top-right-radius-014 reference/border-radius-001-ref Borders. Border-top-right-radius using two length values: 50px -25px http://www.w3.org/TR/css3-background/#the-border-radius da34f4b7b8e9fa8b5f62323c478a8ce6ca5add2b `Nokia`<http://www.nokia.com/> To verify if one length value is negative for border-top-right-radius, then the element is not rounded.
|
||||
border-top-right-radius-values-004 Percentage for the vertical radius of 'border-top-right-radius' refers to the height of the border box. http://www.w3.org/TR/css3-background/#border-radius b0b8efe5ffbb9afb0e6430321784891fd69d1da3 `Microsoft`<http://www.microsoft.com/> Percentage for the vertical radius of 'border-top-right-radius' refers to the height of the border box.
|
||||
box-shadow-001 reference/box-shadow-001-ref Box-Shadow property http://www.w3.org/TR/css3-background/#the-box-shadow 5937733dbf81339f32c8be0e25aa99021a4841b9 `Marc Silverman`<mailto:silverman@adobe.com> Testing simple drop shadow with the box-shadow property
|
||||
box-shadow-001 Positive value of horizontal offset internal http://www.w3.org/TR/css3-background/#the-box-shadow 1c8548de168515500a4953975a935d49352c76d8 `Microsoft`<http://www.microsoft.com/> A positive value for the horizontal offset of the 'box-shadow' draws a shadow that is offset to the right of the box.
|
||||
box-shadow-002 Positive values for spread distance http://www.w3.org/TR/css3-background/#the-box-shadow 51e9728d7bb6c05d90f699ee55f11a6aac8c0dc8 `Microsoft`<http://www.microsoft.com/> Positive values of the spread distance cause the shadow to grow in all directions by the specified distance.
|
||||
box-shadow-003 Layering of box shadows http://www.w3.org/TR/css3-background/#the-background-size 2e612545b32f7aa9da6ba0fcc4a230f5229ea0c8 `Microsoft`<http://www.microsoft.com/> Shadow effects are applied front to back, where the first shadow is on the top and the last shadow is on the bottom.
|
||||
box-shadow-004 Negative value for blur radius http://www.w3.org/TR/css3-background/#the-box-shadow ab393af60215943f4f47e4a7455d41fe6fb2de5e `Microsoft`<http://www.microsoft.com/> Negative values for the blur radius of the 'box-shadow' are not allowed.
|
||||
box-shadow-005 reference/box-shadow-005-ref Box-Shadow property http://www.w3.org/TR/css3-background/#the-box-shadow 6f76f6e7f61c8282c602e59357cfc104033595ce `Marc Silverman`<mailto:silverman@adobe.com> Testing simple drop shadow with the box-shadow property
|
||||
box-shadow-blur-definition-001 blur computation for box-shadow http://www.w3.org/TR/css3-background/#the-box-shadow 54dbeb7c7726669361ca287a664b40433ccdeace `L. David Baron`<http://dbaron.org/>,`Mozilla Corporation`<http://mozilla.com/> the resulting shadow must approximate (with each pixel being within 5% of its expected value) the image that would be generated by applying to the shadow a Gaussian blur with a standard deviation equal to half the blur radius
|
||||
box-shadow-inset-spread-without-border-radius reference/box-shadow-inset-spread-without-border-radius box-shadow http://www.w3.org/TR/css3-background/#the-box-shadow f9daf687adc6dd3741682f4b1af08ca29adb97d2 `Zhang Xiaochong`<mailto:joy.xczhang@gmail.com> inset spread box-shadow should show shadow.
|
||||
box-shadow-inset-without-border-radius reference/box-shadow-inset-without-border-radius box-shadow http://www.w3.org/TR/css3-background/#the-box-shadow de22652b0e7c4a3bc482f6968be7081c378247f8 `Zhang Xiaochong`<mailto:joy.xczhang@gmail.com> inset box-shadow should show shadow.
|
||||
|
|
|
@ -0,0 +1,25 @@
|
|||
<!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"><!-- Submitted from TestTWF Paris --><head>
|
||||
|
||||
<title>CSS Backgrounds and Borders Test: background-repeat: round basic support</title>
|
||||
<link href="http://lea.verou.me" rel="author" title="Lea Verou" />
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-background-repeat" rel="help" />
|
||||
<meta content="image" name="flags" />
|
||||
<meta content="The image is repeated as often as will fit within the background positioning area. If it doesn't fit a whole number of times, it is rescaled so that it does." name="assert" />
|
||||
<style>
|
||||
|
||||
html {
|
||||
background: red url('support/swatch-green.png') no-repeat;
|
||||
background-repeat: round;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is green and <strong>no red</strong>.</p>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
|
@ -1,25 +1,27 @@
|
|||
<!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"><!-- Submitted from TestTWF Paris --><head>
|
||||
|
||||
<title>CSS Backgrounds and Borders Test: background-repeat: round basic support</title>
|
||||
<link href="http://lea.verou.me" rel="author" title="Lea Verou" />
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-background-repeat" rel="help" />
|
||||
<meta content="image" name="flags" />
|
||||
<meta content="The image is repeated as often as will fit within the background positioning area. If it doesn't fit a whole number of times, it is rescaled so that it does." name="assert" />
|
||||
<style>
|
||||
|
||||
html {
|
||||
background: red url('support/swatch-green.png') no-repeat;
|
||||
background-repeat: round;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is green and <strong>no red</strong>.</p>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>CSS Test: background-repeat:round</title>
|
||||
<link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/" />
|
||||
<link rel="match" href="reference/background-repeat-round.xht" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat" />
|
||||
<meta name="flags" content="image" />
|
||||
<meta name="assert" content="The 'background-repeat: round' declaration must scale an image in one or more dimensions so it fits a whole number of times in the background positioning area." />
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
div {
|
||||
background-image: url("support/rectangle-96x60.png");
|
||||
background-repeat: round;
|
||||
height: 204px;
|
||||
width: 236px;
|
||||
}
|
||||
]]>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p><img src="support/rectangle-96x60.png" alt="Image download support must be enabled" /></p>
|
||||
<p>Test passes if the above image repeats in the below rectangle 6 times exactly: 2 columns, 3 rows. The top border of the containing rectangle should be orange, the right border yellow, the bottom border green, and the left border blue.</p>
|
||||
<p>Test fails if the above image repeats in below rectangle more than 6 times, with partial images lining the right and the bottom.</p>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,32 @@
|
|||
<!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: Value of 'auto' is used for y dimension in 'background-size'</title>
|
||||
<link href="http://www.microsoft.com/" rel="author" title="Microsoft" />
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help" />
|
||||
<meta content="" name="flags" />
|
||||
<meta content="An 'auto' value for y dimension in 'background-size' is resolved by using the image's intrinsic ratio and the size provided for the x dimension." name="assert" />
|
||||
<style type="text/css">
|
||||
.test
|
||||
{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("support/red_color.png");
|
||||
background-size: 50px auto;
|
||||
}
|
||||
.reference
|
||||
{
|
||||
margin-top: -100px;
|
||||
background: black;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div class="test"></div>
|
||||
<div class="reference"></div>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,24 @@
|
|||
<!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: The 'border-image-slice' property with four percentage values</title>
|
||||
<link href="http://www.microsoft.com/" rel="author" title="Microsoft" />
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-border-image-slice" rel="help" />
|
||||
<meta content="image" name="flags" />
|
||||
<meta content="This test checks that the border image is sliced into nine regions with inward offsets, '40%' from the top, '15%' from the right,'20%' from the bottom, and '5%' from the left edges of the image. Percentages are relative to the size of the image: the width of the image for the horizontal offsets, the height for vertical offsets." name="assert" />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
border: 40px double red;
|
||||
border-image-slice: 40% 15% 20% 5%;
|
||||
border-image-source: url("../support/9grid40-30-20-10-red.png");
|
||||
height: 100px;
|
||||
margin: 50px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,37 @@
|
|||
<!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: Borders Radius Shorthand. </title>
|
||||
<link href="mailto:arno@arno.org" rel="author" title="Arno" />
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-border-radius" rel="help" />
|
||||
<link href="reference/border-radius-shorthand-002-ref.xht" rel="match" />
|
||||
<meta content="" name="flags" />
|
||||
<meta content="The shorthand border radius property can be used to specify all four eliptical corners of a box." name="assert" />
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
{
|
||||
border-radius: 29px 43px 19px 13px / 5px 11px 23px 17px;
|
||||
|
||||
background: #dddddd;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
}
|
||||
/* ]]> */
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
There should be one box, with four rounded corners, each corner a different radius.
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if the box below has four rounded corners.</li>
|
||||
<li>FAIL if the corners are not rounded.</li>
|
||||
</ul>
|
||||
|
||||
<div></div>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
|
@ -1,36 +1,32 @@
|
|||
<!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 Background: Box-Shadow property</title>
|
||||
<link href="mailto:silverman@adobe.com" rel="author" title="Marc Silverman" />
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-box-shadow" rel="help" />
|
||||
<link href="reference/box-shadow-001-ref.xht" rel="match" />
|
||||
<meta content="Testing simple drop shadow with the box-shadow property" name="assert" />
|
||||
<style type="text/css">
|
||||
#shadow-div {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 5px;
|
||||
box-shadow: rgba(0,255,0,1) 10px 10px;
|
||||
background-color: #000;
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
}
|
||||
#error {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 15px;
|
||||
background-color: red;
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green drop shadow and no red.</p>
|
||||
<div id="error">
|
||||
</div>
|
||||
<div id="shadow-div">
|
||||
</div>
|
||||
|
||||
|
||||
<title>CSS Test: Positive value of horizontal offset</title>
|
||||
<link href="http://www.microsoft.com/" rel="author" title="Microsoft" />
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-box-shadow" rel="help" />
|
||||
<meta content="internal" name="flags" />
|
||||
<meta content="A positive value for the horizontal offset of the 'box-shadow' draws a shadow that is offset to the right of the box." name="assert" />
|
||||
<style type="text/css">
|
||||
#reference
|
||||
{
|
||||
width: 2in;
|
||||
height: 1in;
|
||||
background: red;
|
||||
border: thin solid black;
|
||||
}
|
||||
div div
|
||||
{
|
||||
width: 1in;
|
||||
height: 1in;
|
||||
border: thin solid black;
|
||||
background: white;
|
||||
box-shadow: black 96px 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div id="reference">
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,36 @@
|
|||
<!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 Background: Box-Shadow property</title>
|
||||
<link href="mailto:silverman@adobe.com" rel="author" title="Marc Silverman" />
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-box-shadow" rel="help" />
|
||||
<link href="reference/box-shadow-005-ref.xht" rel="match" />
|
||||
<meta content="Testing simple drop shadow with the box-shadow property" name="assert" />
|
||||
<style type="text/css">
|
||||
#shadow-div {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 5px;
|
||||
box-shadow: rgba(0,255,0,1) 10px 10px;
|
||||
background-color: #000;
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
}
|
||||
#error {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 15px;
|
||||
background-color: red;
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green drop shadow and no red.</p>
|
||||
<div id="error">
|
||||
</div>
|
||||
<div id="shadow-div">
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Backgrounds and Borders Module Level 3 CR Test Suite</h1>
|
||||
<h2>Backgrounds (383 tests)</h2>
|
||||
<h2>Backgrounds (385 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column"></col>
|
||||
<col id="refs-column"></col>
|
||||
|
@ -271,7 +271,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.4">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-background/#the-background-repeat">3.4 Tiling Images: the ‘background-repeat’ property</a></th></tr>
|
||||
<!-- 22 tests -->
|
||||
<!-- 23 tests -->
|
||||
<tr id="background-003-3.4" class="image">
|
||||
<td>
|
||||
<a href="background-003.xht">background-003</a></td>
|
||||
|
@ -385,11 +385,11 @@
|
|||
<tr id="background-repeat-round-3.4" class="primary image">
|
||||
<td><strong>
|
||||
<a href="background-repeat-round.xht">background-repeat-round</a></strong></td>
|
||||
<td></td>
|
||||
<td><a href="reference/background-repeat-round.xht">=</a> </td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>background-repeat: round basic support
|
||||
<td>background-repeat:round
|
||||
<ul class="assert">
|
||||
<li>The image is repeated as often as will fit within the background positioning area. If it doesn't fit a whole number of times, it is rescaled so that it does.</li>
|
||||
<li>The 'background-repeat: round' declaration must scale an image in one or more dimensions so it fits a whole number of times in the background positioning area.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -404,6 +404,17 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="background-repeat-round-002-3.4" class="primary image">
|
||||
<td><strong>
|
||||
<a href="background-repeat-round-002.xht">background-repeat-round-002</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>background-repeat: round basic support
|
||||
<ul class="assert">
|
||||
<li>The image is repeated as often as will fit within the background positioning area. If it doesn't fit a whole number of times, it is rescaled so that it does.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="background-repeat-round-roundup-3.4" class="primary image">
|
||||
<td><strong>
|
||||
<a href="background-repeat-round-roundup.xht">background-repeat-round-roundup</a></strong></td>
|
||||
|
@ -1502,7 +1513,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.9">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-background/#the-background-size">3.9 Sizing Images: the ‘background-size’ property</a></th></tr>
|
||||
<!-- 262 tests -->
|
||||
<!-- 263 tests -->
|
||||
<tr id="background-intrinsic-001-3.9" class="svg">
|
||||
<td>
|
||||
<a href="background-intrinsic-001.xht">background-intrinsic-001</a></td>
|
||||
|
@ -1635,6 +1646,17 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="background-size-003-3.9" class="primary">
|
||||
<td><strong>
|
||||
<a href="background-size-003.xht">background-size-003</a></strong></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>Value of 'auto' is used for y dimension in 'background-size'
|
||||
<ul class="assert">
|
||||
<li>An 'auto' value for y dimension in 'background-size' is resolved by using the image's intrinsic ratio and the size provided for the x dimension.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="background-size-005-3.9" class="primary image">
|
||||
<td><strong>
|
||||
<a href="background-size-005.xht">background-size-005</a></strong></td>
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Backgrounds and Borders Module Level 3 CR Test Suite</h1>
|
||||
<h2>Rounded Corners (108 tests)</h2>
|
||||
<h2>Rounded Corners (109 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column"></col>
|
||||
<col id="refs-column"></col>
|
||||
|
@ -37,7 +37,7 @@
|
|||
<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 -->
|
||||
<!-- 72 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>
|
||||
|
@ -478,6 +478,17 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="border-radius-shorthand-002-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="border-radius-shorthand-002.xht">border-radius-shorthand-002</a></strong></td>
|
||||
<td><a href="reference/border-radius-shorthand-002-ref.xht">=</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.xht">border-top-left-radius-001</a></strong></td>
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Backgrounds and Borders Module Level 3 CR Test Suite</h1>
|
||||
<h2>Border Images (33 tests)</h2>
|
||||
<h2>Border Images (34 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column"></col>
|
||||
<col id="refs-column"></col>
|
||||
|
@ -112,7 +112,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-background/#the-border-image-slice">6.2 Image Slicing: the ‘border-image-slice’ property</a></th></tr>
|
||||
<!-- 4 tests -->
|
||||
<!-- 5 tests -->
|
||||
<tr id="border-image-slice-001-6.2" class="primary image">
|
||||
<td><strong>
|
||||
<a href="border-image-slice-001.xht">border-image-slice-001</a></strong></td>
|
||||
|
@ -146,9 +146,20 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="border-image-slice-004-6.2" class="primary image">
|
||||
<tr id="border-image-slice-005-6.2" class="primary image">
|
||||
<td><strong>
|
||||
<a href="border-image-slice-004.xht">border-image-slice-004</a></strong></td>
|
||||
<a href="border-image-slice-005.xht">border-image-slice-005</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>The 'border-image-slice' property with four percentage values
|
||||
<ul class="assert">
|
||||
<li>This test checks that the border image is sliced into nine regions with inward offsets, '40%' from the top, '15%' from the right,'20%' from the bottom, and '5%' from the left edges of the image. Percentages are relative to the size of the image: the width of the image for the horizontal offsets, the height for vertical offsets.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="border-image-slice-007-6.2" class="primary image">
|
||||
<td><strong>
|
||||
<a href="border-image-slice-007.xht">border-image-slice-007</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>The 'border-image-slice' property with the 'fill' keyword
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Backgrounds and Borders Module Level 3 CR Test Suite</h1>
|
||||
<h2>Miscellaneous Effects (10 tests)</h2>
|
||||
<h2>Miscellaneous Effects (11 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column"></col>
|
||||
<col id="refs-column"></col>
|
||||
|
@ -37,15 +37,15 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-background/#the-box-shadow">7.1 Drop Shadows: the ‘box-shadow’ property</a></th></tr>
|
||||
<!-- 10 tests -->
|
||||
<tr id="box-shadow-001-7.1" class="primary">
|
||||
<!-- 11 tests -->
|
||||
<tr id="box-shadow-001-7.1" class="primary internal">
|
||||
<td><strong>
|
||||
<a href="box-shadow-001.xht">box-shadow-001</a></strong></td>
|
||||
<td><a href="reference/box-shadow-001-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>Box-Shadow property
|
||||
<td><abbr class="internal" title=""></abbr></td>
|
||||
<td>Positive value of horizontal offset
|
||||
<ul class="assert">
|
||||
<li>Testing simple drop shadow with the box-shadow property</li>
|
||||
<li>A positive value for the horizontal offset of the 'box-shadow' draws a shadow that is offset to the right of the box.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -71,6 +71,17 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="box-shadow-005-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="box-shadow-005.xht">box-shadow-005</a></strong></td>
|
||||
<td><a href="reference/box-shadow-005-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>Box-Shadow property
|
||||
<ul class="assert">
|
||||
<li>Testing simple drop shadow with the box-shadow property</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="box-shadow-blur-definition-001-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="box-shadow-blur-definition-001.xht">box-shadow-blur-definition-001</a></strong></td>
|
||||
|
|
|
@ -0,0 +1,31 @@
|
|||
<!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: Border radius shorthand reference</title>
|
||||
<link href="mailto:arno@arno.org" rel="author" title="arno" />
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
{
|
||||
border-top-left-radius: 29px 5px;
|
||||
border-top-right-radius: 43px 11px;
|
||||
border-bottom-left-radius: 13px 17px;
|
||||
border-bottom-right-radius: 19px 23px;
|
||||
background: #dddddd;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
}
|
||||
/* ]]> */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
There should be one box, with four rounded corners, each corner a different radius.
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if the box below has four rounded corners.</li>
|
||||
<li>FAIL if the corners are not rounded.</li>
|
||||
</ul>
|
||||
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
|
@ -640,6 +640,14 @@
|
|||
<td rowspan="1"><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="background-repeat-round" class="image">
|
||||
<tr>
|
||||
<td rowspan="1" title="background-repeat:round">
|
||||
<a href="background-repeat-round.xht">background-repeat-round</a></td>
|
||||
<td><a href="reference/background-repeat-round.xht">=</a> </td>
|
||||
<td rowspan="1"><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="background-repeat-round-roundup" class="image">
|
||||
<tr>
|
||||
<td rowspan="1" title="background-repeat:round, rounding up">
|
||||
|
@ -1576,6 +1584,14 @@
|
|||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="border-radius-shorthand-002" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="Borders Radius Shorthand.">
|
||||
<a href="border-radius-shorthand-002.xht">border-radius-shorthand-002</a></td>
|
||||
<td><a href="reference/border-radius-shorthand-002-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="border-top-left-radius-001" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="Borders. Border-top-left-radius using 0 value">
|
||||
|
@ -1736,11 +1752,11 @@
|
|||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="box-shadow-001" class="">
|
||||
<tbody id="box-shadow-005" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="Box-Shadow property">
|
||||
<a href="box-shadow-001.xht">box-shadow-001</a></td>
|
||||
<td><a href="reference/box-shadow-001-ref.xht">=</a> </td>
|
||||
<a href="box-shadow-005.xht">box-shadow-005</a></td>
|
||||
<td><a href="reference/box-shadow-005-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
@ -76,6 +76,7 @@ background-paint-order-001.xht == reference/background-paint-order-001-ref.xht
|
|||
background-repeat-no-repeat.xht == reference/background-repeat-no-repeat.xht
|
||||
background-repeat-repeat-x.xht == reference/background-repeat-repeat-x.xht
|
||||
background-repeat-repeat-y.xht == reference/background-repeat-repeat-y.xht
|
||||
background-repeat-round.xht == reference/background-repeat-round.xht
|
||||
background-repeat-round-roundup.xht == reference/background-repeat-round-roundup.xht
|
||||
background-repeat-space.xht == reference/background-repeat-space.xht
|
||||
background-size-002.xht == reference/background-size-002-ref.xht
|
||||
|
@ -193,6 +194,7 @@ border-radius-010.xht == reference/border-radius-010-ref.xht
|
|||
border-radius-011.xht == reference/border-radius-011-ref.xht
|
||||
border-radius-clipping.xht == reference/border-radius-clipping-ref.xht
|
||||
border-radius-horizontal-value-is-zero.xht == reference/border-radius-horizontal-value-is-zero-ref.xht
|
||||
border-radius-shorthand-002.xht == reference/border-radius-shorthand-002-ref.xht
|
||||
border-top-left-radius-001.xht == reference/border-radius-001-ref.xht
|
||||
border-top-left-radius-003.xht == border-top-left-radius-004.xht
|
||||
border-top-left-radius-004.xht == border-top-left-radius-003.xht
|
||||
|
@ -213,7 +215,7 @@ border-top-right-radius-009.xht == border-top-right-radius-007.xht
|
|||
border-top-right-radius-010.xht == reference/border-radius-001-ref.xht
|
||||
border-top-right-radius-011.xht == reference/border-radius-001-ref.xht
|
||||
border-top-right-radius-014.xht == reference/border-radius-001-ref.xht
|
||||
box-shadow-001.xht == reference/box-shadow-001-ref.xht
|
||||
box-shadow-005.xht == reference/box-shadow-005-ref.xht
|
||||
box-shadow-inset-spread-without-border-radius.xht == reference/box-shadow-inset-spread-without-border-radius.xht
|
||||
box-shadow-inset-without-border-radius.xht == reference/box-shadow-inset-without-border-radius.xht
|
||||
box-shadow-outset-spread-without-border-radius.xht == reference/box-shadow-outset-spread-without-border-radius.xht
|
||||
|
|
|
@ -32,7 +32,7 @@
|
|||
<tbody id="s3">
|
||||
<tr><th><a href="chapter-3.xht">Chapter 3 -
|
||||
Backgrounds</a></th>
|
||||
<td>(383 Tests)</td></tr>
|
||||
<td>(385 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s4">
|
||||
<tr><th><a href="chapter-4.xht">Chapter 4 -
|
||||
|
@ -42,17 +42,17 @@
|
|||
<tbody id="s5">
|
||||
<tr><th><a href="chapter-5.xht">Chapter 5 -
|
||||
Rounded Corners</a></th>
|
||||
<td>(108 Tests)</td></tr>
|
||||
<td>(109 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s6">
|
||||
<tr><th><a href="chapter-6.xht">Chapter 6 -
|
||||
Border Images</a></th>
|
||||
<td>(33 Tests)</td></tr>
|
||||
<td>(34 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s7">
|
||||
<tr><th><a href="chapter-7.xht">Chapter 7 -
|
||||
Miscellaneous Effects</a></th>
|
||||
<td>(10 Tests)</td></tr>
|
||||
<td>(11 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s8">
|
||||
<tr><th><a href="chapter-8.xht">Chapter 8 -
|
||||
|
|
|
@ -0,0 +1,25 @@
|
|||
<!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"><!-- Submitted from TestTWF Paris --><head>
|
||||
|
||||
<title>CSS Backgrounds and Borders Test: background-repeat: round basic support</title>
|
||||
<link href="http://lea.verou.me" rel="author" title="Lea Verou" />
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-background-repeat" rel="help" />
|
||||
<meta content="image" name="flags" />
|
||||
<meta content="The image is repeated as often as will fit within the background positioning area. If it doesn't fit a whole number of times, it is rescaled so that it does." name="assert" />
|
||||
<style>
|
||||
|
||||
html {
|
||||
background: red url('support/swatch-green.png') no-repeat;
|
||||
background-repeat: round;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is green and <strong>no red</strong>.</p>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
|
@ -1,25 +1,36 @@
|
|||
<!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"><!-- Submitted from TestTWF Paris --><head>
|
||||
|
||||
<title>CSS Backgrounds and Borders Test: background-repeat: round basic support</title>
|
||||
<link href="http://lea.verou.me" rel="author" title="Lea Verou" />
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-background-repeat" rel="help" />
|
||||
<meta content="image" name="flags" />
|
||||
<meta content="The image is repeated as often as will fit within the background positioning area. If it doesn't fit a whole number of times, it is rescaled so that it does." name="assert" />
|
||||
<style>
|
||||
|
||||
html {
|
||||
background: red url('support/swatch-green.png') no-repeat;
|
||||
background-repeat: round;
|
||||
}
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>CSS Test: background-repeat:round</title>
|
||||
<style type="text/css">
|
||||
@page { font: italic 8pt sans-serif; color: gray;
|
||||
margin: 7%;
|
||||
counter-increment: page;
|
||||
@top-left { content: "CSS Backgrounds and Borders Module Level 3 CR Test Suite"; }
|
||||
@top-right { content: "Test background-repeat-round"; }
|
||||
@bottom-right { content: counter(page); }
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is green and <strong>no red</strong>.</p>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
<link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/" />
|
||||
<link rel="match" href="reference/background-repeat-round.xht" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat" />
|
||||
<meta name="flags" content="image" />
|
||||
<meta name="assert" content="The 'background-repeat: round' declaration must scale an image in one or more dimensions so it fits a whole number of times in the background positioning area." />
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
div {
|
||||
background-image: url("support/rectangle-96x60.png");
|
||||
background-repeat: round;
|
||||
height: 204px;
|
||||
width: 236px;
|
||||
}
|
||||
]]>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p><img src="support/rectangle-96x60.png" alt="Image download support must be enabled" /></p>
|
||||
<p>Test passes if the above image repeats in the below rectangle 6 times exactly: 2 columns, 3 rows. The top border of the containing rectangle should be orange, the right border yellow, the bottom border green, and the left border blue.</p>
|
||||
<p>Test fails if the above image repeats in below rectangle more than 6 times, with partial images lining the right and the bottom.</p>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,32 @@
|
|||
<!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: Value of 'auto' is used for y dimension in 'background-size'</title>
|
||||
<link href="http://www.microsoft.com/" rel="author" title="Microsoft" />
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help" />
|
||||
<meta content="" name="flags" />
|
||||
<meta content="An 'auto' value for y dimension in 'background-size' is resolved by using the image's intrinsic ratio and the size provided for the x dimension." name="assert" />
|
||||
<style type="text/css">
|
||||
.test
|
||||
{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("support/red_color.png");
|
||||
background-size: 50px auto;
|
||||
}
|
||||
.reference
|
||||
{
|
||||
margin-top: -100px;
|
||||
background: black;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div class="test"></div>
|
||||
<div class="reference"></div>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,24 @@
|
|||
<!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: The 'border-image-slice' property with four percentage values</title>
|
||||
<link href="http://www.microsoft.com/" rel="author" title="Microsoft" />
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-border-image-slice" rel="help" />
|
||||
<meta content="image" name="flags" />
|
||||
<meta content="This test checks that the border image is sliced into nine regions with inward offsets, '40%' from the top, '15%' from the right,'20%' from the bottom, and '5%' from the left edges of the image. Percentages are relative to the size of the image: the width of the image for the horizontal offsets, the height for vertical offsets." name="assert" />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
border: 40px double red;
|
||||
border-image-slice: 40% 15% 20% 5%;
|
||||
border-image-source: url("../support/9grid40-30-20-10-red.png");
|
||||
height: 100px;
|
||||
margin: 50px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,37 @@
|
|||
<!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: Borders Radius Shorthand. </title>
|
||||
<link href="mailto:arno@arno.org" rel="author" title="Arno" />
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-border-radius" rel="help" />
|
||||
<link href="reference/border-radius-shorthand-002-ref.xht" rel="match" />
|
||||
<meta content="" name="flags" />
|
||||
<meta content="The shorthand border radius property can be used to specify all four eliptical corners of a box." name="assert" />
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
{
|
||||
border-radius: 29px 43px 19px 13px / 5px 11px 23px 17px;
|
||||
|
||||
background: #dddddd;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
}
|
||||
/* ]]> */
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
There should be one box, with four rounded corners, each corner a different radius.
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if the box below has four rounded corners.</li>
|
||||
<li>FAIL if the corners are not rounded.</li>
|
||||
</ul>
|
||||
|
||||
<div></div>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
|
@ -1,36 +1,32 @@
|
|||
<!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 Background: Box-Shadow property</title>
|
||||
<link href="mailto:silverman@adobe.com" rel="author" title="Marc Silverman" />
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-box-shadow" rel="help" />
|
||||
<link href="reference/box-shadow-001-ref.xht" rel="match" />
|
||||
<meta content="Testing simple drop shadow with the box-shadow property" name="assert" />
|
||||
<style type="text/css">
|
||||
#shadow-div {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 5px;
|
||||
box-shadow: rgba(0,255,0,1) 10px 10px;
|
||||
background-color: #000;
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
}
|
||||
#error {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 15px;
|
||||
background-color: red;
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green drop shadow and no red.</p>
|
||||
<div id="error">
|
||||
</div>
|
||||
<div id="shadow-div">
|
||||
</div>
|
||||
|
||||
|
||||
<title>CSS Test: Positive value of horizontal offset</title>
|
||||
<link href="http://www.microsoft.com/" rel="author" title="Microsoft" />
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-box-shadow" rel="help" />
|
||||
<meta content="internal" name="flags" />
|
||||
<meta content="A positive value for the horizontal offset of the 'box-shadow' draws a shadow that is offset to the right of the box." name="assert" />
|
||||
<style type="text/css">
|
||||
#reference
|
||||
{
|
||||
width: 2in;
|
||||
height: 1in;
|
||||
background: red;
|
||||
border: thin solid black;
|
||||
}
|
||||
div div
|
||||
{
|
||||
width: 1in;
|
||||
height: 1in;
|
||||
border: thin solid black;
|
||||
background: white;
|
||||
box-shadow: black 96px 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div id="reference">
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,36 @@
|
|||
<!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 Background: Box-Shadow property</title>
|
||||
<link href="mailto:silverman@adobe.com" rel="author" title="Marc Silverman" />
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-box-shadow" rel="help" />
|
||||
<link href="reference/box-shadow-005-ref.xht" rel="match" />
|
||||
<meta content="Testing simple drop shadow with the box-shadow property" name="assert" />
|
||||
<style type="text/css">
|
||||
#shadow-div {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 5px;
|
||||
box-shadow: rgba(0,255,0,1) 10px 10px;
|
||||
background-color: #000;
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
}
|
||||
#error {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 15px;
|
||||
background-color: red;
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green drop shadow and no red.</p>
|
||||
<div id="error">
|
||||
</div>
|
||||
<div id="shadow-div">
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Backgrounds and Borders Module Level 3 CR Test Suite</h1>
|
||||
<h2>Backgrounds (383 tests)</h2>
|
||||
<h2>Backgrounds (385 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column"></col>
|
||||
<col id="refs-column"></col>
|
||||
|
@ -271,7 +271,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.4">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-background/#the-background-repeat">3.4 Tiling Images: the ‘background-repeat’ property</a></th></tr>
|
||||
<!-- 22 tests -->
|
||||
<!-- 23 tests -->
|
||||
<tr id="background-003-3.4" class="image">
|
||||
<td>
|
||||
<a href="background-003.xht">background-003</a></td>
|
||||
|
@ -385,11 +385,11 @@
|
|||
<tr id="background-repeat-round-3.4" class="primary image">
|
||||
<td><strong>
|
||||
<a href="background-repeat-round.xht">background-repeat-round</a></strong></td>
|
||||
<td></td>
|
||||
<td><a href="reference/background-repeat-round.xht">=</a> </td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>background-repeat: round basic support
|
||||
<td>background-repeat:round
|
||||
<ul class="assert">
|
||||
<li>The image is repeated as often as will fit within the background positioning area. If it doesn't fit a whole number of times, it is rescaled so that it does.</li>
|
||||
<li>The 'background-repeat: round' declaration must scale an image in one or more dimensions so it fits a whole number of times in the background positioning area.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -404,6 +404,17 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="background-repeat-round-002-3.4" class="primary image">
|
||||
<td><strong>
|
||||
<a href="background-repeat-round-002.xht">background-repeat-round-002</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>background-repeat: round basic support
|
||||
<ul class="assert">
|
||||
<li>The image is repeated as often as will fit within the background positioning area. If it doesn't fit a whole number of times, it is rescaled so that it does.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="background-repeat-round-roundup-3.4" class="primary image">
|
||||
<td><strong>
|
||||
<a href="background-repeat-round-roundup.xht">background-repeat-round-roundup</a></strong></td>
|
||||
|
@ -1502,7 +1513,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.9">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-background/#the-background-size">3.9 Sizing Images: the ‘background-size’ property</a></th></tr>
|
||||
<!-- 262 tests -->
|
||||
<!-- 263 tests -->
|
||||
<tr id="background-intrinsic-001-3.9" class="svg">
|
||||
<td>
|
||||
<a href="background-intrinsic-001.xht">background-intrinsic-001</a></td>
|
||||
|
@ -1635,6 +1646,17 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="background-size-003-3.9" class="primary">
|
||||
<td><strong>
|
||||
<a href="background-size-003.xht">background-size-003</a></strong></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>Value of 'auto' is used for y dimension in 'background-size'
|
||||
<ul class="assert">
|
||||
<li>An 'auto' value for y dimension in 'background-size' is resolved by using the image's intrinsic ratio and the size provided for the x dimension.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="background-size-005-3.9" class="primary image">
|
||||
<td><strong>
|
||||
<a href="background-size-005.xht">background-size-005</a></strong></td>
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Backgrounds and Borders Module Level 3 CR Test Suite</h1>
|
||||
<h2>Rounded Corners (108 tests)</h2>
|
||||
<h2>Rounded Corners (109 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column"></col>
|
||||
<col id="refs-column"></col>
|
||||
|
@ -37,7 +37,7 @@
|
|||
<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 -->
|
||||
<!-- 72 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>
|
||||
|
@ -478,6 +478,17 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="border-radius-shorthand-002-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="border-radius-shorthand-002.xht">border-radius-shorthand-002</a></strong></td>
|
||||
<td><a href="reference/border-radius-shorthand-002-ref.xht">=</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.xht">border-top-left-radius-001</a></strong></td>
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Backgrounds and Borders Module Level 3 CR Test Suite</h1>
|
||||
<h2>Border Images (33 tests)</h2>
|
||||
<h2>Border Images (34 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column"></col>
|
||||
<col id="refs-column"></col>
|
||||
|
@ -112,7 +112,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-background/#the-border-image-slice">6.2 Image Slicing: the ‘border-image-slice’ property</a></th></tr>
|
||||
<!-- 4 tests -->
|
||||
<!-- 5 tests -->
|
||||
<tr id="border-image-slice-001-6.2" class="primary image">
|
||||
<td><strong>
|
||||
<a href="border-image-slice-001.xht">border-image-slice-001</a></strong></td>
|
||||
|
@ -146,9 +146,20 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="border-image-slice-004-6.2" class="primary image">
|
||||
<tr id="border-image-slice-005-6.2" class="primary image">
|
||||
<td><strong>
|
||||
<a href="border-image-slice-004.xht">border-image-slice-004</a></strong></td>
|
||||
<a href="border-image-slice-005.xht">border-image-slice-005</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>The 'border-image-slice' property with four percentage values
|
||||
<ul class="assert">
|
||||
<li>This test checks that the border image is sliced into nine regions with inward offsets, '40%' from the top, '15%' from the right,'20%' from the bottom, and '5%' from the left edges of the image. Percentages are relative to the size of the image: the width of the image for the horizontal offsets, the height for vertical offsets.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="border-image-slice-007-6.2" class="primary image">
|
||||
<td><strong>
|
||||
<a href="border-image-slice-007.xht">border-image-slice-007</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>The 'border-image-slice' property with the 'fill' keyword
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Backgrounds and Borders Module Level 3 CR Test Suite</h1>
|
||||
<h2>Miscellaneous Effects (10 tests)</h2>
|
||||
<h2>Miscellaneous Effects (11 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column"></col>
|
||||
<col id="refs-column"></col>
|
||||
|
@ -37,15 +37,15 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-background/#the-box-shadow">7.1 Drop Shadows: the ‘box-shadow’ property</a></th></tr>
|
||||
<!-- 10 tests -->
|
||||
<tr id="box-shadow-001-7.1" class="primary">
|
||||
<!-- 11 tests -->
|
||||
<tr id="box-shadow-001-7.1" class="primary internal">
|
||||
<td><strong>
|
||||
<a href="box-shadow-001.xht">box-shadow-001</a></strong></td>
|
||||
<td><a href="reference/box-shadow-001-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>Box-Shadow property
|
||||
<td><abbr class="internal" title=""></abbr></td>
|
||||
<td>Positive value of horizontal offset
|
||||
<ul class="assert">
|
||||
<li>Testing simple drop shadow with the box-shadow property</li>
|
||||
<li>A positive value for the horizontal offset of the 'box-shadow' draws a shadow that is offset to the right of the box.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -71,6 +71,17 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="box-shadow-005-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="box-shadow-005.xht">box-shadow-005</a></strong></td>
|
||||
<td><a href="reference/box-shadow-005-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>Box-Shadow property
|
||||
<ul class="assert">
|
||||
<li>Testing simple drop shadow with the box-shadow property</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="box-shadow-blur-definition-001-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="box-shadow-blur-definition-001.xht">box-shadow-blur-definition-001</a></strong></td>
|
||||
|
|
|
@ -0,0 +1,31 @@
|
|||
<!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: Border radius shorthand reference</title>
|
||||
<link href="mailto:arno@arno.org" rel="author" title="arno" />
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
{
|
||||
border-top-left-radius: 29px 5px;
|
||||
border-top-right-radius: 43px 11px;
|
||||
border-bottom-left-radius: 13px 17px;
|
||||
border-bottom-right-radius: 19px 23px;
|
||||
background: #dddddd;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
}
|
||||
/* ]]> */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
There should be one box, with four rounded corners, each corner a different radius.
|
||||
</p>
|
||||
<ul>
|
||||
<li>PASS if the box below has four rounded corners.</li>
|
||||
<li>FAIL if the corners are not rounded.</li>
|
||||
</ul>
|
||||
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
|
@ -640,6 +640,14 @@
|
|||
<td rowspan="1"><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="background-repeat-round" class="image">
|
||||
<tr>
|
||||
<td rowspan="1" title="background-repeat:round">
|
||||
<a href="background-repeat-round.xht">background-repeat-round</a></td>
|
||||
<td><a href="reference/background-repeat-round.xht">=</a> </td>
|
||||
<td rowspan="1"><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="background-repeat-round-roundup" class="image">
|
||||
<tr>
|
||||
<td rowspan="1" title="background-repeat:round, rounding up">
|
||||
|
@ -1576,6 +1584,14 @@
|
|||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="border-radius-shorthand-002" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="Borders Radius Shorthand.">
|
||||
<a href="border-radius-shorthand-002.xht">border-radius-shorthand-002</a></td>
|
||||
<td><a href="reference/border-radius-shorthand-002-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="border-top-left-radius-001" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="Borders. Border-top-left-radius using 0 value">
|
||||
|
@ -1736,11 +1752,11 @@
|
|||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="box-shadow-001" class="">
|
||||
<tbody id="box-shadow-005" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="Box-Shadow property">
|
||||
<a href="box-shadow-001.xht">box-shadow-001</a></td>
|
||||
<td><a href="reference/box-shadow-001-ref.xht">=</a> </td>
|
||||
<a href="box-shadow-005.xht">box-shadow-005</a></td>
|
||||
<td><a href="reference/box-shadow-005-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
@ -76,6 +76,7 @@ background-paint-order-001.xht == reference/background-paint-order-001-ref.xht
|
|||
background-repeat-no-repeat.xht == reference/background-repeat-no-repeat.xht
|
||||
background-repeat-repeat-x.xht == reference/background-repeat-repeat-x.xht
|
||||
background-repeat-repeat-y.xht == reference/background-repeat-repeat-y.xht
|
||||
background-repeat-round.xht == reference/background-repeat-round.xht
|
||||
background-repeat-round-roundup.xht == reference/background-repeat-round-roundup.xht
|
||||
background-repeat-space.xht == reference/background-repeat-space.xht
|
||||
background-size-002.xht == reference/background-size-002-ref.xht
|
||||
|
@ -193,6 +194,7 @@ border-radius-010.xht == reference/border-radius-010-ref.xht
|
|||
border-radius-011.xht == reference/border-radius-011-ref.xht
|
||||
border-radius-clipping.xht == reference/border-radius-clipping-ref.xht
|
||||
border-radius-horizontal-value-is-zero.xht == reference/border-radius-horizontal-value-is-zero-ref.xht
|
||||
border-radius-shorthand-002.xht == reference/border-radius-shorthand-002-ref.xht
|
||||
border-top-left-radius-001.xht == reference/border-radius-001-ref.xht
|
||||
border-top-left-radius-003.xht == border-top-left-radius-004.xht
|
||||
border-top-left-radius-004.xht == border-top-left-radius-003.xht
|
||||
|
@ -213,7 +215,7 @@ border-top-right-radius-009.xht == border-top-right-radius-007.xht
|
|||
border-top-right-radius-010.xht == reference/border-radius-001-ref.xht
|
||||
border-top-right-radius-011.xht == reference/border-radius-001-ref.xht
|
||||
border-top-right-radius-014.xht == reference/border-radius-001-ref.xht
|
||||
box-shadow-001.xht == reference/box-shadow-001-ref.xht
|
||||
box-shadow-005.xht == reference/box-shadow-005-ref.xht
|
||||
box-shadow-inset-spread-without-border-radius.xht == reference/box-shadow-inset-spread-without-border-radius.xht
|
||||
box-shadow-inset-without-border-radius.xht == reference/box-shadow-inset-without-border-radius.xht
|
||||
box-shadow-outset-spread-without-border-radius.xht == reference/box-shadow-outset-spread-without-border-radius.xht
|
||||
|
|
|
@ -32,7 +32,7 @@
|
|||
<tbody id="s3">
|
||||
<tr><th><a href="chapter-3.xht">Chapter 3 -
|
||||
Backgrounds</a></th>
|
||||
<td>(383 Tests)</td></tr>
|
||||
<td>(385 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s4">
|
||||
<tr><th><a href="chapter-4.xht">Chapter 4 -
|
||||
|
@ -42,17 +42,17 @@
|
|||
<tbody id="s5">
|
||||
<tr><th><a href="chapter-5.xht">Chapter 5 -
|
||||
Rounded Corners</a></th>
|
||||
<td>(108 Tests)</td></tr>
|
||||
<td>(109 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s6">
|
||||
<tr><th><a href="chapter-6.xht">Chapter 6 -
|
||||
Border Images</a></th>
|
||||
<td>(33 Tests)</td></tr>
|
||||
<td>(34 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s7">
|
||||
<tr><th><a href="chapter-7.xht">Chapter 7 -
|
||||
Miscellaneous Effects</a></th>
|
||||
<td>(10 Tests)</td></tr>
|
||||
<td>(11 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s8">
|
||||
<tr><th><a href="chapter-8.xht">Chapter 8 -
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue