Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-03 12:40:06 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests and CSS tests.

Browse source 
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180.
- Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
This commit is contained in:
Ms2ger 2017-02-06 11:06:12 +01:00
parent fb4f421c8b
commit 296fa2512b
21852 changed files with 2080936 additions and 892894 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,8 @@
<!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="mailto:dajiangxiaoyan@126.com" rel="author" title="Xiaoyan Jiang">
<link href="mailto: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">

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

@ -1,7 +1,6 @@
<!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.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">
@ -18,4 +17,5 @@
</head><body>
<p> Test passes if green image shows and no red visable.</p>
<div class="container"></div>
</body></html>

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

@ -1,7 +1,6 @@
<!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.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">
@ -18,4 +17,5 @@
</head><body>
<p> Test passes if green image shows and no red visable.</p>
<div class="container"></div>
</body></html>

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

@ -1,7 +1,6 @@
<!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.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">
@ -28,4 +27,5 @@
<div class="container">
<a href="#">x</a>
</div>
</body></html>

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

@ -1,7 +1,6 @@
<!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.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">
@ -28,4 +27,5 @@
<div class="container">
<a href="#">x</a>
</div>
</body></html>

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

@ -1,7 +1,6 @@
<!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.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">
@ -29,4 +28,5 @@
<div class="container">
<p>x</p>
</div>
</body></html>

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

@ -1,7 +1,6 @@
<!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.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">
@ -29,4 +28,5 @@
<div class="container">
<p>x</p>
</div>
</body></html>

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

@ -1,7 +1,6 @@
<!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.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">
@ -29,4 +28,5 @@
<div class="container">
<p>x</p>
</div>
</body></html>

33
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-repeat-round-1a.htm Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: background image round</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#background-repeat" rel="help">
<link href="reference/background-repeat-round-1-ref.htm" rel="match">
<meta content="Test checks whether background-repeat: 'round' works correctly or not." name="assert">
<style type="text/css">
.outer {
width: 72px;
height: 72px;
border: 1px solid black;
background-image: url(aqua-yellow-32x32.png);
background-repeat: round;
}
.outer_gradient {
width: 72px;
height: 72px;
border: 1px solid black;
background-size: 32px 32px;
background-image: linear-gradient(to top left, red, green);
background-repeat: round;
}
</style>
</head>
<body>
<div class="outer"></div>
<div class="outer_gradient"></div>
</body></html>

33
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-repeat-round-1b.htm Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: background image round</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#background-repeat" rel="help">
<link href="reference/background-repeat-round-1-ref.htm" rel="match">
<meta content="Test checks whether background-repeat: 'round round' works correctly or not." name="assert">
<style type="text/css">
.outer {
width: 72px;
height: 72px;
border: 1px solid black;
background-image: url(aqua-yellow-32x32.png);
background-repeat: round round;
}
.outer_gradient {
width: 72px;
height: 72px;
border: 1px solid black;
background-size: 32px 32px;
background-image: linear-gradient(to top left, red, green);
background-repeat: round round;
}
</style>
</head>
<body>
<div class="outer"></div>
<div class="outer_gradient"></div>
</body></html>

34
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-repeat-round-1c.htm Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: background image round</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#background-repeat" rel="help">
<link href="reference/background-repeat-round-1-ref.htm" rel="match">
<meta content="Test checks whether background-repeat: 'repeat round' works correctly or not." name="assert">
<style type="text/css">
.outer {
width: 72px;
height: 72px;
border: 1px solid black;
background-size: 36px 36px;
background-image: url(aqua-yellow-32x32.png);
background-repeat: repeat round;
}
.outer_gradient {
width: 72px;
height: 72px;
border: 1px solid black;
background-size: 36px 36px;
background-image: linear-gradient(to top left, red, green);
background-repeat: repeat round;
}
</style>
</head>
<body>
<div class="outer"></div>
<div class="outer_gradient"></div>
</body></html>

34
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-repeat-round-1d.htm Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: background image round</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#background-repeat" rel="help">
<link href="reference/background-repeat-round-1-ref.htm" rel="match">
<meta content="Test checks whether background-repeat: 'round repeat' works correctly or not." name="assert">
<style type="text/css">
.outer {
width: 72px;
height: 72px;
border: 1px solid black;
background-size: 32px 36px;
background-image: url(aqua-yellow-32x32.png);
background-repeat: round repeat;
}
.outer_gradient {
width: 72px;
height: 72px;
border: 1px solid black;
background-size: 32px 36px;
background-image: linear-gradient(to top left, red, green);
background-repeat: round repeat;
}
</style>
</head>
<body>
<div class="outer"></div>
<div class="outer_gradient"></div>
</body></html>

34
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-repeat-round-1e.htm Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: background image round</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#background-repeat" rel="help">
<link href="reference/background-repeat-round-1-ref.htm" rel="match">
<meta content="Test checks whether background-repeat: 'repeat round' works correctly or not." name="assert">
<style type="text/css">
.outer {
width: 72px;
height: 72px;
border: 1px solid black;
background-size: 36px 32px;
background-image: url(aqua-yellow-32x32.png);
background-repeat: repeat round;
}
.outer_gradient {
width: 72px;
height: 72px;
border: 1px solid black;
background-size: 36px 32px;
background-image: linear-gradient(to top left, red, green);
background-repeat: repeat round;
}
</style>
</head>
<body>
<div class="outer"></div>
<div class="outer_gradient"></div>
</body></html>

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

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: background image round no-repeat</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#background-repeat" rel="help">
<link href="reference/background-repeat-round-2-ref.htm" rel="match">
<meta content="Test checks whether background-repeat: 'round no-repeat' works correctly or not." name="assert">
<style type="text/css">
.outer {
width: 72px;
height: 72px;
border: 1px solid black;
background-image: url(aqua-yellow-32x32.png);
background-repeat: round no-repeat;
}
.outer_gradient {
width: 72px;
height: 72px;
border: 1px solid black;
background-size: 32px 36px;
background-image: linear-gradient(to top left, red, green);
background-repeat: round no-repeat;
}
</style>
</head>
<body>
<div class="outer"></div>
<div class="outer_gradient"></div>
</body></html>

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

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: background image no-repeat round</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#background-repeat" rel="help">
<link href="reference/background-repeat-round-3-ref.htm" rel="match">
<meta content="Test checks whether background-repeat: 'no-repeat round' works correctly or not." name="assert">
<style type="text/css">
.outer {
width: 72px;
height: 72px;
border: 1px solid black;
background-image: url(aqua-yellow-32x32.png);
background-size: 36px auto;
background-repeat: no-repeat round;
}
.outer_gradient {
width: 72px;
height: 72px;
border: 1px solid black;
background-image: linear-gradient(to top left, red, green);
background-size: 36px 32px;
background-repeat: no-repeat round;
}
</style>
</head>
<body>
<div class="outer"></div>
<div class="outer_gradient"></div>
</body></html>

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

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: background image round with specified position</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#background-repeat" rel="help">
<link href="reference/background-repeat-round-4-ref.htm" rel="match">
<meta content="Test checks whether background-repeat: 'round' works correctly or not." name="assert">
<style type="text/css">
#outer {
width: 72px;
height: 72px;
border: 1px solid black;
background-image: url(aqua-yellow-32x32.png);
background-repeat: round;
background-position: 5px 5px;
}
#outer_gradient {
width: 72px;
height: 72px;
border: 1px solid black;
background-size: 32px 32px;
background-image: linear-gradient(to top left, red, green);
background-repeat: round;
background-position: 5px 5px;
}
</style>
</head>
<body>
<div id="outer"></div>
<div id="outer_gradient"></div>
</body></html>

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

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: background image space</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#background-repeat" rel="help">
<link href="reference/background-repeat-space-10-ref.htm" rel="match">
<meta content="Test checks whether background-repeat: 'space' works correctly or not." name="assert">
<style type="text/css">
.outer {
width: 96px;
height: 106px;
border: 1px solid black;
background-image: url(aqua-yellow-32x32.png);
background-repeat: space;
}
</style>
</head>
<body>
<div class="outer"></div>
</body></html>

34
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-repeat-space-1a.htm Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: background image space</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#background-repeat" rel="help">
<link href="reference/background-repeat-space-1-ref.htm" rel="match">
<meta content="Test checks whether background-repeat: 'space' works correctly or not." name="assert">
<style type="text/css">
.outer {
width: 106px;
height: 106px;
border: 1px solid black;
background-image: url(aqua-yellow-32x32.png);
background-repeat: space;
}
.outer_gradient {
width: 106px;
height: 106px;
border: 1px solid black;
background-size: 32px 32px;
background-image: linear-gradient(to top left, red, green);
background-repeat: space;
}
</style>
</head>
<body>
<div class="outer"></div>
<div class="outer_gradient"></div>
</body></html>

35
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-repeat-space-1b.htm Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: background image space with position</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#background-repeat" rel="help">
<link href="reference/background-repeat-space-1-ref.htm" rel="match">
<meta content="Test checks whether background-repeat: 'space' works correctly or not." name="assert">
<style type="text/css">
.outer {
width: 106px;
height: 106px;
border: 1px solid black;
background-image: url(aqua-yellow-32x32.png);
background-position: 15px 15px;
background-repeat: space;
}
.outer_gradient {
width: 106px;
height: 106px;
border: 1px solid black;
background-size: 32px 32px;
background-image: linear-gradient(to top left, red, green);
background-position: 15px 15px;
background-repeat: space;
}
</style>
</head>
<body>
<div class="outer"></div>
<div class="outer_gradient"></div>
</body></html>

34
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-repeat-space-1c.htm Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: background image space</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#background-repeat" rel="help">
<link href="reference/background-repeat-space-1-ref.htm" rel="match">
<meta content="Test checks whether background-repeat: 'space space' works correctly or not." name="assert">
<style type="text/css">
.outer {
width: 106px;
height: 106px;
border: 1px solid black;
background-image: url(aqua-yellow-32x32.png);
background-repeat: space space;
}
.outer_gradient {
width: 106px;
height: 106px;
border: 1px solid black;
background-size: 32px 32px;
background-image: linear-gradient(to top left, red, green);
background-repeat: space space;
}
</style>
</head>
<body>
<div class="outer"></div>
<div class="outer_gradient"></div>
</body></html>

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

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: background image round with specified position</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#background-repeat" rel="help">
<link href="reference/background-repeat-space-2-ref.htm" rel="match">
<meta content="Test checks whether background-repeat: 'space' works correctly or not." name="assert">
<style type="text/css">
.outer {
width: 48px;
height: 48px;
border: 1px solid black;
background-image: url(aqua-yellow-32x32.png);
background-repeat: space;
background-position: 5px 5px;
}
.outer_gradient {
width: 48px;
height: 48px;
border: 1px solid black;
background-size: 32px 32px;
background-image: linear-gradient(to top left, red, green);
background-repeat: space;
background-position: 5px 5px;
}
</style>
</head>
<body>
<div class="outer"></div>
<div class="outer_gradient"></div>
</body></html>

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

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: background image round with specified position</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#background-repeat" rel="help">
<link href="reference/background-repeat-space-3-ref.htm" rel="match">
<meta content="Test checks whether background-repeat: 'no-repeat space' and 'space no-repeat' works correctly or not." name="assert">
<style type="text/css">
.outer {
width: 106px;
height: 106px;
border: 1px solid black;
}
.inner1 {
width: 106px;
height: 106px;
background-image: url(aqua-yellow-32x32.png);
background-repeat: space no-repeat;
background-position: 7px 40px;
}
.inner2 {
width: 106px;
height: 106px;
background-image: url(aqua-yellow-32x32.png);
background-repeat: no-repeat space;
background-position: 40px 7px;
}
.inner_gradient1 {
width: 106px;
height: 106px;
background-size: 32px 32px;
background-image: linear-gradient(to top left, red, green);
background-repeat: space no-repeat;
background-position: 7px 40px;
}
.inner_gradient2 {
width: 106px;
height: 106px;
background-size: 32px 32px;
background-image: linear-gradient(to top left, red, green);
background-repeat: no-repeat space;
background-position: 40px 7px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1"></div>
</div>
<div class="outer">
<div class="inner2"></div>
</div>
<div class="outer">
<div class="inner_gradient1"></div>
</div>
<div class="outer">
<div class="inner_gradient2"></div>
</div>
</body></html>

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

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: background image space</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#background-repeat" rel="help">
<link href="reference/background-repeat-space-4-ref.htm" rel="match">
<meta content="Test checks whether background-repeat: 'repeat space' works correctly or not." name="assert">
<style type="text/css">
.outer {
width: 96px;
height: 106px;
border: 1px solid black;
background-image: url(aqua-yellow-32x32.png);
background-repeat: repeat space;
}
.outer_graident {
width: 96px;
height: 106px;
border: 1px solid black;
background-size: 32px 32px;
background-image: linear-gradient(to top left, red, green);
background-repeat: repeat space;
}
</style>
</head>
<body>
<div class="outer"></div>
<div class="outer_graident"></div>
</body></html>

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

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: background image space</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#background-repeat" rel="help">
<link href="reference/background-repeat-space-5-ref.htm" rel="match">
<meta content="Test checks whether background-repeat: 'space repeat' works correctly or not." name="assert">
<style type="text/css">
.outer {
width: 106px;
height: 96px;
border: 1px solid black;
background-image: url(aqua-yellow-32x32.png);
background-repeat: space repeat;
}
.outer_gradient {
width: 106px;
height: 96px;
border: 1px solid black;
background-size: 32px 32px;
background-image: linear-gradient(to top left, red, green);
background-repeat: space repeat;
}
</style>
</head>
<body>
<div class="outer"></div>
<div class="outer_gradient"></div>
</body></html>

35
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-repeat-space-6.htm Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: background image space</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#background-repeat" rel="help">
<link href="reference/background-repeat-space-6-ref.htm" rel="match">
<meta content="Test checks whether background-repeat: 'round space' works correctly or not." name="assert">
<style type="text/css">
.outer {
width: 192px;
height: 106px;
border: 1px solid black;
background-size: 60px 32px;
background-image: url(aqua-yellow-32x32.png);
background-repeat: round space;
}
.outer_gradient {
width: 192px;
height: 106px;
border: 1px solid black;
background-size: 60px 32px;
background-image: linear-gradient(to top left, red, green);
background-repeat: round space;
}
</style>
</head>
<body>
<div class="outer"></div>
<div class="outer_gradient"></div>
</body></html>

35
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-repeat-space-7.htm Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: background image space</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#background-repeat" rel="help">
<link href="reference/background-repeat-space-7-ref.htm" rel="match">
<meta content="Test checks whether background-repeat: 'space round' works correctly or not." name="assert">
<style type="text/css">
.outer {
width: 106px;
height: 192px;
border: 1px solid black;
background-size: 32px 60px;
background-image: url(aqua-yellow-32x32.png);
background-repeat: space round;
}
.outer_gradient {
width: 106px;
height: 192px;
border: 1px solid black;
background-size: 32px 60px;
background-image: linear-gradient(to top left, red, green);
background-repeat: space round;
}
</style>
</head>
<body>
<div class="outer"></div>
<div class="outer_gradient"></div>
</body></html>

35
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-repeat-space-8.htm Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: background image space</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#background-repeat" rel="help">
<link href="reference/background-repeat-space-8-ref.htm" rel="match">
<meta content="Test checks whether background-repeat: 'space' works correctly or not." name="assert">
<style type="text/css">
.outer {
width: 106px;
height: 106px;
border: 20px solid rgba(0, 0, 0, .5);
background-image: url(aqua-yellow-32x32.png);
background-repeat: space;
}
.outer_gradient {
width: 32px;
height: 32px;
border: 20px solid rgba(0, 0, 0, .5);
background-size: 50px 50px;
background-image: linear-gradient(to top left, red, green);
background-repeat: space;
background-position: -10px -10px;
}
</style>
</head>
<body>
<div class="outer"></div>
<div class="outer_gradient"></div>
</body></html>

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

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: background image space</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#background-repeat" rel="help">
<link href="reference/background-repeat-space-9-ref.htm" rel="match">
<meta content="Test checks whether background-repeat: 'space' works correctly or not." name="assert">
<style type="text/css">
.outer {
width: 106px;
height: 96px;
border: 1px solid black;
background-image: url(aqua-yellow-32x32.png);
background-repeat: space;
}
</style>
</head>
<body>
<div class="outer"></div>
</body></html>

4
tests/wpt/css-tests/css-backgrounds-3_dev/html4/background-size-035.htm
View file

@ -1,8 +1,8 @@
<!DOCTYPE html>
<html><head>
<title>CSS Background and Border Test:background-size conflicts with background-attachment</title>
<link href="stenders@163.com" rel="author" title="xiaochun">
<link href="jinlongz@oupeng.com" rel="reviewer" title="Jinlong Zhang"><!--2012/10/21-->
<link href="mailto:stenders@163.com" rel="author" title="xiaochun">
<link href="mailto:jinlongz@oupeng.com" rel="reviewer" title="Jinlong Zhang"><!--2012/10/21-->
<link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help">
<link href="reference/background-size-ref.htm" rel="match">
<meta content="The test passes if we can see the background-image is exactly same as above." name="assert">

2
tests/wpt/css-tests/css-backgrounds-3_dev/html4/border-color_transparent.htm
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds and Borders Test: border-clip_border-box</title>
<link href="andong135@126.com" rel="author" title="Dong An">
<link href="mailto:andong135@126.com" rel="author" title="Dong An">
<link href="http://www.w3.org/TR/css3-background/#the-border-color" rel="help">
<meta content="Test transparent of border-color" name="assert">
<style type="text/css">

24
tests/wpt/css-tests/css-backgrounds-3_dev/html4/border-image-repeat-1.htm Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Border Image: border-image-repeat with SVG content</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#background-repeat" rel="help">
<link href="reference/border-image-repeat-1-ref.htm" rel="match">
<meta content="The test checks the result of border-image-repeat with SVG content." name="assert">
<style type="text/css">
.outer {
height: 16px;
width: 32px;
border-width: 16px;
border-style: solid;
border-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='blue' stroke-width='0'%3E%3Cpath d='M2 2h4v44H2z'/%3E%3Cpath d='M2 2h44v4H2z'/%3E%3Cpath d='M42 2h4v44h-4z'/%3E%3Cpath d='M2 42h44v4H2zM8'/%3E%3C/g%3E%3C/svg%3E") 16 repeat;
}
</style>
</head>
<body>
<div class="outer"></div>
</body></html>

27
tests/wpt/css-tests/css-backgrounds-3_dev/html4/border-image-repeat-round-1.htm Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Border Image: border-image-repeat: round</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#background-repeat" rel="help">
<link href="reference/border-image-repeat-round-1-ref.htm" rel="match">
<meta content="The test checks whether border-image-repeat: 'round' uses the correct rounding formula." name="assert">
<style type="text/css">
.outer {
position: absolute;
left: 0px;
top: 0px;
border: 27px solid transparent;
border-image: url("border.png") 27;
border-image-repeat: round round;
width: 34px;
height: 34px;
}
</style>
</head>
<body>
<div class="outer"></div>
</body></html>

27
tests/wpt/css-tests/css-backgrounds-3_dev/html4/border-image-repeat-round-2.htm Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Border Image: border-image-repeat: round</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#background-repeat" rel="help">
<link href="reference/border-image-repeat-round-2-ref.htm" rel="match">
<meta content="The test checks whether border-image-repeat: 'round' uses the correct rounding formula." name="assert">
<style type="text/css">
.outer {
position: absolute;
left: 0px;
top: 0px;
border: 27px solid transparent;
border-image: url("border.png") 27;
border-image-repeat: round round;
width: 13px;
height: 13px;
}
</style>
</head>
<body>
<div class="outer"></div>
</body></html>

27
tests/wpt/css-tests/css-backgrounds-3_dev/html4/border-image-repeat-space-1.htm Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Border Image: border-image-repeat: space</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#the-border-image-repeat" rel="help">
<link href="reference/border-image-repeat-space-1-ref.htm" rel="match">
<meta content="The test checks whether border-image-repeat: 'space' uses the correct formula when a single image fits." name="assert">
<style type="text/css">
.outer {
position: absolute;
left: 0px;
top: 0px;
border: 27px solid transparent;
border-image: url("border.png") 27;
border-image-repeat: space space;
width: 35px;
height: 35px;
}
</style>
</head>
<body>
<div class="outer"></div>
</body></html>

27
tests/wpt/css-tests/css-backgrounds-3_dev/html4/border-image-repeat-space-2.htm Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Border Image: border-image-repeat: space</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#the-border-image-repeat" rel="help">
<link href="reference/border-image-repeat-space-2-ref.htm" rel="match">
<meta content="The test checks whether border-image-repeat: 'space' uses the correct formula when no images fit." name="assert">
<style type="text/css">
.outer {
position: absolute;
left: 0px;
top: 0px;
border: 27px solid transparent;
border-image: url("border.png") 27;
border-image-repeat: space space;
width: 13px;
height: 13px;
}
</style>
</head>
<body>
<div class="outer"></div>
</body></html>

27
tests/wpt/css-tests/css-backgrounds-3_dev/html4/border-image-repeat-space-3.htm Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Border Image: border-image-repeat: space</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#the-border-image-repeat" rel="help">
<link href="reference/border-image-repeat-space-3-ref.htm" rel="match">
<meta content="The test checks whether border-image-repeat: 'space' uses the correct formula when multiple images fit." name="assert">
<style type="text/css">
.outer {
position: absolute;
left: 0px;
top: 0px;
border: 27px solid transparent;
border-image: url("border.png") 27;
border-image-repeat: space space;
width: 60px;
height: 60px;
}
</style>
</head>
<body>
<div class="outer"></div>
</body></html>

27
tests/wpt/css-tests/css-backgrounds-3_dev/html4/border-image-repeat-space-4.htm Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Border Image: border-image-repeat: space</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#the-border-image-repeat" rel="help">
<link href="reference/border-image-repeat-space-4-ref-1.htm" rel="match">
<meta content="The test checks whether border-image-repeat: 'space' uses the correct formula when a single image fits exactly." name="assert">
<style type="text/css">
.outer {
position: absolute;
left: 0px;
top: 0px;
border: 27px solid transparent;
border-image: url("border.png") 27;
border-image-repeat: space space;
width: 27px;
height: 27px;
}
</style>
</head>
<body>
<div class="outer"></div>
</body></html>

27
tests/wpt/css-tests/css-backgrounds-3_dev/html4/border-image-repeat-space-5.htm Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Border Image: border-image-repeat: space</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#the-border-image-repeat" rel="help">
<link href="reference/border-image-repeat-space-5-ref-1.htm" rel="match">
<meta content="The test checks whether border-image-repeat: 'space' uses the correct formula when multiple images fit exactly." name="assert">
<style type="text/css">
.outer {
position: absolute;
left: 0px;
top: 0px;
border: 27px solid transparent;
border-image: url("border.png") 27;
border-image-repeat: space space;
width: 81px;
height: 81px;
}
</style>
</head>
<body>
<div class="outer"></div>
</body></html>

27
tests/wpt/css-tests/css-backgrounds-3_dev/html4/border-image-repeat-space-6.htm Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Border Image: border-image-repeat: space</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#the-border-image-repeat" rel="help">
<link href="reference/border-image-repeat-space-6-ref.htm" rel="match">
<meta content="The test checks whether border-image-repeat: 'space' with 'fill' uses the correct formula when a single image fits exactly." name="assert">
<style type="text/css">
.outer {
position: absolute;
left: 0px;
top: 0px;
border-width: 27px;
border-style: solid;
border-image: url("reticule.png") 27 fill space;
width: 27px;
height: 27px;
}
</style>
</head>
<body>
<div class="outer"></div>
</body></html>

27
tests/wpt/css-tests/css-backgrounds-3_dev/html4/border-image-repeat-space-7.htm Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Border Image: border-image-repeat: space</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="https://www.w3.org/TR/css3-background/#the-border-image-repeat" rel="help">
<link href="reference/border-image-repeat-space-7-ref.htm" rel="match">
<meta content="The test checks whether border-image-repeat: 'space' with 'fill' uses the correct formula when multiple image fit." name="assert">
<style type="text/css">
.outer {
position: absolute;
left: 0px;
top: 0px;
border-width: 27px;
border-style: solid;
border-image: url("reticule.png") 27 fill space;
width: 78px;
height: 78px;
}
</style>
</head>
<body>
<div class="outer"></div>
</body></html>

2
tests/wpt/css-tests/css-backgrounds-3_dev/html4/box-shadow-blur-definition-001.htm
View file

@ -2,7 +2,7 @@
<html>
<head>
<title>CSS Test: blur computation for box-shadow</title>
<link rel="author" title="L. David Baron" href="http://dbaron.org/">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-box-shadow">
<meta name="flags" content="">

2
tests/wpt/css-tests/css-backgrounds-3_dev/html4/box-shadow-syntax-001.htm
View file

@ -4,7 +4,7 @@
<title>CSS Test: Box Shadow Syntax: Reordering Components</title>
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-box-shadow">
<link rel="match" href="box-shadow-syntax-001.htm">
<link rel="match" href="reference/box-shadow-syntax-001.htm">
<meta name="assert" content="Box shadow color, inset, and length parameters can be mixed in any order, but lengths must stay adjacent.">
<style type="text/css">

605
tests/wpt/css-tests/css-backgrounds-3_dev/html4/chapter-3.htm
View file

File diff suppressed because it is too large Load diff

81
tests/wpt/css-tests/css-backgrounds-3_dev/html4/chapter-6.htm
View file

@ -13,7 +13,7 @@
<body>
<h1>CSS Backgrounds and Borders Module Level 3 CR Test Suite</h1>
<h2>Border Images (37 tests)</h2>
<h2>Border Images (44 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
@ -346,7 +346,7 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.5">+</a>
<a href="https://www.w3.org/TR/css3-background/#the-border-image-repeat">6.5 Image Tiling: the &#8216;border-image-repeat&#8217; property</a></th></tr>
<!-- 6 tests -->
<!-- 13 tests -->
<tr id="border-image-13-6.5" class="">
<td>
<a href="border-image-13.htm">border-image-13</a></td>
@ -391,6 +391,83 @@
</ul>
</td>
</tr>
<tr id="border-image-repeat-space-1-6.5" class="primary">
<td><strong>
<a href="border-image-repeat-space-1.htm">border-image-repeat-space-1</a></strong></td>
<td><a href="reference/border-image-repeat-space-1-ref.htm">=</a> </td>
<td></td>
<td>CSS Border Image: border-image-repeat: space
<ul class="assert">
<li>The test checks whether border-image-repeat: 'space' uses the correct formula when a single image fits.</li>
</ul>
</td>
</tr>
<tr id="border-image-repeat-space-2-6.5" class="primary">
<td><strong>
<a href="border-image-repeat-space-2.htm">border-image-repeat-space-2</a></strong></td>
<td><a href="reference/border-image-repeat-space-2-ref.htm">=</a> </td>
<td></td>
<td>CSS Border Image: border-image-repeat: space
<ul class="assert">
<li>The test checks whether border-image-repeat: 'space' uses the correct formula when no images fit.</li>
</ul>
</td>
</tr>
<tr id="border-image-repeat-space-3-6.5" class="primary">
<td><strong>
<a href="border-image-repeat-space-3.htm">border-image-repeat-space-3</a></strong></td>
<td><a href="reference/border-image-repeat-space-3-ref.htm">=</a> </td>
<td></td>
<td>CSS Border Image: border-image-repeat: space
<ul class="assert">
<li>The test checks whether border-image-repeat: 'space' uses the correct formula when multiple images fit.</li>
</ul>
</td>
</tr>
<tr id="border-image-repeat-space-4-6.5" class="primary">
<td><strong>
<a href="border-image-repeat-space-4.htm">border-image-repeat-space-4</a></strong></td>
<td><a href="reference/border-image-repeat-space-4-ref-1.htm">=</a> <a href="reference/border-image-repeat-space-4-ref-2.htm">=</a> </td>
<td></td>
<td>CSS Border Image: border-image-repeat: space
<ul class="assert">
<li>The test checks whether border-image-repeat: 'space' uses the correct formula when a single image fits exactly.</li>
</ul>
</td>
</tr>
<tr id="border-image-repeat-space-5-6.5" class="primary">
<td><strong>
<a href="border-image-repeat-space-5.htm">border-image-repeat-space-5</a></strong></td>
<td><a href="reference/border-image-repeat-space-5-ref-1.htm">=</a> <a href="reference/border-image-repeat-space-5-ref-2.htm">=</a> </td>
<td></td>
<td>CSS Border Image: border-image-repeat: space
<ul class="assert">
<li>The test checks whether border-image-repeat: 'space' uses the correct formula when multiple images fit exactly.</li>
</ul>
</td>
</tr>
<tr id="border-image-repeat-space-6-6.5" class="primary">
<td><strong>
<a href="border-image-repeat-space-6.htm">border-image-repeat-space-6</a></strong></td>
<td><a href="reference/border-image-repeat-space-6-ref.htm">=</a> </td>
<td></td>
<td>CSS Border Image: border-image-repeat: space
<ul class="assert">
<li>The test checks whether border-image-repeat: 'space' with 'fill' uses the correct formula when a single image fits exactly.</li>
</ul>
</td>
</tr>
<tr id="border-image-repeat-space-7-6.5" class="primary">
<td><strong>
<a href="border-image-repeat-space-7.htm">border-image-repeat-space-7</a></strong></td>
<td><a href="reference/border-image-repeat-space-7-ref.htm">=</a> </td>
<td></td>
<td>CSS Border Image: border-image-repeat: space
<ul class="assert">
<li>The test checks whether border-image-repeat: 'space' with 'fill' uses the correct formula when multiple image fit.</li>
</ul>
</td>
</tr>
<tr id="border-image-repeat_repeatnegx_none_50px-6.5" class="script">
<td>
<a href="border-image-repeat_repeatnegx_none_50px.htm">border-image-repeat_repeatnegx_none_50px</a></td>

2
tests/wpt/css-tests/css-backgrounds-3_dev/html4/chapter-7.htm
View file

@ -140,7 +140,7 @@
<tr id="box-shadow-syntax-001-7.1" class="">
<td>
<a href="box-shadow-syntax-001.htm">box-shadow-syntax-001</a></td>
<td></td>
<td><a href="reference/box-shadow-syntax-001.htm">=</a> </td>
<td></td>
<td>Box Shadow Syntax: Reordering Components
<ul class="assert">

2
tests/wpt/css-tests/css-backgrounds-3_dev/html4/clip-border-box.htm
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-clip:border-box</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="mailto:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help">
<meta content="image" name="flags">
<meta content="border-box : The background is painted within (clipped to) the border box." name="assert">

2
tests/wpt/css-tests/css-backgrounds-3_dev/html4/clip-border-box_with_position.htm
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-clip:border-box &amp; background-position</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="mailto:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help">
<meta content="image" name="flags">
<meta content="border-box : The background is painted within (clipped to) the border box." name="assert">

2
tests/wpt/css-tests/css-backgrounds-3_dev/html4/clip-border-box_with_radius.htm
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-clip:border-box &amp; border-radius</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="mailto:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help">
<meta content="image" name="flags">
<meta content="border-box : The background is painted within (clipped to) the border box." name="assert">

2
tests/wpt/css-tests/css-backgrounds-3_dev/html4/clip-border-box_with_size.htm
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-clip:border-box &amp; background-size</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="mailto:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help">
<meta content="image" name="flags">
<meta content="border-box : The background is painted within (clipped to) the border box." name="assert">

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

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-clip:content-box</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="mailto:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help">
<meta content="image" name="flags">
<meta content="content-box : The background is painted within (clipped to) the content box." name="assert">

2
tests/wpt/css-tests/css-backgrounds-3_dev/html4/clip-content-box_with_position.htm
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-clip:content-box &amp; background-position</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="mailto:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help">
<meta content="image" name="flags">
<meta content="content-box : The background is painted within (clipped to) the content box." name="assert">

2
tests/wpt/css-tests/css-backgrounds-3_dev/html4/clip-content-box_with_radius.htm
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-clip:content-box &amp; border-radius</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="mailto:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help">
<meta content="image" name="flags">
<meta content="content-box : The background is painted within (clipped to) the content box." name="assert">

2
tests/wpt/css-tests/css-backgrounds-3_dev/html4/clip-content-box_with_size.htm
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-clip:content-box &amp; background-size</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="mailto:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help">
<meta content="image" name="flags">
<meta content="content-box : The background is painted within (clipped to) the content box." name="assert">

2
tests/wpt/css-tests/css-backgrounds-3_dev/html4/clip-padding-box.htm
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-clip:padding-box</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="mailto:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help">
<meta content="image" name="flags">
<meta content="padding-box : The background is painted within (clipped to) the padding box" name="assert">

2
tests/wpt/css-tests/css-backgrounds-3_dev/html4/clip-padding-box_with_position.htm
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-clip:padding-box &amp; background-position</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="mailto:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help">
<meta content="image" name="flags">
<meta content="padding-box : The background is painted within (clipped to) the padding box" name="assert">

2
tests/wpt/css-tests/css-backgrounds-3_dev/html4/clip-padding-box_with_radius.htm
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-clip:padding-box &amp; border-radius</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="mailto:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help">
<meta content="image" name="flags">
<meta content="padding-box : The background is painted within (clipped to) the padding box" name="assert">

2
tests/wpt/css-tests/css-backgrounds-3_dev/html4/clip-padding-box_with_size.htm
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-clip:padding-box &amp; background-size</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="mailto:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-clip" rel="help">
<meta content="image" name="flags">
<meta content="padding-box : The background is painted within (clipped to) the padding box" name="assert">

2
tests/wpt/css-tests/css-backgrounds-3_dev/html4/origin-border-box.htm
View file

@ -2,7 +2,7 @@
<html><head>
<meta charset="utf-8">
<title>CSS Backgrounds Test: background-origin:border-box</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="mailto:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help">
<meta content="image" name="flags">
<meta content="border-box : The position is relative to the border box." name="assert">

2
tests/wpt/css-tests/css-backgrounds-3_dev/html4/origin-border-box_with_position.htm
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-origin:border-box &amp; background-position</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="mailto:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help">
<meta content="image" name="flags">
<meta content="border-box : The position is relative to the border box." name="assert">

2
tests/wpt/css-tests/css-backgrounds-3_dev/html4/origin-border-box_with_radius.htm
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-origin:border-box &amp; border-radius</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="mailto:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help">
<meta content="image" name="flags">
<meta content="border-box : The position is relative to the border box." name="assert">

2
tests/wpt/css-tests/css-backgrounds-3_dev/html4/origin-border-box_with_size.htm
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-origin:border-box &amp; background-size</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="mailto:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help">
<meta content="image" name="flags">
<meta content="border-box : The position is relative to the border box." name="assert">

2
tests/wpt/css-tests/css-backgrounds-3_dev/html4/origin-content-box.htm
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-origin:content-box</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="mailto:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help">
<meta content="image" name="flags">
<meta content="content-box : The position is relative to the content box." name="assert">

2
tests/wpt/css-tests/css-backgrounds-3_dev/html4/origin-content-box_with_position.htm
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-origin:content-box &amp; background-position</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="mailto:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help">
<meta content="image" name="flags">
<meta content="content-box : The position is relative to the content box." name="assert">

2
tests/wpt/css-tests/css-backgrounds-3_dev/html4/origin-content-box_with_radius.htm
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-origin:content-box &amp; border-radius</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="mailto:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help">
<meta content="image" name="flags">
<meta content="content-box : The position is relative to the content box." name="assert">

2
tests/wpt/css-tests/css-backgrounds-3_dev/html4/origin-content-box_with_size.htm
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-origin:content-box &amp; background-size</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="mailto:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help">
<meta content="image" name="flags">
<meta content="content-box : The position is relative to the content box." name="assert">

2
tests/wpt/css-tests/css-backgrounds-3_dev/html4/origin-padding-box.htm
View file

@ -2,7 +2,7 @@
<html><head>
<meta charset="utf-8">
<title>CSS Backgrounds Test: background-origin:padding-box</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="mailto:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help">
<meta content="image" name="flags">
<meta content="padding-box : The position is relative to the padding box. (For single boxes ‘0 0’ is the upper left corner of the padding edge, ‘100% 100%’ is the lower right corner.)" name="assert">

2
tests/wpt/css-tests/css-backgrounds-3_dev/html4/origin-padding-box_with_position.htm
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-origin:padding-box &amp; background-position</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="mailto:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help">
<meta content="image" name="flags">
<meta content="padding-box : The position is relative to the padding box. (For single boxes ‘0 0’ is the upper left corner of the padding edge, ‘100% 100%’ is the lower right corner.)" name="assert">

2
tests/wpt/css-tests/css-backgrounds-3_dev/html4/origin-padding-box_with_radius.htm
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-origin:padding-box &amp; border-radius</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="mailto:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help">
<meta content="image" name="flags">
<meta content="padding-box : The position is relative to the padding box. (For single boxes ‘0 0’ is the upper left corner of the padding edge, ‘100% 100%’ is the lower right corner.)" name="assert">

2
tests/wpt/css-tests/css-backgrounds-3_dev/html4/origin-padding-box_with_size.htm
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-origin:padding-box &amp; background-size</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="mailto:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help">
<meta content="image" name="flags">
<meta content="padding-box : The position is relative to the padding box. (For single boxes ‘0 0’ is the upper left corner of the padding edge, ‘100% 100%’ is the lower right corner.)" name="assert">

6
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/background-image-001-ref.htm
View file

@ -1,7 +1,6 @@
<!DOCTYPE html>
<html><head><title>background-image referance</title>
<link href="
http://www.justin-hill.com" rel="author" title="Justin Hill">
<link href="http://www.justin-hill.com" rel="author" title="Justin Hill">
<style>
.green {
top:50px;
@ -10,5 +9,6 @@
</style>
</head><body>
<p> Test passes if green image shows and no red visable.</p>
<img src="../green.png" class="green">
<img src="../support/green.png" class="green">
</body></html>

32
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/background-repeat-round-1-ref.htm Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: background image repeat</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<style type="text/css">
.outer {
width: 72px;
height: 72px;
border: 1px solid black;
background-image: url(aqua-yellow-32x32.png);
background-size: 36px 36px;
background-repeat: repeat;
}
.outer_gradient {
width: 72px;
height: 72px;
border: 1px solid black;
background-size: 36px 36px;
background-image: linear-gradient(to top left, red, green);
background-repeat: repeat;
}
</style>
</head>
<body>
<div class="outer"></div>
<div class="outer_gradient"></div>
</body></html>

31
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/background-repeat-round-2-ref.htm Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: background image repeat</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<style type="text/css">
.outer {
width: 72px;
height: 72px;
border: 1px solid black;
background-image: url(aqua-yellow-32x32.png);
background-size: 36px 36px;
background-repeat: repeat-x;
}
.outer_gradient {
width: 72px;
height: 72px;
border: 1px solid black;
background-image: linear-gradient(to top left, red, green);
background-size: 36px 36px;
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div class="outer"></div>
<div class="outer_gradient"></div>
</body></html>

31
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/background-repeat-round-3-ref.htm Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: background image repeat</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<style type="text/css">
#outer {
width: 72px;
height: 72px;
border: 1px solid black;
background-image: url(aqua-yellow-32x32.png);
background-size: 36px 36px;
background-repeat: repeat-y;
}
#outer_gradient {
width: 72px;
height: 72px;
border: 1px solid black;
background-image: linear-gradient(to top left, red, green);
background-size: 36px 36px;
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div id="outer"><div id="inner"></div></div>
<div id="outer_gradient"><div id="inner"></div></div>
</body></html>

33
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/background-repeat-round-4-ref.htm Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: background image repeat with specified position</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<style type="text/css">
.outer {
width: 72px;
height: 72px;
border: 1px solid black;
background-image: url(aqua-yellow-32x32.png);
background-size: 36px 36px;
background-repeat: repeat;
background-position: 5px 5px;
}
.outer_gradient {
width: 72px;
height: 72px;
border: 1px solid black;
background-image: linear-gradient(to top left, red, green);
background-size: 36px 36px;
background-repeat: repeat;
background-position: 5px 5px;
}
</style>
</head>
<body>
<div class="outer"></div>
<div class="outer_gradient"></div>
</body></html>

68
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/background-repeat-space-1-ref.htm Normal file
View file

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: position background image</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<style type="text/css">
.outer
{
border: 1px solid black;
width: 106px;
height: 106px;
display: flex;
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
}
.inner
{
height: 32px;
width: 32px;
background-image: url(aqua-yellow-32x32.png);
}
.outer_gradient
{
border: 1px solid black;
width: 106px;
height: 106px;
display: flex;
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
}
.inner_gradient
{
height: 32px;
width: 32px;
background-image: linear-gradient(to top left, red, green);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="outer_gradient">
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
</div>
</body></html>

41
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/background-repeat-space-10-ref.htm Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: position background image</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<style type="text/css">
.outer
{
border: 1px solid black;
width: 96px;
height: 106px;
display: flex;
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
}
.inner
{
height: 32px;
width: 32px;
background-image: url(aqua-yellow-32x32.png);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
</body></html>

32
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/background-repeat-space-2-ref.htm Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: position background image</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<style type="text/css">
.outer {
width: 48px;
height: 48px;
border: 1px solid black;
background-image: url(aqua-yellow-32x32.png);
background-repeat: no-repeat;
background-position: 5px 5px;
}
.outer_gradient {
width: 48px;
height: 48px;
border: 1px solid black;
background-size: 32px 32px;
background-image: linear-gradient(to top left, red, green);
background-repeat: no-repeat;
background-position: 5px 5px;
}
</style>
</head>
<body>
<div class="outer"></div>
<div class="outer_gradient"></div>
</body></html>

80
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/background-repeat-space-3-ref.htm Normal file
View file

@ -0,0 +1,80 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: position background image</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<style type="text/css">
.outer1
{
border: 1px solid black;
width: 106px;
height: 106px;
display: flex;
justify-content: space-between;
}
.inner1
{
height: 32px;
width: 32px;
background-image: url(aqua-yellow-32x32.png);
margin-top: 40px;
}
.outer2
{
border: 1px solid black;
width: 106px;
height: 106px;
display: flex;
align-content: space-between;
flex-wrap: wrap;
}
.inner2
{
height: 32px;
width: 32px;
background-image: url(aqua-yellow-32x32.png);
margin-left: 40px;
}
.inner_gradient1
{
height: 32px;
width: 32px;
background-size: 32px 32px;
background-image: linear-gradient(to top left, red, green);
margin-top: 40px;
}
.inner_gradient2
{
height: 32px;
width: 32px;
background-size: 32px 32px;
background-image: linear-gradient(to top left, red, green);
margin-left: 40px;
}
</style>
</head>
<body>
<div class="outer1">
<div class="inner1"></div>
<div class="inner1"></div>
<div class="inner1"></div>
</div>
<div class="outer2">
<div class="inner2"></div>
<div class="inner2"></div>
<div class="inner2"></div>
</div>
<div class="outer1">
<div class="inner_gradient1"></div>
<div class="inner_gradient1"></div>
<div class="inner_gradient1"></div>
</div>
<div class="outer2">
<div class="inner_gradient2"></div>
<div class="inner_gradient2"></div>
<div class="inner_gradient2"></div>
</div>
</body></html>

58
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/background-repeat-space-4-ref.htm Normal file
View file

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: position background image</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<style type="text/css">
.outer
{
border: 1px solid black;
width: 96px;
height: 106px;
display: flex;
align-content: space-between;
flex-wrap: wrap;
}
.inner
{
height: 32px;
width: 32px;
background-image: url(aqua-yellow-32x32.png);
}
.inner_gradient
{
height: 32px;
width: 32px;
background-size: 32px 32px;
background-image: linear-gradient(to top left, red, green);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="outer">
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
</div>
</body></html>

58
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/background-repeat-space-5-ref.htm Normal file
View file

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: position background image</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<style type="text/css">
.outer
{
border: 1px solid black;
width: 106px;
height: 96px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.inner
{
height: 32px;
width: 32px;
background-image: url(aqua-yellow-32x32.png);
}
.inner_gradient
{
height: 32px;
width: 32px;
background-size: 32px 32px;
background-image: linear-gradient(to top left, red, green);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="outer">
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
</div>
</body></html>

61
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/background-repeat-space-6-ref.htm Normal file
View file

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: position background image</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<style type="text/css">
.outer
{
border: 1px solid black;
width: 192px;
height: 106px;
display: flex;
align-content: space-between;
flex-wrap: wrap;
}
.inner
{
height: 32px;
width: 64px;
background-image: url(aqua-yellow-32x32.png);
background-repeat: no-repeat;
background-size: 64px 32px;
}
.inner_gradient
{
height: 32px;
width: 64px;
background-image: linear-gradient(to top left, red, green);
background-repeat: no-repeat;
background-size: 64px 32px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="outer">
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
</div>
</body></html>

61
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/background-repeat-space-7-ref.htm Normal file
View file

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: position background image</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<style type="text/css">
.outer
{
border: 1px solid black;
width: 106px;
height: 192px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.inner
{
height: 64px;
width: 32px;
background-image: url(aqua-yellow-32x32.png);
background-repeat: no-repeat;
background-size: 32px 64px;
}
.inner_gradient
{
height: 64px;
width: 32px;
background-image: linear-gradient(to top left, red, green);
background-repeat: no-repeat;
background-size: 32px 64px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="outer">
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
<div class="inner_gradient"></div>
</div>
</body></html>

34
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/background-repeat-space-8-ref.htm Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: position background image</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<style type="text/css">
.outer
{
border: 20px solid rgba(0, 0, 0, 0.5);
width: 106px;
height: 106px;
background-image: url(aqua-yellow-37x37.png);
background-repeat: repeat;
}
.outer_gradient
{
border: 20px solid rgba(0, 0, 0, 0.5);
width: 32px;
height: 32px;
background-size: 50px 50px;
background-image: linear-gradient(to top left, red, green);
background-repeat: no-repeat;
background-position: -10px -10px;
}
</style>
</head>
<body>
<div class="outer"></div>
<div class="outer_gradient"></div>
</body></html>

41
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/background-repeat-space-9-ref.htm Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Background: background-repeat: position background image</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<style type="text/css">
.outer
{
border: 1px solid black;
width: 106px;
height: 96px;
display: flex;
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
}
.inner
{
height: 32px;
width: 32px;
background-image: url(aqua-yellow-32x32.png);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
</body></html>

4
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/background-size-ref.htm
View file

@ -1,8 +1,8 @@
<!DOCTYPE html>
<html><head>
<title>CSS Background and Border Test:background-size conflicts with background-attachment</title>
<link href="stenders@163.com" rel="author" title="xiaochun">
<link href="jinlongz@oupeng.com" rel="reviewer" title="Jinlong Zhang"><!--2012/10/21-->
<link href="mailto:stenders@163.com" rel="author" title="xiaochun">
<link href="mailto:jinlongz@oupeng.com" rel="reviewer" title="Jinlong Zhang"><!--2012/10/21-->
<meta content="The test passes if we can see the background-image is exactly same as above." name="assert">
<style type="text/css">
.backgroundSize{

4
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/background_clip_padding-box.htm
View file

@ -1,8 +1,8 @@
<!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="mailto:dajiangxiaoyan@126.com" rel="author" title="Xiaoyan Jiang">
<link href="mailto:jinlongz@oupeng.com" rel="reviewer" title="Jinlong Zhang">
<style type="text/css">
/* Positioned container allows for the self-describing statement to still
be visible in the case of failure */

20
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/border-image-repeat-1-ref.htm Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Border Image: border-image-repeat with SVG content</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
</head>
<body>
<svg width="64" version="1.1" xmlns:xmlns="http://www.w3.org/2000/svg" height="48">
<g stroke-width="0" fill="blue">
<path d="M2 2h4v44H2z"></path>
<path d="M2 2h60v4H2z"></path>
<path d="M58 2h4v44h-4z"></path>
<path d="M2 42h60v4H2zM8"></path>
</g>
</svg>
</body></html>

100
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/border-image-repeat-round-1-ref.htm Normal file
View file

@ -0,0 +1,100 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Border Image: border-image-repeat: round</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<style type="text/css">
.outer {
width: 81px;
height: 81px;
}
.inner1 {
position: absolute;
top: 0px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
.inner2 {
position: absolute;
top: 0px;
left: 27px;
width: 34px;
height: 27px;
background-size: 102px 81px;
background-image: url("border.png");
background-position: -34px 0px;
}
.inner3 {
position: absolute;
top: 0px;
left: 61px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
.inner4 {
position: absolute;
top: 27px;
left: 0px;
width: 27px;
height: 34px;
background-size: 81px 102px;
background-image: url("border.png");
background-position: 0px -34px;
}
.inner5 {
position: absolute;
top: 27px;
left: 61px;
width: 27px;
height: 34px;
background-size: 81px 102px;
background-image: url("border.png");
background-position: -54px -34px;
}
.inner6 {
position: absolute;
top: 61px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
.inner7 {
position: absolute;
top: 61px;
left: 27px;
width: 34px;
height: 27px;
background-size: 102px 81px;
background-image: url("border.png");
background-position: -34px -54px;
}
.inner8 {
position: absolute;
top: 61px;
left: 61px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
<div class="inner3"></div>
<div class="inner4"></div>
<div class="inner5"></div>
<div class="inner6"></div>
<div class="inner7"></div>
<div class="inner8"></div>
</div>
</body></html>

100
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/border-image-repeat-round-2-ref.htm Normal file
View file

@ -0,0 +1,100 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Border Image: border-image-repeat: round</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<style type="text/css">
.outer {
width: 81px;
height: 81px;
}
.inner1 {
position: absolute;
top: 0px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
.inner2 {
position: absolute;
top: 0px;
left: 27px;
width: 13px;
height: 27px;
background-size: 39px 81px;
background-image: url("border.png");
background-position: -13px 0px;
}
.inner3 {
position: absolute;
top: 0px;
left: 40px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
.inner4 {
position: absolute;
top: 27px;
left: 0px;
width: 27px;
height: 13px;
background-size: 81px 39px;
background-image: url("border.png");
background-position: 0px -13px;
}
.inner5 {
position: absolute;
top: 27px;
left: 40px;
width: 27px;
height: 13px;
background-size: 81px 39px;
background-image: url("border.png");
background-position: -54px -13px;
}
.inner6 {
position: absolute;
top: 40px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
.inner7 {
position: absolute;
top: 40px;
left: 27px;
width: 13px;
height: 27px;
background-size: 39px 81px;
background-image: url("border.png");
background-position: -13px -54px;
}
.inner8 {
position: absolute;
top: 40px;
left: 40px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
<div class="inner3"></div>
<div class="inner4"></div>
<div class="inner5"></div>
<div class="inner6"></div>
<div class="inner7"></div>
<div class="inner8"></div>
</div>
</body></html>

96
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/border-image-repeat-space-1-ref.htm Normal file
View file

@ -0,0 +1,96 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Border Image: border-image-repeat: space</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<style type="text/css">
.outer {
width: 81px;
height: 81px;
}
.inner1 {
position: absolute;
top: 0px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
.inner2 {
position: absolute;
top: 0px;
left: 31px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: -27px 0px;
}
.inner3 {
position: absolute;
top: 0px;
left: 62px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
.inner4 {
position: absolute;
top: 31px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: 0px -27px;
}
.inner5 {
position: absolute;
top: 31px;
left: 62px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: -54px -27px;
}
.inner6 {
position: absolute;
top: 62px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
.inner7 {
position: absolute;
top: 62px;
left: 31px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: -27px -54px;
}
.inner8 {
position: absolute;
top: 62px;
left: 62px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
<div class="inner3"></div>
<div class="inner4"></div>
<div class="inner5"></div>
<div class="inner6"></div>
<div class="inner7"></div>
<div class="inner8"></div>
</div>
</body></html>

56
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/border-image-repeat-space-2-ref.htm Normal file
View file

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Border Image: border-image-repeat: round</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<style type="text/css">
.outer {
width: 67px;
height: 67px;
}
.inner1 {
position: absolute;
top: 0px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
.inner2 {
position: absolute;
top: 0px;
left: 40px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
.inner3 {
position: absolute;
top: 40px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
.inner4 {
position: absolute;
top: 40px;
left: 40px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
<div class="inner3"></div>
<div class="inner4"></div>
</div>
</body></html>

136
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/border-image-repeat-space-3-ref.htm Normal file
View file

@ -0,0 +1,136 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Border Image: border-image-repeat: space</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<style type="text/css">
.outer {
width: 114px;
height: 114px;
}
.inner1 {
position: absolute;
top: 0px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
.inner2_1 {
position: absolute;
top: 0px;
left: 29px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: -27px 0px;
}
.inner2_2 {
position: absolute;
top: 0px;
left: 58px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: -27px 0px;
}
.inner3 {
position: absolute;
top: 0px;
left: 87px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
.inner4_1 {
position: absolute;
top: 29px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: 0px -27px;
}
.inner4_2 {
position: absolute;
top: 58px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: 0px -27px;
}
.inner5_1 {
position: absolute;
top: 29px;
left: 87px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: -54px -27px;
}
.inner5_2 {
position: absolute;
top: 58px;
left: 87px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: -54px -27px;
}
.inner6 {
position: absolute;
top: 87px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
.inner7_1 {
position: absolute;
top: 87px;
left: 29px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: -27px -54px;
}
.inner7_2 {
position: absolute;
top: 87px;
left: 58px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: -27px -54px;
}
.inner8 {
position: absolute;
top: 87px;
left: 87px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1"></div>
<div class="inner2_1"></div>
<div class="inner2_2"></div>
<div class="inner3"></div>
<div class="inner4_1"></div>
<div class="inner4_2"></div>
<div class="inner5_1"></div>
<div class="inner5_2"></div>
<div class="inner6"></div>
<div class="inner7_1"></div>
<div class="inner7_2"></div>
<div class="inner8"></div>
</div>
</body></html>

97
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/border-image-repeat-space-4-ref-1.htm Normal file
View file

@ -0,0 +1,97 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Border Image: border-image-repeat: space</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="reference/border-image-repeat-space-4-ref-2.htm" rel="match">
<style type="text/css">
.outer {
width: 81px;
height: 81px;
}
.inner1 {
position: absolute;
top: 0px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
.inner2 {
position: absolute;
top: 0px;
left: 27px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: -27px 0px;
}
.inner3 {
position: absolute;
top: 0px;
left: 54px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
.inner4 {
position: absolute;
top: 27px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: 0px -27px;
}
.inner5 {
position: absolute;
top: 27px;
left: 54px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: -54px -27px;
}
.inner6 {
position: absolute;
top: 54px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
.inner7 {
position: absolute;
top: 54px;
left: 27px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: -27px -54px;
}
.inner8 {
position: absolute;
top: 54px;
left: 54px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
<div class="inner3"></div>
<div class="inner4"></div>
<div class="inner5"></div>
<div class="inner6"></div>
<div class="inner7"></div>
<div class="inner8"></div>
</div>
</body></html>

24
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/border-image-repeat-space-4-ref-2.htm Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Border Image: border-image-repeat: space</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<style type="text/css">
.outer {
position: absolute;
left: 0px;
top: 0px;
border: 27px solid transparent;
border-image: url("border.png") 27;
border-image-repeat: stretch stretch;
width: 27px;
height: 27px;
}
</style>
</head>
<body>
<div class="outer"></div>
</body></html>

177
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/border-image-repeat-space-5-ref-1.htm Normal file
View file

@ -0,0 +1,177 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Border Image: border-image-repeat: space</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<link href="reference/border-image-repeat-space-5-ref-2.htm" rel="match">
<style type="text/css">
.outer {
width: 135px;
height: 135px;
}
.inner1 {
position: absolute;
top: 0px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
.inner2_1 {
position: absolute;
top: 0px;
left: 27px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: -27px 0px;
}
.inner2_2 {
position: absolute;
top: 0px;
left: 54px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: -27px 0px;
}
.inner2_3 {
position: absolute;
top: 0px;
left: 81px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: -27px 0px;
}
.inner3 {
position: absolute;
top: 0px;
left: 108px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
.inner4_1 {
position: absolute;
top: 27px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: 0px -27px;
}
.inner4_2 {
position: absolute;
top: 54px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: 0px -27px;
}
.inner4_3 {
position: absolute;
top: 81px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: 0px -27px;
}
.inner5_1 {
position: absolute;
top: 27px;
left: 108px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: -54px -27px;
}
.inner5_2 {
position: absolute;
top: 54px;
left: 108px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: -54px -27px;
}
.inner5_3 {
position: absolute;
top: 81px;
left: 108px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: -54px -27px;
}
.inner6 {
position: absolute;
top: 108px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
.inner7_1 {
position: absolute;
top: 108px;
left: 27px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: -27px -54px;
}
.inner7_2 {
position: absolute;
top: 108px;
left: 54px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: -27px -54px;
}
.inner7_3 {
position: absolute;
top: 108px;
left: 81px;
width: 27px;
height: 27px;
background-image: url("border.png");
background-position: -27px -54px;
}
.inner8 {
position: absolute;
top: 108px;
left: 108px;
width: 27px;
height: 27px;
background-image: url("border.png");
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1"></div>
<div class="inner2_1"></div>
<div class="inner2_2"></div>
<div class="inner2_3"></div>
<div class="inner3"></div>
<div class="inner4_1"></div>
<div class="inner4_2"></div>
<div class="inner4_3"></div>
<div class="inner5_1"></div>
<div class="inner5_2"></div>
<div class="inner5_3"></div>
<div class="inner6"></div>
<div class="inner7_1"></div>
<div class="inner7_2"></div>
<div class="inner7_3"></div>
<div class="inner8"></div>
</div>
</body></html>

24
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/border-image-repeat-space-5-ref-2.htm Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Border Image: border-image-repeat: space</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<style type="text/css">
.outer {
position: absolute;
left: 0px;
top: 0px;
border: 27px solid transparent;
border-image: url("border.png") 27;
border-image-repeat: repeat repeat;
width: 81px;
height: 81px;
}
</style>
</head>
<body>
<div class="outer"></div>
</body></html>

101
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/border-image-repeat-space-6-ref.htm Normal file
View file

@ -0,0 +1,101 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Border Image: border-image-repeat: space</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<style type="text/css">
.outer {
width: 81px;
height: 81px;
}
.inner1 {
position: absolute;
top: 0px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("reticule-tl.png");
}
.inner2 {
position: absolute;
top: 0px;
left: 27px;
width: 27px;
height: 27px;
background-image: url("reticule-to.png");
}
.inner3 {
position: absolute;
top: 0px;
left: 54px;
width: 27px;
height: 27px;
background-image: url("reticule-tr.png");
}
.inner4 {
position: absolute;
top: 27px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("reticule-le.png");
}
.inner5 {
position: absolute;
top: 27px;
left: 27px;
width: 27px;
height: 27px;
background-image: url("reticule-ct.png");
}
.inner6 {
position: absolute;
top: 27px;
left: 54px;
width: 27px;
height: 27px;
background-image: url("reticule-ri.png");
}
.inner7 {
position: absolute;
top: 54px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("reticule-bl.png");
}
.inner8 {
position: absolute;
top: 54px;
left: 27px;
width: 27px;
height: 27px;
background-image: url("reticule-bo.png");
}
.inner9 {
position: absolute;
top: 54px;
left: 54px;
width: 27px;
height: 27px;
background-image: url("reticule-br.png");
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
<div class="inner3"></div>
<div class="inner4"></div>
<div class="inner5"></div>
<div class="inner6"></div>
<div class="inner7"></div>
<div class="inner8"></div>
<div class="inner9"></div>
</div>
</body></html>

164
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/border-image-repeat-space-7-ref.htm Normal file
View file

@ -0,0 +1,164 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Border Image: border-image-repeat: space</title>
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
<style type="text/css">
.outer {
width: 132px;
height: 132px;
}
.inner1 {
position: absolute;
top: 0px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("reticule-tl.png");
}
.inner2_1 {
position: absolute;
top: 0px;
left: 35px;
width: 27px;
height: 27px;
background-image: url("reticule-to.png");
}
.inner2_2 {
position: absolute;
top: 0px;
left: 70px;
width: 27px;
height: 27px;
background-image: url("reticule-to.png");
}
.inner3 {
position: absolute;
top: 0px;
left: 105px;
width: 27px;
height: 27px;
background-image: url("reticule-tr.png");
}
.inner4_1 {
position: absolute;
top: 35px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("reticule-le.png");
}
.inner4_2 {
position: absolute;
top: 70px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("reticule-le.png");
}
.inner5_1 {
position: absolute;
top: 35px;
left: 35px;
width: 27px;
height: 27px;
background-image: url("reticule-ct.png");
}
.inner5_2 {
position: absolute;
top: 35px;
left: 70px;
width: 27px;
height: 27px;
background-image: url("reticule-ct.png");
}
.inner5_3 {
position: absolute;
top: 70px;
left: 35px;
width: 27px;
height: 27px;
background-image: url("reticule-ct.png");
}
.inner5_4 {
position: absolute;
top: 70px;
left: 70px;
width: 27px;
height: 27px;
background-image: url("reticule-ct.png");
}
.inner6_1 {
position: absolute;
top: 35px;
left: 105px;
width: 27px;
height: 27px;
background-image: url("reticule-ri.png");
}
.inner6_2 {
position: absolute;
top: 70px;
left: 105px;
width: 27px;
height: 27px;
background-image: url("reticule-ri.png");
}
.inner7 {
position: absolute;
top: 105px;
left: 0px;
width: 27px;
height: 27px;
background-image: url("reticule-bl.png");
}
.inner8_1 {
position: absolute;
top: 105px;
left: 35px;
width: 27px;
height: 27px;
background-image: url("reticule-bo.png");
}
.inner8_2 {
position: absolute;
top: 105px;
left: 70px;
width: 27px;
height: 27px;
background-image: url("reticule-bo.png");
}
.inner9 {
position: absolute;
top: 105px;
left: 105px;
width: 27px;
height: 27px;
background-image: url("reticule-br.png");
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1"></div>
<div class="inner2_1"></div>
<div class="inner2_2"></div>
<div class="inner3"></div>
<div class="inner4_1"></div>
<div class="inner4_2"></div>
<div class="inner5_1"></div>
<div class="inner5_2"></div>
<div class="inner5_3"></div>
<div class="inner5_4"></div>
<div class="inner6_1"></div>
<div class="inner6_2"></div>
<div class="inner7"></div>
<div class="inner8_1"></div>
<div class="inner8_2"></div>
<div class="inner9"></div>
</div>
</body></html>

51
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/box-shadow-syntax-001.htm Normal file
View file

@ -0,0 +1,51 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reference</title>
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
<style type="text/css">
.container {
margin: 4px;
border: solid green 4px;
padding-top: 1px;
border-style: none none solid solid;
}
</style>
</head>
<body>
<p>There must be 31 green L-shapes below and no red.</p>
<div id="c1" class="container"><div></div></div>
<div id="c2" class="container"><div></div></div>
<div id="c3" class="container"><div></div></div>
<div id="c4" class="container"><div></div></div>
<div id="c5" class="container"><div></div></div>
<div id="c6" class="container"><div></div></div>
<div id="i1" class="container"><div></div></div>
<div id="i2" class="container"><div></div></div>
<div id="i3" class="container"><div></div></div>
<div id="i4" class="container"><div></div></div>
<div id="i5" class="container"><div></div></div>
<div id="i6" class="container"><div></div></div>
<div id="i7" class="container"><div></div></div>
<div id="ci1" class="container"><div></div></div>
<div id="ci2" class="container"><div></div></div>
<div id="ci3" class="container"><div></div></div>
<div id="ci4" class="container"><div></div></div>
<div id="ci5" class="container"><div></div></div>
<div id="ci6" class="container"><div></div></div>
<div id="ci11" class="container"><div></div></div>
<div id="ci12" class="container"><div></div></div>
<div id="ci13" class="container"><div></div></div>
<div id="ci14" class="container"><div></div></div>
<div id="ci15" class="container"><div></div></div>
<div id="ci16" class="container"><div></div></div>
<div id="ci21" class="container"><div></div></div>
<div id="ci22" class="container"><div></div></div>
<div id="ci23" class="container"><div></div></div>
<div id="ci24" class="container"><div></div></div>
<div id="ci25" class="container"><div></div></div>
<div id="ci26" class="container"><div></div></div>
</body>
</html>

31
tests/wpt/css-tests/css-backgrounds-3_dev/html4/reference/ref-tall-empty.htm Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<!--
The original and initial filename of this reference file was
ref-tall-empty.html
-->
<title>CSS Reftest Reference</title>
<link href="http://whereswalden.com/" rel="author" title="Jeff Walden">
<style type="text/css">
div
{
width: 256px; height: 768px;
}
#outer
{
border: 1px solid black;
}
</style>
</head>
<body>
<div id="outer"></div>
</body></html>

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