mirror of
https://github.com/servo/servo.git
synced 2025-08-12 08:55:32 +01:00
Update web-platform-tests to revision 58eb04cecbbec2e18531ab440225e38944a9c444
This commit is contained in:
Josh Matthews
Anthony Ramine
parent
25e8bf69e6
commit
665817d2a6
35333 changed files with 1818077 additions and 16036 deletions
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference: 60px by 60px green box</title>
|
||||
<link rel="author" title="Google" href="http://www.google.com/"/>
|
||||
</head>
|
||||
<body>
|
||||
<div style="width: 100px; height: 100px; background: url('../support/60x60-green.png') no-repeat;"><br></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 Reftest Reference</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
div
|
||||
{
|
||||
background-color: #CCC; /* medium gray-ish */
|
||||
border: black dotted 5px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
img {vertical-align: top;}
|
||||
/* otherwise, the image "sits" on the baseline inside line box. */
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is a filled green square with gray background, black dotted borders and <strong>no red</strong>.</p>
|
||||
|
||||
<div><img src="../support/50x50-green.png" height="150" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Reference: background-clip - initial value</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
height: 160px;
|
||||
width: 160px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Reference: background-clip - padding-box keyword value</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
height: 150px;
|
||||
left: 5px;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Reference: background-clip - content-box keyword value</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
left: 30px;
|
||||
position: relative;
|
||||
top: 30px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds and Borders Test: background-clip Reference</title>
|
||||
<link rel="author" title="James Wang" href="mailto:wangjian@ucweb.com">
|
||||
<style type="text/css">
|
||||
* { padding: 0; margin: 0; }
|
||||
#test-color-box {
|
||||
position: absolute;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
background-color: rgba(0, 255, 0, 1);
|
||||
border: 10px solid rgba(255, 0, 0, 1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test pass if the green box has a 10px width red edge</p>
|
||||
<!-- background -->
|
||||
<div id="test-color-box"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<title>background-image referance</title>
|
||||
<link rel="author" title="Justin Hill" href="http://www.justin-hill.com">
|
||||
<style>
|
||||
.green {
|
||||
top:50px;
|
||||
left:50px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p> Test passes if green image shows and no red visable.</p>
|
||||
<img class="green" src="../support/green.png">
|
||||
</body>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Ethan Malasky" href="mailto:emalasky@adobe.com">
|
||||
<meta name="flags" content="ahem image">
|
||||
<style type="text/css">
|
||||
#content {
|
||||
color: transparent;
|
||||
font: 100px Ahem;
|
||||
}
|
||||
#content > #foo {
|
||||
background-image: url("../support/cat.png"); /* 98 w. by 99px h. */
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if cat image is visible.</p>
|
||||
<div id="content"><span id="foo">X</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Reference</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
height: 60px;
|
||||
left: 5px;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
width: 60px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Reference</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Reference</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
height: 60px;
|
||||
left: 30px;
|
||||
position: relative;
|
||||
top: 30px;
|
||||
width: 60px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Reference</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<style>
|
||||
html {
|
||||
padding-left: 170px;
|
||||
}
|
||||
div {
|
||||
background-color: green;
|
||||
height: 60px;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 60px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square at the left of the page and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Reference</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
height: 55px;
|
||||
left: 5px;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
width: 55px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Background clip and border painting order</title>
|
||||
<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@webkit.org">
|
||||
<link rel="reviewer" title="Arron Eicholz" href="mailto:arronei@microsoft.com" /> <!-- 2012-10-27 -->
|
||||
<meta name="flags" content="">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a green rectangle below and no red visible on the page.</p>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Reference</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Reference</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Reference</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
left: 30px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
top: 30px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!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 Reftest Reference</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
img
|
||||
{
|
||||
height: 70px;
|
||||
vertical-align: top;
|
||||
width: 70px;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is 3 rows of 3 blue-and-orange squares and if there is <strong>no partially</strong> displayed squares and <strong>no red</strong>.</p>
|
||||
|
||||
<div><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><br /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><br /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!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 Reftest Reference</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
div {width: 196px;}
|
||||
|
||||
img {vertical-align: top;}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is 2 rows of 2 cats and if there is <strong>no partially</strong> displayed cat and <strong>no red</strong>.</p>
|
||||
|
||||
<div>
|
||||
<img alt="Image download support must be enabled" src="../support/cat.png" /><img alt="Image download support must be enabled" src="../support/cat.png" /><img alt="Image download support must be enabled" src="../support/cat.png" /><img alt="Image download support must be enabled" src="../support/cat.png" />
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!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 Reftest Reference</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
img
|
||||
{
|
||||
height: 60px;
|
||||
vertical-align: top;
|
||||
width: 52px;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is 3 rows of 3 blue-and-orange rectangles and if there is <strong>no partially</strong> displayed rectangles and <strong>no red</strong>.</p>
|
||||
|
||||
<div><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><br /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><br /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!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 Reftest Reference</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
img
|
||||
{
|
||||
height: 50px;
|
||||
vertical-align: top;
|
||||
width: 50px;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is 4 rows of 4 blue-and-orange squares and if there is <strong>no partially</strong> displayed square and <strong>no red</strong>.</p>
|
||||
|
||||
<div><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><br /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><br /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><br /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!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 Reftest Reference</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
img
|
||||
{
|
||||
height: 60px;
|
||||
vertical-align: top;
|
||||
width: 60px;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is 3 rows of 3 blue-and-orange squares and if there is <strong>no partially</strong> displayed squares and <strong>no red</strong>.</p>
|
||||
|
||||
<div><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><br /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><br /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!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 Reftest Reference</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
img
|
||||
{
|
||||
height: 50px;
|
||||
vertical-align: top;
|
||||
width: 50px;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is 1 column of 3 blue-and-orange squares and if there is <strong>no partially</strong> displayed square and <strong>no red</strong>.</p>
|
||||
|
||||
<div><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><br /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /><br /><img src="../support/100x100-blue-and-orange.png" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Background and Border Test:background-size conflicts with background-attachment</title>
|
||||
<link rel="author" title="xiaochun" href="mailto:stenders@163.com">
|
||||
<link rel="reviewer" title="Jinlong Zhang" href="mailto:jinlongz@oupeng.com"><!--2012/10/21-->
|
||||
<meta name="assert" content="The test passes if we can see the background-image is exactly same as above.">
|
||||
<style type="text/css">
|
||||
.backgroundSize{
|
||||
width:295px;
|
||||
height:289px;
|
||||
|
||||
background-image:url(../support/bg.jpg);
|
||||
background-repeat:no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The image used as background-image is :<br />
|
||||
<img src="../support/bg.jpg" />
|
||||
|
||||
<p>The test passes if we can see the background-image is exactly same as above.</p>
|
||||
<div class="container">
|
||||
<!-- This is the box that should only contains an image if the test passes -->
|
||||
<div class="backgroundSize">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds and Borders Test: background-clip_border-box</title>
|
||||
<link rel="author" title="Xiaoyan Jiang" href="mailto:dajiangxiaoyan@126.com">
|
||||
<link rel="reviewer" title="Jinlong Zhang" href="mailto:jinlongz@oupeng.com">
|
||||
<style type="text/css">
|
||||
/* Positioned container allows for the self-describing statement to still
|
||||
be visible in the case of failure */
|
||||
.container {
|
||||
position: absolute;
|
||||
}
|
||||
.ref {
|
||||
background-color: red;
|
||||
height: 130px;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
width: 130px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ref1 {
|
||||
height: 130px;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
width: 130px;
|
||||
position: absolute;
|
||||
border: blue dotted 5px ;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if border is blue and dotted without red background</p>
|
||||
<div class="container">
|
||||
<div class="ref"></div>
|
||||
<div class="ref1"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference File</title>
|
||||
<link rel="author" title="Ren Jing" href="mailto:reni2046@gmail.com">
|
||||
<style type="text/css">
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if diamonds in corners are red, and other diamonds are orange, there are 4 orange diamonds on each side.</p>
|
||||
<div class="container">
|
||||
<img class="result-image" alt="border-image-round-result" src="../support/border-image-round-result.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference File</title>
|
||||
<link rel="author" title="Ren Jing" href="mailto:reni2046@gmail.com">
|
||||
<style type="text/css">
|
||||
.result-image {
|
||||
width:224px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if orange diamonds on top and bottom border repeat 12 times, and orange diamonds on left and right border are stretched, diamonds in corners are red, and other diamonds are orange.</p>
|
||||
<div class="container">
|
||||
<img class="result-image" alt="border-image-result" src="../support/borderresult.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference File</title>
|
||||
<link rel="author" title="Ren Jing" href="mailto:reni2046@gmail.com">
|
||||
<style type="text/css">
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if diamonds in corners are red, and other diamonds are orange, there are 4 orange diamonds on each side.</p>
|
||||
<div class="container">
|
||||
<img class="result-image" alt="border-image-round-result" src="../support/border-image-round-result.png"></img>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- Submitted from TestTWF Paris -->
|
||||
<head>
|
||||
<title>CSS Test: Border Image: box with spaced repeating border image</title>
|
||||
<link rel="author" title="Levi Weintraub" href="mailto:leviw@chromium.org">
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
}
|
||||
.borderContainer {
|
||||
width: 108px;
|
||||
height: 108px;
|
||||
position: relative;
|
||||
}
|
||||
.borderContainer > div {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
}
|
||||
.corner {
|
||||
background-image: url('../support/border.png');
|
||||
background-size: 60px 60px;
|
||||
}
|
||||
.edge {
|
||||
background-image: url('../support/border.png');
|
||||
background-position: left -20px;
|
||||
background-size: 60px 60px;
|
||||
}
|
||||
.left {
|
||||
left: 0px;
|
||||
}
|
||||
.left1 {
|
||||
left: 22px;
|
||||
}
|
||||
.left2 {
|
||||
left: 44px;
|
||||
}
|
||||
.left3 {
|
||||
left: 66px;
|
||||
}
|
||||
.right {
|
||||
right: 0px;
|
||||
}
|
||||
.top {
|
||||
top: 0px;
|
||||
}
|
||||
.top1 {
|
||||
top: 22px;
|
||||
}
|
||||
.top2 {
|
||||
top: 44px;
|
||||
}
|
||||
.top3 {
|
||||
top: 66px;
|
||||
}
|
||||
.bottom {
|
||||
bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>There should be a green box below with red diamonds in the corners, and three yellow diamonds evenly spaced
|
||||
apart along the edges.</p>
|
||||
<div class="borderContainer">
|
||||
<div class="corner top left"></div><div class="edge top left1"></div><div class="edge top left2"></div><div class="edge top left3"></div><div class="corner top right"></div>
|
||||
<div class="edge left top1"></div><div class="edge right top1"></div>
|
||||
<div class="edge left top2"></div><div class="edge right top2"></div>
|
||||
<div class="edge left top3"></div><div class="edge right top3"></div>
|
||||
<div class="corner bottom left"></div><div class="edge bottom left1"></div><div class="edge bottom left2"></div><div class="edge bottom left3"></div><div class="corner bottom right"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Border radius clipping</title>
|
||||
<link rel="author" title="zhouli" href="mailto:liz@oupeng.com">
|
||||
<style>
|
||||
#parent{
|
||||
border-radius: 15px;
|
||||
border: 1px solid blue;
|
||||
overflow: hidden;
|
||||
width: 300px;
|
||||
height: 30px;
|
||||
background-color: green;
|
||||
}
|
||||
#son{
|
||||
width: 300px;
|
||||
height: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="parent">
|
||||
<div id="son"></div>
|
||||
</div>
|
||||
<script>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test Background: border-radius property if horizontal value is zero</title>
|
||||
<link rel="author" title="Marc Silverman" href="mailto:silverman@adobe.com">
|
||||
<style type="text/css">
|
||||
#rounded-div {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 5px;
|
||||
width: 13em;
|
||||
height: 8em;
|
||||
border: solid 1em green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if the rectangle has four square corners (no red is shown).</p>
|
||||
<div id="rounded-div">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test Background: Box-Shadow property</title>
|
||||
<link rel="author" title="Marc Silverman" href="mailto:silverman@adobe.com">
|
||||
<style type="text/css">
|
||||
#box-div {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 5px;
|
||||
background-color:#000;
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
}
|
||||
#shadow-div {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 15px;
|
||||
background-color:#00ff00;
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green drop shadow and no red.</p>
|
||||
<div id="shadow-div">
|
||||
</div>
|
||||
<div id="box-div">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference File</title>
|
||||
<link rel="author" title="Zhang Xiaochong" href="mailto:joy.xczhang@gmail.com">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
.ref {
|
||||
background-color: green;
|
||||
height: 150px;
|
||||
position: absolute;
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a filled green square and no red.</p>
|
||||
<div class="container">
|
||||
<div class="ref"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference File</title>
|
||||
<link rel="author" title="Zhang Xiaochong" href="mailto:joy.xczhang@gmail.com">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
.ref {
|
||||
background-color: green;
|
||||
height: 150px;
|
||||
position: absolute;
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a filled green square and no red.</p>
|
||||
<div class="container">
|
||||
<div class="ref"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference File</title>
|
||||
<link rel="author" title="Zhang Xiaochong" href="mailto:joy.xczhang@gmail.com">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
.ref {
|
||||
background-color: green;
|
||||
height: 160px;
|
||||
left: 5px;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
width: 160px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a filled green square and no red.</p>
|
||||
<div class="container">
|
||||
<div class="ref"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference File</title>
|
||||
<link rel="author" title="Zhang Xiaochong" href="mailto:joy.xczhang@gmail.com">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
.ref {
|
||||
background-color: green;
|
||||
height: 150px;
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a filled green square and no red.</p>
|
||||
<div class="container">
|
||||
<div class="ref"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!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 Reference</title>
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/>
|
||||
<style type="text/css">
|
||||
|
||||
.container {
|
||||
margin: 4px;
|
||||
border: solid green 4px;
|
||||
padding-top: 1px;
|
||||
border-style: none none solid solid;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>There must be 31 green L-shapes below and no red.</p>
|
||||
|
||||
<div id="c1" class="container"><div></div></div>
|
||||
<div id="c2" class="container"><div></div></div>
|
||||
<div id="c3" class="container"><div></div></div>
|
||||
<div id="c4" class="container"><div></div></div>
|
||||
<div id="c5" class="container"><div></div></div>
|
||||
<div id="c6" class="container"><div></div></div>
|
||||
<div id="i1" class="container"><div></div></div>
|
||||
<div id="i2" class="container"><div></div></div>
|
||||
<div id="i3" class="container"><div></div></div>
|
||||
<div id="i4" class="container"><div></div></div>
|
||||
<div id="i5" class="container"><div></div></div>
|
||||
<div id="i6" class="container"><div></div></div>
|
||||
<div id="i7" class="container"><div></div></div>
|
||||
<div id="ci1" class="container"><div></div></div>
|
||||
<div id="ci2" class="container"><div></div></div>
|
||||
<div id="ci3" class="container"><div></div></div>
|
||||
<div id="ci4" class="container"><div></div></div>
|
||||
<div id="ci5" class="container"><div></div></div>
|
||||
<div id="ci6" class="container"><div></div></div>
|
||||
<div id="ci11" class="container"><div></div></div>
|
||||
<div id="ci12" class="container"><div></div></div>
|
||||
<div id="ci13" class="container"><div></div></div>
|
||||
<div id="ci14" class="container"><div></div></div>
|
||||
<div id="ci15" class="container"><div></div></div>
|
||||
<div id="ci16" class="container"><div></div></div>
|
||||
<div id="ci21" class="container"><div></div></div>
|
||||
<div id="ci22" class="container"><div></div></div>
|
||||
<div id="ci23" class="container"><div></div></div>
|
||||
<div id="ci24" class="container"><div></div></div>
|
||||
<div id="ci25" class="container"><div></div></div>
|
||||
<div id="ci26" class="container"><div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS border-radius Test</title>
|
||||
<style type="text/css">
|
||||
.redSquare{
|
||||
position: absolute;
|
||||
top:50px;
|
||||
left:50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color:rgba(255, 0, 0, 1);
|
||||
}
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
top:50px;
|
||||
left:50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
/*border-radius: 50%;*/
|
||||
background:url(../support/y.png);
|
||||
}
|
||||
.container {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if you the green is inscribed circle of the red square.</p>
|
||||
<div class="container">
|
||||
<!-- This is the square that has a inscribed circle if the test passes -->
|
||||
<div id="red" class="redSquare"></div>
|
||||
<!-- This is the square being tested with the radius-->
|
||||
<div id="green" class="greenSquare"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS border-radius Test</title>
|
||||
<style type="text/css">
|
||||
.redSquare {
|
||||
position: absolute;
|
||||
left:50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-image:url(../support/yyy.png);
|
||||
}
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
left:50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-image:url(../support/yy.png);
|
||||
}
|
||||
.container {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is one graph with one color.</p>
|
||||
<div class="container">
|
||||
<!-- This is the graph that should not be visible if the test passes -->
|
||||
<div id="green" class="greenSquare"></div>
|
||||
<!-- This is the square being tested with the radius-->
|
||||
<div id="red" class="redSquare">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS box-shadow Test</title>
|
||||
<link rel="author" title="tmd" href="mailto:weisong4413@126.com">
|
||||
<style type="text/css">
|
||||
.greenSquare-shadow{
|
||||
position: absolute;
|
||||
top:50px;
|
||||
left:50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
Border-bottom-right-radius: 50px 50px;
|
||||
Border-top-left-radius: 50px 50px;
|
||||
background-color:rgba(0, 255, 0, 1);
|
||||
/*box-shadow: 110px 110px 0px 10px #000000;*/
|
||||
}
|
||||
.black-shadow{
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
left: 150px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
Border-bottom-right-radius: 60px 60px;
|
||||
Border-top-left-radius: 60px 60px;
|
||||
background-color:black;
|
||||
}
|
||||
.container {
|
||||
position: absolute;
|
||||
}
|
||||
/* This div should only be visible if the test fails */
|
||||
.redSquare {
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
left: 150px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
Border-bottom-right-radius: 60px 60px;
|
||||
Border-top-left-radius: 60px 60px;
|
||||
background-color:red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if you the green square's black shadow and it completely covers the red square.</p>
|
||||
<div class="container">
|
||||
<!-- This is the square that should not be visible if the test passes -->
|
||||
<div id="red" class="redSquare"></div>
|
||||
<!-- This is the square being tested with the shadow -->
|
||||
<div id="green" class="greenSquare-shadow"></div>
|
||||
<div id="black" class="black-shadow"></div>
|
||||
</div>
|
||||
<input type="button" value="Border radius?" onclick="fun_radius()">
|
||||
<script>
|
||||
var have_radius=true;
|
||||
var black=document.getElementById("black");
|
||||
var red=document.getElementById("red");
|
||||
var green=document.getElementById("green");
|
||||
function fun_radius(){
|
||||
if(have_radius){
|
||||
red.style.borderBottomRightRadius="0px";
|
||||
red.style.borderTopLeftRadius="0px";
|
||||
black.style.borderBottomRightRadius="0px";
|
||||
black.style.borderTopLeftRadius="0px";
|
||||
green.style.borderBottomRightRadius="0px";
|
||||
green.style.borderTopLeftRadius="0px"; have_radius=false;
|
||||
}else{
|
||||
red.style.borderBottomRightRadius="60px";
|
||||
red.style.borderTopLeftRadius="60px";
|
||||
black.style.borderBottomRightRadius="60px";
|
||||
black.style.borderTopLeftRadius="60px";
|
||||
green.style.borderBottomRightRadius="50px";
|
||||
green.style.borderTopLeftRadius="50px";
|
||||
have_radius=true;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Backgrounds Test:background clip property with value border-box</title>
|
||||
<link rel="author" title="yanshasha" href="mailto:yanshasha133@gmail.com" />
|
||||
<link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 -->
|
||||
<style type="text/css">
|
||||
.box {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
}
|
||||
.box div {
|
||||
position: absolute;
|
||||
}
|
||||
#div1 {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if there is only one green box.
|
||||
</p>
|
||||
<div class="box">
|
||||
<div id="div1"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Backgrounds Test:background clip property with value content-box</title>
|
||||
<link rel="author" title="yanshasha" href="mailto:yanshasha133@gmail.com" />
|
||||
<link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 -->
|
||||
<style type="text/css">
|
||||
.box {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
}
|
||||
.box div {
|
||||
position: absolute;
|
||||
}
|
||||
#div1 {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: green;
|
||||
}
|
||||
#div2 {
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
background-color: red;
|
||||
}
|
||||
#div3 {
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
right: 30px;
|
||||
bottom: 30px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if threre are three overlapping squares with different color(green,red and yellow from outside to inside).
|
||||
</p>
|
||||
<div class="box">
|
||||
<div id="div1"></div>
|
||||
<div id="div2"></div>
|
||||
<div id="div3"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Backgrounds Test:background clip property with value padding-box</title>
|
||||
<link rel="author" title="yanshasha" href="mailto:yanshasha133@gmail.com" />
|
||||
<link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 -->
|
||||
<style type="text/css">
|
||||
.box {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
}
|
||||
.box div {
|
||||
position: absolute;
|
||||
}
|
||||
#div1 {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: green;
|
||||
}
|
||||
#div2 {
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if threre are two overlapping squares with different color(green and yellow from outside to inside).
|
||||
</p>
|
||||
<div class="box">
|
||||
<div id="div1"></div>
|
||||
<div id="div2"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Background-clip Test: the background is pruned to content box</title>
|
||||
<link rel="author" title="Xie Bing" href="mailto:451887565@qq.com">
|
||||
<link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 -->
|
||||
<style type="text/css">
|
||||
.box{
|
||||
width:300px;
|
||||
height:300px;
|
||||
padding:50px;
|
||||
border:10px dashed #000000;
|
||||
}
|
||||
.inner{
|
||||
width:300px;
|
||||
height:300px;
|
||||
background-color:yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if the background is pruned to content box.</p>
|
||||
<div class="box">
|
||||
<div class="inner">Inner area!</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Backgrounds Test:background origin property with value border-box</title>
|
||||
<link rel="author" title="yanshasha" href="mailto:yanshasha133@gmail.com" />
|
||||
<link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 -->
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 12px dashed black;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
img {
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: -12px;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if some part of the green square is covered by the dashed border.
|
||||
</p>
|
||||
<div>
|
||||
<img src="../support/green-60-60.png" alt="green square" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Backgrounds Test:background origin property with value content-box</title>
|
||||
<link rel="author" title="yanshasha" href="mailto:yanshasha133@gmail.com" />
|
||||
<link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 -->
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 12px dashed black;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
img {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if there are some paddings between the green square and the dashed border.
|
||||
</p>
|
||||
<div>
|
||||
<img src="../support/green-60-60.png" alt="green square" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Backgrounds Test:background origin property with value content-box</title>
|
||||
<link rel="author" title="yanshasha" href="mailto:yanshasha133@gmail.com" />
|
||||
<link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 -->
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 12px dashed black;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if the green square is just close to the dashed border.
|
||||
</p>
|
||||
<div>
|
||||
<img src="../support/green-60-60.png" alt="green square" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Backgrounds Test:background size property</title>
|
||||
<link rel="author" title="yanshasha" href="mailto:yanshasha133@gmail.com" />
|
||||
<link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 -->
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
#div1 img {
|
||||
width: 30%;
|
||||
}
|
||||
#div2 img {
|
||||
width: 60%;
|
||||
}
|
||||
#div3 img {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if the following three green squares have different size.
|
||||
</p>
|
||||
<div id="div1"><img src="../support/green-150-150.png" alt="30% image" />
|
||||
</div>
|
||||
<div id="div2"><img src="../support/green-150-150.png" alt="60% image" />
|
||||
</div>
|
||||
<div id="div3"><img src="../support/green-150-150.png" alt="100% image" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS3 background-size:contain</title>
|
||||
<link rel="author" title="Yue Hu" href="mailto:miniwade514@gmail.com" />
|
||||
<link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 -->
|
||||
<style>
|
||||
div {
|
||||
width: 200px;
|
||||
height: 250px;
|
||||
border: 5px dashed black;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if the green box image is scaled to fit the width of the outer box, while preserving its intrinsic aspect ratio.</p>
|
||||
<div>
|
||||
<img src="../support/60x60-green.png" alt="" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Background-size Test: the size of the background image</title>
|
||||
<link rel="author" title="Xie Bing" href="mailto:451887565@qq.com">
|
||||
<link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 -->
|
||||
<style type="text/css">
|
||||
img{
|
||||
width:30px;
|
||||
height:30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if the green box is resized to 50%.</p>
|
||||
<img src="../support/60x60-green.png">
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Border Test:border image repeat property with value repeat</title>
|
||||
<link rel="author" title="yanshasha" href="mailto:yanshasha133@gmail.com" />
|
||||
<link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 -->
|
||||
<style type="text/css">
|
||||
.box {
|
||||
width: 152px;
|
||||
height: 152px;
|
||||
position: relative;
|
||||
}
|
||||
.red {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
}
|
||||
#red1 {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
#red2 {
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
#red3 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
#red4 {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.blue {
|
||||
position: absolute;
|
||||
background-image: url(../support/blue-diamond.png);
|
||||
background-repeat: repeat;
|
||||
background-position: center;
|
||||
}
|
||||
#blue1 {
|
||||
top: 0;
|
||||
left: 26px;
|
||||
width: 100px;
|
||||
height: 26px;
|
||||
}
|
||||
#blue2 {
|
||||
top: 26px;
|
||||
right: 0;
|
||||
width: 26px;
|
||||
height: 100px;
|
||||
}
|
||||
#blue3 {
|
||||
bottom: 0;
|
||||
right: 26px;
|
||||
width: 100px;
|
||||
height: 26px;
|
||||
}
|
||||
#blue4 {
|
||||
bottom: 26px;
|
||||
left: 0;
|
||||
width: 26px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if the blue diamond is repeating between the red diamonds.
|
||||
</p>
|
||||
<div class="box">
|
||||
<img src="../support/red-diamond.png" alt="left top red diamond" class="red" id="red1"/>
|
||||
<img src="../support/red-diamond.png" alt="right top red diamond" class="red" id="red2" />
|
||||
<img src="../support/red-diamond.png" alt="right bottom red diamond" class="red" id="red3" />
|
||||
<img src="../support/red-diamond.png" alt="left bottom red diamond" class="red" id="red4" />
|
||||
<img src="../support/blue-diamond.png" alt="top blue diamond" class="blue" id="blue1"/>
|
||||
<img src="../support/blue-diamond.png" alt="right blue diamond" class="blue" id="blue2" />
|
||||
<img src="../support/blue-diamond.png" alt="bottom blue diamond" class="blue" id="blue3" />
|
||||
<img src="../support/blue-diamond.png" alt="left blue diamond" class="blue" id="blue4" />
|
||||
<div class="blue" id="blue1"></div>
|
||||
<div class="blue" id="blue2"></div>
|
||||
<div class="blue" id="blue3"></div>
|
||||
<div class="blue" id="blue4"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Border Test:border image repeat property with value stretch</title>
|
||||
<link rel="author" title="yanshasha" href="mailto:yanshasha133@gmail.com" />
|
||||
<link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 -->
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 152px;
|
||||
height: 152px;
|
||||
position: relative;
|
||||
}
|
||||
.red {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
}
|
||||
#red1 {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
#red2 {
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
#red3 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
#red4 {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.blue {
|
||||
position: absolute;
|
||||
}
|
||||
#blue1 {
|
||||
top: 0;
|
||||
left: 26px;
|
||||
width: 100px;
|
||||
height: 26px;
|
||||
}
|
||||
#blue2 {
|
||||
top: 26px;
|
||||
right: 0;
|
||||
width: 26px;
|
||||
height: 100px;
|
||||
}
|
||||
#blue3 {
|
||||
bottom: 0;
|
||||
right: 26px;
|
||||
width: 100px;
|
||||
height: 26px;
|
||||
}
|
||||
#blue4 {
|
||||
bottom: 26px;
|
||||
left: 0;
|
||||
width: 26px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if the blue diamond is stretching between the red diamonds.
|
||||
</p>
|
||||
<div>
|
||||
<img src="../support/red-diamond.png" alt="left top red diamond" class="red" id="red1"/>
|
||||
<img src="../support/red-diamond.png" alt="right top red diamond" class="red" id="red2" />
|
||||
<img src="../support/red-diamond.png" alt="right bottom red diamond" class="red" id="red3" />
|
||||
<img src="../support/red-diamond.png" alt="left bottom red diamond" class="red" id="red4" />
|
||||
<img src="../support/blue-diamond.png" alt="top blue diamond" class="blue" id="blue1"/>
|
||||
<img src="../support/blue-diamond.png" alt="right blue diamond" class="blue" id="blue2" />
|
||||
<img src="../support/blue-diamond.png" alt="bottom blue diamond" class="blue" id="blue3" />
|
||||
<img src="../support/blue-diamond.png" alt="left blue diamond" class="blue" id="blue4" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Border Test:border image source property</title>
|
||||
<link rel="author" title="yanshasha" href="mailto:yanshasha133@gmail.com" />
|
||||
<link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 -->
|
||||
<style type="text/css">
|
||||
div {
|
||||
background-color: yellow;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
position: relative;
|
||||
}
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
}
|
||||
#img1 {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
#img2 {
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
#img3 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
#img4 {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The test passes if there are four green squares at each corner of the yellow square and no red border can be seen.
|
||||
</p>
|
||||
<div>
|
||||
<img src="../support/green-60-60.png" id="img1" alt="baidu logo at left top" />
|
||||
<img src="../support/green-60-60.png" id="img2" alt="baidu logo at right top" />
|
||||
<img src="../support/green-60-60.png" id="img3" alt="baidu logo at right bottom" />
|
||||
<img src="../support/green-60-60.png" id="img4" alt="baidu logo at left bottom" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Box-shadow Test: the test passes if adding one or more shadow to the box</title>
|
||||
<link rel="author" title="Xie Bing" href="mailto:451887565@qq.com">
|
||||
<link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 -->
|
||||
<style type="text/css">
|
||||
.wrapper{
|
||||
position:relative;
|
||||
}
|
||||
.first{
|
||||
width:300px;
|
||||
height:100px;
|
||||
background-color:#ff9900;
|
||||
position:absolute;
|
||||
z-index:500;
|
||||
}
|
||||
.second{
|
||||
width:300px;
|
||||
height:100px;
|
||||
background-color:#000;
|
||||
position:absolute;
|
||||
top:10px;
|
||||
left:10px;
|
||||
z-index:100;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a black shadow behind the orange box.</p>
|
||||
<div class="wrapper">
|
||||
<div class="first"></div>
|
||||
<div class="second"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Ethan Malasky" href="mailto:emalasky@adobe.com">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red.</p>
|
||||
<div class="test"> </div>
|
||||
<div class="test"> A</div>
|
||||
<div class="test"> </div>
|
||||
<div class="test"> B</div></body>
|
||||
<div class="test"> </div>
|
||||
<div class="test"> C</div></body>
|
||||
<div class="test"> </div>
|
||||
<div class="test"> D</div></body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!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 Reftest Reference</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is a filled black square.</p>
|
||||
|
||||
<div><img src="../support/black96x96.png" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!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 Reftest Reference</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is <strong>no red</strong>.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>CSS Background and Borders Test:background-clip_pending-box</title>
|
||||
<link rel="author" title="anping" href="mailto:zhuanping123@163.com" />
|
||||
<meta content="Check if the border-clip works.">
|
||||
<style>
|
||||
div{
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
#outside{
|
||||
|
||||
border: blue dotted 5px;
|
||||
height: 120px;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
width: 120px;
|
||||
background-color:transparent;
|
||||
|
||||
}
|
||||
#inside{
|
||||
|
||||
border: transparent;
|
||||
height: 100px;
|
||||
left: 25px;
|
||||
top: 25px;
|
||||
width: 100px;
|
||||
background-color:red;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
<head/>
|
||||
<body>
|
||||
<p>
|
||||
"Test passes if the border is blue dotted without red."
|
||||
</p>
|
||||
<div id="container">
|
||||
|
||||
<div id="outside"></div>
|
||||
<div id="inside"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference File</title>
|
||||
<link rel="author reviewer" title="Jinlong Zhang" href="mailto:jinlongz@oupeng.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius-tables">
|
||||
<style type="text/css">
|
||||
#testCon{border: 4px solid green; border-collapse: collapse;}
|
||||
#testCon td{width: 60px; height: 60px; border: 4px solid green;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if table's 'border-radius' style don't work.</p>
|
||||
<p>CSS3 UAs should ignore border-radius properties applied to internal table elements when 'border-collapse' is 'collapse'.</p>
|
||||
<table id="testCon">
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue