mirror of
https://repo.dactyloidae.xyz/Dactyloidae/UXP.git
synced 2026-09-26 18:37:31 +09:00
import FIREFOX_52_6_0esr_RELEASE from mozilla-esr52 hg repo
This commit is contained in:
Roy Tam
commit
dcd9973243
150858 changed files with 23884658 additions and 0 deletions
Binary file not shown.
|
After Width: | Height: | Size: 156 B |
Binary file not shown.
|
After Width: | Height: | Size: 287 B |
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: background image repeat</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: background image round</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
|
||||
<link rel="match" href="background-repeat-round-1-ref.html">
|
||||
<meta name="assert" content="Test checks whether background-repeat: 'round' works correctly or not.">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: background image round</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
|
||||
<link rel="match" href="background-repeat-round-1-ref.html">
|
||||
<meta name="assert" content="Test checks whether background-repeat: 'round round' works correctly or not.">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: background image round</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
|
||||
<link rel="match" href="background-repeat-round-1-ref.html">
|
||||
<meta name="assert" content="Test checks whether background-repeat: 'repeat round' works correctly or not.">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: background image round</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
|
||||
<link rel="match" href="background-repeat-round-1-ref.html">
|
||||
<meta name="assert" content="Test checks whether background-repeat: 'round repeat' works correctly or not.">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: background image round</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
|
||||
<link rel="match" href="background-repeat-round-1-ref.html">
|
||||
<meta name="assert" content="Test checks whether background-repeat: 'repeat round' works correctly or not.">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: background image repeat</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: background image round no-repeat</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
|
||||
<link rel="match" href="background-repeat-round-2-ref.html">
|
||||
<meta name="assert" content="Test checks whether background-repeat: 'round no-repeat' works correctly or not.">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: background image repeat</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: background image no-repeat round</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
|
||||
<link rel="match" href="background-repeat-round-3-ref.html">
|
||||
<meta name="assert" content="Test checks whether background-repeat: 'no-repeat round' works correctly or not.">
|
||||
<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>
|
||||
|
|
@ -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 rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<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>
|
||||
|
|
@ -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 rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
|
||||
<link rel="match" href="background-repeat-round-4-ref.html">
|
||||
<meta name="assert" content="Test checks whether background-repeat: 'round' works correctly or not.">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: position background image</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: position background image</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: background image space</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
|
||||
<link rel="match" href="background-repeat-space-10-ref.html">
|
||||
<meta name="assert" content="Test checks whether background-repeat: 'space' works correctly or not.">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: background image space</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
|
||||
<link rel="match" href="background-repeat-space-1-ref.html">
|
||||
<meta name="assert" content="Test checks whether background-repeat: 'space' works correctly or not.">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: background image space with position</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
|
||||
<link rel="match" href="background-repeat-space-1-ref.html">
|
||||
<meta name="assert" content="Test checks whether background-repeat: 'space' works correctly or not.">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: background image space</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
|
||||
<link rel="match" href="background-repeat-space-1-ref.html">
|
||||
<meta name="assert" content="Test checks whether background-repeat: 'space space' works correctly or not.">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: position background image</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<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>
|
||||
|
|
@ -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 rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
|
||||
<link rel="match" href="background-repeat-space-2-ref.html">
|
||||
<meta name="assert" content="Test checks whether background-repeat: 'space' works correctly or not.">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: position background image</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<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>
|
||||
|
|
@ -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 rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
|
||||
<link rel="match" href="background-repeat-space-3-ref.html">
|
||||
<meta name="assert" content="Test checks whether background-repeat: 'no-repeat space' and 'space no-repeat' works correctly or not.">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: position background image</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: background image space</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
|
||||
<link rel="match" href="background-repeat-space-4-ref.html">
|
||||
<meta name="assert" content="Test checks whether background-repeat: 'repeat space' works correctly or not.">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: position background image</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: background image space</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
|
||||
<link rel="match" href="background-repeat-space-5-ref.html">
|
||||
<meta name="assert" content="Test checks whether background-repeat: 'space repeat' works correctly or not.">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: position background image</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: background image space</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
|
||||
<link rel="match" href="background-repeat-space-6-ref.html">
|
||||
<meta name="assert" content="Test checks whether background-repeat: 'round space' works correctly or not.">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: position background image</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: background image space</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
|
||||
<link rel="match" href="background-repeat-space-7-ref.html">
|
||||
<meta name="assert" content="Test checks whether background-repeat: 'space round' works correctly or not.">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: position background image</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: background image space</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
|
||||
<link rel="match" href="background-repeat-space-8-ref.html">
|
||||
<meta name="assert" content="Test checks whether background-repeat: 'space' works correctly or not.">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: position background image</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-repeat: background image space</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
|
||||
<link rel="match" href="background-repeat-space-9-ref.html">
|
||||
<meta name="assert" content="Test checks whether background-repeat: 'space' works correctly or not.">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Border Image: border-image-repeat with SVG content</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
</head>
|
||||
<body>
|
||||
<svg width='64' height='48' xmlns="http://www.w3.org/2000/svg" version="1.1">
|
||||
<g fill='blue' stroke-width='0'>
|
||||
<path d='M2 2h4v44H2z'/>
|
||||
<path d='M2 2h60v4H2z'/>
|
||||
<path d='M58 2h4v44h-4z'/>
|
||||
<path d='M2 42h60v4H2zM8'/>
|
||||
</g>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Border Image: border-image-repeat with SVG content</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
|
||||
<link rel="match" href="border-image-repeat-1-ref.html">
|
||||
<meta name="assert" content="The test checks the result of border-image-repeat with SVG content.">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Border Image: border-image-repeat: round</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Border Image: border-image-repeat: round</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
|
||||
<link rel="match" href="border-image-repeat-round-1-ref.html">
|
||||
<meta name="assert" content="The test checks whether border-image-repeat: 'round' uses the correct rounding formula.">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Border Image: border-image-repeat: round</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Border Image: border-image-repeat: round</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
|
||||
<link rel="match" href="border-image-repeat-round-2-ref.html">
|
||||
<meta name="assert" content="The test checks whether border-image-repeat: 'round' uses the correct rounding formula.">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Border Image: border-image-repeat: space</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Border Image: border-image-repeat: space</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat">
|
||||
<link rel="match" href="border-image-repeat-space-1-ref.html">
|
||||
<meta name="assert" content="The test checks whether border-image-repeat: 'space' uses the correct formula when a single image fits.">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Border Image: border-image-repeat: round</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Border Image: border-image-repeat: space</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat">
|
||||
<link rel="match" href="border-image-repeat-space-2-ref.html">
|
||||
<meta name="assert" content="The test checks whether border-image-repeat: 'space' uses the correct formula when no images fit.">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Border Image: border-image-repeat: space</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Border Image: border-image-repeat: space</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat">
|
||||
<link rel="match" href="border-image-repeat-space-3-ref.html">
|
||||
<meta name="assert" content="The test checks whether border-image-repeat: 'space' uses the correct formula when multiple images fit.">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Border Image: border-image-repeat: space</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="match" href="border-image-repeat-space-4-ref-2.html">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Border Image: border-image-repeat: space</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Border Image: border-image-repeat: space</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat">
|
||||
<link rel="match" href="border-image-repeat-space-4-ref-1.html">
|
||||
<meta name="assert" content="The test checks whether border-image-repeat: 'space' uses the correct formula when a single image fits exactly.">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,177 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Border Image: border-image-repeat: space</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="match" href="border-image-repeat-space-5-ref-2.html">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Border Image: border-image-repeat: space</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Border Image: border-image-repeat: space</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat">
|
||||
<link rel="match" href="border-image-repeat-space-5-ref-1.html">
|
||||
<meta name="assert" content="The test checks whether border-image-repeat: 'space' uses the correct formula when multiple images fit exactly.">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Border Image: border-image-repeat: space</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Border Image: border-image-repeat: space</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat">
|
||||
<link rel="match" href="border-image-repeat-space-6-ref.html">
|
||||
<meta name="assert" content="The test checks whether border-image-repeat: 'space' with 'fill' uses the correct formula when a single image fits exactly.">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Border Image: border-image-repeat: space</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Border Image: border-image-repeat: space</title>
|
||||
<link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat">
|
||||
<link rel="match" href="border-image-repeat-space-7-ref.html">
|
||||
<meta name="assert" content="The test checks whether border-image-repeat: 'space' with 'fill' uses the correct formula when multiple image fit.">
|
||||
<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>
|
||||
BIN
layout/reftests/w3c-css/submitted/background/border.png
Normal file
BIN
layout/reftests/w3c-css/submitted/background/border.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 849 B |
|
|
@ -0,0 +1,35 @@
|
|||
# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
|
||||
# background-repeat round/space test cases
|
||||
== background-repeat-space-1a.html background-repeat-space-1a.html
|
||||
== background-repeat-space-1b.html background-repeat-space-1b.html
|
||||
== background-repeat-space-1c.html background-repeat-space-1c.html
|
||||
== background-repeat-space-2.html background-repeat-space-2.html
|
||||
== background-repeat-space-3.html background-repeat-space-3.html
|
||||
== background-repeat-space-4.html background-repeat-space-4.html
|
||||
== background-repeat-space-5.html background-repeat-space-5.html
|
||||
== background-repeat-space-6.html background-repeat-space-6.html
|
||||
== background-repeat-space-7.html background-repeat-space-7.html
|
||||
== background-repeat-space-8.html background-repeat-space-8.html
|
||||
== background-repeat-space-9.html background-repeat-space-9.html
|
||||
== background-repeat-space-10.html background-repeat-space-10.html
|
||||
== background-repeat-round-1a.html background-repeat-round-1a.html
|
||||
== background-repeat-round-1b.html background-repeat-round-1b.html
|
||||
== background-repeat-round-1c.html background-repeat-round-1c.html
|
||||
== background-repeat-round-1d.html background-repeat-round-1d.html
|
||||
== background-repeat-round-1e.html background-repeat-round-1e.html
|
||||
== background-repeat-round-2.html background-repeat-round-2.html
|
||||
== background-repeat-round-3.html background-repeat-round-3.html
|
||||
== background-repeat-round-4.html background-repeat-round-4.html
|
||||
|
||||
#border-image test cases
|
||||
== border-image-repeat-round-1.html border-image-repeat-round-1.html
|
||||
== border-image-repeat-round-2.html border-image-repeat-round-2.html
|
||||
== border-image-repeat-space-1.html border-image-repeat-space-1.html
|
||||
== border-image-repeat-space-2.html border-image-repeat-space-2.html
|
||||
== border-image-repeat-space-3.html border-image-repeat-space-3.html
|
||||
== border-image-repeat-space-4.html border-image-repeat-space-4.html
|
||||
== border-image-repeat-space-4.html border-image-repeat-space-4.html
|
||||
== border-image-repeat-space-5.html border-image-repeat-space-5.html
|
||||
== border-image-repeat-space-5.html border-image-repeat-space-5.html
|
||||
== border-image-repeat-space-6.html border-image-repeat-space-6.html
|
||||
== border-image-repeat-space-7.html border-image-repeat-space-7.html
|
||||
35
layout/reftests/w3c-css/submitted/background/reftest.list
Normal file
35
layout/reftests/w3c-css/submitted/background/reftest.list
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
# background-repeat round/space test cases
|
||||
== background-repeat-space-1a.html background-repeat-space-1-ref.html
|
||||
== background-repeat-space-1b.html background-repeat-space-1-ref.html
|
||||
== background-repeat-space-1c.html background-repeat-space-1-ref.html
|
||||
== background-repeat-space-2.html background-repeat-space-2-ref.html
|
||||
== background-repeat-space-3.html background-repeat-space-3-ref.html
|
||||
== background-repeat-space-4.html background-repeat-space-4-ref.html
|
||||
== background-repeat-space-5.html background-repeat-space-5-ref.html
|
||||
== background-repeat-space-6.html background-repeat-space-6-ref.html
|
||||
== background-repeat-space-7.html background-repeat-space-7-ref.html
|
||||
== background-repeat-space-8.html background-repeat-space-8-ref.html
|
||||
== background-repeat-space-9.html background-repeat-space-9-ref.html
|
||||
== background-repeat-space-10.html background-repeat-space-10-ref.html
|
||||
== background-repeat-round-1a.html background-repeat-round-1-ref.html
|
||||
== background-repeat-round-1b.html background-repeat-round-1-ref.html
|
||||
== background-repeat-round-1c.html background-repeat-round-1-ref.html
|
||||
== background-repeat-round-1d.html background-repeat-round-1-ref.html
|
||||
== background-repeat-round-1e.html background-repeat-round-1-ref.html
|
||||
== background-repeat-round-2.html background-repeat-round-2-ref.html
|
||||
== background-repeat-round-3.html background-repeat-round-3-ref.html
|
||||
== background-repeat-round-4.html background-repeat-round-4-ref.html
|
||||
|
||||
#border-image test cases
|
||||
== border-image-repeat-round-1.html border-image-repeat-round-1-ref.html
|
||||
== border-image-repeat-round-2.html border-image-repeat-round-2-ref.html
|
||||
== border-image-repeat-space-1.html border-image-repeat-space-1-ref.html
|
||||
== border-image-repeat-space-2.html border-image-repeat-space-2-ref.html
|
||||
== border-image-repeat-space-3.html border-image-repeat-space-3-ref.html
|
||||
== border-image-repeat-space-4.html border-image-repeat-space-4-ref-1.html
|
||||
== border-image-repeat-space-4-ref-1.html border-image-repeat-space-4-ref-2.html
|
||||
== border-image-repeat-space-5.html border-image-repeat-space-5-ref-1.html
|
||||
== border-image-repeat-space-5-ref-1.html border-image-repeat-space-5-ref-2.html
|
||||
== border-image-repeat-space-6.html border-image-repeat-space-6-ref.html
|
||||
== border-image-repeat-space-7.html border-image-repeat-space-7-ref.html
|
||||
== border-image-repeat-1.html border-image-repeat-1-ref.html
|
||||
BIN
layout/reftests/w3c-css/submitted/background/reticule-bl.png
Normal file
BIN
layout/reftests/w3c-css/submitted/background/reticule-bl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 123 B |
BIN
layout/reftests/w3c-css/submitted/background/reticule-bo.png
Normal file
BIN
layout/reftests/w3c-css/submitted/background/reticule-bo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 134 B |
BIN
layout/reftests/w3c-css/submitted/background/reticule-br.png
Normal file
BIN
layout/reftests/w3c-css/submitted/background/reticule-br.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 121 B |
BIN
layout/reftests/w3c-css/submitted/background/reticule-ct.png
Normal file
BIN
layout/reftests/w3c-css/submitted/background/reticule-ct.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 B |
BIN
layout/reftests/w3c-css/submitted/background/reticule-le.png
Normal file
BIN
layout/reftests/w3c-css/submitted/background/reticule-le.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 B |
BIN
layout/reftests/w3c-css/submitted/background/reticule-ri.png
Normal file
BIN
layout/reftests/w3c-css/submitted/background/reticule-ri.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 B |
BIN
layout/reftests/w3c-css/submitted/background/reticule-tl.png
Normal file
BIN
layout/reftests/w3c-css/submitted/background/reticule-tl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 B |
BIN
layout/reftests/w3c-css/submitted/background/reticule-to.png
Normal file
BIN
layout/reftests/w3c-css/submitted/background/reticule-to.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 B |
BIN
layout/reftests/w3c-css/submitted/background/reticule-tr.png
Normal file
BIN
layout/reftests/w3c-css/submitted/background/reticule-tr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 126 B |
BIN
layout/reftests/w3c-css/submitted/background/reticule.png
Normal file
BIN
layout/reftests/w3c-css/submitted/background/reticule.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 202 B |
Loading…
Add table
Add a link
Reference in a new issue