Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-09 23:45:35 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update CSS tests to revision 31d63cc79bd4c929ed582229e936d7b389f3e6ab

Browse source
This commit is contained in:
James Graham 2015-03-27 09:18:12 +00:00
parent 1a81b18b9f
commit 2c9faf5363
91915 changed files with 5979820 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

10
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/60x60-green-background.xht Normal file
View file

@ -0,0 +1,10 @@
<!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: 60px by 60px green box</title>
<link href="http://www.google.com/" rel="author" title="Google" />
</head>
<body>
<div style="width: 100px; height: 100px; background: url('../support/60x60-green.png') no-repeat;"><br /></div>
</body></html>

19
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/attachment-local-clipping-color-1-ref.xht Normal file
View file

@ -0,0 +1,19 @@
<!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: background-attachment: local</title>
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin" />
<style>
#outer {
width: 200px;
height: 200px;
padding: 40px;
border: 10px dashed;
background: green padding-box;
}
p {
margin-top: 5px;
}
</style>
</head><body><div id="outer">
<p>Test</p>
</div>
</body></html>

19
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/attachment-local-clipping-color-3-ref.xht Normal file
View file

@ -0,0 +1,19 @@
<!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: background-attachment: local</title>
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin" />
<style>
#outer {
width: 200px;
height: 255px;
padding: 25px 40px 0;
border: 10px dashed;
background: green content-box;
}
p {
margin-top: 20px;
}
</style>
</head><body><div id="outer">
<p>Test</p>
</div>
</body></html>

20
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/attachment-local-clipping-color-4-ref.xht Normal file
View file

@ -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: background-attachment: local</title>
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin" />
<style>
#outer {
width: 200px;
height: 200px;
padding: 40px;
border: 10px double;
border-radius: 50%;
background: green padding-box;
}
p {
margin-top: 5px;
}
</style>
</head><body><div id="outer">
<p>Test</p>
</div>
</body></html>

28
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/attachment-local-clipping-color-6-ref.xht Normal file
View file

@ -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: background-attachment: local</title>
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin" />
<style>
#outer {
width: 200px;
height: 200px;
padding: 40px;
border: 10px double;
overflow: hidden;
border-radius: 50%;
}
#outer div {
background: green;
height: 500px;
margin-top: -15px;
}
p {
margin-top: 0;
padding-top: 20px;
}
</style>
</head><body><div id="outer">
<div>
<p>Test</p>
</div>
</div>
</body></html>

19
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/attachment-local-clipping-image-1-ref.xht Normal file
View file

@ -0,0 +1,19 @@
<!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: background-attachment: local</title>
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin" />
<style>
#outer {
width: 200px;
height: 200px;
padding: 40px;
border: 10px dashed;
background: url(aqua-yellow-32x32.png) padding-box top -15px left 0;
}
p {
margin-top: 5px;
}
</style>
</head><body><div id="outer">
<p>Test</p>
</div>
</body></html>

19
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/attachment-local-clipping-image-3-ref.xht Normal file
View file

@ -0,0 +1,19 @@
<!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: background-attachment: local</title>
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin" />
<style>
#outer {
width: 200px;
height: 255px;
padding: 25px 40px 0;
border: 10px dashed;
background: url(aqua-yellow-32x32.png) content-box;
}
p {
margin-top: 20px;
}
</style>
</head><body><div id="outer">
<p>Test</p>
</div>
</body></html>

20
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/attachment-local-clipping-image-4-ref.xht Normal file
View file

@ -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: background-attachment: local</title>
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin" />
<style>
#outer {
width: 200px;
height: 200px;
padding: 40px;
border: 10px double;
border-radius: 50%;
background: url(aqua-yellow-32x32.png) padding-box top -15px left 0;
}
p {
margin-top: 5px;
}
</style>
</head><body><div id="outer">
<p>Test</p>
</div>
</body></html>

28
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/attachment-local-clipping-image-6-ref.xht Normal file
View file

@ -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: background-attachment: local</title>
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin" />
<style>
#outer {
width: 200px;
height: 200px;
padding: 40px;
border: 10px double;
overflow: hidden;
border-radius: 50%;
}
#outer div {
background: url(aqua-yellow-32x32.png);
height: 500px;
margin-top: -15px;
}
p {
margin-top: 0;
padding-top: 20px;
}
</style>
</head><body><div id="outer">
<div>
<p>Test</p>
</div>
</div>
</body></html>

26
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/attachment-local-positioning-2-ref.xht Normal file
View file

@ -0,0 +1,26 @@
<!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: background-attachment: local</title>
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin" />
<style>
#outer {
border: solid;
background: url(aqua-yellow-32x32.png) local no-repeat 178px 278px;
overflow: hidden;
width: 200px;
height: 300px;
}
div div {
width: 250px;
height: 370px;
}
p {
margin: 0 0 0 -40px;
padding-top: 40px;
}
</style>
</head><body><div id="outer">
<div>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</body></html>

30
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/attachment-local-positioning-3-ref.xht Normal file
View file

@ -0,0 +1,30 @@
<!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: background-attachment: local</title>
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin" />
<style>
#outer {
border: solid;
background: url(aqua-yellow-32x32.png) local no-repeat 178px 278px;
overflow: hidden;
width: 200px;
height: 300px;
}
div div {
width: 250px;
height: 370px;
}
p {
margin: 0;
padding-top: 100px;
text-align: right;
position: relative;
top: -60px;
left: -40px;
}
</style>
</head><body><div id="outer">
<div>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</body></html>

30
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/attachment-local-positioning-4-ref.xht Normal file
View file

@ -0,0 +1,30 @@
<!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: background-attachment: local</title>
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin" />
<style>
#outer {
border: solid;
background: url(aqua-yellow-32x32.png) local no-repeat -10px -10px;
overflow: hidden;
width: 200px;
height: 300px;
}
div div {
width: 250px;
height: 370px;
}
p {
margin: 0;
padding-top: 100px;
text-align: right;
position: relative;
top: -10px;
left: -10px;
}
</style>
</head><body><div id="outer">
<div>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</body></html>

19
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/attachment-local-positioning-5-ref.xht Normal file
View file

@ -0,0 +1,19 @@
<!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: background-attachment: local</title>
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin" />
<style>
div {
background: url(aqua-yellow-32x32.png) no-repeat 30px 25px;
overflow: hidden;
height: 200px;
}
p {
padding-left: 30px;
padding-top: 125px;
height: 500px;
}
</style>
</head><body><div>
<p>Test</p>
</div>
</body></html>

18
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/attachment-scroll-positioning-1-ref.xht Normal file
View file

@ -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: background-attachment: scroll</title>
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin" />
<style>
div {
background: url(aqua-yellow-32x32.png) no-repeat 100px 100px;
overflow: hidden;
height: 200px;
}
p {
padding-top: 40px;
height: 500px;
}
</style>
</head><body><div>
<p>Test</p>
</div>
</body></html>

19
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-001-ref.xht Normal file
View file

@ -0,0 +1,19 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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 green rectangle across the page.</p>
<div><img src="support/1x1-green.png" width="100%" height="50" alt="Image download support must be enabled" /></div>
</body>
</html>

23
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-003-ref.xht Normal file
View file

@ -0,0 +1,23 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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 {height: 5in;}
]]></style>
</head>
<body>
<p>Test passes if there is a green stripe across the page.</p>
<div><img src="support/1x1-green.png" width="100%" height="15" alt="Image download support must be enabled" /></div>
</body>
</html>

31
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-334-ref.xht Normal file
View file

@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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>

17
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-clip-002-ref.xht Normal file
View file

@ -0,0 +1,17 @@
<!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><meta charset="utf-8" />
<title>CSS Backgrounds and Borders Reference: background-clip - initial value</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<style>
div {
background-color: green;
height: 160px;
width: 160px;
}
</style>
</head><body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body></html>

19
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-clip-004-ref.xht Normal file
View file

@ -0,0 +1,19 @@
<!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><meta charset="utf-8" />
<title>CSS Backgrounds and Borders Reference: background-clip - padding-box keyword value</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<style>
div {
background-color: green;
height: 150px;
left: 5px;
position: relative;
top: 5px;
width: 150px;
}
</style>
</head><body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body></html>

19
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-clip-005-ref.xht Normal file
View file

@ -0,0 +1,19 @@
<!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><meta charset="utf-8" />
<title>CSS Backgrounds and Borders Reference: background-clip - content-box keyword value</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<style>
div {
background-color: green;
height: 100px;
left: 30px;
position: relative;
top: 30px;
width: 100px;
}
</style>
</head><body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body></html>

22
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-clip-content-box-ref.xht Normal file
View file

@ -0,0 +1,22 @@
<!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 Backgrounds and Borders Test: background-clip Reference</title>
<link href="mailto:wangjian@ucweb.com" rel="author" title="James Wang" />
<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>

14
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-image-001-ref.xht Normal file
View file

@ -0,0 +1,14 @@
<!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>background-image referance</title>
<link href="
http://www.justin-hill.com" rel="author" title="Justin Hill" />
<style>
.green {
top:50px;
left:50px;
}
</style>
</head><body>
<p> Test passes if green image shows and no red visable.</p>
<img src="../green.png" class="green" />
</body></html>

23
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-image-first-letter-ref.xht Normal file
View file

@ -0,0 +1,23 @@
<!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 href="mailto:emalasky@adobe.com" rel="author" title="Ethan Malasky" />
<meta content="ahem image" name="flags" />
<style type="text/css">
#content {
color: transparent;
font: 100px Ahem;
}
#content &gt; #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>

28
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-intrinsic-ref.xht Normal file
View file

@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test Reference</title>
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact" />
<meta name="flags" content="svg" />
<style type="text/css">
/* Setup. Use 5:6 ratio because it's weird and unlikely to be hard-coded anywhere. */
div {
position: relative;
width: 120px;
height: 120px;
margin: 0.5em;
background: green;
}
</style>
</head>
<body>
<p>There must be two green boxes below and no red.</p>
<div class="cover">
</div>
<div class="limit">
</div>
</body>
</html>

20
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-origin-002-ref.xht Normal file
View file

@ -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><meta charset="utf-8" />
<title>CSS Backgrounds and Borders Reference</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<style>
div {
background-color: green;
height: 60px;
left: 5px;
position: relative;
top: 5px;
width: 60px;
}
</style>
</head><body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body></html>

16
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-origin-004-ref.xht Normal file
View file

@ -0,0 +1,16 @@
<!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><meta charset="utf-8" />
<title>CSS Backgrounds and Borders Reference</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<style>
div {
background-color: green;
height: 60px;
width: 60px;
}
</style>
</head><body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body></html>

19
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-origin-005-ref.xht Normal file
View file

@ -0,0 +1,19 @@
<!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><meta charset="utf-8" />
<title>CSS Backgrounds and Borders Reference</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<style>
div {
background-color: green;
height: 60px;
left: 30px;
position: relative;
top: 30px;
width: 60px;
}
</style>
</head><body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body></html>

22
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-origin-006-ref.xht Normal file
View file

@ -0,0 +1,22 @@
<!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><meta charset="utf-8" />
<title>CSS Backgrounds and Borders Reference</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<style>
html {
padding-left: 170px;
}
div {
background-color: green;
height: 60px;
left: 0px;
position: absolute;
top: 0px;
width: 60px;
}
</style>
</head><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></html>

19
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-origin-007-ref.xht Normal file
View file

@ -0,0 +1,19 @@
<!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><meta charset="utf-8" />
<title>CSS Backgrounds and Borders Reference</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<style>
div {
background-color: green;
height: 55px;
left: 5px;
position: relative;
top: 5px;
width: 55px;
}
</style>
</head><body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body></html>

20
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-paint-order-001-ref.xht Normal file
View file

@ -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 Test: Background clip and border painting order</title>
<link href="mailto:jchaffraix@webkit.org" rel="author" title="Julien Chaffraix" />
<link href="mailto:arronei@microsoft.com" rel="reviewer" title="Arron Eicholz" /> <!-- 2012-10-27 -->
<meta content="" name="flags" />
<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>

23
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-repeat-no-repeat.xht Normal file
View file

@ -0,0 +1,23 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test Reference: background-repeat:no-repeat</title>
<link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/" />
<style type="text/css">
<![CDATA[
div {
background-color: grey;
height: 150px;
width: 240px;
}
]]>
</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 appears once in the below rectangle. There should be a grey area to the right and bottom of the image.</p>
<div>
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" />
</div>
</body>
</html>

40
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-repeat-repeat-x.xht Normal file
View file

@ -0,0 +1,40 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test Reference: background-repeat:repeat-x</title>
<link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/" />
<style type="text/css">
<![CDATA[
div {
background-color: grey;
height: 150px;
width: 240px;
position: relative;
overflow: hidden;
}
div > img {
position: absolute;
top: 0;
}
div > img.first {
left: 0;
}
div > img.second {
left: 96px;
}
div > img.third {
left: 192px;
}
]]>
</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 horizontally in the below rectangle 2&frac12; times exactly. There should be a grey area below the images, but not to their right.</p>
<div>
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" class="first" />
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" class="second" />
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" class="third" />
</div>
</body>
</html>

40
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-repeat-repeat-y.xht Normal file
View file

@ -0,0 +1,40 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test Reference: background-repeat:repeat-y</title>
<link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/" />
<style type="text/css">
<![CDATA[
div {
background-color: grey;
height: 150px;
width: 240px;
position: relative;
overflow: hidden;
}
div > img {
position: absolute;
left: 0;
}
div > img.first {
top: 0;
}
div > img.second {
top: 60px;
}
div > img.third {
top: 120px;
}
]]>
</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 vertically in the below rectangle 2&frac12; times exactly. There should be a grey area to the right of the images, but not below them.</p>
<div>
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" class="first" />
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" class="second" />
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" class="third" />
</div>
</body>
</html>

39
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-repeat-round-roundup.xht Normal file
View file

@ -0,0 +1,39 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test Reference: background-repeat:round, rounding up</title>
<link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/" />
<style type="text/css">
<![CDATA[
div {
height: 212px;
width: 252px;
}
div > img {
float: left;
height: 53px;
width: 84px;
}
]]>
</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 12 times exactly: 3 columns, 4 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 less than 12 times, with partial images lining the right and the bottom.</p>
<div>
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" />
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" />
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" />
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" />
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" />
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" />
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" />
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" />
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" />
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" />
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" />
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" />
</div>
</body>
</html>

33
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-repeat-round.xht Normal file
View file

@ -0,0 +1,33 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test Reference: background-repeat:round</title>
<link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/" />
<style type="text/css">
<![CDATA[
div {
height: 210px;
width: 236px;
}
div > img {
float: left;
height: 68px;
width: 118px;
}
]]>
</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>
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" />
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" />
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" />
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" />
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" />
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" />
</div>
</body>
</html>

40
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-repeat-space.xht Normal file
View file

@ -0,0 +1,40 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test Reference: background-repeat:space</title>
<link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/" />
<style type="text/css">
<![CDATA[
div {
background-color: grey;
height: 204px;
width: 236px;
}
div > img {
float: left;
margin-bottom: 12px;
margin-right: 44px;
}
div > img.second {
margin-right: 0;
}
div > img.bottom {
margin-bottom: 0;
}
]]>
</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 grey rectangle 6 times exactly: 2 columns, 3 rows. The images should appear at exactly the same size as the image above and be sitting at the edges of the grey rectangle.</p>
<p>Test fails if the above image repeats in the below rectangle more than 6 times, with partial images lining the right and the bottom.</p>
<div>
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" />
<img src="support/rectangle-96x60.png" class="second" alt="Image download support must be enabled" />
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" />
<img src="support/rectangle-96x60.png" class="second" alt="Image download support must be enabled" />
<img src="support/rectangle-96x60.png" class="bottom" alt="Image download support must be enabled" />
<img src="support/rectangle-96x60.png" class="bottom second" alt="Image download support must be enabled" />
</div>
</body>
</html>

16
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-size-002-ref.xht Normal file
View file

@ -0,0 +1,16 @@
<!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><meta charset="utf-8" />
<title>CSS Backgrounds and Borders Reference</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<style>
div {
background-color: green;
height: 60px;
width: 60px;
}
</style>
</head><body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body></html>

16
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-size-006-ref.xht Normal file
View file

@ -0,0 +1,16 @@
<!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><meta charset="utf-8" />
<title>CSS Backgrounds and Borders Reference</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<style>
div {
background-color: green;
height: 45px;
width: 45px;
}
</style>
</head><body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body></html>

20
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-size-021-ref.xht Normal file
View file

@ -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><meta charset="utf-8" />
<title>CSS Backgrounds and Borders Reference</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<style>
div {
background-color: green;
left: 30px;
height: 100px;
position: relative;
top: 30px;
width: 100px;
}
</style>
</head><body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body></html>

28
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-size-025-ref.xht Normal file
View file

@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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>

27
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-size-026-ref.xht Normal file
View file

@ -0,0 +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">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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>

28
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-size-027-ref.xht Normal file
View file

@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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>

28
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-size-028-ref.xht Normal file
View file

@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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>

28
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-size-029-ref.xht Normal file
View file

@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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>

28
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-size-031-ref.xht Normal file
View file

@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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>

39
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-size-contain.xht Normal file
View file

@ -0,0 +1,39 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test Reference: background-size:contain</title>
<link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/" />
<style type="text/css">
<![CDATA[
div {
background-color: red;
height: 200px;
width: 200px;
position: relative;
overflow: hidden;
}
div > img {
height: 125px;
width: 200px;
position: absolute;
left: 0;
}
div > img.first {
top: 0;
}
div > img.second {
top: 125px;
}
]]>
</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 appears, scaled and repeating vertically, inside the below square.</p>
<p>Test fails if any red area is seen outside of the image.</p>
<div>
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" class="first" />
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" class="second" />
</div>
</body>
</html>

29
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-size-cover.xht Normal file
View file

@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test Reference: background-size:cover</title>
<link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/" />
<style type="text/css">
<![CDATA[
div {
background-color: red;
height: 200px;
width: 200px;
overflow: hidden;
}
div > img {
height: 200px;
width: 320px;
}
]]>
</style>
</head>
<body>
<p><img src="support/rectangle-96x60.png" alt="Image download support must be enabled" /></p>
<p>Test passes if a scaled portion of above image appears inside the below square.</p>
<p>Test fails if any red area is seen outside of the image.</p>
<div>
<img src="support/rectangle-96x60.png" alt="Image download support must be enabled" />
</div>
</body>
</html>

29
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-size-ref.xht Normal file
View file

@ -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 Background and Border Test:background-size conflicts with background-attachment</title>
<link href="stenders@163.com" rel="author" title="xiaochun" />
<link href="jinlongz@oupeng.com" rel="reviewer" title="Jinlong Zhang" /><!--2012/10/21-->
<meta content="The test passes if we can see the background-image is exactly same as above." name="assert" />
<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>

49
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-size-vector-001-ref.xht Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reftest Reference</title>
<link href="http://whereswalden.com/" rel="author" title="Jeff Walden" />
<style type="text/css">
div#outer
{
border: black solid 8px;
height: 384px;
width: 128px;
}
div#inner
{
height: 64px;
width: 16px;
}
div#inner &gt; div
{
height: 32px;
width: 16px;
}
div#top {background-color: lime;}
div#bottom {background-color: aqua;}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="top"></div>
<div id="bottom"></div>
</div>
</div>
</body></html>

54
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-size-vector-008-ref.xht Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<!--
The original and initial filename of this reference file was
ref-tall-lime32x16-aqua32x16.html
-->
<title>CSS Reftest Reference</title>
<link href="http://whereswalden.com/" rel="author" title="Jeff Walden" />
<style type="text/css">
div#outer
{
border: black solid 8px;
height: 384px;
width: 128px;
}
div#inner
{
height: 32px;
width: 16px;
}
div#inner &gt; div
{
height: 16px;
width: 16px;
}
div#top {background-color: lime;}
div#bottom {background-color: aqua;}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="top"></div>
<div id="bottom"></div>
</div>
</div>
</body></html>

54
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-size-vector-021-ref.xht Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<!--
The original and initial filename of this reference file was
ref-tall-lime8x64-aqua8x64.html
-->
<title>CSS Reftest Reference</title>
<link href="http://whereswalden.com/" rel="author" title="Jeff Walden" />
<style type="text/css">
div#outer
{
border: black solid 8px;
height: 384px;
width: 128px;
}
div#inner
{
height: 128px;
width: 8px;
}
div#inner &gt; div
{
height: 64px;
width: 8px;
}
div#top {background-color: lime;}
div#bottom {background-color: aqua;}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="top"></div>
<div id="bottom"></div>
</div>
</div>
</body></html>

54
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background-size-vector-022-ref.xht Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<!--
The original and initial filename of this reference file was
ref-tall-lime8x384-aqua8x384.html
-->
<title>CSS Reftest Reference</title>
<link href="http://whereswalden.com/" rel="author" title="Jeff Walden" />
<style type="text/css">
div#outer
{
border: black solid 8px;
height: 384px;
width: 128px;
}
div#inner
{
height: 384px;
width: 8px;
}
div#inner &gt; div
{
height: 192px;
width: 8px;
}
div#top {background-color: lime;}
div#bottom {background-color: aqua;}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="top"></div>
<div id="bottom"></div>
</div>
</div>
</body></html>

40
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/background_clip_padding-box.xht Normal file
View file

@ -0,0 +1,40 @@
<!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 Backgrounds and Borders Test: background-clip_border-box</title>
<link href="dajiangxiaoyan@126.com" rel="author" title="Xiaoyan Jiang" />
<link href="jinlongz@oupeng.com" rel="reviewer" title="Jinlong Zhang" />
<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>

38
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/border-001-ref.xht Normal file
View file

@ -0,0 +1,38 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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
{
font: 25px/1 Ahem;
width: 6em;
word-spacing: 3em;
}
div.top-and-bottom-stripes
{
background-color: black;
height: 1em;
}
]]></style>
</head>
<body>
<p>Test passes if there is a hollow black square.</p>
<div class="top-and-bottom-stripes"></div>
<div>1 2 3 4 5 6 7 8</div>
<div class="top-and-bottom-stripes"></div>
</body>
</html>

39
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/border-003-ref.xht Normal file
View file

@ -0,0 +1,39 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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
{
color: blue;
font: 5px/1 Ahem;
width: 22em;
word-spacing: 19em;
}
div.top-and-bottom-stripes
{
background-color: blue;
height: 1em;
}
]]></style>
</head>
<body>
<p>Test passes if there is a hollow blue square.</p>
<div class="top-and-bottom-stripes"></div>
<div>1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0</div>
<div class="top-and-bottom-stripes"></div>
</body>
</html>

28
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/border-005-ref.xht Normal file
View file

@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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: blue;
height: 192px;
width: 192px;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled blue square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

28
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/border-006-ref.xht Normal file
View file

@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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: black;
height: 192px;
width: 192px;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled black square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

15
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/border-image-repeat-round-ref.xht Normal file
View file

@ -0,0 +1,15 @@
<!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>Reference File</title>
<link href="mailto:reni2046@gmail.com" rel="author" title="Ren Jing" />
<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 src="../support/border-image-round-result.png" alt="border-image-round-result" class="result-image" />
</div>
</body></html>

18
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/border-image-round-and-stretch-ref.xht Normal file
View file

@ -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>Reference File</title>
<link href="mailto:reni2046@gmail.com" rel="author" title="Ren Jing" />
<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 src="../support/borderresult.png" alt="border-image-result" class="result-image" />
</div>
</body></html>

15
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/border-image-slice-percentage-ref.xht Normal file
View file

@ -0,0 +1,15 @@
<!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>Reference File</title>
<link href="mailto:reni2046@gmail.com" rel="author" title="Ren Jing" />
<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 src="../support/border-image-round-result.png" alt="border-image-round-result" class="result-image" />
</div>
</body></html>

73
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/border-image-space-001-ref.xht Normal file
View file

@ -0,0 +1,73 @@
<!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 Test: Border Image: box with spaced repeating border image</title>
<link href="mailto:leviw@chromium.org" rel="author" title="Levi Weintraub" />
<style>
div {
background-color: green;
}
.borderContainer {
width: 108px;
height: 108px;
position: relative;
}
.borderContainer &gt; 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>

30
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/border-radius-001-ref.xht Normal file
View file

@ -0,0 +1,30 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Border radius reference</title>
<link rel="author" title="Nokia" href="http://www.nokia.com/" />
<style type="text/css">
/* <![CDATA[ */
div
{
border:2px solid #a1a1a1;
background:#dddddd;
width:200px;
height: 100px;
}
/* ]]> */
</style>
</head>
<body>
<p>
There should be two boxes with no rounded corners.</p>
<ul>
<li>PASS if the two boxes below are the same.</li>
<li>FAIL if the output is not as expected.</li>
</ul>
<div id="test"></div>
<p><br /></p>
<div id="reference"></div>
</body>
</html>

35
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/border-radius-002-ref.xht Normal file
View file

@ -0,0 +1,35 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Border radius reference</title>
<link rel="author" title="Nokia" href="http://www.nokia.com/" />
<style type="text/css">
/* <![CDATA[ */
div
{
border:2px solid #a1a1a1;
background:#dddddd;
width:200px;
height: 100px;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;
}
/* ]]> */
</style>
</head>
<body>
<p>
There should be two identical boxes, each with 4 rounded corners.
</p>
<ul>
<li>PASS if the two boxes below are the same and all 4 corners are rounded.</li>
<li>FAIL if the output is not as expected.</li>
</ul>
<div id="test"></div>
<p><br /></p>
<div id="reference"></div>
</body>
</html>

35
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/border-radius-003-ref.xht Normal file
View file

@ -0,0 +1,35 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Border radius reference</title>
<link rel="author" title="Nokia" href="http://www.nokia.com/" />
<style type="text/css">
/* <![CDATA[ */
div
{
border:2px solid #a1a1a1;
background:#dddddd;
width:200px;
height: 100px;
border-top-left-radius: 50px;
border-top-right-radius: 0;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 0;
}
/* ]]> */
</style>
</head>
<body>
<p>
There should be two identical boxes, each with rounded corners at the top left and bottom right only.
</p>
<ul>
<li>PASS if the two boxes below are the same and only top left and bottom right corners are rounded.</li>
<li>FAIL if the output is not as expected.</li>
</ul>
<div id="test"></div>
<p><br /></p>
<div id="reference"></div>
</body>
</html>

35
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/border-radius-004-ref.xht Normal file
View file

@ -0,0 +1,35 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Border radius reference</title>
<link rel="author" title="Nokia" href="http://www.nokia.com/" />
<style type="text/css">
/* <![CDATA[ */
div
{
border:2px solid #a1a1a1;
background:#dddddd;
width:200px;
height: 100px;
border-top-left-radius: 50px 25px;
border-top-right-radius: 50px 25px;
border-bottom-right-radius: 50px 25px;
border-bottom-left-radius: 50px 25px;
}
/* ]]> */
</style>
</head>
<body>
<p>
There should be two identical boxes, each with 4 rounded corners.
</p>
<ul>
<li>PASS if the two boxes below are the same and all 4 corners are rounded.</li>
<li>FAIL if the output is not as expected.</li>
</ul>
<div id="test"></div>
<p><br /></p>
<div id="reference"></div>
</body>
</html>

35
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/border-radius-005-ref.xht Normal file
View file

@ -0,0 +1,35 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Border radius reference</title>
<link rel="author" title="Nokia" href="http://www.nokia.com/" />
<style type="text/css">
/* <![CDATA[ */
div
{
border:2px solid #a1a1a1;
background:#dddddd;
width:200px;
height: 100px;
border-top-left-radius: 50px 20px;
border-top-right-radius: 15px 25px;
border-bottom-right-radius: 40px 20px;
border-bottom-left-radius: 15px 25px;
}
/* ]]> */
</style>
</head>
<body>
<p>
There should be two identical boxes, each with 4 rounded corners.
</p>
<ul>
<li>PASS if the two boxes below are the same and all 4 corners are rounded.</li>
<li>FAIL if the output is not as expected.</li>
</ul>
<div id="test"></div>
<p><br /></p>
<div id="reference"></div>
</body>
</html>

35
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/border-radius-006-ref.xht Normal file
View file

@ -0,0 +1,35 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Border radius reference</title>
<link rel="author" title="Nokia" href="http://www.nokia.com/" />
<style type="text/css">
/* <![CDATA[ */
div
{
border:2px solid #a1a1a1;
background:#dddddd;
width:200px;
height: 100px;
border-top-left-radius: 50px 20px;
border-top-right-radius: 15px 25px;
border-bottom-right-radius: 50px 10%;
border-bottom-left-radius: 15px 25px;
}
/* ]]> */
</style>
</head>
<body>
<p>
There should be two identical boxes, each with 4 rounded corners.
</p>
<ul>
<li>PASS if the two boxes below are the same and all 4 corners are rounded.</li>
<li>FAIL if the output is not as expected.</li>
</ul>
<div id="test"></div>
<p><br /></p>
<div id="reference"></div>
</body>
</html>

35
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/border-radius-007-ref.xht Normal file
View file

@ -0,0 +1,35 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Border radius reference</title>
<link rel="author" title="Nokia" href="http://www.nokia.com/" />
<style type="text/css">
/* <![CDATA[ */
div
{
border:2px solid #a1a1a1;
background:#dddddd;
width:200px;
height: 100px;
border-top-left-radius: 50px 0.5in;
border-top-right-radius: 10mm 25px;
border-bottom-right-radius: 6pc 30%;
border-bottom-left-radius: 15% 70pt;
}
/* ]]> */
</style>
</head>
<body>
<p>
There should be two identical boxes, each with 4 rounded corners.
</p>
<ul>
<li>PASS if the two boxes below are the same and all 4 corners are rounded.</li>
<li>FAIL if the output is not as expected.</li>
</ul>
<div id="test"></div>
<p><br /></p>
<div id="reference"></div>
</body>
</html>

35
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/border-radius-009-ref.xht Normal file
View file

@ -0,0 +1,35 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Border radius reference</title>
<link rel="author" title="Nokia" href="http://www.nokia.com/" />
<style type="text/css">
/* <![CDATA[ */
div
{
border:2px solid #a1a1a1;
background:#dddddd;
width:200px;
height: 100px;
border-top-left-radius: 20%;
border-top-right-radius: 25px;
border-bottom-right-radius: 20%;
border-bottom-left-radius: 25px;
}
/* ]]> */
</style>
</head>
<body>
<p>
There should be two identical boxes, each with 4 rounded corners.
</p>
<ul>
<li>PASS if the two boxes below are the same and all 4 corners are rounded.</li>
<li>FAIL if the output is not as expected.</li>
</ul>
<div id="test"></div>
<p><br /></p>
<div id="reference"></div>
</body>
</html>

35
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/border-radius-010-ref.xht Normal file
View file

@ -0,0 +1,35 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Border radius reference</title>
<link rel="author" title="Nokia" href="http://www.nokia.com/" />
<style type="text/css">
/* <![CDATA[ */
div
{
border:2px solid #a1a1a1;
background:#dddddd;
width:200px;
height: 100px;
border-top-left-radius: 20% 25px;
border-top-right-radius: 0;
border-bottom-right-radius: 20pt 3em;
border-bottom-left-radius: 0;
}
/* ]]> */
</style>
</head>
<body>
<p>
There should be two identical boxes, each with rounded corners at the top left and bottom right only.
</p>
<ul>
<li>PASS if the two boxes below are the same and only top left and bottom right corners are rounded.</li>
<li>FAIL if the output is not as expected.</li>
</ul>
<div id="test"></div>
<p><br /></p>
<div id="reference"></div>
</body>
</html>

31
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/border-radius-011-ref.xht Normal file
View file

@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Border radius reference</title>
<link rel="author" title="Nokia" href="http://www.nokia.com/" />
<style type="text/css">
/* <![CDATA[ */
div
{
border:2px solid #a1a1a1;
background:#dddddd;
width:200px;
height: 100px;
}
/* ]]> */
</style>
</head>
<body>
<p>
There should be two boxes, each with corners that have no rounding.
</p>
<ul>
<li>PASS if the two boxes below are the same, each with sharp corner joins (no rounding).</li>
<li>FAIL if corner joins have any rounding.</li>
</ul>
<div></div>
<p><br /></p>
<div></div>
</body>
</html>

27
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/border-radius-clipping-ref.xht Normal file
View file

@ -0,0 +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"><head>
<title>Border radius clipping</title>
<link href="mailto:liz@oupeng.com" rel="author" title="zhouli" />
<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>

22
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/border-radius-horizontal-value-is-zero-ref.xht Normal file
View file

@ -0,0 +1,22 @@
<!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: border-radius property if horizontal value is zero</title>
<link href="mailto:silverman@adobe.com" rel="author" title="Marc Silverman" />
<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>

24
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/box-shadow-inset-spread-without-border-radius.xht Normal file
View file

@ -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>Reference File</title>
<link href="mailto:joy.xczhang@gmail.com" rel="author" title="Zhang Xiaochong" />
<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>

24
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/box-shadow-inset-without-border-radius.xht Normal file
View file

@ -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>Reference File</title>
<link href="mailto:joy.xczhang@gmail.com" rel="author" title="Zhang Xiaochong" />
<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>

26
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/box-shadow-outset-spread-without-border-radius.xht Normal file
View file

@ -0,0 +1,26 @@
<!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>Reference File</title>
<link href="mailto:joy.xczhang@gmail.com" rel="author" title="Zhang Xiaochong" />
<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>

26
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/box-shadow-outset-without-border-radius.xht Normal file
View file

@ -0,0 +1,26 @@
<!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>Reference File</title>
<link href="mailto:joy.xczhang@gmail.com" rel="author" title="Zhang Xiaochong" />
<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>

37
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/css-border-radius-ref-001.xht Normal file
View file

@ -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 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 class="redSquare" id="red"></div>
<!-- This is the square being tested with the radius-->
<div class="greenSquare" id="green"></div>
</div>
</body></html>

34
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/css-border-radius-ref-002.xht Normal file
View file

@ -0,0 +1,34 @@
<!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 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 class="greenSquare" id="green"></div>
<!-- This is the square being tested with the radius-->
<div class="redSquare" id="red">
</div>
</div></body></html>

78
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/css-box-shadow-ref-001.xht Normal file
View file

@ -0,0 +1,78 @@
<!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 box-shadow Test</title>
<link href="mailto:weisong4413@126.com" rel="author" title="tmd" />
<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 class="redSquare" id="red"></div>
<!-- This is the square being tested with the shadow -->
<div class="greenSquare-shadow" id="green"></div>
<div class="black-shadow" id="black"></div>
</div>
<input type="button" onclick="fun_radius()" value="Border 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>

34
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/css3-background-clip-border-box-ref.xht Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Backgrounds Test:background clip property with value border-box</title>
<link href="mailto:yanshasha133@gmail.com" rel="author" title="yanshasha" />
<link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen" /> <!-- 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>

50
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/css3-background-clip-content-box-ref.xht Normal file
View file

@ -0,0 +1,50 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Backgrounds Test:background clip property with value content-box</title>
<link href="mailto:yanshasha133@gmail.com" rel="author" title="yanshasha" />
<link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen" /> <!-- 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>

42
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/css3-background-clip-padding-box-ref.xht Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Backgrounds Test:background clip property with value padding-box</title>
<link href="mailto:yanshasha133@gmail.com" rel="author" title="yanshasha" />
<link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen" /> <!-- 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>

28
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/css3-background-clip-ref.xht Normal file
View file

@ -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>
<meta charset="UTF-8" />
<title>CSS Background-clip Test: the background is pruned to content box</title>
<link href="mailto:451887565@qq.com" rel="author" title="Xie Bing" />
<link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen" /> <!-- 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>

32
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/css3-background-origin-border-box-ref.xht Normal file
View file

@ -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 lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Backgrounds Test:background origin property with value border-box</title>
<link href="mailto:yanshasha133@gmail.com" rel="author" title="yanshasha" />
<link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen" /> <!-- 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>

31
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/css3-background-origin-content-box-ref.xht Normal file
View file

@ -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 lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Backgrounds Test:background origin property with value content-box</title>
<link href="mailto:yanshasha133@gmail.com" rel="author" title="yanshasha" />
<link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen" /> <!-- 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>

28
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/css3-background-size-contain-ref.xht Normal file
View file

@ -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>
<meta charset="UTF-8" />
<title>CSS3 background-size:contain</title>
<link href="mailto:miniwade514@gmail.com" rel="author" title="Yue Hu" />
<link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen" /> <!-- 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>

19
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/css3-background-size-ref.xht Normal file
View file

@ -0,0 +1,19 @@
<!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>
<meta charset="UTF-8" />
<title>CSS Background-size Test: the size of the background image</title>
<link href="mailto:451887565@qq.com" rel="author" title="Xie Bing" />
<link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen" /> <!-- 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>

86
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/css3-border-image-repeat-repeat-ref.xht Normal file
View file

@ -0,0 +1,86 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Border Test:border image repeat property with value repeat</title>
<link href="mailto:yanshasha133@gmail.com" rel="author" title="yanshasha" />
<link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen" /> <!-- 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" id="red1" class="red" />
<img src="../support/red-diamond.png" alt="right top red diamond" id="red2" class="red" />
<img src="../support/red-diamond.png" alt="right bottom red diamond" id="red3" class="red" />
<img src="../support/red-diamond.png" alt="left bottom red diamond" id="red4" class="red" />
<img src="../support/blue-diamond.png" alt="top blue diamond" id="blue1" class="blue" />
<img src="../support/blue-diamond.png" alt="right blue diamond" id="blue2" class="blue" />
<img src="../support/blue-diamond.png" alt="bottom blue diamond" id="blue3" class="blue" />
<img src="../support/blue-diamond.png" alt="left blue diamond" id="blue4" class="blue" />
<div id="blue1" class="blue"></div>
<div id="blue2" class="blue"></div>
<div id="blue3" class="blue"></div>
<div id="blue4" class="blue"></div>
</div>
</body></html>

79
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/css3-border-image-repeat-stretch-ref.xht Normal file
View file

@ -0,0 +1,79 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Border Test:border image repeat property with value stretch</title>
<link href="mailto:yanshasha133@gmail.com" rel="author" title="yanshasha" />
<link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen" /> <!-- 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" id="red1" class="red" />
<img src="../support/red-diamond.png" alt="right top red diamond" id="red2" class="red" />
<img src="../support/red-diamond.png" alt="right bottom red diamond" id="red3" class="red" />
<img src="../support/red-diamond.png" alt="left bottom red diamond" id="red4" class="red" />
<img src="../support/blue-diamond.png" alt="top blue diamond" id="blue1" class="blue" />
<img src="../support/blue-diamond.png" alt="right blue diamond" id="blue2" class="blue" />
<img src="../support/blue-diamond.png" alt="bottom blue diamond" id="blue3" class="blue" />
<img src="../support/blue-diamond.png" alt="left blue diamond" id="blue4" class="blue" />
</div>
</body></html>

49
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/css3-border-image-source-ref.xht Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Border Test:border image source property</title>
<link href="mailto:yanshasha133@gmail.com" rel="author" title="yanshasha" />
<link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen" /> <!-- 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" alt="baidu logo at left top" id="img1" />
<img src="../support/green-60-60.png" alt="baidu logo at right top" id="img2" />
<img src="../support/green-60-60.png" alt="baidu logo at right bottom" id="img3" />
<img src="../support/green-60-60.png" alt="baidu logo at left bottom" id="img4" />
</div>
</body></html>

37
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/css3-box-shadow-ref.xht Normal file
View file

@ -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>
<meta charset="UTF-8" />
<title>CSS Box-shadow Test: the test passes if adding one or more shadow to the box</title>
<link href="mailto:451887565@qq.com" rel="author" title="Xie Bing" />
<link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen" /> <!-- 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>

97
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/diagonal-percentage-vector-background-ref.xht Normal file
View file

@ -0,0 +1,97 @@
<!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 href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="author" title="Gérard Talbot" />
<style type="text/css">
table
{
border: black solid 8px;
border-spacing: 0px;
height: 376px; /* 360px tall plus 2 mult 8px borders == 376px */
table-layout: fixed;
width: 452px; /* 436px wide plus 2 mult 8px borders == 452px */
}
col#first-column {width: 89px;} /* (25% of 436px) - (40px / 2) */
col#second-column {width: 40px;}
/*
Complete quotation of the SVG object code:
&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
&lt;title&gt;Vector image without intrinsic dimensions with percentage stroke-width (proportional to the diagonal)&lt;/title&gt;
&lt;rect y="0" width="100%" height="50%" fill="lime"/&gt;
&lt;rect y="50%" width="100%" height="50%" fill="aqua"/&gt;
&lt;!--
A percent stroke-width is resolved with respect to:
d = sqrt(vh**2 + vw**2) / sqrt(2)
where vh/vw are the image viewport width/height. Because this image has no
intrinsic dimensions or ratio, it expands to fill the entire background
positioning area, so its width is 100px and its height is 700px. For those
carefully-chosen dimensions, d = 500px, so 10% of that creates a 50px-wide
rectangle, vertically centered and horizontally left-aligned in the image.
--&gt;
&lt;line x1="25%" y1="25%" x2="25%" y2="75%" stroke="fuchsia" stroke-width="10%"/&gt;
&lt;/svg&gt;
So:
d = sqrt(vh**2 + vw**2) / sqrt(2)
With width: 436px; (instead of 100px) and height: 360px; (instead of 700px):
d == sqrt ((436 mult 436) + (360 mult 360)) / sqrt(2)
d == sqrt ((190096) + (129600)) / sqrt(2)
d == sqrt ((319696)) / sqrt(2)
d == 565.416660526px / 1.41421356237
d == 399.809954854px
and so 10% of 399.809954854px == 39.9809954854px =~ 40px
*/
td
{
height: 90px;
padding: 0px;
}
td.lime {background-color: lime;}
td.fuchsia {background-color: fuchsia;}
td.aqua {background-color: aqua;}
</style>
</head>
<body>
<table>
<colgroup><col id="first-column" /><col id="second-column" /><col />
</colgroup><tbody><tr><td class="lime"></td><td class="lime"></td><td class="lime"></td></tr>
<tr><td class="lime"></td><td class="fuchsia"></td><td class="lime"></td></tr>
<tr><td class="aqua"></td><td class="fuchsia"></td><td class="aqua"></td></tr>
<tr><td class="aqua"></td><td class="aqua"></td><td class="aqua"></td></tr>
</tbody></table>
</body></html>

19
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/ref-filled-black-96px-square.xht Normal file
View file

@ -0,0 +1,19 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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>

28
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/ref-filled-green-100px-square.xht Normal file
View file

@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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: green;
height: 100px;
width: 100px;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

17
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/ref-if-there-is-no-red.xht Normal file
View file

@ -0,0 +1,17 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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>

17
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/ref-nothing-below.xht Normal file
View file

@ -0,0 +1,17 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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 nothing below.</p>
</body>
</html>

54
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/ref-t-lime128x16-aqua128x16.xht Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<!--
The original and initial filename of this reference file was
ref-tall-lime256x16-aqua256x16.html
-->
<title>CSS Reftest Reference</title>
<link href="http://whereswalden.com/" rel="author" title="Jeff Walden" />
<style type="text/css">
div#outer
{
border: black solid 8px;
height: 384px;
width: 128px;
}
div#inner
{
height: 32px;
width: 128px;
}
div#inner &gt; div
{
height: 16px;
width: 128px;
}
div#top {background-color: lime;}
div#bottom {background-color: aqua;}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="top"></div>
<div id="bottom"></div>
</div>
</div>
</body></html>

54
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/ref-t-lime128x192-aqua128x192.xht Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<!--
The original and initial filename of this reference file was
ref-tall-lime256x384-aqua256x384.html
-->
<title>CSS Reftest Reference</title>
<link href="http://whereswalden.com/" rel="author" title="Jeff Walden" />
<style type="text/css">
div#outer
{
border: black solid 8px;
height: 384px;
width: 128px;
}
div#inner
{
height: 384px;
width: 128px;
}
div#inner &gt; div
{
height: 192px;
width: 128px;
}
div#top {background-color: lime;}
div#bottom {background-color: aqua;}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="top"></div>
<div id="bottom"></div>
</div>
</div>
</body></html>

54
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1/reference/ref-t-lime16x128-aqua16x128.xht Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<!--
The original and initial filename of this reference file was
ref-tall-lime32x256-aqua32x256.html
-->
<title>CSS Reftest Reference</title>
<link href="http://whereswalden.com/" rel="author" title="Jeff Walden" />
<style type="text/css">
div#outer
{
border: black solid 8px;
height: 384px;
width: 128px;
}
div#inner
{
height: 256px;
width: 16px;
}
div#inner &gt; div
{
height: 128px;
width: 16px;
}
div#top {background-color: lime;}
div#bottom {background-color: aqua;}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="top"></div>
<div id="bottom"></div>
</div>
</div>
</body></html>

Some files were not shown because too many files have changed in this diff Show more