Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-07 14:35:33 +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

31
tests/wpt/css-tests/css-backgrounds-3_dev/html4/attachment-local-clipping-color-1.htm Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html><head><title>CSS Test: background-{attachment: local; clip: border-box; color}</title>
<link href="reference/attachment-local-clipping-color-1-ref.htm" rel="match">
<meta content="dom" name="flags">
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin">
<link href="http://www.w3.org/TR/css3-background/#the-background-attachment" rel="help">
<style>
#outer {
width: 200px;
height: 200px;
padding: 40px;
border: 10px dashed;
overflow: hidden;
background: green local border-box;
}
#outer div {
height: 500px;
}
p {
margin-top: 20px;
}
</style>
</head><body><div id="outer">
<div>
<p>Test</p>
</div>
</div>
<script>
document.getElementById('outer').scrollTop = 15;
</script>
</body></html>

31
tests/wpt/css-tests/css-backgrounds-3_dev/html4/attachment-local-clipping-color-2.htm Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html><head><title>CSS Test: background-{attachment: local; clip: padding-box; color}</title>
<link href="reference/attachment-local-clipping-color-1-ref.htm" rel="match">
<meta content="dom" name="flags">
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin">
<link href="http://www.w3.org/TR/css3-background/#the-background-attachment" rel="help">
<style>
#outer {
width: 200px;
height: 200px;
padding: 40px;
border: 10px dashed;
overflow: hidden;
background: green local padding-box;
}
#outer div {
height: 500px;
}
p {
margin-top: 20px;
}
</style>
</head><body><div id="outer">
<div>
<p>Test</p>
</div>
</div>
<script>
document.getElementById('outer').scrollTop = 15;
</script>
</body></html>

31
tests/wpt/css-tests/css-backgrounds-3_dev/html4/attachment-local-clipping-color-3.htm Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html><head><title>CSS Test: background-{attachment: local; clip: content-box; color}</title>
<link href="reference/attachment-local-clipping-color-3-ref.htm" rel="match">
<meta content="dom" name="flags">
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin">
<link href="http://www.w3.org/TR/css3-background/#the-background-attachment" rel="help">
<style>
#outer {
width: 200px;
height: 200px;
padding: 40px;
border: 10px dashed;
overflow: hidden;
background: green local content-box;
}
#outer div {
height: 500px;
}
p {
margin-top: 20px;
}
</style>
</head><body><div id="outer">
<div>
<p>Test</p>
</div>
</div>
<script>
document.getElementById('outer').scrollTop = 15;
</script>
</body></html>

32
tests/wpt/css-tests/css-backgrounds-3_dev/html4/attachment-local-clipping-color-4.htm Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html><head><title>CSS Test: background-{attachment: local; clip: border-box; color}; border-radius</title>
<link href="reference/attachment-local-clipping-color-4-ref.htm" rel="match">
<meta content="dom" name="flags">
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin">
<link href="http://www.w3.org/TR/css3-background/#the-background-attachment" rel="help">
<style>
#outer {
width: 200px;
height: 200px;
padding: 40px;
border: 10px double;
overflow: hidden;
border-radius: 50%;
background: green local border-box;
}
#outer div {
height: 500px;
}
p {
margin-top: 20px;
}
</style>
</head><body><div id="outer">
<div>
<p>Test</p>
</div>
</div>
<script>
document.getElementById('outer').scrollTop = 15;
</script>
</body></html>

32
tests/wpt/css-tests/css-backgrounds-3_dev/html4/attachment-local-clipping-color-5.htm Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html><head><title>CSS Test: background-{attachment: local; clip: padding-box; color}; border-radius</title>
<link href="reference/attachment-local-clipping-color-4-ref.htm" rel="match">
<meta content="dom" name="flags">
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin">
<link href="http://www.w3.org/TR/css3-background/#the-background-attachment" rel="help">
<style>
#outer {
width: 200px;
height: 200px;
padding: 40px;
border: 10px double;
overflow: hidden;
border-radius: 50%;
background: green local padding-box;
}
#outer div {
height: 500px;
}
p {
margin-top: 20px;
}
</style>
</head><body><div id="outer">
<div>
<p>Test</p>
</div>
</div>
<script>
document.getElementById('outer').scrollTop = 15;
</script>
</body></html>

32
tests/wpt/css-tests/css-backgrounds-3_dev/html4/attachment-local-clipping-color-6.htm Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html><head><title>CSS Test: background-{attachment: local; clip: content-box; color}; border-radius</title>
<link href="reference/attachment-local-clipping-color-6-ref.htm" rel="match">
<meta content="dom" name="flags">
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin">
<link href="http://www.w3.org/TR/css3-background/#the-background-attachment" rel="help">
<style>
#outer {
width: 200px;
height: 200px;
padding: 40px;
border: 10px double;
overflow: hidden;
border-radius: 50%;
background: green local content-box;
}
#outer div {
height: 500px;
}
p {
margin-top: 20px;
}
</style>
</head><body><div id="outer">
<div>
<p>Test</p>
</div>
</div>
<script>
document.getElementById('outer').scrollTop = 15;
</script>
</body></html>

33
tests/wpt/css-tests/css-backgrounds-3_dev/html4/attachment-local-clipping-image-1.htm Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html><head><title>CSS Test: background-{attachment: local; clip: border-box; image}</title>
<link href="reference/attachment-local-clipping-image-1-ref.htm" rel="match">
<meta content="dom" name="flags">
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin">
<link href="http://www.w3.org/TR/css3-background/#the-background-attachment" rel="help">
<style>
#outer {
width: 200px;
height: 200px;
padding: 40px;
border: 10px dashed;
overflow: hidden;
background: url(aqua-yellow-32x32.png) local;
background-clip: border-box;
background-origin: padding-box; /* Match the reference. */
}
#outer div {
height: 500px;
}
p {
margin-top: 20px;
}
</style>
</head><body><div id="outer">
<div>
<p>Test</p>
</div>
</div>
<script>
document.getElementById('outer').scrollTop = 15;
</script>
</body></html>

31
tests/wpt/css-tests/css-backgrounds-3_dev/html4/attachment-local-clipping-image-2.htm Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html><head><title>CSS Test: background-{attachment: local; clip: padding-box; image}</title>
<link href="reference/attachment-local-clipping-image-1-ref.htm" rel="match">
<meta content="dom" name="flags">
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin">
<link href="http://www.w3.org/TR/css3-background/#the-background-attachment" rel="help">
<style>
#outer {
width: 200px;
height: 200px;
padding: 40px;
border: 10px dashed;
overflow: hidden;
background: url(aqua-yellow-32x32.png) local padding-box;
}
#outer div {
height: 500px;
}
p {
margin-top: 20px;
}
</style>
</head><body><div id="outer">
<div>
<p>Test</p>
</div>
</div>
<script>
document.getElementById('outer').scrollTop = 15;
</script>
</body></html>

31
tests/wpt/css-tests/css-backgrounds-3_dev/html4/attachment-local-clipping-image-3.htm Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html><head><title>CSS Test: background-{attachment: local; clip: content-box; image}</title>
<link href="reference/attachment-local-clipping-image-3-ref.htm" rel="match">
<meta content="dom" name="flags">
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin">
<link href="http://www.w3.org/TR/css3-background/#the-background-attachment" rel="help">
<style>
#outer {
width: 200px;
height: 200px;
padding: 40px;
border: 10px dashed;
overflow: hidden;
background: url(aqua-yellow-32x32.png) local content-box;
}
#outer div {
height: 500px;
}
p {
margin-top: 20px;
}
</style>
</head><body><div id="outer">
<div>
<p>Test</p>
</div>
</div>
<script>
document.getElementById('outer').scrollTop = 15;
</script>
</body></html>

34
tests/wpt/css-tests/css-backgrounds-3_dev/html4/attachment-local-clipping-image-4.htm Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html><head><title>CSS Test: background-{attachment: local; clip: border-box; image}; border-radius</title>
<link href="reference/attachment-local-clipping-image-4-ref.htm" rel="match">
<meta content="dom" name="flags">
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin">
<link href="http://www.w3.org/TR/css3-background/#the-background-attachment" rel="help">
<style>
#outer {
width: 200px;
height: 200px;
padding: 40px;
border: 10px double;
overflow: hidden;
border-radius: 50%;
background: url(aqua-yellow-32x32.png) local;
background-clip: border-box;
background-origin: padding-box;
}
#outer div {
height: 500px;
}
p {
margin-top: 20px;
}
</style>
</head><body><div id="outer">
<div>
<p>Test</p>
</div>
</div>
<script>
document.getElementById('outer').scrollTop = 15;
</script>
</body></html>

32
tests/wpt/css-tests/css-backgrounds-3_dev/html4/attachment-local-clipping-image-5.htm Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html><head><title>CSS Test: background-{attachment: local; clip: padding-box; image}; border-radius</title>
<link href="reference/attachment-local-clipping-image-4-ref.htm" rel="match">
<meta content="dom" name="flags">
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin">
<link href="http://www.w3.org/TR/css3-background/#the-background-attachment" rel="help">
<style>
#outer {
width: 200px;
height: 200px;
padding: 40px;
border: 10px double;
overflow: hidden;
border-radius: 50%;
background: url(aqua-yellow-32x32.png) local padding-box;
}
#outer div {
height: 500px;
}
p {
margin-top: 20px;
}
</style>
</head><body><div id="outer">
<div>
<p>Test</p>
</div>
</div>
<script>
document.getElementById('outer').scrollTop = 15;
</script>
</body></html>

32
tests/wpt/css-tests/css-backgrounds-3_dev/html4/attachment-local-clipping-image-6.htm Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html><head><title>CSS Test: background-{attachment: local; clip: content-box; image}; border-radius</title>
<link href="reference/attachment-local-clipping-image-6-ref.htm" rel="match">
<meta content="dom" name="flags">
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin">
<link href="http://www.w3.org/TR/css3-background/#the-background-attachment" rel="help">
<style>
#outer {
width: 200px;
height: 200px;
padding: 40px;
border: 10px double;
overflow: hidden;
border-radius: 50%;
background: url(aqua-yellow-32x32.png) local content-box;
}
#outer div {
height: 500px;
}
p {
margin-top: 20px;
}
</style>
</head><body><div id="outer">
<div>
<p>Test</p>
</div>
</div>
<script>
document.getElementById('outer').scrollTop = 15;
</script>
</body></html>

36
tests/wpt/css-tests/css-backgrounds-3_dev/html4/attachment-local-positioning-2.htm Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html><head><title>CSS Test: background-attachment: local; positioning area</title>
<link href="reference/attachment-local-positioning-2-ref.htm" rel="match">
<meta content="dom" name="flags">
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin">
<link href="http://www.w3.org/TR/css3-background/#the-background-attachment" rel="help">
<style>
#outer {
border: solid;
/* 100% 100% == (250px - 32px) (370px - 32px) == 218px 338px */
/* With scrolling, effective position is 178px 278px */
background: url(aqua-yellow-32x32.png) local no-repeat 100% 100%;
overflow: hidden;
width: 200px;
height: 300px;
}
div div {
width: 250px;
height: 370px;
}
p {
margin: 0;
padding-top: 100px;
}
</style>
</head><body><div id="outer">
<div>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<script>
var outer = document.getElementById('outer');
outer.scrollLeft = 40;
outer.scrollTop = 60;
</script>
</body></html>

37
tests/wpt/css-tests/css-backgrounds-3_dev/html4/attachment-local-positioning-3.htm Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html><head><title>CSS Test: background-attachment: local; positioning area with dir=rtl</title>
<link href="reference/attachment-local-positioning-3-ref.htm" rel="match">
<meta content="dom" name="flags">
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin">
<link href="http://www.w3.org/TR/css3-background/#the-background-attachment" rel="help">
<style>
#outer {
border: solid;
/* 100% 100% == (250px - 32px) (370px - 32px) == 218px 338px */
/* With scrolling, effective position is 178px 278px */
background: url(aqua-yellow-32x32.png) local no-repeat 100% 100%;
overflow: hidden;
width: 200px;
height: 300px;
}
div div {
width: 250px;
height: 370px;
}
p {
margin: 0;
padding-top: 100px;
}
</style>
</head><body><div id="outer" dir="rtl">
<div>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<script>
var outer = document.getElementById('outer');
// See https://bugzilla.mozilla.org/show_bug.cgi?id=383026 for negative values.
outer.scrollLeft = -10;
outer.scrollTop = 60;
</script>
</body></html>

36
tests/wpt/css-tests/css-backgrounds-3_dev/html4/attachment-local-positioning-4.htm Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html><head><title>CSS Test: background-attachment: local; positioning area with dir=rtl, top left</title>
<link href="reference/attachment-local-positioning-4-ref.htm" rel="match">
<meta content="dom" name="flags">
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin">
<link href="http://www.w3.org/TR/css3-background/#the-background-attachment" rel="help">
<style>
#outer {
border: solid;
/* With scrolling, effective position is -10px -10px */
background: url(aqua-yellow-32x32.png) local no-repeat 0 0;
overflow: hidden;
width: 200px;
height: 300px;
}
div div {
width: 250px;
height: 370px;
}
p {
margin: 0;
padding-top: 100px;
}
</style>
</head><body><div id="outer" dir="rtl">
<div>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<script>
var outer = document.getElementById('outer');
// See https://bugzilla.mozilla.org/show_bug.cgi?id=383026 for negative values.
outer.scrollLeft = -40;
outer.scrollTop = 10;
</script>
</body></html>

25
tests/wpt/css-tests/css-backgrounds-3_dev/html4/attachment-local-positioning-5.htm Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html><head><title>CSS Test: background-{attachment: local; origin: content-box}; positioning area</title>
<link href="reference/attachment-local-positioning-5-ref.htm" rel="match">
<meta content="dom" name="flags">
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin">
<link href="http://www.w3.org/TR/css3-background/#the-background-attachment" rel="help">
<style>
div {
background: url(aqua-yellow-32x32.png) local no-repeat content-box;
overflow: hidden;
height: 200px;
padding: 40px 30px;
}
p {
padding-top: 100px;
height: 500px;
}
</style>
</head><body><div>
<p>Test</p>
</div>
<script>
document.getElementsByTagName('div')[0].scrollTop = 15;
</script>
</body></html>

24
tests/wpt/css-tests/css-backgrounds-3_dev/html4/attachment-scroll-positioning-1.htm Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html><head><title>CSS Test: background-attachment: scroll; positioning area</title>
<link href="reference/attachment-scroll-positioning-1-ref.htm" rel="match">
<meta content="dom" name="flags">
<link href="http://exyr.org/about/" rel="author" title="Simon Sapin">
<link href="http://www.w3.org/TR/css3-background/#the-background-attachment" rel="help">
<style>
div {
background: url(aqua-yellow-32x32.png) no-repeat 100px 100px;
overflow: hidden;
height: 200px;
}
p {
padding-top: 100px;
height: 500px;
}
</style>
</head><body><div>
<p>Test</p>
</div>
<script>
document.getElementsByTagName('div')[0].scrollTop = 60;
</script>
</body></html>

26
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-001.htm Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background with color</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-03-14 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background">
<link rel="match" href="reference/background-001-ref.htm">
<meta name="flags" content="">
<meta name="assert" content="Background with color only sets the background of the element to the color specified.">
<style type="text/css">
div
{
background: green;
height: 50px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green rectangle across the page.</p>
<div></div>
</body>
</html>

26
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-002.htm Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background with an image</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-03-14 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background">
<link rel="match" href="reference/background-001-ref.htm">
<meta name="flags" content="image">
<meta name="assert" content="Background with image only sets the background of the element to the image specified.">
<style type="text/css">
div
{
background: url("support/green_box.png");
height: 50px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green rectangle across the page.</p>
<div></div>
</body>
</html>

26
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-003.htm Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background with repeat</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-04-17 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat">
<link rel="match" href="reference/background-003-ref.htm">
<meta name="flags" content="image">
<meta name="assert" content="Background shorthand with repeat only sets its background-repeat subproperty. In such case, the other background subproperties are set to their initial values: 'background-image' is set to 'none', 'background-color' is set to transparent, 'background-attachment' is set to 'scroll', 'background-position' is set to '0% 0%'.">
<style type="text/css">
div
{
background: repeat-x;
background-image: url("support/green15x15.png");
height: 5in;
}
</style>
</head>
<body>
<p>Test passes if there is a green stripe across the page.</p>
<div></div>
</body>
</html>

25
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-004.htm Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background with attachment</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment">
<link rel="match" href="reference/ref-nothing-below.htm">
<meta name="flags" content="">
<meta name="assert" content="Background shorthand with attachment only sets its background-attachment subproperty. In such case, the other background subproperties are set to their initial values: 'background-image' is set to 'none', 'background-color' is set to transparent, 'background-repeat' is set to 'repeat', 'background-position' is set to '0% 0%.">
<style type="text/css">
div
{
background: fixed;
height: 1in;
width: 1in;
}
</style>
</head>
<body>
<p>Test passes if there is nothing below.</p>
<div></div>
</body>
</html>

25
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-005.htm Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background with position</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment">
<link rel="match" href="reference/ref-nothing-below.htm">
<meta name="flags" content="">
<meta name="assert" content="Background shorthand with position only sets its background-position subproperty. In such case, the other background subproperties are set to their initial values: 'background-image' is set to 'none', 'background-color' is set to transparent, 'background-repeat' is set to 'repeat', 'background-attchment' is set to 'scroll'.">
<style type="text/css">
div
{
background: left top;
height: 1in;
width: 1in;
}
</style>
</head>
<body>
<p>Test passes if there is nothing below.</p>
<div></div>
</body>
</html>

26
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-006.htm Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background with (color image)</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-03-14 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#background-image">
<link rel="match" href="reference/background-001-ref.htm">
<meta name="flags" content="image">
<meta name="assert" content="Background with (color image) sets the background of the element to the color specified (not shown) and places the image in its initial position.">
<style type="text/css">
div
{
background: red url("support/green_box.png");
height: 50px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green rectangle across the page.</p>
<div></div>
</body>
</html>

26
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-007.htm Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background with (color repeat)</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-03-14 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat">
<link rel="match" href="reference/background-001-ref.htm">
<meta name="flags" content="">
<meta name="assert" content="Background with (color repeat) sets the background of the element to the color specified. Repeat does nothing since there is no image.">
<style type="text/css">
div
{
background: green repeat-x;
height: 50px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green rectangle across the page.</p>
<div></div>
</body>
</html>

26
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-008.htm Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background with (color attachment)</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-03-14 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment">
<link rel="match" href="reference/background-001-ref.htm">
<meta name="flags" content="">
<meta name="assert" content="Background with (color attachment) sets the background of the element to the color specified. Attachment does nothing since image is not set.">
<style type="text/css">
div
{
background: green fixed;
height: 50px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green rectangle across the page.</p>
<div></div>
</body>
</html>

26
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-009.htm Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background with (color position)</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-03-14 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#background-position">
<link rel="match" href="reference/background-001-ref.htm">
<meta name="flags" content="">
<meta name="assert" content="Background with (color position) sets the background of the element to the color specified. Position does nothing since image is not set.">
<style type="text/css">
div
{
background: green bottom;
height: 50px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green rectangle across the page.</p>
<div></div>
</body>
</html>

26
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-010.htm Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background with (image color)</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-03-14 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#layering">
<link rel="match" href="reference/background-001-ref.htm">
<meta name="flags" content="image">
<meta name="assert" content="Background with (image color) sets the background of the element to the color specified (not shown) and tiles the image across the background.">
<style type="text/css">
div
{
background: url("support/green_box.png") red;
height: 50px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green rectangle across the page.</p>
<div></div>
</body>
</html>

24
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-011.htm Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background with (image repeat)</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat">
<meta name="flags" content="image">
<meta name="assert" content="Background with (image repeat) sets the background to the image specified, tiling it to cover the full width, but not height.">
<style type="text/css">
div
{
background: url("support/cat.png") repeat-x;
border: 1px solid black;
height: 200px;
}
</style>
</head>
<body>
<p>Test passes if the box below has a cat image repeated across the screen, but not down the screen (there is not a cat on top of a cat).</p>
<div></div>
</body>
</html>

32
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-012.htm Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background with (image attachment)</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment">
<meta name="flags" content="image interact">
<meta name="assert" content="Background with (image attachment) sets the background to the image specified, tiling it to cover the full area, and the background scrolls with the box.">
<style type="text/css">
#div1
{
height: 200px;
overflow: scroll;
width: 200px;
}
div div
{
background: url("support/cat.png") scroll;
height: 400px;
width: 400px;
}
</style>
</head>
<body>
<p>Test passes if the box below has a cat image tiled throughout, and when scrolling the box the cat images scroll.</p>
<div id="div1">
<div></div>
</div>
</body>
</html>

25
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-013.htm Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background with (image position)</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-position">
<meta name="flags" content="image">
<meta name="assert" content="Background with (image position) sets the background to the image specified,, tiling it to cover the full area from the position specified.">
<style type="text/css">
div
{
background: url("support/cat.png") bottom left;
border: 1px solid black;
height: 150px;
width: 196px;
}
</style>
</head>
<body>
<p>Test passes if the box below has a cat image tiled throughout it, and the cat image is not cut off at the bottom (it can appear cut off at the top).</p>
<div></div>
</body>
</html>

26
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-014.htm Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background with (repeat color)</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-03-14 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat">
<link rel="match" href="reference/background-001-ref.htm">
<meta name="flags" content="">
<meta name="assert" content="Background with (repeat color) sets the background of the element to the color specified. Repeat does nothing since there is no image.">
<style type="text/css">
div
{
background: repeat-x green;
height: 50px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green rectangle across the page.</p>
<div></div>
</body>
</html>

24
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-015.htm Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background with (repeat image)</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat">
<meta name="flags" content="image">
<meta name="assert" content="Background with (repeat image) sets the background to the image specified, tiling it to cover the full width, but not height.">
<style type="text/css">
div
{
background: repeat-x url("support/cat.png");
border: 1px solid black;
height: 200px;
}
</style>
</head>
<body>
<p>Test passes if the box below has a cat image repeated across the screen, but not down the screen (there is not a cat on top of a cat).</p>
<div></div>
</body>
</html>

28
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-016.htm Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background with (repeat attachment)</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-03-14 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment">
<link rel="match" href="reference/ref-nothing-below.htm">
<meta name="flags" content="">
<meta name="assert" content="Background with (repeat attachment) does not affect the background since image is not set.">
<style type="text/css">
div
{
background: repeat-x fixed;
height: 1in;
width: 1in;
}
</style>
</head>
<body>
<p>Test passes if there is nothing below.</p>
<div></div>
</body>
</html>

27
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-017.htm Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background with (repeat position)</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-03-14 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat">
<link rel="match" href="reference/ref-nothing-below.htm">
<meta name="flags" content="">
<meta name="assert" content="Background with (repeat position) does not affect the background since image is not set.">
<style type="text/css">
div
{
background: repeat-x bottom;
height: 1in;
width: 1in;
}
</style>
</head>
<body>
<p>Test passes if there is nothing below.</p>
<div></div>
</body>
</html>

26
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-018.htm Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background with (attachment color)</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-03-14 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment">
<link rel="match" href="reference/background-001-ref.htm">
<meta name="flags" content="">
<meta name="assert" content="Background with (attachment color) sets the background of the element to the color specified. Attachment does nothing since there is no image.">
<style type="text/css">
div
{
background: fixed green;
height: 50px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green rectangle across the page.</p>
<div></div>
</body>
</html>

32
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-019.htm Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background with (attachment image)</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment">
<meta name="flags" content="image interact">
<meta name="assert" content="Background with (attachment image) sets the background to the image specified, tiling it to cover the full area, and the background scrolls with the box.">
<style type="text/css">
#div1
{
height: 200px;
overflow: scroll;
width: 200px;
}
div div
{
background: scroll url("support/cat.png");
height: 400px;
width: 400px;
}
</style>
</head>
<body>
<p>Test passes if the box below has a cat image tiled throughout it, and scrolling the box moves the cats as well.</p>
<div id="div1">
<div></div>
</div>
</body>
</html>

27
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-020.htm Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background with (attachment repeat)</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-03-14 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment">
<link rel="match" href="reference/ref-nothing-below.htm">
<meta name="flags" content="">
<meta name="assert" content="Background with (attachment repeat) does not affect the background since image is not set.">
<style type="text/css">
div
{
background: fixed repeat-x;
height: 1in;
width: 1in;
}
</style>
</head>
<body>
<p>Test passes if there is nothing below.</p>
<div></div>
</body>
</html>

27
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-021.htm Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background with (attachment position)</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-03-14 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment">
<link rel="match" href="reference/ref-nothing-below.htm">
<meta name="flags" content="">
<meta name="assert" content="Background with (attachment position) does not affect the background since image is not set.">
<style type="text/css">
div
{
background: fixed bottom;
height: 1in;
width: 1in;
}
</style>
</head>
<body>
<p>Test passes if there is nothing below.</p>
<div></div>
</body>
</html>

26
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-022.htm Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background with (position color)</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-03-14 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-position">
<link rel="match" href="reference/background-001-ref.htm">
<meta name="flags" content="">
<meta name="assert" content="Background with (position color) sets the background of the element to the color specified. Position does nothing since there is no image.">
<style type="text/css">
div
{
background: bottom green;
height: 50px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green rectangle across the page.</p>
<div></div>
</body>
</html>

25
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-023.htm Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background with (position image)</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-position">
<meta name="flags" content="image">
<meta name="assert" content="Background with (position image) sets the background to the image specified, tiling it to cover the full area from the position specified.">
<style type="text/css">
div
{
background: bottom left url("support/cat.png");
border: 1px solid black;
height: 150px;
width: 196px;
}
</style>
</head>
<body>
<p>Test passes if the box below has a cat image tiled throughout it, and the cat image is not cut off at the bottom (it can appear cut off at the top).</p>
<div></div>
</body>
</html>

27
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-024.htm Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background with (position repeat)</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-03-14 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-position">
<link rel="match" href="reference/ref-nothing-below.htm">
<meta name="flags" content="">
<meta name="assert" content="Background with (position repeat) does not affect the background since image is not set.">
<style type="text/css">
div
{
background: bottom repeat-x;
height: 1in;
width: 1in;
}
</style>
</head>
<body>
<p>Test passes if there is nothing below.</p>
<div></div>
</body>
</html>

27
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-025.htm Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background with (position attachment)</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-03-14 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment">
<link rel="match" href="reference/ref-nothing-below.htm">
<meta name="flags" content="">
<meta name="assert" content="Background with (position attachment does not affect the background since image is not set.">
<style type="text/css">
div
{
background: bottom fixed;
height: 1in;
width: 1in;
}
</style>
</head>
<body>
<p>Test passes if there is nothing below.</p>
<div></div>
</body>
</html>

64
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-331.htm Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds and Borders Test: background shorthand - initial values</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="http://www.w3.org/TR/css3-background/#the-background" rel="help">
<meta content="dom" name="flags">
<meta content="Check that given a valid declaration, for each layer the shorthand 'backgound' first sets the corresponding layer of each of 'background-image', 'background-position', 'background-size', 'background-repeat', 'background-origin', 'background-clip' and 'background-attachment' to that property's initial value" name="assert">
<style>
#test {
background: ;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="log"></div>
<div id="test"></div>
<script>
var cs = getComputedStyle(document.getElementById("test"), null);
test(function() {
assert_equals(cs.getPropertyValue("background-image"),
"none", "background initial value for background-image");
}, "background_initial_image");
test(function() {
assert_equals(cs.getPropertyValue("background-position"),
"0% 0%", "background initial value for background-position");
}, "background_initial_position");
test(function() {
assert_equals(cs.getPropertyValue("background-size"),
"auto", "background initial value for background-size");
}, "background_initial_size");
test(function() {
assert_equals(cs.getPropertyValue("background-repeat"),
"repeat", "background initial value for background-repeat");
}, "background_initial_repeat");
test(function() {
assert_equals(cs.getPropertyValue("background-attachment"),
"scroll", "background initial value for background-attachment");
}, "background_initial_attachment");
test(function() {
assert_equals(cs.getPropertyValue("background-origin"),
"padding-box", "background initial value for background-origin");
}, "background_initial_origin");
test(function() {
assert_equals(cs.getPropertyValue("background-clip"),
"border-box", "background initial value for background-clip");
}, "background_initial_clip");
test(function() {
assert_equals(cs.getPropertyValue("background-color"),
"transparent", "background initial value for background-color");
}, "background_initial_color");
</script>
</body></html>

64
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-332.htm Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds and Borders Test: background shorthand - all values specified</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="http://www.w3.org/TR/css3-background/#the-background" rel="help">
<meta content="dom image" name="flags">
<meta content="Check that given a valid declaration, for each layer the shorthand 'backgound' first sets the corresponding layer of each of 'background-image', 'background-position', 'background-size', 'background-repeat', 'background-origin', 'background-clip' and 'background-attachment' to that property's initial value, then assigns any explicit values specified for this layer in the declaration" name="assert">
<style>
#test {
background: url("support/60x60-green.png") 40% / 10em gray round fixed border-box;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="log"></div>
<div id="test"></div>
<script>
var cs = getComputedStyle(document.getElementById("test"), null);
test(function() {
assert_equals(cs.getPropertyValue("background-image"),
"url(support/60x60-green.png)", "background specified value for background-image");
}, "background_specified_image");
test(function() {
assert_equals(cs.getPropertyValue("background-position"),
"40% 50%", "background specified value for background-position");
}, "background_specified_position");
test(function() {
assert_equals(cs.getPropertyValue("background-size"),
"10em 10em", "background specified value for background-size");
}, "background_specified_size");
test(function() {
assert_equals(cs.getPropertyValue("background-repeat"),
"round round", "background specified value for background-repeat");
}, "background_specified_repeat");
test(function() {
assert_equals(cs.getPropertyValue("background-attachment"),
"fixed", "background specified value for background-attachment");
}, "background_specified_attachment");
test(function() {
assert_equals(cs.getPropertyValue("background-origin"),
"border-box", "background specified value for background-origin");
}, "background_specified_origin");
test(function() {
assert_equals(cs.getPropertyValue("background-clip"),
"border-box", "background specified value for background-clip");
}, "background_specified_clip");
test(function() {
assert_equals(cs.getPropertyValue("background-color"),
"gray", "background specified value for background-color");
}, "background_specified_color");
</script>
</body></html>

64
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-333.htm Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds and Borders Test: background shorthand - background-color 'red'</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="http://www.w3.org/TR/css3-background/#the-background" rel="help">
<meta content="dom" name="flags">
<meta content="Check that given a valid declaration, for each layer the shorthand 'backgound' first sets the corresponding layer of each of 'background-image', 'background-position', 'background-size', 'background-repeat', 'background-origin', 'background-clip' and 'background-attachment' to that property's initial value, then assigns any explicit values specified for this layer in the declaration, and finally 'background-color' is set to the specified color, if any, else set to its initial value" name="assert">
<style>
#test {
background: red;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="log"></div>
<div id="test"></div>
<script>
var cs = getComputedStyle(document.getElementById("test"), null);
test(function() {
assert_equals(cs.getPropertyValue("background-image"),
"none", "background initial value for background-image");
}, "background_specified_color_image");
test(function() {
assert_equals(cs.getPropertyValue("background-position"),
"0% 0%", "background initial value for background-position");
}, "background_specified_color_position");
test(function() {
assert_equals(cs.getPropertyValue("background-size"),
"auto", "background initial value for background-size");
}, "background_specified_color_size");
test(function() {
assert_equals(cs.getPropertyValue("background-repeat"),
"repeat", "background initial value for background-repeat");
}, "background_specified_color_repeat");
test(function() {
assert_equals(cs.getPropertyValue("background-attachment"),
"scroll", "background initial value for background-attachment");
}, "background_specified_color_attachment");
test(function() {
assert_equals(cs.getPropertyValue("background-origin"),
"padding-box", "background initial value for background-origin");
}, "background_specified_color_origin");
test(function() {
assert_equals(cs.getPropertyValue("background-clip"),
"border-box", "background initial value for background-clip");
}, "background_specified_color_clip");
test(function() {
assert_equals(cs.getPropertyValue("background-color"),
"red", "background specified value for background-color");
}, "background_specified_color_color");
</script>
</body></html>

36
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-334.htm Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds and Borders Test: background shorthand - background-size '100% auto'</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="http://www.w3.org/TR/css3-background/#the-background" rel="help" title="3.10. Backgrounds Shorthand: the 'background' property">
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-09 -->
<!--
http://www.gtalbot.org/BrowserBugsSection/review/background-334-review.html
-->
<link href="reference/background-334-ref.htm" rel="match">
<meta content="image" name="flags">
<meta content="Background-size with '100% auto' implies to rescale the image horizontally so that it fills the background area width and to rescale the image vertically so that it fills the background area height." name="assert">
<style>
#ref {
background-color: red;
height: 160px;
width: 160px;
}
#test {
background: #CCC url(support/60x60-green.png) top left / 100% auto no-repeat;
border: black dotted 5px;
bottom: 160px;
height: 100px;
padding: 25px;
position: relative;
width: 100px;
}
</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 id="ref"></div>
<div id="test"></div>
</body></html>

34
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-335.htm Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds and Borders Test: background shorthand - only one &lt;box&gt; value</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="http://www.w3.org/TR/css3-background/#the-background" rel="help">
<meta content="dom" name="flags">
<meta content="Check if one <box> value is present then it sets both 'background-origin' and 'background-clip' to that value" name="assert">
<style>
#test {
background: content-box;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="log"></div>
<div id="test"></div>
<script>
var cs = getComputedStyle(document.getElementById("test"), null);
test(function() {
assert_equals(cs.getPropertyValue("background-origin"),
"content-box", "background specified value for background-origin");
}, "background_specified_box_one_origin");
test(function() {
assert_equals(cs.getPropertyValue("background-clip"),
"content-box", "background specified value for background-clip");
}, "background_specified_box_one_clip");
</script>
</body></html>

34
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-336.htm Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds and Borders Test: background shorthand - two &lt;box&gt; values</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="http://www.w3.org/TR/css3-background/#the-background" rel="help">
<meta content="dom" name="flags">
<meta content="Check if two <box> values are present, then the first sets 'background-origin' and the second 'background-clip'" name="assert">
<style>
#test {
background: border-box padding-box;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="log"></div>
<div id="test"></div>
<script>
var cs = getComputedStyle(document.getElementById("test"), null);
test(function() {
assert_equals(cs.getPropertyValue("background-origin"),
"border-box", "background specified value for background-origin");
}, "background_specified_box_two_origin");
test(function() {
assert_equals(cs.getPropertyValue("background-clip"),
"padding-box", "background specified value for background-clip");
}, "background_specified_box_two_clip");
</script>
</body></html>

33
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-attachment-fixed.htm Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>
CSS Test: 'Background-attachment' with value 'fixed'
</title>
<link href="mailto:job@twobanjos.com" rel="author" title="Melanie Archer">
<link href="http://www.w3.org/TR/css3-background/#the-background-attachment" rel="help">
<meta content="interact" name="flags">
<meta content="If 'background-attachment' is given the value 'fixed,' then the background image remains fixed in relation to the user agent viewport when the viewport is scrolled." name="assert">
<style type="text/css">
#test-container {
background-attachment: fixed;
background-position: 1em 5em;
background-image: url("support/cat.png");
background-repeat: no-repeat;
border: 1px solid blue;
height: 250px;
overflow: scroll;
width: 250px;
}
</style>
</head>
<body>
<p>
Test passes if the cat image does not move when the blue-bordered containing block or the viewport is scrolled.
</p>
<div id="test-container">
Cupcake ipsum dolor sit. Amet applicake bonbon chocolate cake ice cream. Bear claw tootsie roll cotton candy biscuit. Sweet roll chupa chups gingerbread sugar plum icing muffin biscuit. Chocolate cake wafer pastry tart macaroon danish topping ice cream. Jujubes liquorice candy canes faworki. Jujubes cake caramels faworki pie cake sweet roll. Tiramisu sesame snaps candy cheesecake brownie souffle biscuit. Danish chupa chups donut. Donut tart marshmallow biscuit lollipop chupa chups jelly beans faworki. Sugar plum wafer faworki marshmallow brownie ice cream cotton candy marshmallow marzipan. Cheesecake gummi bears cupcake sweet croissant cookie chocolate bar sweet roll. Halvah cupcake carrot cake souffle carrot cake chocolate cake pastry gummi bears muffin. Sweet roll candy gingerbread dessert tart. Pastry oat cake jelly beans.
</div>
</body></html>

38
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-attachment-local-scrolling.htm Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Test: Scrolling when ‘background-attachment: local’</title>
<link href="http://www.microsoft.com/" rel="author" title="Microsoft">
<link href="http://www.w3.org/TR/css3-background/#the-background-attachment" rel="help">
<meta content="" name="flags">
<meta content="If 'background-attachment: local' the background scrolls along with the element's contents (the UA may treat 'background-clip: border-box' as the same as 'background-clip: padding-box')." name="assert">
<style type="text/css">
div
{
width: 2in;
height: 2in;
border: 50px double black;
background-image: url("../support/cat.png");
background-attachment: local;
overflow: scroll;
}
</style>
</head>
<body>
<p>Test passes if the images of all the cats scroll when the box is scrolled. (Presence of cats behind the double border is UA dependent). </p>
<div>Filler Text Filler Text
Filler Text Filler Text Filler Text
Filler Text Filler Text Filler Text
Filler Text Filler Text Filler Text
Filler Text Filler Text Filler Text
Filler Text Filler Text Filler Text
Filler Text Filler Text Filler Text
Filler Text Filler Text Filler Text
Filler Text Filler Text Filler Text
Filler Text Filler Text Filler Text
Filler Text Filler Text Filler Text
Filler Text Filler Text Filler Text
Filler Text Filler Text Filler Text
Filler Text Filler Text </div>
</body></html>

33
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-attachment-local.htm Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>
CSS Test: 'Background-attachment' with value 'local'
</title>
<link href="mailto:job@twobanjos.com" rel="author" title="Melanie Archer">
<link href="http://www.w3.org/TR/css3-background/#the-background-attachment" rel="help">
<meta content="interact" name="flags">
<meta content="If 'background-attachment' is given the value 'local,' then the background image scrolls with the containing element's content when the element's content is scrolled" name="assert">
<style type="text/css">
#test-container {
background-attachment: local;
background-image: url("support/cat.png");
background-repeat: no-repeat;
border: 1px solid blue;
height: 250px;
overflow: scroll;
padding: 100px 0 0;
width: 250px;
}
</style>
</head>
<body>
<p>
Test passes if the image of the cat scrolls out of view when the blue-bordered containing block is scrolled.
</p>
<div id="test-container">
Cupcake ipsum dolor sit. Amet applicake bonbon chocolate cake ice cream. Bear claw tootsie roll cotton candy biscuit. Sweet roll chupa chups gingerbread sugar plum icing muffin biscuit. Chocolate cake wafer pastry tart macaroon danish topping ice cream. Jujubes liquorice candy canes faworki. Jujubes cake caramels faworki pie cake sweet roll. Tiramisu sesame snaps candy cheesecake brownie souffle biscuit. Danish chupa chups donut. Donut tart marshmallow biscuit lollipop chupa chups jelly beans faworki. Sugar plum wafer faworki marshmallow brownie ice cream cotton candy marshmallow marzipan. Cheesecake gummi bears cupcake sweet croissant cookie chocolate bar sweet roll. Halvah cupcake carrot cake souffle carrot cake chocolate cake pastry gummi bears muffin. Sweet roll candy gingerbread dessert tart. Pastry oat cake jelly beans.
</div>
</body></html>

40
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-clip-001.htm Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds and Borders Test: background-clip - initial and supported values</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help">
<meta content="dom" name="flags">
<meta content="Check if background-clip initial value is border-box and supports values border-box, padding-box and content-box" name="assert">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="log"></div>
<div id="test"></div>
<script>
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-clip"),
"border-box", "background-clip initial value");
}, "background-clip_initial");
document.getElementById("test").style.backgroundClip = "border-box";
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-clip"),
"border-box", "background-clip supporting value");
}, "background-clip_border-box");
document.getElementById("test").style.backgroundClip = "padding-box";
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-clip"),
"padding-box", "background-clip supporting value");
}, "background-clip_padding-box");
document.getElementById("test").style.backgroundClip = "content-box";
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-clip"),
"content-box", "background-clip supporting value");
}, "background-clip_content-box");
</script>
</body></html>

33
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-clip-002.htm Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds and Borders Test: background-clip - initial value</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-09 -->
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help" title="3.7. Painting Area: the 'background-clip' property">
<link href="reference/background-clip-002-ref.htm" rel="match">
<meta content="" name="flags">
<meta content="Background-clip with initial value implies to paint the background within (clipped to) the border box." name="assert">
<style>
#ref-overlapped-red {
background-color: red;
height: 160px;
width: 160px;
}
#test-overlapping-green {
background-color: green;
border: transparent dotted 5px;
bottom: 160px;
height: 100px;
padding: 25px;
position: relative;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="ref-overlapped-red"></div>
<div id="test-overlapping-green"></div>
</body></html>

34
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-clip-003.htm Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds and Borders Test: background-clip - border-box keyword value</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-09 -->
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help" title="3.7. Painting Area: the 'background-clip' property">
<link href="reference/background-clip-002-ref.htm" rel="match">
<meta content="" name="flags">
<meta content="Background-clip with 'border-box' implies to paint the background within (clipped to) the border box." name="assert">
<style>
#ref-overlapped-red {
background-color: red;
height: 160px;
width: 160px;
}
#test-overlapping-green {
background-clip: border-box;
background-color: green;
border: transparent dotted 5px;
bottom: 160px;
height: 100px;
padding: 25px;
position: relative;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="ref-overlapped-red"></div>
<div id="test-overlapping-green"></div>
</body></html>

35
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-clip-004.htm Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds and Borders Test: background-clip - padding-box keyword value</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-09 -->
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help" title="3.7. Painting Area: the 'background-clip' property">
<link href="reference/background-clip-004-ref.htm" rel="match">
<meta content="" name="flags">
<meta content="Background-clip with 'padding-box' implies to paint the background within (clipped to) the padding box." name="assert">
<style>
#test-overlapped-red {
background-clip: padding-box;
background-color: red;
border: transparent dotted 5px;
height: 100px;
padding: 25px;
width: 100px;
}
#ref-overlapping-green {
background-color: green;
bottom: 155px;
height: 150px;
left: 5px;
position: relative;
width: 150px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="test-overlapped-red"></div>
<div id="ref-overlapping-green"></div>
</body></html>

35
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-clip-005.htm Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds and Borders Test: background-clip - content-box keyword value</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-09 -->
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help" title="3.7. Painting Area: the 'background-clip' property">
<link href="reference/background-clip-005-ref.htm" rel="match">
<meta content="" name="flags">
<meta content="Background-clip with 'content-box' implies to paint the background within (clipped to) the content box." name="assert">
<style>
#test-overlapped-red {
background-clip: content-box;
background-color: red;
border: transparent dotted 5px;
height: 100px;
padding: 25px;
width: 100px;
}
#ref-overlapping-green {
background-color: green;
bottom: 130px;
height: 100px;
left: 30px;
position: relative;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="test-overlapped-red"></div>
<div id="ref-overlapping-green"></div>
</body></html>

50
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-clip-006.htm Normal file
View file

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds and Borders Test: background-clip - inherit keyword value</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-09 -->
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help" title="3.7. Painting Area: the 'background-clip' property">
<link href="reference/background-clip-005-ref.htm" rel="match">
<link href="http://www.w3.org/TR/css3-background/#value-types" rel="help" title="2.2. Value Types">
<!--
"
all properties defined in this specification also accept
the inherit keyword as their property value
"
CSS Backgrounds and Borders Module Level 3
2.2. Value Types
http://www.w3.org/TR/css3-background/#value-types
-->
<meta content="" name="flags">
<meta content="Background-clip with 'inherit' implies to inherit its parent element value to paint the background area." name="assert">
<style>
#container {
background-clip: content-box;
}
#test-overlapped-red {
background-clip: inherit;
background-color: red;
border: transparent dotted 5px;
height: 100px;
padding: 25px;
width: 100px;
}
#ref-overlapping-green {
background-color: green;
bottom: 130px;
height: 100px;
left: 30px;
position: relative;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="container">
<div id="test-overlapped-red"></div>
<div id="ref-overlapping-green"></div>
</div>
</body></html>

27
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-clip-007.htm Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html><head>
<title>CSS Background and Borders Test: background-clip: content-box with background-color</title>
<link href="mailto:jchaffraix@webkit.org" rel="author" title="Julien Chaffraix">
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="author" title="Gérard Talbot">
<link href="mailto:arronei@microsoft.com" rel="reviewer" title="Arron Eicholz"> <!-- 2012-10-27 -->
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help">
<meta content="" name="flags">
<meta content="When 'background-clip' is set to 'content-box', then the background-color shines only through the content area; it does not shine through the padding area nor the border area." name="assert">
<link href="reference/ref-if-there-is-no-red.htm" rel="match">
<style>
div
{
background-clip: content-box;
background-color: red;
height: auto;
padding: 50px;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if there is <strong>no red</strong>.</p>
<div></div>
</body></html>

28
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-clip-008.htm Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html><head>
<title>CSS Background and Borders Test: background-clip: padding-box with background-color</title>
<link href="mailto:jchaffraix@webkit.org" rel="author" title="Julien Chaffraix">
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="author" title="Gérard Talbot">
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2013-04-09 -->
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help" title="3.7. Painting Area: the 'background-clip' property">
<meta content="" name="flags">
<meta content="When 'background-clip' is set to 'padding-box', then the background painting area is clipped at the edges of the padding of the element. In this test, the padding box is 0px tall and as wide as the body element; therefore, red should not be visible." name="assert">
<link href="reference/ref-if-there-is-no-red.htm" rel="match">
<style>
div
{
background-clip: padding-box;
background-color: red;
border: transparent solid 50px;
height: auto;
padding: 0px;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if there is <strong>no red</strong>.</p>
<div></div>
</body></html>

27
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-clip-009.htm Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html><head>
<title>CSS Background and Borders Test: background-clip: border-box with background-color</title>
<link href="mailto:jchaffraix@webkit.org" rel="author" title="Julien Chaffraix">
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="author" title="Gérard Talbot">
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2013-04-09 -->
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help" title="3.7. Painting Area: the 'background-clip' property">
<meta content="" name="flags">
<meta content="When 'background-clip' is set to 'border-box', then the background painting area is clipped at the edges of the borders of the element. In this test, the border box is 96px tall and 96px wide and is made from only the borders." name="assert">
<link href="reference/ref-filled-black-96px-square.htm" rel="match">
<style>
div
{
background-clip: border-box;
background-color: black;
border: transparent solid 48px;
height: auto;
width: 0px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled black square.</p>
<div></div>
</body></html>

36
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-clip-010.htm Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>CSS Background and Borders Test: background-clip - content-box with background-color</title>
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="author" title="Gérard Talbot">
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help" title="3.7. Painting Area: the 'background-clip' property">
<link href="reference/ref-if-there-is-no-red.htm" rel="match">
<meta content="" name="flags">
<meta content="When 'background-clip' is set to 'content-box', then the background painting area is clipped at the edges of the content of the element. In this test, height is 'auto', therefore its used value is '0px'; width is 'auto', therefore its used value is as wide as the body element. So, the content box is 0px tall and as wide as the body element; therefore, red should not be visible." name="assert">
<style type="text/css">
div
{
background-clip: content-box;
background-color: red;
border: transparent solid 20px;
height: auto;
padding: 30px;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if there is <strong>no red</strong>.</p>
<div></div>
</body></html>

36
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-clip-content-box-001.htm Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds and Borders Test: background-clip Reference</title>
<link href="mailto:wangjian@ucweb.com" rel="author" title="James Wang">
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help">
<meta content="" name="flags">
<meta content="background-clip with content-box means paint the background within the content box" name="assert">
<link href="reference/background-clip-content-box-ref.htm" rel="match">
<style type="text/css">
* { padding: 0; margin: 0; }
#test-color-blue {
background-color: blue;
height: 200px;
position: absolute;
width: 200px;
}
#test-color-green {
background-clip: content-box;
background-color: rgba(0, 255, 0, 1);
height: 180px;
padding: 10px;
position: absolute;
width: 180px;
}
</style>
</head>
<body>
<p>Test pass if the green box has a 10px width red edge</p>
<!-- background -->
<div id="test-color-blue"></div>
<div id="test-color-green"></div>
</body></html>

37
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-clip-content-box.htm Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgroud and Borders Test:backgrond-clip_content-box</title>
<link href="mailto:zhuanping123@163.com" rel="author" title="anping">
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help">
<meta content="reference/reference.html" name="match">
<meta content="Test passes if the backgrond color is limited to the content only and border is blue dotted without red" name="assert">
<style>
div{
position:absolute;
}
#test{
background-clip: content-box;
border: 5px dotted blue;
height: 100px;
left: 10px;
padding: 10px;
top: 10px;
width: 100px;
background-color:red;
}
</style>
</head><body>
<p>
"Test passes if the backgrond color is limited to the content only and border is blue dotted without red."
</p>
<div id="container">
<div id="test"></div>
</div>
</body></html>

77
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-clip-padding-box-with-border-radius.htm Normal file
View file

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html><!-- Submitted from TestTWF Paris --><head>
<title>CSS Backgrounds and Borders Test: background-clip: padding-box with border-radius</title>
<link href="http://lea.verou.me" rel="author" title="Lea Verou">
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help">
<link href="http://www.w3.org/TR/css3-background/#corner-shaping" rel="help">
<meta content="" name="flags">
<meta content="Backgrounds clipped to the padding box should follow the padding box curve, which should be equal to the outer border radius minus the corresponding border thickness." name="assert">
<style>
div {
position: absolute;
}
.container {
position: relative;
width: 140px;
height: 140px;
margin: 10px;
}
.ref {
top: 10px;
left: 10px;
height: 140px;
width: 140px;
border-radius: 30px;
}
.test {
width: 100px;
height: 100px;
padding: 20px;
border: 10px solid transparent;
border-radius: 40px;
background-clip: padding-box;
}
.behind {
background-color: red;
}
.top {
background-color: green;
}
.ref.top {
width: 144px;
height: 144px;
left: 8px;
top: 8px;
}
.test.top {
width: 104px;
height: 104px;
left: -2px;
top: -2px;
}
</style>
</head>
<body>
<p>Test passes if there are two filled green rounded squares and <strong>no red</strong>.</p>
<div class="container">
<div class="test behind"></div>
<div class="ref top"></div>
</div>
<div class="container">
<div class="ref behind"></div>
<div class="test top"></div>
</div>
</body></html>

26
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-clip-root.htm Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html><!-- Submitted from TestTWF Paris --><head>
<title>CSS Backgrounds and Borders Test: background-clip on root</title>
<link href="http://lea.verou.me" rel="author" title="Lea Verou">
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help">
<meta content="image" name="flags">
<meta content="The root element has a different background painting area, and thus the ‘background-clip’ property has no effect when specified on it." name="assert">
<style>
html {
padding: 20px;
background: url('support/1x1-green.png'), red;
background-clip: content-box, border-box;
}
</style>
</head>
<body>
<p>Test passes if there is green and <strong>no red</strong>.</p>
</body></html>

36
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-clip_padding-box.htm Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html><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">
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help">
<link href="reference/background_clip_padding-box.htm" rel="match">
<meta content="Test passes if border is blue and dotted without red background" name="assert">
<style type="text/css">
/* Positioned container allows for the self-describing statement to still
be visible in the case of failure */
.container {
position: absolute;
}
.test {
background-color: red;
height: 130px;
left: 5px;
top: 5px;
width: 130px;
border: blue dotted 5px ;
position: absolute;
background-clip: padding-box;
}
</style>
</head>
<body>
<p>Test passes if border is blue and dotted without red background </p>
<div class="container">
<div class="test"></div>
</div>
</body></html>

25
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-color-applied-to-rounded-inline-element.htm Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Test: 'Background-color' applied to a rounded inline element</title>
<link href="http://www.microsoft.com/" rel="author" title="Microsoft">
<link href="http://www.w3.org/TR/css3-background/#background-color" rel="help">
<meta content="" name="flags">
<meta content="'Background-color' is clipped according to the 'background-clip' property in an inline element." name="assert">
<style type="text/css">
div
{
border-radius: 20px;
background-color: orange;
background-clip: border-box;
color: orange;
padding: 15px;
display: inline;
}
</style>
</head>
<body>
<p>Test passes if there is an orange box with rounded corners below.</p>
<div>Filler Text</div>
</body></html>

35
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-color-border-box.htm Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Test: Background color clipped to 'border-box'</title>
<link href="http://www.microsoft.com/" rel="author" title="Microsoft">
<link href="http://www.w3.org/TR/css3-background/#the-background-color" rel="help">
<meta content="" name="flags">
<meta content="Background color is clipped according to the 'background-clip' value associated with the bottom-most background image." name="assert">
<style type="text/css">
#test
{
width: 250px;
height: 250px;
border: 10px dashed purple;
padding: 10px;
background-image: url("support/blue_color.png"), url("support/orange_color.png"), url("support/green_color.png");
background-repeat: no-repeat;
background-clip: padding-box, content-box, border-box;
background-position: 30px 30px, 60px 60px, 90px 90px;
background-color: black;
}
#parent
{
width: 290px;
background: red;
}
</style>
</head>
<body>
<p>Test passes if green is visible on the page and there is no red visible on the page.</p>
<div id="parent">
<div id="test"></div>
</div>
</body></html>

21
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-image-001.htm Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html><head><title>CSS Backgrounds: background-image div</title>
<link href="
http://www.justin-hill.com" rel="author" title="Justin Hill">
<link href="http://www.w3.org/TR/css3-background/#the-background-image" rel="help">
<link href="reference/background-image-001-ref.htm" rel="match">
<meta content="Test checks that background-image displays raster image for div background." name="assert">
<style>
.container {
top:50px;
left:50px;
width: 100px;
height: 100px;
background-image: url("support/green.png");
background-color: red;
}
</style>
</head><body>
<p> Test passes if green image shows and no red visable.</p>
<div class="container"></div>
</body></html>

21
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-image-002.htm Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html><head><title>CSS Backgrounds: background-image layered background on div</title>
<link href="
http://www.justin-hill.com" rel="author" title="Justin Hill">
<link href="http://www.w3.org/TR/css3-background/#the-background-image" rel="help">
<link href="reference/background-image-001-ref.htm" rel="match">
<meta content="Test checks that background-image displays layerd images in the correct order for div background." name="assert">
<style>
.container {
top:50px;
left:50px;
width: 100px;
height: 100px;
background-image: url("support/green.png"), url("support/red.png");
background-color: red;
}
</style>
</head><body>
<p> Test passes if green image shows and no red visable.</p>
<div class="container"></div>
</body></html>

31
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-image-003.htm Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html><head><title>CSS Backgrounds: background-image &lt;a&gt;</title>
<link href="
http://www.justin-hill.com" rel="author" title="Justin Hill">
<link href="http://www.w3.org/TR/css3-background/#the-background-image" rel="help">
<link href="reference/background-image-001-ref.htm" rel="match">
<meta content="Test checks that background-image displays raster image for <a> tag." name="assert">
<style>
.container {
top:50px;
left:50px;
width: 100px;
height: 100px;
}
a {
width:100px;
height:100px;
color:transparent;
font-size: 50px;
background-image: url("support/green.png");
background-color: red;
display: block;
}
</style>
</head><body>
<p> Test passes if green image shows and no red visable.</p>
<div class="container">
<a href="#">x</a>
</div>
</body></html>

31
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-image-004.htm Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html><head><title>CSS Backgrounds: background-image &lt;a&gt; layered images</title>
<link href="
http://www.justin-hill.com" rel="author" title="Justin Hill">
<link href="http://www.w3.org/TR/css3-background/#the-background-image" rel="help">
<link href="reference/background-image-001-ref.htm" rel="match">
<meta content="Test checks that background-image displays multiple images in correct order on <a> tag." name="assert">
<style>
.container {
top:50px;
left:50px;
width: 100px;
height: 100px;
}
a {
width:100px;
height:100px;
color:transparent;
font-size: 50px;
background-image: url("support/green.png"), url("support/red.png");
background-color: red;
display: block;
}
</style>
</head><body>
<p> Test passes if green image shows and no red visable.</p>
<div class="container">
<a href="#">x</a>
</div>
</body></html>

32
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-image-005.htm Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html><head><title>CSS Backgrounds: background-image p tag</title>
<link href="
http://www.justin-hill.com" rel="author" title="Justin Hill">
<link href="http://www.w3.org/TR/css3-background/#the-background-image" rel="help">
<link href="reference/background-image-001-ref.htm" rel="match">
<meta content="Test checks that background-image displays raster image for p tag." name="assert">
<style>
.container {
top:50px;
left:50px;
width: 100px;
height: 100px;
}
.container p {
width:100px;
height:100px;
color:transparent;
font-size: 50px;
background-image: url("support/green.png");
background-color: red;
display: block;
margin: 0px;
}
</style>
</head><body>
<p> Test passes if green image shows and no red visable.</p>
<div class="container">
<p>x</p>
</div>
</body></html>

32
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-image-006.htm Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html><head><title>CSS Backgrounds: background-image p layered images</title>
<link href="
http://www.justin-hill.com" rel="author" title="Justin Hill">
<link href="http://www.w3.org/TR/css3-background/#the-background-image" rel="help">
<link href="reference/background-image-001-ref.htm" rel="match">
<meta content="Test checks that background-image displays multiple images in correct order on p tag." name="assert">
<style>
.container {
top:50px;
left:50px;
width: 100px;
height: 100px;
}
.container p {
width:100px;
height:100px;
color:transparent;
font-size: 50px;
background-image: url("support/green.png"), url("support/red.png");
background-color: red;
display: block;
margin: 0px;
}
</style>
</head><body>
<p> Test passes if green image shows and no red visable.</p>
<div class="container">
<p>x</p>
</div>
</body></html>

32
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-image-007.htm Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html><head><title>CSS Backgrounds: background-image :first-letter layered images</title>
<link href="
http://www.justin-hill.com" rel="author" title="Justin Hill">
<link href="http://www.w3.org/TR/css3-background/#the-background-image" rel="help">
<link href="reference/background-image-001-ref.htm" rel="match">
<meta content="Test checks that background-image displays multiple images in correct order on :first-letter selector." name="assert">
<style>
.container {
top:50px;
left:50px;
width: 100px;
height: 100px;
}
.container p:first-letter {
width:100px;
height:100px;
color:transparent;
font-size: 50px;
background-image: url("support/green.png"), url("support/red.png");
background-color: red;
display: block;
margin: 0px;
}
</style>
</head><body>
<p> Test passes if green image shows and no red visable.</p>
<div class="container">
<p>x</p>
</div>
</body></html>

29
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-image-first-letter.htm Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: background-image applicability to ::first-letter</title>
<link href="mailto:emalasky@adobe.com" rel="author" title="Ethan Malasky">
<link href="http://www.w3.org/TR/css3-background/#placement" rel="help">
<link href="http://www.w3.org/TR/css3-background/#the-background-image" rel="help">
<link href="http://www.w3.org/TR/CSS21/colors.html#background-properties" rel="help">
<link href="http://www.w3.org/TR/CSS21/selector.html#first-letter" rel="help">
<link href="reference/background-image-first-letter-ref.htm" rel="match">
<link href="http://fantasai.inkedblade.net/contact" rel="reviewer" title="Elika J. Etemad">
<meta content="ahem image" name="flags">
<meta content="background-image applicability to ::first-letter" name="assert">
<style type="text/css">
#content {
color: transparent;
font: 100px Ahem;
}
#content::first-letter {
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">X</div>
</body></html>

65
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-intrinsic-001.htm Normal file
View file

@ -0,0 +1,65 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background Intrinsic Sizes: No intrinsic size</title>
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size">
<link rel="match" href="reference/background-intrinsic-ref.htm">
<meta name="flags" content="svg">
<meta name="assert" content="A background image with no intrinsic size covers the entire padding box.">
<style type="text/css">
/* Setup. Use 5:6 ratio because it's weird and unlikely to be hard-coded anywhere. */
div {
position: relative;
}
.cover, .limit {
width: 120px;
height: 120px;
margin: 0.5em;
background: green; /* Used to match reference; remove for debugging. */
}
.control {
position: absolute;
top: 10px; bottom: 10px;
left: 10px; right: 30px;
}
.cover .control {
background: red;
}
.limit .control {
background: green;
}
.test {
/* 80x100 bgpos area */
height: 80px;
width: 60px;
padding: 10px;
/* 100 x 120 bgpaint area */
border: 10px solid transparent;
}
/* Test */
.cover .test {
background: no-repeat url(support/green-intrinsic-none.svg);
}
.limit .test {
background: no-repeat url(support/red-intrinsic-none.svg);
}
</style>
</head>
<body>
<p>There must be two green boxes below and no red.</p>
<div class="cover">
<div class="control"></div>
<div class="test"></div>
</div>
<div class="limit">
<div class="test"></div>
<div class="control"></div>
</div>
</body>
</html>

67
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-intrinsic-002.htm Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background Intrinsic Sizes: Intrinsic Width</title>
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size">
<link rel="match" href="reference/background-intrinsic-ref.htm">
<meta name="flags" content="svg">
<meta name="assert" content="A background image with only an intrinsic width covers its intrinsic width and the height of the padding box.">
<style type="text/css">
/* Setup. Use 5:6 ratio because it's weird and unlikely to be hard-coded anywhere. */
div {
position: relative;
}
.cover, .limit {
width: 120px;
height: 120px;
margin: 0.5em;
background: green; /* Used to match reference; remove for debugging. */
}
.control {
position: absolute;
top: 10px; bottom: 10px;
left: 10px; right: 30px;
}
.cover .control {
background: red;
}
.limit .control {
background: green;
}
.test {
/* 80x100 bgpos area */
height: 80px;
width: 60px;
padding: 10px;
border: 10px solid transparent;
}
/* Test */
.cover .test {
background: no-repeat url(support/green-intrinsic-width.svg);
}
.limit .test {
background: no-repeat url(support/red-intrinsic-width.svg);
}
.control {
width: 60px;
}
</style>
</head>
<body>
<p>There must be two green boxes below and no red.</p>
<div class="cover">
<div class="control"></div>
<div class="test"></div>
</div>
<div class="limit">
<div class="test"></div>
<div class="control"></div>
</div>
</body>
</html>

67
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-intrinsic-003.htm Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background Intrinsic Sizes: Intrinsic Height</title>
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size">
<link rel="match" href="reference/background-intrinsic-ref.htm">
<meta name="flags" content="svg">
<meta name="assert" content="A background image with only an intrinsic height covers its intrinsic height and the width of the padding box.">
<style type="text/css">
/* Setup. Use 5:6 ratio because it's weird and unlikely to be hard-coded anywhere. */
div {
position: relative;
}
.cover, .limit {
width: 120px;
height: 120px;
margin: 0.5em;
background: green; /* Used to match reference; remove for debugging. */
}
.control {
position: absolute;
top: 10px; bottom: 10px;
left: 10px; right: 30px;
}
.cover .control {
background: red;
}
.limit .control {
background: green;
}
.test {
/* 80x100 bgpos area */
height: 80px;
width: 60px;
padding: 10px;
border: 10px solid transparent;
}
/* Test */
.cover .test {
background: no-repeat url(support/green-intrinsic-height.svg);
}
.limit .test {
background: no-repeat url(support/red-intrinsic-height.svg);
}
.control {
height: 60px;
}
</style>
</head>
<body>
<p>There must be two green boxes below and no red.</p>
<div class="cover">
<div class="control"></div>
<div class="test"></div>
</div>
<div class="limit">
<div class="test"></div>
<div class="control"></div>
</div>
</body>
</html>

70
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-intrinsic-004.htm Normal file
View file

@ -0,0 +1,70 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background Intrinsic Sizes: Intrinsic Ratio (Match Heights)</title>
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size">
<link rel="match" href="reference/background-intrinsic-ref.htm">
<meta name="flags" content="may svg">
<meta name="assert" content="A background image with only an intrinsic ratio covers largest rectangle at that ratio that exceeds neither the height nor width of the background positioning area.">
<style type="text/css">
/* Setup. Use 5:6 ratio because it's weird and unlikely to be hard-coded anywhere. */
div {
position: relative;
}
.cover, .limit {
width: 120px;
height: 120px;
margin: 0.5em;
background: green; /* Used to match reference; remove for debugging. */
}
.control {
position: absolute;
top: 10px; bottom: 10px;
left: 10px; right: 30px;
}
.cover .control {
background: red;
}
.limit .control {
background: green;
}
.test {
/* 80x100 bgpos area */
height: 80px;
width: 60px;
padding: 10px;
border: 10px solid transparent;
}
/* Test */
.cover .test {
background: no-repeat url(support/green-intrinsic-ratio-portrait.svg);
}
.limit .test {
background: no-repeat url(support/red-intrinsic-ratio-portrait.svg);
}
.cover .control {
width: 66px;
}
.limit .control {
width: 67px;
}
</style>
</head>
<body>
<p>There must be two green boxes below and no red.</p>
<div class="cover">
<div class="control"></div>
<div class="test"></div>
</div>
<div class="limit">
<div class="test"></div>
<div class="control"></div>
</div>
</body>
</html>

70
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-intrinsic-005.htm Normal file
View file

@ -0,0 +1,70 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background Intrinsic Sizes: Intrinsic Ratio (Match Widths)</title>
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size">
<link rel="match" href="reference/background-intrinsic-ref.htm">
<meta name="flags" content="may svg">
<meta name="assert" content="A background image with only an intrinsic ratio covers largest rectangle at that ratio that exceeds neither the height nor width of the background positioning area.">
<style type="text/css">
/* Setup. Use 5:6 ratio because it's weird and unlikely to be hard-coded anywhere. */
div {
position: relative;
}
.cover, .limit {
width: 120px;
height: 120px;
margin: 0.5em;
background: green; /* Used to match reference; remove for debugging. */
}
.control {
position: absolute;
top: 10px; bottom: 10px;
left: 10px; right: 30px;
}
.cover .control {
background: red;
}
.limit .control {
background: green;
}
.test {
/* 80x100 bgpos area */
height: 80px;
width: 60px;
padding: 10px;
border: 10px solid transparent;
}
/* Test */
.cover .test {
background: no-repeat url(support/green-intrinsic-ratio-landscape.svg);
}
.limit .test {
background: no-repeat url(support/red-intrinsic-ratio-landscape.svg);
}
.cover .control {
height: 53px;
}
.limit .control {
height: 54px;
}
</style>
</head>
<body>
<p>There must be two green boxes below and no red.</p>
<div class="cover">
<div class="control"></div>
<div class="test"></div>
</div>
<div class="limit">
<div class="test"></div>
<div class="control"></div>
</div>
</body>
</html>

68
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-intrinsic-006.htm Normal file
View file

@ -0,0 +1,68 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background Intrinsic Sizes: Intrinsic Percentage Width and Height</title>
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size">
<link rel="match" href="reference/background-intrinsic-ref.htm">
<meta name="flags" content="svg">
<meta name="assert" content="A background image with only an intrinsic ratio covers largest rectangle at that ratio that exceeds neither the height nor width of the background positioning area.">
<style type="text/css">
/* Setup. Use 5:6 ratio because it's weird and unlikely to be hard-coded anywhere. */
div {
position: relative;
}
.cover, .limit {
width: 120px;
height: 120px;
margin: 0.5em;
background: green; /* Used to match reference; remove for debugging. */
}
.control {
position: absolute;
top: 10px; bottom: 10px;
left: 10px; right: 30px;
}
.cover .control {
background: red;
}
.limit .control {
background: green;
}
.test {
/* 80x100 bgpos area */
height: 80px;
width: 60px;
padding: 10px;
border: 10px solid transparent;
}
/* Test */
.cover .test {
background: no-repeat url(support/green-intrinsic-width-pc-height-pc.svg);
}
.limit .test {
background: no-repeat url(support/red-intrinsic-width-pc-height-pc.svg);
}
.control {
width: 32px;
height: 60px;
}
</style>
</head>
<body>
<p>There must be two green boxes below and no red.</p>
<div class="cover">
<div class="control"></div>
<div class="test"></div>
</div>
<div class="limit">
<div class="test"></div>
<div class="control"></div>
</div>
</body>
</html>

68
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-intrinsic-007.htm Normal file
View file

@ -0,0 +1,68 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background Intrinsic Sizes: Intrinsic Width and Ratio</title>
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size">
<link rel="match" href="reference/background-intrinsic-ref.htm">
<meta name="flags" content="svg">
<meta name="assert" content="A missing background image height is calculated from the width and the ratio.">
<style type="text/css">
/* Setup. Use 5:6 ratio because it's weird and unlikely to be hard-coded anywhere. */
div {
position: relative;
}
.cover, .limit {
width: 120px;
height: 120px;
margin: 0.5em;
background: green; /* Used to match reference; remove for debugging. */
}
.control {
position: absolute;
top: 10px; bottom: 10px;
left: 10px; right: 30px;
}
.cover .control {
background: red;
}
.limit .control {
background: green;
}
.test {
/* 80x100 bgpos area */
height: 80px;
width: 60px;
padding: 10px;
border: 10px solid transparent;
}
/* Test */
.cover .test {
background: no-repeat url(support/green-intrinsic-width-ratio.svg);
}
.limit .test {
background: no-repeat url(support/red-intrinsic-width-ratio.svg);
}
.control {
width: 40px;
height: 60px;
}
</style>
</head>
<body>
<p>There must be two green boxes below and no red.</p>
<div class="cover">
<div class="control"></div>
<div class="test"></div>
</div>
<div class="limit">
<div class="test"></div>
<div class="control"></div>
</div>
</body>
</html>

68
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-intrinsic-008.htm Normal file
View file

@ -0,0 +1,68 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background Intrinsic Sizes: Intrinsic Height and Ratio</title>
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size">
<link rel="match" href="reference/background-intrinsic-ref.htm">
<meta name="flags" content="svg">
<meta name="assert" content="A missing background image width is calculated from the height and the ratio.">
<style type="text/css">
/* Setup. Use 5:6 ratio because it's weird and unlikely to be hard-coded anywhere. */
div {
position: relative;
}
.cover, .limit {
width: 120px;
height: 120px;
margin: 0.5em;
background: green; /* Used to match reference; remove for debugging. */
}
.control {
position: absolute;
top: 10px; bottom: 10px;
left: 10px; right: 30px;
}
.cover .control {
background: red;
}
.limit .control {
background: green;
}
.test {
/* 80x100 bgpos area */
height: 80px;
width: 60px;
padding: 10px;
border: 10px solid transparent;
}
/* Test */
.cover .test {
background: no-repeat url(support/green-intrinsic-height-ratio.svg);
}
.limit .test {
background: no-repeat url(support/red-intrinsic-height-ratio.svg);
}
.control {
width: 40px;
height: 60px;
}
</style>
</head>
<body>
<p>There must be two green boxes below and no red.</p>
<div class="cover">
<div class="control"></div>
<div class="test"></div>
</div>
<div class="limit">
<div class="test"></div>
<div class="control"></div>
</div>
</body>
</html>

68
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-intrinsic-009.htm Normal file
View file

@ -0,0 +1,68 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background Intrinsic Sizes: Intrinsic Width and Height (Vector)</title>
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size">
<link rel="match" href="reference/background-intrinsic-ref.htm">
<meta name="flags" content="svg">
<meta name="assert" content="A background with an intrinsic width and height is drawn at that size.">
<style type="text/css">
/* Setup. Use 5:6 ratio because it's weird and unlikely to be hard-coded anywhere. */
div {
position: relative;
}
.cover, .limit {
width: 120px;
height: 120px;
margin: 0.5em;
background: green; /* Used to match reference; remove for debugging. */
}
.control {
position: absolute;
top: 10px; bottom: 10px;
left: 10px; right: 30px;
}
.cover .control {
background: red;
}
.limit .control {
background: green;
}
.test {
/* 80x100 bgpos area */
height: 80px;
width: 60px;
padding: 10px;
border: 10px solid transparent;
}
/* Test */
.cover .test {
background: no-repeat url(support/green-intrinsic-width-height.svg);
}
.limit .test {
background: no-repeat url(support/red-intrinsic-width-height.svg);
}
.control {
width: 40px;
height: 60px;
}
</style>
</head>
<body>
<p>There must be two green boxes below and no red.</p>
<div class="cover">
<div class="control"></div>
<div class="test"></div>
</div>
<div class="limit">
<div class="test"></div>
<div class="control"></div>
</div>
</body>
</html>

68
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-intrinsic-010.htm Normal file
View file

@ -0,0 +1,68 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Background Intrinsic Sizes: Intrinsic Width and Height (Raster)</title>
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size">
<link rel="match" href="reference/background-intrinsic-ref.htm">
<meta name="flags" content="svg">
<meta name="assert" content="A background with an intrinsic width and height is drawn at that size.">
<style type="text/css">
/* Setup. Use 5:6 ratio because it's weird and unlikely to be hard-coded anywhere. */
div {
position: relative;
}
.cover, .limit {
width: 120px;
height: 120px;
margin: 0.5em;
background: green; /* Used to match reference; remove for debugging. */
}
.control {
position: absolute;
top: 10px; bottom: 10px;
left: 10px; right: 10px;
}
.cover .control {
background: red;
}
.limit .control {
background: green;
}
.test {
/* 80x100 bgpos area */
height: 80px;
width: 60px;
padding: 10px;
border: 10px solid transparent;
}
/* Test */
.cover .test {
background: no-repeat url(support/green-portrait.png);
}
.limit .test {
background: no-repeat url(support/red-portrait.png);
}
.control {
width: 40px;
height: 60px;
}
</style>
</head>
<body>
<p>There must be two green boxes below and no red.</p>
<div class="cover">
<div class="control"></div>
<div class="test"></div>
</div>
<div class="limit">
<div class="test"></div>
<div class="control"></div>
</div>
</body>
</html>

40
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-origin-001.htm Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds and Borders Test: background-origin - initial and supported values</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help">
<meta content="dom" name="flags">
<meta content="Check if background-origin initial value is padding-box and supports values border-box, padding-box and content-box" name="assert">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="log"></div>
<div id="test"></div>
<script>
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-origin"),
"padding-box", "background-origin initial value");
}, "background-origin_initial");
document.getElementById("test").style.backgroundOrigin = "border-box";
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-origin"),
"border-box", "background-origin supporting value");
}, "background-origin_border-box");
document.getElementById("test").style.backgroundOrigin = "padding-box";
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-origin"),
"padding-box", "background-origin supporting value");
}, "background-origin_padding-box");
document.getElementById("test").style.backgroundOrigin = "content-box";
test(function() {
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-origin"),
"content-box", "background-origin supporting value");
}, "background-origin_content-box");
</script>
</body></html>

39
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-origin-002.htm Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds and Borders Test: background-origin - initial value</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-09 -->
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help" title="3.8. Positioning Area: the 'background-origin' property">
<link href="reference/background-origin-002-ref.htm" rel="match">
<meta content="image" name="flags">
<meta content="Background-origin with initial value implies to position the background relative to the padding box." name="assert">
<style>
div {
position: absolute;
}
#ref-overlapped-red {
background-color: red;
height: 60px;
left: 5px;
top: 5px;
width: 60px;
}
#test-overlapping-green {
background-image: url(support/60x60-green.png);
background-repeat: no-repeat;
border: transparent dotted 5px;
height: 100px;
padding: 25px;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="container">
<div id="ref-overlapped-red"></div>
<div id="test-overlapping-green"></div>
</div>
</body></html>

40
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-origin-003.htm Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds and Borders Test: background-origin - padding-box keyword value</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-09 -->
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help" title="3.8. Positioning Area: the 'background-origin' property">
<link href="reference/background-origin-002-ref.htm" rel="match">
<meta content="image" name="flags">
<meta content="Background-origin with 'padding-box' implies to position the background relative to the padding box." name="assert">
<style>
div {
position: absolute;
}
#ref-overlapped-red {
background-color: red;
height: 60px;
left: 5px;
top: 5px;
width: 60px;
}
#test-overlapping-green {
background-image: url(support/60x60-green.png);
background-origin: padding-box;
background-repeat: no-repeat;
border: transparent dotted 5px;
height: 100px;
padding: 25px;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="container">
<div id="ref-overlapped-red"></div>
<div id="test-overlapping-green"></div>
</div>
</body></html>

38
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-origin-004.htm Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds and Borders Test: background-origin - border-box keyword value</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-09 -->
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help" title="3.8. Positioning Area: the 'background-origin' property">
<link href="reference/background-origin-004-ref.htm" rel="match">
<meta content="image" name="flags">
<meta content="Background-origin with 'border-box' implies to position the background relative to the border box." name="assert">
<style>
div {
position: absolute;
}
#ref-overlapped-red {
background-color: red;
height: 60px;
width: 60px;
}
#test-overlapping-green {
background-image: url(support/60x60-green.png);
background-origin: border-box;
background-repeat: no-repeat;
border: transparent dotted 5px;
height: 100px;
padding: 25px;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="container">
<div id="ref-overlapped-red"></div>
<div id="test-overlapping-green"></div>
</div>
</body></html>

40
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-origin-005.htm Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds and Borders Test: background-origin - content-box keyword value</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-09 -->
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help" title="3.8. Positioning Area: the 'background-origin' property">
<link href="reference/background-origin-005-ref.htm" rel="match">
<meta content="image" name="flags">
<meta content="Background-origin with 'content-box' implies to position the background relative to the content box." name="assert">
<style>
div {
position: absolute;
}
#ref-overlapped-red {
background-color: red;
height: 60px;
left: 30px;
top: 30px;
width: 60px;
}
#test-overlapping-green {
background-image: url(support/60x60-green.png);
background-origin: content-box;
background-repeat: no-repeat;
border: transparent dotted 5px;
height: 100px;
padding: 25px;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="container">
<div id="ref-overlapped-red"></div>
<div id="test-overlapping-green"></div>
</div>
</body></html>

43
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-origin-006.htm Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds and Borders Test: background-origin 'content-box' with background-attachment 'fixed'</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-09 -->
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help" title="3.8. Positioning Area: the 'background-origin' property">
<link href="reference/background-origin-006-ref.htm" rel="match">
<meta content="image" name="flags">
<meta content="Check if the 'background-attachment' value is 'fixed' that expecting 'background-origin' has no effect and the background positioning area is the initial containing block." name="assert">
<style>
html {
padding-left: 170px;
}
div {
left: 0px;
position: absolute;
top: 0px;
}
#ref-overlapped-red {
background-color: red;
height: 60px;
width: 60px;
}
#test-overlapping-green {
background-attachment: fixed;
background-image: url(support/60x60-green.png);
background-origin: content-box;
background-repeat: no-repeat;
border: transparent dotted 5px;
height: 100px;
padding: 25px;
width: 100px;
}
</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 id="ref-overlapped-red">
<div id="test-overlapping-green"></div>
</div>
</body></html>

42
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-origin-007.htm Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds and Borders Test: background-origin 'border-box' with background-clip 'padding-box'</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-09 -->
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help" title="3.8. Positioning Area: the 'background-origin' property">
<link href="reference/background-origin-007-ref.htm" rel="match">
<meta content="image" name="flags">
<meta content="Check if 'background-clip' is 'padding-box', 'background-origin' is 'border-box', 'background-position' is 'top left' (the initial value), and the element has a non-zero border, that expecting the top and left of the background image will be clipped." name="assert">
<style>
div {
position: absolute;
}
#ref-overlapping-green {
background-color: green;
height: 55px;
left: 5px;
top: 5px;
width: 55px;
}
#test-overlapped-red {
background-clip: padding-box;
background-image: url(support/60x60-red.png);
background-origin: border-box;
background-position: top left;
background-repeat: no-repeat;
border: transparent dotted 5px;
height: 100px;
padding: 25px;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="container">
<div id="test-overlapped-red"></div>
<div id="ref-overlapping-green"></div>
</div>
</body></html>

54
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-origin-008.htm Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds and Borders Test: background-origin - inherit keyword value</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-09 -->
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help" title="3.8. Positioning Area: the 'background-origin' property">
<link href="reference/background-origin-005-ref.htm" rel="match">
<link href="http://www.w3.org/TR/css3-background/#value-types" rel="help" title="2.2. Value Types">
<!--
"
all properties defined in this specification also accept
the inherit keyword as their property value
"
CSS Backgrounds and Borders Module Level 3
2.2. Value Types
http://www.w3.org/TR/css3-background/#value-types
-->
<meta content="" name="flags">
<meta content="Background-origin with 'inherit' implies to inherit its parent element value to position the background area." name="assert">
<style>
div {
position: absolute;
}
#container {
background-origin: content-box;
}
#ref {
background-color: red;
height: 60px;
left: 30px;
top: 30px;
width: 60px;
}
#test {
background-image: url(support/60x60-green.png);
background-origin: inherit;
background-repeat: no-repeat;
border: transparent dotted 5px;
height: 100px;
padding: 25px;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="container">
<div id="ref"></div>
<div id="test"></div>
</div>
</body></html>

23
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-paint-order-001.htm Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html><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 -->
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help">
<meta content="" name="flags">
<meta content="The background is painted behind the border." name="assert">
<link href="reference/background-paint-order-001-ref.htm" rel="match">
<style>
div
{
width: 0;
border: 50px solid green;
background-color: red;
}
</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>

29
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-repeat-no-repeat.htm Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: background-repeat:no-repeat</title>
<link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/">
<link rel="reviewer" title="Gerard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="match" href="reference/background-repeat-no-repeat.htm">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-repeat">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat">
<meta name="flags" content="image">
<meta name="assert" content="The image is placed once in the background positioning area and not repeated in any direction.">
<style type="text/css">
div {
background-color: grey;
background-image: url("support/rectangle-96x60.png");
background-repeat: no-repeat;
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></div>
</body>
</html>

29
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-repeat-repeat-x.htm Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: background-repeat:repeat-x</title>
<link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/">
<link rel="reviewer" title="Gerard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="match" href="reference/background-repeat-repeat-x.htm">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-repeat">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat">
<meta name="flags" content="image">
<meta name="assert" content="The image is repeated horizontally as often as needed to cover the background painting area.">
<style type="text/css">
div {
background-color: grey;
background-image: url("support/rectangle-96x60.png");
background-repeat: repeat-x;
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 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></div>
</body>
</html>

29
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-repeat-repeat-y.htm Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: background-repeat:repeat-y</title>
<link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/">
<link rel="reviewer" title="Gerard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="match" href="reference/background-repeat-repeat-y.htm">
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-repeat">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat">
<meta name="flags" content="image">
<meta name="assert" content="The image is repeated vertically as often as needed to cover the background painting area.">
<style type="text/css">
div {
background-color: grey;
background-image: url("support/rectangle-96x60.png");
background-repeat: repeat-y;
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 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></div>
</body>
</html>

30
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-repeat-round-001.htm Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds and Borders Test: background-repeat - one round keyword value</title>
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-08 -->
<link href="http://www.w3.org/TR/css3-background/#the-background-repeat" rel="help">
<meta content="image" name="flags">
<meta content="Check if 'background-repeat' is 'round', then the width and height of the corresponding background image is rescaled so that they fit a whole number of times (2 in this test) in the background positioning area. Therefore the used width and height of the background image in this test should be 110px." name="assert">
<style>
div {
background-color: red;
background-image: url(support/cat.png); /* 98px wide by 99px tall */
background-repeat: round; /* round round */
height: 220px;
width: 220px;
/*
Background positioning area is 220px wide by 220px tall.
So, the height of the image is rounded to 110px, [220px / rounded (220px / 99px)]
and the width of the image is rounded to 110px, [220px / rounded (220px / 98px)].
*/
}
</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></div>
</body></html>

27
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-repeat-round-roundup.htm Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: background-repeat:round, rounding up</title>
<link rel="author" title="Jeffrey Carl Faden" href="http://www.jeffreyatw.com/">
<link rel="match" href="reference/background-repeat-round-roundup.htm">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat">
<meta name="flags" content="image">
<meta name="assert" content="The 'background-repeat: round' declaration must scale an image in one or more dimensions so it fits a whole number of times in the background positioning area.">
<style type="text/css">
div {
background-image: url("support/rectangle-96x60.png");
background-repeat: round;
height: 212px;
width: 252px;
}
</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></div>
</body>
</html>

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