Skip to content
This repository has been archived by the owner on Dec 18, 2018. It is now read-only.

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
dbaron committed May 28, 2016
1 parent ba07429 commit 3a7376c
Show file tree
Hide file tree
Showing 78 changed files with 1,816 additions and 28 deletions.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,23 @@
<!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;
}
</style>
</head>
<body>
<div class="outer"></div>
</body>
</html>

@@ -0,0 +1,24 @@
<!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;
}
</style>
</head>
<body>
<div class="outer"></div>
</body>
</html>
@@ -0,0 +1,24 @@
<!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;
}
</style>
</head>
<body>
<div class="outer"></div>
</body>
</html>
@@ -0,0 +1,25 @@
<!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;
}
</style>
</head>
<body>
<div class="outer"></div>
</body>
</html>
@@ -0,0 +1,25 @@
<!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;
}
</style>
</head>
<body>
<div class="outer"></div>
</body>
</html>
@@ -0,0 +1,25 @@
<!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;
}
</style>
</head>
<body>
<div class="outer"></div>
</body>
</html>
@@ -0,0 +1,22 @@
<!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;
}
</style>
</head>
<body>
<div class="outer"></div>
</body>
</html>
@@ -0,0 +1,24 @@
<!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;
}
</style>
</head>
<body>
<div class="outer"></div>
</body>
</html>
@@ -0,0 +1,22 @@
<!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;
}
</style>
</head>
<body>
<div id="outer"><div id=inner></div></div>
</body>
</html>
@@ -0,0 +1,25 @@
<!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;
}
</style>
</head>
<body>
<div class="outer"></div>
</body>
</html>
@@ -0,0 +1,23 @@
<!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;
}
</style>
</head>
<body>
<div class="outer"></div>
</body>
</html>
@@ -0,0 +1,26 @@
<!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;
}
</style>
</head>
<body>
<div id="outer"></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: 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-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;
}
</style>
</head>
<body>
<div class="outer"></div>
</body>
</html>

@@ -0,0 +1,25 @@
<!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;
}
</style>
</head>
<body>
<div class="outer"></div>
</body>
</html>

0 comments on commit 3a7376c

Please sign in to comment.