diff options
Diffstat (limited to 'layout/reftests/w3c-css/submitted/background')
71 files changed, 2790 insertions, 0 deletions
diff --git a/layout/reftests/w3c-css/submitted/background/aqua-yellow-32x32.png b/layout/reftests/w3c-css/submitted/background/aqua-yellow-32x32.png Binary files differnew file mode 100644 index 000000000..42f8a2100 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/aqua-yellow-32x32.png diff --git a/layout/reftests/w3c-css/submitted/background/aqua-yellow-37x37.png b/layout/reftests/w3c-css/submitted/background/aqua-yellow-37x37.png Binary files differnew file mode 100644 index 000000000..0289b0394 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/aqua-yellow-37x37.png diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-round-1-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1-ref.html new file mode 100644 index 000000000..43fa1caa6 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1-ref.html @@ -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> + diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-round-1a.html b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1a.html new file mode 100644 index 000000000..7ba2329d9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1a.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> diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-round-1b.html b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1b.html new file mode 100644 index 000000000..126909c90 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1b.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> diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-round-1c.html b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1c.html new file mode 100644 index 000000000..e956e16a4 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1c.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> diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-round-1d.html b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1d.html new file mode 100644 index 000000000..424c95901 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1d.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> diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-round-1e.html b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1e.html new file mode 100644 index 000000000..64640ffdc --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1e.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> diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-round-2-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-round-2-ref.html new file mode 100644 index 000000000..6d6233078 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-2-ref.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> diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-round-2.html b/layout/reftests/w3c-css/submitted/background/background-repeat-round-2.html new file mode 100644 index 000000000..cdb85833c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-2.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> diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-round-3-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-round-3-ref.html new file mode 100644 index 000000000..49eaccb19 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-3-ref.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> diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-round-3.html b/layout/reftests/w3c-css/submitted/background/background-repeat-round-3.html new file mode 100644 index 000000000..410d7ed67 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-3.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> diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-round-4-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-round-4-ref.html new file mode 100644 index 000000000..8bb7d7095 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-4-ref.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> diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-round-4.html b/layout/reftests/w3c-css/submitted/background/background-repeat-round-4.html new file mode 100644 index 000000000..f02ad55ab --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-4.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> + diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-1-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-1-ref.html new file mode 100644 index 000000000..f9efeeb83 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-1-ref.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> + diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-10-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-10-ref.html new file mode 100644 index 000000000..35ed461c8 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-10-ref.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> + diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-10.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-10.html new file mode 100644 index 000000000..db8c910d7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-10.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> + diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-1a.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-1a.html new file mode 100644 index 000000000..3729e5ccb --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-1a.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> + diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-1b.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-1b.html new file mode 100644 index 000000000..50efcc253 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-1b.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> diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-1c.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-1c.html new file mode 100644 index 000000000..263bb0c23 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-1c.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> + diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-2-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-2-ref.html new file mode 100644 index 000000000..c2fc93aac --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-2-ref.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> diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-2.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-2.html new file mode 100644 index 000000000..6099aa0c1 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-2.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> + diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-3-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-3-ref.html new file mode 100644 index 000000000..add80bc3c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-3-ref.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> diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-3.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-3.html new file mode 100644 index 000000000..39d5701ec --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-3.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> + diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-4-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-4-ref.html new file mode 100644 index 000000000..e7814de81 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-4-ref.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> + diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-4.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-4.html new file mode 100644 index 000000000..c8be103d9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-4.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> + diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-5-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-5-ref.html new file mode 100644 index 000000000..9ff6c6e2d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-5-ref.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> + diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-5.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-5.html new file mode 100644 index 000000000..3c1b3d2d1 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-5.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> + diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-6-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-6-ref.html new file mode 100644 index 000000000..7e2f19c8d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-6-ref.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> + diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-6.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-6.html new file mode 100644 index 000000000..507535229 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-6.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> + diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-7-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-7-ref.html new file mode 100644 index 000000000..528599004 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-7-ref.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> + diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-7.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-7.html new file mode 100644 index 000000000..49bee1fec --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-7.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> + diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-8-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-8-ref.html new file mode 100644 index 000000000..1f7f39e35 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-8-ref.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> + diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-8.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-8.html new file mode 100644 index 000000000..0ad57afd9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-8.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> + diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-9-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-9-ref.html new file mode 100644 index 000000000..1476eca64 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-9-ref.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> + diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-9.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-9.html new file mode 100644 index 000000000..66f6c2258 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-9.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> + diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-1-ref.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-1-ref.html new file mode 100644 index 000000000..942f3eb8c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-1-ref.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> + diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-1.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-1.html new file mode 100644 index 000000000..6e2a43b89 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-1.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> diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-round-1-ref.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-round-1-ref.html new file mode 100644 index 000000000..69d38c317 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-round-1-ref.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> + diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-round-1.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-round-1.html new file mode 100644 index 000000000..a935e445f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-round-1.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> diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-round-2-ref.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-round-2-ref.html new file mode 100644 index 000000000..e96185c04 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-round-2-ref.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> + diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-round-2.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-round-2.html new file mode 100644 index 000000000..3c1cd3344 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-round-2.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> diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-1-ref.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-1-ref.html new file mode 100644 index 000000000..e2cc7105e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-1-ref.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> + diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-1.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-1.html new file mode 100644 index 000000000..113d000df --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-1.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> diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-2-ref.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-2-ref.html new file mode 100644 index 000000000..17b83e183 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-2-ref.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> + diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-2.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-2.html new file mode 100644 index 000000000..99dc6057f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-2.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> diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-3-ref.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-3-ref.html new file mode 100644 index 000000000..03c230186 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-3-ref.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> + diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-3.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-3.html new file mode 100644 index 000000000..c43f1d370 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-3.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> diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-4-ref-1.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-4-ref-1.html new file mode 100644 index 000000000..2cf409739 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-4-ref-1.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> + diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-4-ref-2.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-4-ref-2.html new file mode 100644 index 000000000..eee8c7787 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-4-ref-2.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> diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-4.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-4.html new file mode 100644 index 000000000..b91e3abf8 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-4.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> diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-5-ref-1.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-5-ref-1.html new file mode 100644 index 000000000..ac2fcea7f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-5-ref-1.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> + diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-5-ref-2.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-5-ref-2.html new file mode 100644 index 000000000..1d24b447e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-5-ref-2.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> diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-5.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-5.html new file mode 100644 index 000000000..582c65861 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-5.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> diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-6-ref.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-6-ref.html new file mode 100644 index 000000000..16647b3b7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-6-ref.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> + diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-6.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-6.html new file mode 100644 index 000000000..3eb643110 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-6.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> diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-7-ref.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-7-ref.html new file mode 100644 index 000000000..e0cbdfe2d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-7-ref.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> + diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-7.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-7.html new file mode 100644 index 000000000..3e632877d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-7.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> diff --git a/layout/reftests/w3c-css/submitted/background/border.png b/layout/reftests/w3c-css/submitted/background/border.png Binary files differnew file mode 100644 index 000000000..7a657391d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/border.png diff --git a/layout/reftests/w3c-css/submitted/background/reftest-stylo.list b/layout/reftests/w3c-css/submitted/background/reftest-stylo.list new file mode 100644 index 000000000..5e15898af --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/reftest-stylo.list @@ -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 diff --git a/layout/reftests/w3c-css/submitted/background/reftest.list b/layout/reftests/w3c-css/submitted/background/reftest.list new file mode 100644 index 000000000..e18c76f50 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/reftest.list @@ -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 diff --git a/layout/reftests/w3c-css/submitted/background/reticule-bl.png b/layout/reftests/w3c-css/submitted/background/reticule-bl.png Binary files differnew file mode 100644 index 000000000..6abbaf319 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/reticule-bl.png diff --git a/layout/reftests/w3c-css/submitted/background/reticule-bo.png b/layout/reftests/w3c-css/submitted/background/reticule-bo.png Binary files differnew file mode 100644 index 000000000..f72a67381 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/reticule-bo.png diff --git a/layout/reftests/w3c-css/submitted/background/reticule-br.png b/layout/reftests/w3c-css/submitted/background/reticule-br.png Binary files differnew file mode 100644 index 000000000..84e22afe2 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/reticule-br.png diff --git a/layout/reftests/w3c-css/submitted/background/reticule-ct.png b/layout/reftests/w3c-css/submitted/background/reticule-ct.png Binary files differnew file mode 100644 index 000000000..71ac10f61 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/reticule-ct.png diff --git a/layout/reftests/w3c-css/submitted/background/reticule-le.png b/layout/reftests/w3c-css/submitted/background/reticule-le.png Binary files differnew file mode 100644 index 000000000..abe56ffad --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/reticule-le.png diff --git a/layout/reftests/w3c-css/submitted/background/reticule-ri.png b/layout/reftests/w3c-css/submitted/background/reticule-ri.png Binary files differnew file mode 100644 index 000000000..95d7db842 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/reticule-ri.png diff --git a/layout/reftests/w3c-css/submitted/background/reticule-tl.png b/layout/reftests/w3c-css/submitted/background/reticule-tl.png Binary files differnew file mode 100644 index 000000000..8a3516998 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/reticule-tl.png diff --git a/layout/reftests/w3c-css/submitted/background/reticule-to.png b/layout/reftests/w3c-css/submitted/background/reticule-to.png Binary files differnew file mode 100644 index 000000000..d1b082c9b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/reticule-to.png diff --git a/layout/reftests/w3c-css/submitted/background/reticule-tr.png b/layout/reftests/w3c-css/submitted/background/reticule-tr.png Binary files differnew file mode 100644 index 000000000..cd9bb5a5a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/reticule-tr.png diff --git a/layout/reftests/w3c-css/submitted/background/reticule.png b/layout/reftests/w3c-css/submitted/background/reticule.png Binary files differnew file mode 100644 index 000000000..02c7d10e7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/background/reticule.png |
