diff options
Diffstat (limited to 'layout/reftests/backgrounds')
520 files changed, 14489 insertions, 0 deletions
diff --git a/layout/reftests/backgrounds/aqua-32x32.png b/layout/reftests/backgrounds/aqua-32x32.png Binary files differnew file mode 100644 index 0000000000..7de00c8f79 --- /dev/null +++ b/layout/reftests/backgrounds/aqua-32x32.png diff --git a/layout/reftests/backgrounds/aqua-yellow-32x32.png b/layout/reftests/backgrounds/aqua-yellow-32x32.png Binary files differnew file mode 100644 index 0000000000..42f8a2100b --- /dev/null +++ b/layout/reftests/backgrounds/aqua-yellow-32x32.png diff --git a/layout/reftests/backgrounds/attachment-local-clipping-color-1-ref.html b/layout/reftests/backgrounds/attachment-local-clipping-color-1-ref.html new file mode 100644 index 0000000000..d2fa65a436 --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-clipping-color-1-ref.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>CSS Reftest Reference: background-attachment: local</title> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px dashed; + background: green padding-box; +} +p { + margin-top: 5px; +} +</style> +<div id=outer> + <p><img src=blue-32x32.png></p> +</div> diff --git a/layout/reftests/backgrounds/attachment-local-clipping-color-1.html b/layout/reftests/backgrounds/attachment-local-clipping-color-1.html new file mode 100644 index 0000000000..803c409e13 --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-clipping-color-1.html @@ -0,0 +1,30 @@ +<!doctype html> +<title>CSS Test: background-{attachment: local; clip: border-box; color}</title> +<link rel="match" href="attachment-local-clipping-color-1-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px dashed; + overflow: hidden; + background: green local border-box; +} +#outer div { + height: 500px; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <div> + <p><img src=blue-32x32.png></p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/layout/reftests/backgrounds/attachment-local-clipping-color-2.html b/layout/reftests/backgrounds/attachment-local-clipping-color-2.html new file mode 100644 index 0000000000..3851c51ec7 --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-clipping-color-2.html @@ -0,0 +1,30 @@ +<!doctype html> +<title>CSS Test: background-{attachment: local; clip: padding-box; color}</title> +<link rel="match" href="attachment-local-clipping-color-1-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px dashed; + overflow: hidden; + background: green local padding-box; +} +#outer div { + height: 500px; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <div> + <p><img src=blue-32x32.png></p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/layout/reftests/backgrounds/attachment-local-clipping-color-3-ref.html b/layout/reftests/backgrounds/attachment-local-clipping-color-3-ref.html new file mode 100644 index 0000000000..193feb2ec2 --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-clipping-color-3-ref.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>CSS Reftest Reference: background-attachment: local</title> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<style> +#outer { + width: 200px; + height: 255px; + padding: 25px 40px 0; + border: 10px dashed; + background: green content-box; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <p><img src=blue-32x32.png></p> +</div> diff --git a/layout/reftests/backgrounds/attachment-local-clipping-color-3.html b/layout/reftests/backgrounds/attachment-local-clipping-color-3.html new file mode 100644 index 0000000000..9f64e03224 --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-clipping-color-3.html @@ -0,0 +1,30 @@ +<!doctype html> +<title>CSS Test: background-{attachment: local; clip: content-box; color}</title> +<link rel="match" href="attachment-local-clipping-color-3-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px dashed; + overflow: hidden; + background: green local content-box; +} +#outer div { + height: 500px; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <div> + <p><img src=blue-32x32.png></p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/layout/reftests/backgrounds/attachment-local-clipping-color-4-ref.html b/layout/reftests/backgrounds/attachment-local-clipping-color-4-ref.html new file mode 100644 index 0000000000..bc45a4d5aa --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-clipping-color-4-ref.html @@ -0,0 +1,19 @@ +<!doctype html> +<title>CSS Reftest Reference: background-attachment: local</title> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px double; + border-radius: 50%; + background: green padding-box; +} +p { + margin-top: 5px; +} +</style> +<div id=outer> + <p><img src=blue-32x32.png></p> +</div> diff --git a/layout/reftests/backgrounds/attachment-local-clipping-color-4.html b/layout/reftests/backgrounds/attachment-local-clipping-color-4.html new file mode 100644 index 0000000000..1ca5701a86 --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-clipping-color-4.html @@ -0,0 +1,31 @@ +<!doctype html> +<title>CSS Test: background-{attachment: local; clip: border-box; color}; border-radius</title> +<link rel="match" href="attachment-local-clipping-color-4-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px double; + overflow: hidden; + border-radius: 50%; + background: green local border-box; +} +#outer div { + height: 500px; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <div> + <p><img src=blue-32x32.png></p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/layout/reftests/backgrounds/attachment-local-clipping-color-5.html b/layout/reftests/backgrounds/attachment-local-clipping-color-5.html new file mode 100644 index 0000000000..eba14f2638 --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-clipping-color-5.html @@ -0,0 +1,31 @@ +<!doctype html> +<title>CSS Test: background-{attachment: local; clip: padding-box; color}; border-radius</title> +<link rel="match" href="attachment-local-clipping-color-4-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px double; + overflow: hidden; + border-radius: 50%; + background: green local padding-box; +} +#outer div { + height: 500px; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <div> + <p><img src=blue-32x32.png></p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/layout/reftests/backgrounds/attachment-local-clipping-color-6-ref.html b/layout/reftests/backgrounds/attachment-local-clipping-color-6-ref.html new file mode 100644 index 0000000000..3337028141 --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-clipping-color-6-ref.html @@ -0,0 +1,27 @@ +<!doctype html> +<title>CSS Reftest Reference: background-attachment: local</title> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px double; + overflow: hidden; + border-radius: 50%; +} +#outer div { + background: green; + height: 500px; + margin-top: -15px; +} +p { + margin-top: 0; + padding-top: 20px; +} +</style> +<div id=outer> + <div> + <p><img src=blue-32x32.png></p> + </div> +</div> diff --git a/layout/reftests/backgrounds/attachment-local-clipping-color-6.html b/layout/reftests/backgrounds/attachment-local-clipping-color-6.html new file mode 100644 index 0000000000..71c4c37b33 --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-clipping-color-6.html @@ -0,0 +1,31 @@ +<!doctype html> +<title>CSS Test: background-{attachment: local; clip: content-box; color}; border-radius</title> +<link rel="match" href="attachment-local-clipping-color-6-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px double; + overflow: hidden; + border-radius: 50%; + background: green local content-box; +} +#outer div { + height: 500px; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <div> + <p><img src=blue-32x32.png></p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/layout/reftests/backgrounds/attachment-local-clipping-image-1-ref.html b/layout/reftests/backgrounds/attachment-local-clipping-image-1-ref.html new file mode 100644 index 0000000000..d4305ed8f3 --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-clipping-image-1-ref.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>CSS Reftest Reference: background-attachment: local</title> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px dashed; + background: url(aqua-yellow-32x32.png) padding-box top -15px left 0; +} +p { + margin-top: 5px; +} +</style> +<div id=outer> + <p><img src=blue-32x32.png></p> +</div> diff --git a/layout/reftests/backgrounds/attachment-local-clipping-image-1.html b/layout/reftests/backgrounds/attachment-local-clipping-image-1.html new file mode 100644 index 0000000000..569caee0af --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-clipping-image-1.html @@ -0,0 +1,32 @@ +<!doctype html> +<title>CSS Test: background-{attachment: local; clip: border-box; image}</title> +<link rel="match" href="attachment-local-clipping-image-1-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px dashed; + overflow: hidden; + background: url(aqua-yellow-32x32.png) local; + background-clip: border-box; + background-origin: padding-box; /* Match the reference. */ +} +#outer div { + height: 500px; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <div> + <p><img src=blue-32x32.png></p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/layout/reftests/backgrounds/attachment-local-clipping-image-2.html b/layout/reftests/backgrounds/attachment-local-clipping-image-2.html new file mode 100644 index 0000000000..48adb1b459 --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-clipping-image-2.html @@ -0,0 +1,30 @@ +<!doctype html> +<title>CSS Test: background-{attachment: local; clip: padding-box; image}</title> +<link rel="match" href="attachment-local-clipping-image-1-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px dashed; + overflow: hidden; + background: url(aqua-yellow-32x32.png) local padding-box; +} +#outer div { + height: 500px; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <div> + <p><img src=blue-32x32.png></p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/layout/reftests/backgrounds/attachment-local-clipping-image-3-ref.html b/layout/reftests/backgrounds/attachment-local-clipping-image-3-ref.html new file mode 100644 index 0000000000..84090bb4b1 --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-clipping-image-3-ref.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>CSS Reftest Reference: background-attachment: local</title> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<style> +#outer { + width: 200px; + height: 255px; + padding: 25px 40px 0; + border: 10px dashed; + background: url(aqua-yellow-32x32.png) content-box; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <p><img src=blue-32x32.png></p> +</div> diff --git a/layout/reftests/backgrounds/attachment-local-clipping-image-3.html b/layout/reftests/backgrounds/attachment-local-clipping-image-3.html new file mode 100644 index 0000000000..3f75109765 --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-clipping-image-3.html @@ -0,0 +1,30 @@ +<!doctype html> +<title>CSS Test: background-{attachment: local; clip: content-box; image}</title> +<link rel="match" href="attachment-local-clipping-image-3-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px dashed; + overflow: hidden; + background: url(aqua-yellow-32x32.png) local content-box; +} +#outer div { + height: 500px; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <div> + <p><img src=blue-32x32.png></p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/layout/reftests/backgrounds/attachment-local-clipping-image-4-ref.html b/layout/reftests/backgrounds/attachment-local-clipping-image-4-ref.html new file mode 100644 index 0000000000..7a6eddd9d6 --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-clipping-image-4-ref.html @@ -0,0 +1,19 @@ +<!doctype html> +<title>CSS Reftest Reference: background-attachment: local</title> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px double; + border-radius: 50%; + background: url(aqua-yellow-32x32.png) padding-box top -15px left 0; +} +p { + margin-top: 5px; +} +</style> +<div id=outer> + <p><img src=blue-32x32.png></p> +</div> diff --git a/layout/reftests/backgrounds/attachment-local-clipping-image-4.html b/layout/reftests/backgrounds/attachment-local-clipping-image-4.html new file mode 100644 index 0000000000..e3a1f9a1f0 --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-clipping-image-4.html @@ -0,0 +1,33 @@ +<!doctype html> +<title>CSS Test: background-{attachment: local; clip: border-box; image}; border-radius</title> +<link rel="match" href="attachment-local-clipping-image-4-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px double; + overflow: hidden; + border-radius: 50%; + background: url(aqua-yellow-32x32.png) local; + background-clip: border-box; + background-origin: padding-box; +} +#outer div { + height: 500px; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <div> + <p><img src=blue-32x32.png></p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/layout/reftests/backgrounds/attachment-local-clipping-image-5.html b/layout/reftests/backgrounds/attachment-local-clipping-image-5.html new file mode 100644 index 0000000000..8c85b93a74 --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-clipping-image-5.html @@ -0,0 +1,31 @@ +<!doctype html> +<title>CSS Test: background-{attachment: local; clip: padding-box; image}; border-radius</title> +<link rel="match" href="attachment-local-clipping-image-4-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px double; + overflow: hidden; + border-radius: 50%; + background: url(aqua-yellow-32x32.png) local padding-box; +} +#outer div { + height: 500px; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <div> + <p><img src=blue-32x32.png></p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/layout/reftests/backgrounds/attachment-local-clipping-image-6-ref.html b/layout/reftests/backgrounds/attachment-local-clipping-image-6-ref.html new file mode 100644 index 0000000000..5592bac5b9 --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-clipping-image-6-ref.html @@ -0,0 +1,27 @@ +<!doctype html> +<title>CSS Reftest Reference: background-attachment: local</title> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px double; + overflow: hidden; + border-radius: 50%; +} +#outer div { + background: url(aqua-yellow-32x32.png); + height: 500px; + margin-top: -15px; +} +p { + margin-top: 0; + padding-top: 20px; +} +</style> +<div id=outer> + <div> + <p><img src=blue-32x32.png></p> + </div> +</div> diff --git a/layout/reftests/backgrounds/attachment-local-clipping-image-6.html b/layout/reftests/backgrounds/attachment-local-clipping-image-6.html new file mode 100644 index 0000000000..87ef34dd74 --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-clipping-image-6.html @@ -0,0 +1,31 @@ +<!doctype html> +<title>CSS Test: background-{attachment: local; clip: content-box; image}; border-radius</title> +<link rel="match" href="attachment-local-clipping-image-6-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + width: 200px; + height: 200px; + padding: 40px; + border: 10px double; + overflow: hidden; + border-radius: 50%; + background: url(aqua-yellow-32x32.png) local content-box; +} +#outer div { + height: 500px; +} +p { + margin-top: 20px; +} +</style> +<div id=outer> + <div> + <p><img src=blue-32x32.png></p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/layout/reftests/backgrounds/attachment-local-positioning-1-ref.html b/layout/reftests/backgrounds/attachment-local-positioning-1-ref.html new file mode 100644 index 0000000000..b5a672505c --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-positioning-1-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<title>background-attachment: scroll</title> +<style> +div { + background: url(aqua-yellow-32x32.png) no-repeat 100px 100px; + overflow: hidden; + height: 200px; +} +p { + padding-top: 40px; + height: 500px; +} +</style> +<div> + <p><img src=blue-32x32.png></p> +</div> diff --git a/layout/reftests/backgrounds/attachment-local-positioning-1.html b/layout/reftests/backgrounds/attachment-local-positioning-1.html new file mode 100644 index 0000000000..c414e2096b --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-positioning-1.html @@ -0,0 +1,19 @@ +<!doctype html> +<title>background-attachment: scroll</title> +<style> +div { + background: url(aqua-yellow-32x32.png) no-repeat 100px 100px; + overflow: hidden; + height: 200px; +} +p { + padding-top: 100px; + height: 500px; +} +</style> +<div> + <p><img src=blue-32x32.png></p> +</div> +<script> +document.getElementsByTagName('div')[0].scrollTop = 60; +</script> diff --git a/layout/reftests/backgrounds/attachment-local-positioning-2-ref.html b/layout/reftests/backgrounds/attachment-local-positioning-2-ref.html new file mode 100644 index 0000000000..7371cbc2f7 --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-positioning-2-ref.html @@ -0,0 +1,25 @@ +<!doctype html> +<title>CSS Reftest Reference: background-attachment: local</title> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<style> +#outer { + border: solid; + background: url(aqua-yellow-32x32.png) local no-repeat 178px 278px; + overflow: hidden; + width: 200px; + height: 300px; +} +div div { + width: 250px; + height: 370px; +} +p { + margin: 0 0 0 -40px; + padding-top: 40px; +} +</style> +<div id=outer> + <div> + <p><img src=blue-32x32.png style="width: 160px"></p> + </div> +</div> diff --git a/layout/reftests/backgrounds/attachment-local-positioning-2.html b/layout/reftests/backgrounds/attachment-local-positioning-2.html new file mode 100644 index 0000000000..815813f975 --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-positioning-2.html @@ -0,0 +1,35 @@ +<!doctype html> +<title>CSS Test: background-attachment: local; positioning area</title> +<link rel="match" href="attachment-local-positioning-2-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + border: solid; + /* 100% 100% == (250px - 32px) (370px - 32px) == 218px 338px */ + /* With scrolling, effective position is 178px 278px */ + background: url(aqua-yellow-32x32.png) local no-repeat 100% 100%; + overflow: hidden; + width: 200px; + height: 300px; +} +div div { + width: 250px; + height: 370px; +} +p { + margin: 0; + padding-top: 100px; +} +</style> +<div id=outer> + <div> + <p><img src=blue-32x32.png style="width: 160px"></p> + </div> +</div> +<script> +var outer = document.getElementById('outer'); +outer.scrollLeft = 40; +outer.scrollTop = 60; +</script> diff --git a/layout/reftests/backgrounds/attachment-local-positioning-3-ref.html b/layout/reftests/backgrounds/attachment-local-positioning-3-ref.html new file mode 100644 index 0000000000..dc93d72198 --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-positioning-3-ref.html @@ -0,0 +1,29 @@ +<!doctype html> +<title>CSS Reftest Reference: background-attachment: local</title> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<style> +#outer { + border: solid; + background: url(aqua-yellow-32x32.png) local no-repeat 178px 278px; + overflow: hidden; + width: 200px; + height: 300px; +} +div div { + width: 250px; + height: 370px; +} +p { + margin: 0; + padding-top: 100px; + text-align: right; + position: relative; + top: -60px; + left: -40px; +} +</style> +<div id=outer> + <div> + <p><img src=blue-32x32.png style="width: 160px"></p> + </div> +</div> diff --git a/layout/reftests/backgrounds/attachment-local-positioning-3.html b/layout/reftests/backgrounds/attachment-local-positioning-3.html new file mode 100644 index 0000000000..4cbf03d83e --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-positioning-3.html @@ -0,0 +1,36 @@ +<!doctype html> +<title>CSS Test: background-attachment: local; positioning area with dir=rtl</title> +<link rel="match" href="attachment-local-positioning-3-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + border: solid; + /* 100% 100% == (250px - 32px) (370px - 32px) == 218px 338px */ + /* With scrolling, effective position is 178px 278px */ + background: url(aqua-yellow-32x32.png) local no-repeat 100% 100%; + overflow: hidden; + width: 200px; + height: 300px; +} +div div { + width: 250px; + height: 370px; +} +p { + margin: 0; + padding-top: 100px; +} +</style> +<div id=outer dir=rtl> + <div> + <p><img src=blue-32x32.png style="width: 160px"></p> + </div> +</div> +<script> +var outer = document.getElementById('outer'); +// See https://bugzilla.mozilla.org/show_bug.cgi?id=383026 for negative values. +outer.scrollLeft = -10; +outer.scrollTop = 60; +</script> diff --git a/layout/reftests/backgrounds/attachment-local-positioning-4-ref.html b/layout/reftests/backgrounds/attachment-local-positioning-4-ref.html new file mode 100644 index 0000000000..f392589bd8 --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-positioning-4-ref.html @@ -0,0 +1,29 @@ +<!doctype html> +<title>CSS Reftest Reference: background-attachment: local</title> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<style> +#outer { + border: solid; + background: url(aqua-yellow-32x32.png) local no-repeat -10px -10px; + overflow: hidden; + width: 200px; + height: 300px; +} +div div { + width: 250px; + height: 370px; +} +p { + margin: 0; + padding-top: 100px; + text-align: right; + position: relative; + top: -10px; + left: -10px; +} +</style> +<div id=outer> + <div> + <p><img src=blue-32x32.png style="width: 160px"></p> + </div> +</div> diff --git a/layout/reftests/backgrounds/attachment-local-positioning-4.html b/layout/reftests/backgrounds/attachment-local-positioning-4.html new file mode 100644 index 0000000000..6bc4457bb1 --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-positioning-4.html @@ -0,0 +1,35 @@ +<!doctype html> +<title>CSS Test: background-attachment: local; positioning area with dir=rtl, top left</title> +<link rel="match" href="attachment-local-positioning-4-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +#outer { + border: solid; + /* With scrolling, effective position is -10px -10px */ + background: url(aqua-yellow-32x32.png) local no-repeat 0 0; + overflow: hidden; + width: 200px; + height: 300px; +} +div div { + width: 250px; + height: 370px; +} +p { + margin: 0; + padding-top: 100px; +} +</style> +<div id=outer dir=rtl> + <div> + <p><img src=blue-32x32.png style="width: 160px"></p> + </div> +</div> +<script> +var outer = document.getElementById('outer'); +// See https://bugzilla.mozilla.org/show_bug.cgi?id=383026 for negative values. +outer.scrollLeft = -40; +outer.scrollTop = 10; +</script> diff --git a/layout/reftests/backgrounds/attachment-local-positioning-5-ref.html b/layout/reftests/backgrounds/attachment-local-positioning-5-ref.html new file mode 100644 index 0000000000..76e8dc47a7 --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-positioning-5-ref.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>CSS Reftest Reference: background-attachment: local</title> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<style> +div { + background: url(aqua-yellow-32x32.png) no-repeat 30px 25px; + overflow: hidden; + height: 200px; +} +p { + padding-left: 30px; + padding-top: 125px; + height: 500px; +} +</style> +<div> + <p><img src=blue-32x32.png></p> +</div> diff --git a/layout/reftests/backgrounds/attachment-local-positioning-5.html b/layout/reftests/backgrounds/attachment-local-positioning-5.html new file mode 100644 index 0000000000..67ab2d8fd7 --- /dev/null +++ b/layout/reftests/backgrounds/attachment-local-positioning-5.html @@ -0,0 +1,24 @@ +<!doctype html> +<title>CSS Test: background-{attachment: local; origin: content-box}; positioning area</title> +<link rel="match" href="attachment-local-positioning-5-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +div { + background: url(aqua-yellow-32x32.png) local no-repeat content-box; + overflow: hidden; + height: 200px; + padding: 40px 30px; +} +p { + padding-top: 100px; + height: 500px; +} +</style> +<div> + <p><img src=blue-32x32.png></p> +</div> +<script> +document.getElementsByTagName('div')[0].scrollTop = 15; +</script> diff --git a/layout/reftests/backgrounds/attachment-scroll-positioning-1-ref.html b/layout/reftests/backgrounds/attachment-scroll-positioning-1-ref.html new file mode 100644 index 0000000000..efec7e2d55 --- /dev/null +++ b/layout/reftests/backgrounds/attachment-scroll-positioning-1-ref.html @@ -0,0 +1,17 @@ +<!doctype html> +<title>CSS Reftest Reference: background-attachment: scroll</title> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<style> +div { + background: url(aqua-yellow-32x32.png) no-repeat 100px 100px; + overflow: hidden; + height: 200px; +} +p { + padding-top: 40px; + height: 500px; +} +</style> +<div> + <p><img src=blue-32x32.png></p> +</div> diff --git a/layout/reftests/backgrounds/attachment-scroll-positioning-1.html b/layout/reftests/backgrounds/attachment-scroll-positioning-1.html new file mode 100644 index 0000000000..ca68ff5f4c --- /dev/null +++ b/layout/reftests/backgrounds/attachment-scroll-positioning-1.html @@ -0,0 +1,23 @@ +<!doctype html> +<title>CSS Test: background-attachment: scroll; positioning area</title> +<link rel="match" href="attachment-scroll-positioning-1-ref.html" /> +<meta name="flags" content="dom" /> +<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" /> +<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" /> +<style> +div { + background: url(aqua-yellow-32x32.png) no-repeat 100px 100px; + overflow: hidden; + height: 200px; +} +p { + padding-top: 100px; + height: 500px; +} +</style> +<div> + <p><img src=blue-32x32.png></p> +</div> +<script> +document.getElementsByTagName('div')[0].scrollTop = 60; +</script> diff --git a/layout/reftests/backgrounds/background-clip-1-ref.html b/layout/reftests/backgrounds/background-clip-1-ref.html new file mode 100644 index 0000000000..357fbc0007 --- /dev/null +++ b/layout/reftests/backgrounds/background-clip-1-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE HTML> +<title>background-clip</title> +<style type="text/css"> + +div { + position: absolute; +} + +div.color { + top: 10px; + background-color: blue; +} + +div.image { + top: 110px; + background-color: blue; +} + +div.border { + left: 18px; + margin-top: 1px; + width: 76px; + height: 42px; +} + +div.padding { + left: 130px; + margin-top: 4px; + width: 55px; + height: 33px; +} + +div.content { + left: 237px; + margin-top: 9px; + width: 37px; + height: 19px; +} + +</style> +<div class="color border"></div> +<div class="color padding"></div> +<div class="color content"></div> +<div class="image border"></div> +<div class="image padding"></div> +<div class="image content"></div> diff --git a/layout/reftests/backgrounds/background-clip-1.html b/layout/reftests/backgrounds/background-clip-1.html new file mode 100644 index 0000000000..8cd8505de4 --- /dev/null +++ b/layout/reftests/backgrounds/background-clip-1.html @@ -0,0 +1,52 @@ +<!DOCTYPE HTML> +<title>background-clip</title> +<style type="text/css"> + +div { + position: absolute; + margin: 1px 2px 4px 8px; + border: transparent solid; + border-width: 3px 9px 6px 12px; + padding: 5px 11px 9px 7px; + width: 37px; + height: 19px; + /* + * content box: 37 x 19 + * padding box: 55 x 33 + * border box: 76 x 42 + * margin box: 86 x 47 + */ +} + +div.color { + top: 10px; + background-color: blue; +} + +div.image { + top: 110px; + background-image: url(blue-32x32.png); +} + +div.border { + background-clip: border-box; + left: 10px; +} + +div.padding { + background-clip: padding-box; + left: 110px; +} + +div.content { + background-clip: content-box; + left: 210px; +} + +</style> +<div class="color border"></div> +<div class="color padding"></div> +<div class="color content"></div> +<div class="image border"></div> +<div class="image padding"></div> +<div class="image content"></div> diff --git a/layout/reftests/backgrounds/background-clip-2-ref.html b/layout/reftests/backgrounds/background-clip-2-ref.html new file mode 100644 index 0000000000..15b521ae0e --- /dev/null +++ b/layout/reftests/backgrounds/background-clip-2-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <body> + <div style="padding: 10px; + width: 100px; + height: 100px; + border: 10px solid black"> + <div style="width: 100px; height: 100px; background: black"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/backgrounds/background-clip-2.html b/layout/reftests/backgrounds/background-clip-2.html new file mode 100644 index 0000000000..2a10493d91 --- /dev/null +++ b/layout/reftests/backgrounds/background-clip-2.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <body> + <div style="padding: 10px; + width: 100px; + height: 100px; + background-color: black; + border: 10px solid black; + background-clip: content-box;"> + </div> + </body> +</html> diff --git a/layout/reftests/backgrounds/background-clip-text-1-ref.html b/layout/reftests/backgrounds/background-clip-text-1-ref.html new file mode 100644 index 0000000000..08e5962e77 --- /dev/null +++ b/layout/reftests/backgrounds/background-clip-text-1-ref.html @@ -0,0 +1,23 @@ +<!doctype html> +<html> + <head> + <title>background-clip: text reference</title> + <style> + div.out { + width: 500px; + height: 300px; + margin: 0px; + color: green; + font-size: 100px; + font-family: serif; + -moz-osx-font-smoothing: grayscale; + } + </style> + </head> + <body style="margin: 0px;"> + <div class="out"> + TEXT clip + <div style="display:inline-block; width:0px; height:200px;"/> + </div> + </body> +</html> diff --git a/layout/reftests/backgrounds/background-clip-text-1a.html b/layout/reftests/backgrounds/background-clip-text-1a.html new file mode 100644 index 0000000000..cc1ef9be34 --- /dev/null +++ b/layout/reftests/backgrounds/background-clip-text-1a.html @@ -0,0 +1,25 @@ +<!doctype HTML> +<html> + <head> + <title>background-clip: text</title> + <style> + div.out { + width: 500px; + height: 300px; + margin: 0px; + background-image: linear-gradient(green, green); + background-clip: text; + color: transparent; + font-size: 100px; + font-family: serif; + -moz-osx-font-smoothing: grayscale; + } + </style> + </head> + <body style="margin: 0px;"> + <div class="out"> + TEXT clip + <div style="display:inline-block; width:0px; height:200px;"/> + </div> + </body> +</html> diff --git a/layout/reftests/backgrounds/background-clip-text-1b.html b/layout/reftests/backgrounds/background-clip-text-1b.html new file mode 100644 index 0000000000..af7b1816c6 --- /dev/null +++ b/layout/reftests/backgrounds/background-clip-text-1b.html @@ -0,0 +1,25 @@ +<!doctype HTML> +<html> + <head> + <title>background-clip: text</title> + <style> + div.out { + width: 500px; + height: 300px; + margin: 0px; + background-image: linear-gradient(green, green); + background-clip: text; + color: transparent; + font-size: 100px; + font-family: serif; + -moz-osx-font-smoothing: grayscale; + } + </style> + </head> + <body style="margin: 0px;"> + <div class="out"> + <p style="display:inline-block;">TEXT clip</p> + <div style="display:inline-block; width:0px; height:200px;"/> + </div> + </body> +</html> diff --git a/layout/reftests/backgrounds/background-clip-text-1c.html b/layout/reftests/backgrounds/background-clip-text-1c.html new file mode 100644 index 0000000000..4e804188f3 --- /dev/null +++ b/layout/reftests/backgrounds/background-clip-text-1c.html @@ -0,0 +1,27 @@ +<!doctype HTML> +<html> + <head> + <title>background-clip: text</title> + <style> + div.out { + width: 500px; + height: 300px; + margin: 0px; + background-image: linear-gradient(green, green); + background-clip: text; + color: transparent; + font-size: 100px; + font-family: serif; + -moz-osx-font-smoothing: grayscale; + } + </style> + </head> + <body style="margin: 0px;"> + <div class="out"> + <div style="display:inline-block;"> + <p style="display:inline-block;">TEXT clip</p> + </div> + <div style="display:inline-block; width:0px; height:200px;"/> + </div> + </body> +</html> diff --git a/layout/reftests/backgrounds/background-clip-text-1d.html b/layout/reftests/backgrounds/background-clip-text-1d.html new file mode 100644 index 0000000000..2510c55c2c --- /dev/null +++ b/layout/reftests/backgrounds/background-clip-text-1d.html @@ -0,0 +1,24 @@ +<!doctype HTML> +<html> + <head> + <title>background-clip: text</title> + <style> + div.out { + width: 500px; + height: 300px; + margin: 0px; + background: linear-gradient(green, green) padding-box text; + color: transparent; + font-size: 100px; + font-family: serif; + -moz-osx-font-smoothing: grayscale; + } + </style> + </head> + <body style="margin: 0px;"> + <div class="out"> + TEXT clip + <div style="display:inline-block; width:0px; height:200px;"/> + </div> + </body> +</html> diff --git a/layout/reftests/backgrounds/background-clip-text-1e.html b/layout/reftests/backgrounds/background-clip-text-1e.html new file mode 100644 index 0000000000..c0ba923e19 --- /dev/null +++ b/layout/reftests/backgrounds/background-clip-text-1e.html @@ -0,0 +1,32 @@ +<!doctype HTML> +<html> + <head> + <title>background-clip: text</title> + <style> + body { + transform: scale(1, 0.5); + } + div.out { + width: 500px; + height: 300px; + margin: 0px; + background-image: linear-gradient(green, green); + background-clip: text; + color: transparent; + font-size: 100px; + font-family: serif; + position: absolute; + left: 100px; + top: 100px; + transform: translate(-100px, 50px) scale(1, 2); + -moz-osx-font-smoothing: grayscale; + } + </style> + </head> + <body style="margin: 0px;"> + <div class="out"> + TEXT clip + <div style="display:inline-block; width:0px; height:200px;"/> + </div> + </body> +</html> diff --git a/layout/reftests/backgrounds/background-clip-text-2-ref.html b/layout/reftests/backgrounds/background-clip-text-2-ref.html new file mode 100644 index 0000000000..15d60ec3de --- /dev/null +++ b/layout/reftests/backgrounds/background-clip-text-2-ref.html @@ -0,0 +1,24 @@ +<!doctype html> +<html> + <head> + <title>background-clip: text reference</title> + <style> + div.out { + width: 500px; + height: 300px; + margin: 0px; + color: white; + font-size: 50px; + font-family: serif; + text-shadow: 0px 60px 5px red; + -moz-osx-font-smoothing: grayscale; + } + </style> + </head> + <body style="margin: 0px;"> + <div class="out"> + Text Shadow + <div style="display:inline-block; width:0px; height:100px;"/> + </div> + </body> +</html> diff --git a/layout/reftests/backgrounds/background-clip-text-2.html b/layout/reftests/backgrounds/background-clip-text-2.html new file mode 100644 index 0000000000..27e93db744 --- /dev/null +++ b/layout/reftests/backgrounds/background-clip-text-2.html @@ -0,0 +1,28 @@ +<!doctype HTML> +<html> + <head> + <title>background-clip: text shadow</title> + <style> + div.out { + width: 500px; + height: 300px; + margin: 0px; + background-image: linear-gradient(green, green); + background-clip: text; + color: transparent; + font-size: 50px; + font-family: serif; + text-shadow: 0px 60px 5px red; + -moz-osx-font-smoothing: grayscale; + } + </style> + </head> + <body style="margin: 0px;"> + <div class="out"> + Text Shadow + <div style="display:inline-block; width:0px; height:100px;"/> + </div> + <!-- A white div which is used to cover on text --> + <div style="position: absolute; top: 0px; left:0px; width:500px; height:110px;background-color:white;"/> + </body> +</html> diff --git a/layout/reftests/backgrounds/background-clip-text-scale-ref.html b/layout/reftests/backgrounds/background-clip-text-scale-ref.html new file mode 100644 index 0000000000..4ae4116942 --- /dev/null +++ b/layout/reftests/backgrounds/background-clip-text-scale-ref.html @@ -0,0 +1,20 @@ +<meta charset="utf-8"> + +<style> + body { overflow:hidden } + p { + margin: 1em 0; + padding: 1.4em; + font: 900 1.2em sans-serif; + position:absolute; + color: rgba(0,0,0,0); + background: red; + border: black solid 80px; + transform: scale(2,0.3); + transform-origin: center; + left: 330px; + top: -75px; +} + +</style> +<p>█</p> diff --git a/layout/reftests/backgrounds/background-clip-text-scale.html b/layout/reftests/backgrounds/background-clip-text-scale.html new file mode 100644 index 0000000000..2f4ada69c8 --- /dev/null +++ b/layout/reftests/backgrounds/background-clip-text-scale.html @@ -0,0 +1,31 @@ +<meta charset="utf-8"> + +<style> + body { overflow: hidden } + p { + margin: 1em 0; + padding: 1.4em; + font: 900 1.2em sans-serif; + position:absolute; + color: rgba(0,0,0,0); +} + +.text { + background: red; + -webkit-background-clip: text; + background-clip: text; + transform: scale(20,2); + transform-origin: center; + left: 400px; + } +.wrapper { + border: black solid 80px; + transform: scale(2,0.3); + transform-origin: center; + left: 330px; + top: -75px; +} + +</style> +<p class="text">█</p> +<p class="wrapper">█</p> diff --git a/layout/reftests/backgrounds/background-clip-text-translate.html b/layout/reftests/backgrounds/background-clip-text-translate.html new file mode 100644 index 0000000000..59f5e7a61e --- /dev/null +++ b/layout/reftests/backgrounds/background-clip-text-translate.html @@ -0,0 +1,22 @@ +<meta charset="utf-8"> + +<style> + body { overflow: hidden } + p { + margin: 1em 0; + padding: 1.4em; + font: 900 1.2em sans-serif; + position:absolute; + color: rgba(0,0,0,0); +} + +.text { + background: red; + -webkit-background-clip: text; + background-clip: text; + transform: translate(-50%, -60%); + transform-origin: center; + left: 400px; + } +</style> +<p class="text">█</p> diff --git a/layout/reftests/backgrounds/background-layers-1-ref.html b/layout/reftests/backgrounds/background-layers-1-ref.html new file mode 100644 index 0000000000..d457fe119e --- /dev/null +++ b/layout/reftests/backgrounds/background-layers-1-ref.html @@ -0,0 +1,46 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> + + <style type="text/css"> + div.circle { + background: url(green-circle-alpha-32x32.png) center fixed; + width: 32px; + height: 32px; + } + + div.redalpha { + background: url(red-128-alpha-32x32.png) center; + width: 32px; + height: 32px; + } + + div.yellow { + background: url(yellow-32x32.png); + width: 32px; + height: 32px; + } + + *#test1 { + width: 96px; + background-color: yellow; + } + + *#test2 { + width: 96px; + background-color: red; + } + + div.inline > div { + display: inline-block; + } + </style> +</head> + +<body> + <div id="test1" class="inline"><div class="circle"><div class="redalpha"></div></div><div class="circle"><div class="redalpha"></div></div><div class="circle"><div class="redalpha"></div></div></div> + <div id="test2" class="inline"><div class="yellow"><div class="circle"><div class="redalpha"></div></div></div><div class="yellow"><div class="circle"><div class="redalpha"></div></div></div><div class="yellow"><div class="circle"><div class="redalpha"></div></div></div></div> + <div class="inline"><div class="yellow"><div class="circle"><div class="redalpha"></div></div></div><div class="yellow"><div class="circle"><div class="redalpha"></div></div></div><div class="yellow"><div class="circle"><div class="redalpha"></div></div></div></div> +</body> + +</html> diff --git a/layout/reftests/backgrounds/background-layers-1a.html b/layout/reftests/backgrounds/background-layers-1a.html new file mode 100644 index 0000000000..d55b2329bc --- /dev/null +++ b/layout/reftests/backgrounds/background-layers-1a.html @@ -0,0 +1,43 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> + + <style type="text/css"> + *#test1 > * { + background: url(red-128-alpha-32x32.png) center, + url(green-circle-alpha-32x32.png) center fixed; + background-color: yellow; + width: 32px; + height: 32px; + } + + *#test2 > * { + background: url(red-128-alpha-32x32.png) center, + url(green-circle-alpha-32x32.png) center fixed, + url(yellow-32x32.png); + background-color: red; + width: 32px; + height: 32px; + } + + *#test3 > * { + background: url(red-128-alpha-32x32.png) center, + url(green-circle-alpha-32x32.png) center fixed, + url(yellow-32x32.png); + width: 32px; + height: 32px; + } + + div.inline > div { + display: inline-block; + } + </style> +</head> + +<body> + <div id="test1" class="inline"><div></div><div></div><div></div></div> + <div id="test2" class="inline"><div></div><div></div><div></div></div> + <div id="test3" class="inline"><div></div><div></div><div></div></div> +</body> + +</html> diff --git a/layout/reftests/backgrounds/background-layers-1b.html b/layout/reftests/backgrounds/background-layers-1b.html new file mode 100644 index 0000000000..1f8ed4d196 --- /dev/null +++ b/layout/reftests/backgrounds/background-layers-1b.html @@ -0,0 +1,46 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> + + <style type="text/css"> + *#test1 > * { + background: url(red-128-alpha-32x32.png) center, + url(green-circle-alpha-32x32.png) center fixed; + background-color: yellow; + width: 32px; + height: 32px; + } + + *#test2 > * { + background: url(red-128-alpha-32x32.png) center, + url(green-circle-alpha-32x32.png) center fixed, + url(yellow-32x32.png); + background-color: red; + width: 32px; + height: 32px; + } + + *#test3 > * { + background: url(red-128-alpha-32x32.png) center, + url(green-circle-alpha-32x32.png) center fixed, + url(yellow-32x32.png); + width: 32px; + height: 32px; + } + + table, table * { + padding: 0; + margin: 0; + } + </style> +</head> + +<body> + <table cellpadding="0" cellspacing="0"> + <tr id="test1"><td></td><td></td><td></td></tr> + <tr id="test2"><td></td><td></td><td></td></tr> + <tr id="test3"><td></td><td></td><td></td></tr> + </table> +</body> + +</html> diff --git a/layout/reftests/backgrounds/background-moz-default-background-color-ref.html b/layout/reftests/backgrounds/background-moz-default-background-color-ref.html new file mode 100644 index 0000000000..d849a5d504 --- /dev/null +++ b/layout/reftests/backgrounds/background-moz-default-background-color-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<head> + <title>-moz-default-background-color and -moz-default-color (bug 591341); reference</title> +</head> +<body> +Test -moz-default-background-color and -moz-default-color (bug 591341). +</body> +</html> diff --git a/layout/reftests/backgrounds/background-moz-default-background-color.html b/layout/reftests/backgrounds/background-moz-default-background-color.html new file mode 100644 index 0000000000..6ba2e05ef5 --- /dev/null +++ b/layout/reftests/backgrounds/background-moz-default-background-color.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <title>-moz-default-background-color and -moz-default-color (bug 591341)</title> + <style type="text/css"> +body { + color: green; + color: -moz-default-color; + background-color: red; + background-color: -moz-default-background-color; +} + </style> +</head> +<body> +Test -moz-default-background-color and -moz-default-color (bug 591341). +</body> +</html> diff --git a/layout/reftests/backgrounds/background-multiple-with-border-radius-ref.html b/layout/reftests/backgrounds/background-multiple-with-border-radius-ref.html new file mode 100644 index 0000000000..16cf9243c8 --- /dev/null +++ b/layout/reftests/backgrounds/background-multiple-with-border-radius-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>Test multiple backgrounds with border-radius</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=998792"> + <meta charset="utf-8"> +<style> + +.b2 { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD%2FgAIDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAoUlEQVR42u3bwQ0AIAgEwcOmtXttgScmsxWQCTyp3EysJo61IliwYMGCBUuwYMGCBQuWYMGCBQsWLMGCBQsWLFiCBQsWLFiwBAsWLFiwYAkWLFiwYMESLFiwYMGCpXaVka%2BsO8dmOUNYggULFixYsAQLFixYsGAJFixYsGDBEixYsGDBgiVYsGDBggVLsGDBggULlmDBggULFizBggUL1t89N%2FYEtBGStpoAAAAASUVORK5CYII%3D); +} + +.b { + background: yellow; +} + +div.b { + width: 100px; + height: 100px; + padding: 30px; +} + +div.border { + width: 160px; + height: 160px; + border: 10px dashed blue; + border-radius: 10px; +} + +div.b2 { + width: 100px; + height: 100px; +} + +</style> +</head> +<body> + +<div class="border"><div class="b"><div class="b2"></div></div></div> + +</body> +</html> diff --git a/layout/reftests/backgrounds/background-multiple-with-border-radius.html b/layout/reftests/backgrounds/background-multiple-with-border-radius.html new file mode 100644 index 0000000000..3fa5a86185 --- /dev/null +++ b/layout/reftests/backgrounds/background-multiple-with-border-radius.html @@ -0,0 +1,34 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>Test multiple backgrounds with border-radius</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=998792"> + <link rel="help" href="http://dev.w3.org/csswg/css-backgrounds/#the-border-radius"> + <link rel="match" href="background-multiple-with-border-radius-ref.html"> + <meta charset="utf-8"> +<style> + +.b { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD%2FgAIDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAoUlEQVR42u3bwQ0AIAgEwcOmtXttgScmsxWQCTyp3EysJo61IliwYMGCBUuwYMGCBQuWYMGCBQsWLMGCBQsWLFiCBQsWLFiwBAsWLFiwYAkWLFiwYMESLFiwYMGCpXaVka%2BsO8dmOUNYggULFixYsAQLFixYsGAJFixYsGDBEixYsGDBgiVYsGDBggVLsGDBggULlmDBggULFizBggUL1t89N%2FYEtBGStpoAAAAASUVORK5CYII%3D) content-box, yellow padding-box; +} + +div { + width: 100px; + height: 100px; + padding: 30px; + border: 10px dashed blue; + border-radius: 10px; +} + +</style> +</head> +<body> + +<div class="b"></div> + +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-1-ref.html b/layout/reftests/backgrounds/background-position-1-ref.html new file mode 100644 index 0000000000..9417bad395 --- /dev/null +++ b/layout/reftests/backgrounds/background-position-1-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position: right 25% bottom 75% reference</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + margin-left: 72px; /** 128px - 128px * 0.25 - 32px * 0.75 **/ + margin-top: 24px; /** 128px - 128px * 0.75 - 32px * 0.25 **/ + width: 32px; + height: 32px; + background-image: url(aqua-32x32.png); +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div></div> +<div id="outer"><div id="inner1"></div></div> +<div id="outer"><div id="inner1"></div></div> +<div id="outer"><div id="inner1"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-1a.html b/layout/reftests/backgrounds/background-position-1a.html new file mode 100644 index 0000000000..c9985ed699 --- /dev/null +++ b/layout/reftests/backgrounds/background-position-1a.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position: right 25% bottom 75%</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + width: 128px; + height: 128px; + background-position: right 25% bottom 75%; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} +#inner2 +{ + width: 128px; + height: 128px; + background-position: bottom 75% right 25%; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} +#inner3 +{ + width: 128px; + height: 128px; + background-position: right 24px bottom 72px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} +#inner4 +{ + width: 128px; + height: 128px; + background-position: bottom 72px right 24px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div></div> +<div id="outer"><div id="inner2"></div></div> +<div id="outer"><div id="inner3"></div></div> +<div id="outer"><div id="inner4"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-1b.html b/layout/reftests/backgrounds/background-position-1b.html new file mode 100644 index 0000000000..006caff6c9 --- /dev/null +++ b/layout/reftests/backgrounds/background-position-1b.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position: left 75% top 25%</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + width: 128px; + height: 128px; + background-position: left 75% top 25%; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} +#inner2 +{ + width: 128px; + height: 128px; + background-position: top 25% left 75%; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} +#inner3 +{ + width: 128px; + height: 128px; + background-position: left 72px top 24px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} +#inner4 +{ + width: 128px; + height: 128px; + background-position: top 24px left 72px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div></div> +<div id="outer"><div id="inner2"></div></div> +<div id="outer"><div id="inner3"></div></div> +<div id="outer"><div id="inner4"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-1c.html b/layout/reftests/backgrounds/background-position-1c.html new file mode 100644 index 0000000000..5809939a85 --- /dev/null +++ b/layout/reftests/backgrounds/background-position-1c.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position: left 75% bottom 75%</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + width: 128px; + height: 128px; + background-position: left 75% bottom 75%; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} +#inner2 +{ + width: 128px; + height: 128px; + background-position: right 25% top 25%; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} +#inner3 +{ + width: 128px; + height: 128px; + background-position: bottom 75% left 75%; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} +#inner4 +{ + width: 128px; + height: 128px; + background-position: right 25% top 25%; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div></div> +<div id="outer"><div id="inner2"></div></div> +<div id="outer"><div id="inner3"></div></div> +<div id="outer"><div id="inner4"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-1d.html b/layout/reftests/backgrounds/background-position-1d.html new file mode 100644 index 0000000000..3d58cccc19 --- /dev/null +++ b/layout/reftests/backgrounds/background-position-1d.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position: right 25% bottom 75%</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + width: 128px; + height: 128px; + background-position-x: right 25%; + background-position-y: bottom 75%; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} +#inner2 +{ + width: 128px; + height: 128px; + background-position-x: right 25%; + background-position-y: bottom 75%; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} +#inner3 +{ + width: 128px; + height: 128px; + background-position-x: right 24px; + background-position-y: bottom 72px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} +#inner4 +{ + width: 128px; + height: 128px; + background-position-x: right 24px; + background-position-y: bottom 72px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div></div> +<div id="outer"><div id="inner2"></div></div> +<div id="outer"><div id="inner3"></div></div> +<div id="outer"><div id="inner4"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-1e.html b/layout/reftests/backgrounds/background-position-1e.html new file mode 100644 index 0000000000..7ff8659561 --- /dev/null +++ b/layout/reftests/backgrounds/background-position-1e.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position: left 75% top 25%</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + width: 128px; + height: 128px; + background-position-x: left 75%; + background-position-y: top 25%; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} +#inner2 +{ + width: 128px; + height: 128px; + background-position-x: left 75%; + background-position-y: top 25%; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} +#inner3 +{ + width: 128px; + height: 128px; + background-position-x: left 72px; + background-position-y: top 24px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} +#inner4 +{ + width: 128px; + height: 128px; + background-position-x: left 72px; + background-position-y: top 24px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div></div> +<div id="outer"><div id="inner2"></div></div> +<div id="outer"><div id="inner3"></div></div> +<div id="outer"><div id="inner4"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-1f.html b/layout/reftests/backgrounds/background-position-1f.html new file mode 100644 index 0000000000..118723a990 --- /dev/null +++ b/layout/reftests/backgrounds/background-position-1f.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position: left 75% bottom 75%</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + width: 128px; + height: 128px; + background-position-x: left 75%; + background-position-y: bottom 75%; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} +#inner2 +{ + width: 128px; + height: 128px; + background-position-x: right 25%; + background-position-y: top 25%; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} +#inner3 +{ + width: 128px; + height: 128px; + background-position-x: left 75%; + background-position-y: bottom 75%; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} +#inner4 +{ + width: 128px; + height: 128px; + background-position-x: right 25%; + background-position-y: top 25%; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div></div> +<div id="outer"><div id="inner2"></div></div> +<div id="outer"><div id="inner3"></div></div> +<div id="outer"><div id="inner4"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-2-ref.html b/layout/reftests/backgrounds/background-position-2-ref.html new file mode 100644 index 0000000000..16cee85ac3 --- /dev/null +++ b/layout/reftests/backgrounds/background-position-2-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position: left 25% bottom 75% reference</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + margin-left: 24px; /** 128px * 0.25 - 32 * 0.25 **/ + margin-top: 24px; /** 128px - 128px * 0.75 + 32px * 0.75 - 32px **/ + width: 32px; + height: 32px; + background-image: url(aqua-32x32.png); +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-2a.html b/layout/reftests/backgrounds/background-position-2a.html new file mode 100644 index 0000000000..1d193f3ae0 --- /dev/null +++ b/layout/reftests/backgrounds/background-position-2a.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position: left 25% bottom 75%</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + width: 128px; + height: 128px; + background-position: left 25% bottom 75%; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-2b.html b/layout/reftests/backgrounds/background-position-2b.html new file mode 100644 index 0000000000..e8b7f7689f --- /dev/null +++ b/layout/reftests/backgrounds/background-position-2b.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position: 25% 25%</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + width: 128px; + height: 128px; + background-position: 25% 25%; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-2c.html b/layout/reftests/backgrounds/background-position-2c.html new file mode 100644 index 0000000000..1e42cc0ad1 --- /dev/null +++ b/layout/reftests/backgrounds/background-position-2c.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position: left 25% bottom 75%</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + width: 128px; + height: 128px; + background-position-x: left 25%; + background-position-y: bottom 75%; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-2d.html b/layout/reftests/backgrounds/background-position-2d.html new file mode 100644 index 0000000000..9096889a03 --- /dev/null +++ b/layout/reftests/backgrounds/background-position-2d.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position: 25% 25%</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + width: 128px; + height: 128px; + background-position-x: 25%; + background-position-y: 25%; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-3-ref.html b/layout/reftests/backgrounds/background-position-3-ref.html new file mode 100644 index 0000000000..68fb6400f6 --- /dev/null +++ b/layout/reftests/backgrounds/background-position-3-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position: center bottom 75% reference</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + margin-left: 48px; /** 128px - 128px * 0.50 - 32px * 0.50 **/ + margin-top: 24px; /** 128px - 128px * 0.75 + 32px * 0.75 - 32px **/ + width: 32px; + height: 32px; + background-image: url(aqua-32x32.png); +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-3a.html b/layout/reftests/backgrounds/background-position-3a.html new file mode 100644 index 0000000000..1120bb96f4 --- /dev/null +++ b/layout/reftests/backgrounds/background-position-3a.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position: center bottom 75%</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + width: 128px; + height: 128px; + background-position: center bottom 75%; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-3b.html b/layout/reftests/backgrounds/background-position-3b.html new file mode 100644 index 0000000000..a9e3a8d622 --- /dev/null +++ b/layout/reftests/backgrounds/background-position-3b.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position: center 25%</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + width: 128px; + height: 128px; + background-position: center 25%; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-3c.html b/layout/reftests/backgrounds/background-position-3c.html new file mode 100644 index 0000000000..8f2f34011c --- /dev/null +++ b/layout/reftests/backgrounds/background-position-3c.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position: center bottom 75%</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + width: 128px; + height: 128px; + background-position-x: center; + background-position-y: bottom 75%; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-3d.html b/layout/reftests/backgrounds/background-position-3d.html new file mode 100644 index 0000000000..c449f3c842 --- /dev/null +++ b/layout/reftests/backgrounds/background-position-3d.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position: center 25%</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + width: 128px; + height: 128px; + background-position-x: center; + background-position-y: 25%; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-4-ref.html b/layout/reftests/backgrounds/background-position-4-ref.html new file mode 100644 index 0000000000..499fcc95d5 --- /dev/null +++ b/layout/reftests/backgrounds/background-position-4-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position: left center reference</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + margin-left: 0px; + margin-top: 48px; /** 128px - 128px * 0.50 + 32px * 0.50 - 32px **/ + width: 32px; + height: 32px; + background-image: url(aqua-32x32.png); +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-4a.html b/layout/reftests/backgrounds/background-position-4a.html new file mode 100644 index 0000000000..b7d10ae92e --- /dev/null +++ b/layout/reftests/backgrounds/background-position-4a.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position: left center</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + width: 128px; + height: 128px; + background-position: left center; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-4b.html b/layout/reftests/backgrounds/background-position-4b.html new file mode 100644 index 0000000000..bccdd20003 --- /dev/null +++ b/layout/reftests/backgrounds/background-position-4b.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position: left</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + width: 128px; + height: 128px; + background-position: left; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-4c.html b/layout/reftests/backgrounds/background-position-4c.html new file mode 100644 index 0000000000..8a7c14cd2b --- /dev/null +++ b/layout/reftests/backgrounds/background-position-4c.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position: left bottom 50%</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + width: 128px; + height: 128px; + background-position: left bottom 50%; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-4d.html b/layout/reftests/backgrounds/background-position-4d.html new file mode 100644 index 0000000000..cd77e864e8 --- /dev/null +++ b/layout/reftests/backgrounds/background-position-4d.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position-y: bottom 50%</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + width: 128px; + height: 128px; + background-position-y: bottom 50%; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-4e.html b/layout/reftests/backgrounds/background-position-4e.html new file mode 100644 index 0000000000..7e42fb6ebb --- /dev/null +++ b/layout/reftests/backgrounds/background-position-4e.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position-y: center</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + width: 128px; + height: 128px; + background-position-y: center; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-5-ref.html b/layout/reftests/backgrounds/background-position-5-ref.html new file mode 100644 index 0000000000..d246366a82 --- /dev/null +++ b/layout/reftests/backgrounds/background-position-5-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>background: url(aqua-32x32.png) left no-repeat reference</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + margin-left: 0px; + margin-top: 48px; /** 128px - 128px * 0.50 + 32px * 0.50 - 32px **/ + width: 32px; + height: 32px; + background-image: url(aqua-32x32.png); +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-5.html b/layout/reftests/backgrounds/background-position-5.html new file mode 100644 index 0000000000..1d61aa46e2 --- /dev/null +++ b/layout/reftests/backgrounds/background-position-5.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> + <title>background: url(aqua-32x32.png) left no-repeat reference</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + width: 128px; + height: 128px; + background: url(aqua-32x32.png) left no-repeat; +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-6-ref.html b/layout/reftests/backgrounds/background-position-6-ref.html new file mode 100644 index 0000000000..cf52c65205 --- /dev/null +++ b/layout/reftests/backgrounds/background-position-6-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position: top, bottom reference</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + margin-left: 48px; /** 128px - 128px * 0.50 + 32px * 0.50 - 32px **/ + margin-top: 0px; + width: 32px; + height: 32px; + background-image: url(aqua-32x32.png); +} +#inner2 +{ + margin-left: 48px; /** 128px - 32px - 32px **/ + margin-top: 64px; /** 128px - 128px * 0.50 + 32px * 0.50 - 32px **/ + width: 32px; + height: 32px; + background-image: url(aqua-32x32.png); +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div><div id="inner2"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-6a.html b/layout/reftests/backgrounds/background-position-6a.html new file mode 100644 index 0000000000..bc74901e1e --- /dev/null +++ b/layout/reftests/backgrounds/background-position-6a.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position: top, bottom</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + width: 128px; + height: 128px; + background-position: top, bottom; + background-image: url(aqua-32x32.png), url(aqua-32x32.png); + background-repeat: no-repeat, no-repeat; +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-6b.html b/layout/reftests/backgrounds/background-position-6b.html new file mode 100644 index 0000000000..bc1ddab851 --- /dev/null +++ b/layout/reftests/backgrounds/background-position-6b.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position-y: top, bottom</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +#inner1 +{ + width: 128px; + height: 128px; + background-position: top; /* sets background-position-x to center */ + background-position-y: top, bottom; + background-image: url(aqua-32x32.png), url(aqua-32x32.png); + background-repeat: no-repeat, no-repeat; +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-7-ref.html b/layout/reftests/backgrounds/background-position-7-ref.html new file mode 100644 index 0000000000..26018c47be --- /dev/null +++ b/layout/reftests/backgrounds/background-position-7-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position: left 25% bottom reference</title> + <style type="text/css"> +.outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +.inner1 +{ + margin-left: 24px; + margin-top: 96px; + width: 32px; + height: 32px; + background-image: url(aqua-32x32.png); +} + </style> +</head> +<body> +<div class="outer"><div class="inner1"></div></div> +<div class="outer"><div class="inner1"></div></div> +<div class="outer"><div class="inner1"></div></div> +<div class="outer"><div class="inner1"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-7.html b/layout/reftests/backgrounds/background-position-7.html new file mode 100644 index 0000000000..6e9e235290 --- /dev/null +++ b/layout/reftests/backgrounds/background-position-7.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position: left 25% bottom</title> + <style type="text/css"> +.outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +.outer > div +{ + width: 128px; + height: 128px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} +#inner1 +{ + background-position: left 24px bottom; +} +#inner2 +{ + background-position: left 25% bottom; +} +#inner3 +{ + background-position: right 75% bottom; +} +#inner4 +{ + background-position: right 72px bottom; +} + </style> +</head> +<body> +<div class="outer"><div id="inner1"></div></div> +<div class="outer"><div id="inner2"></div></div> +<div class="outer"><div id="inner3"></div></div> +<div class="outer"><div id="inner4"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-8-ref.html b/layout/reftests/backgrounds/background-position-8-ref.html new file mode 100644 index 0000000000..6d1e98cc11 --- /dev/null +++ b/layout/reftests/backgrounds/background-position-8-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position: left 25% bottom reference</title> + <style type="text/css"> +.outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +.inner1 +{ + margin-left: 96px; + margin-top: 24px; + width: 32px; + height: 32px; + background-image: url(aqua-32x32.png); +} + </style> +</head> +<body> +<div class="outer"><div class="inner1"></div></div> +<div class="outer"><div class="inner1"></div></div> +<div class="outer"><div class="inner1"></div></div> +<div class="outer"><div class="inner1"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-position-8.html b/layout/reftests/backgrounds/background-position-8.html new file mode 100644 index 0000000000..cc065df8a3 --- /dev/null +++ b/layout/reftests/backgrounds/background-position-8.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-position: left 25% bottom</title> + <style type="text/css"> +.outer +{ + border: 1px solid black; + width: 128px; + height: 128px; +} +.outer > div +{ + width: 128px; + height: 128px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} +#inner1 +{ + background-position: right top 25%; +} +#inner2 +{ + background-position: right top 24px; +} +#inner3 +{ + background-position: right bottom 75%; +} +#inner4 +{ + background-position: right bottom 72px; +} + </style> +</head> +<body> +<div class="outer"><div id="inner1"></div></div> +<div class="outer"><div id="inner2"></div></div> +<div class="outer"><div id="inner3"></div></div> +<div class="outer"><div id="inner4"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-redraw-237766-ref.html b/layout/reftests/backgrounds/background-redraw-237766-ref.html new file mode 100644 index 0000000000..c4616d1c77 --- /dev/null +++ b/layout/reftests/backgrounds/background-redraw-237766-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> + + +<style type="text/css"> +#test {position: absolute; right: 0; padding-left: 16px; background: + url(blue-16x20.png) bottom left no-repeat} +b {display: none} +span {padding: 0 7.2px} +#test1 {border-bottom-width: 1px;} +</style> + +</head><body> +<div id="test"> + <span id="test1">test1</span><b>|</b><span>test2</span> +</div> +</body></html> diff --git a/layout/reftests/backgrounds/background-redraw-237766.html b/layout/reftests/backgrounds/background-redraw-237766.html new file mode 100644 index 0000000000..90d4df1b0e --- /dev/null +++ b/layout/reftests/backgrounds/background-redraw-237766.html @@ -0,0 +1,32 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> +<html class="reftest-wait"> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> + + +<style type="text/css"> +#test {position: absolute; right: 0; padding-left: 16px; background: + url(blue-16x20.png) bottom left no-repeat} +b {display: none} +span {padding: 0 7.2px} +</style> + +<script type="text/javascript"> +// see https://bugzilla.mozilla.org/show_bug.cgi?id=237766 + +window.addEventListener("MozReftestInvalidate", doTest); +// in order to reproduce this bug on the original build, which +// doesn't support MozReftestInvalidate +setTimeout(doTest, 5000); + +function doTest() { + document.getElementById("test1").style.borderBottomWidth = "1px"; + document.documentElement.className = ""; +} +</script> + +</head><body> +<div id="test"> + <span id="test1">test1</span><b>|</b><span>test2</span> +</div> +</body></html> diff --git a/layout/reftests/backgrounds/background-referrer-image.png b/layout/reftests/backgrounds/background-referrer-image.png Binary files differnew file mode 100644 index 0000000000..4718c00e62 --- /dev/null +++ b/layout/reftests/backgrounds/background-referrer-image.png diff --git a/layout/reftests/backgrounds/background-referrer-ref.html b/layout/reftests/backgrounds/background-referrer-ref.html new file mode 100644 index 0000000000..0064343bfe --- /dev/null +++ b/layout/reftests/backgrounds/background-referrer-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=817531 +--> +<html> +<head> + <title>Referer: header should be correct</title> +</head> +<body background="background-referrer-image.png"> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-referrer.html b/layout/reftests/backgrounds/background-referrer.html new file mode 100644 index 0000000000..3347bbd6bf --- /dev/null +++ b/layout/reftests/backgrounds/background-referrer.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=817531 +--> +<html> +<head> + <title>Referer: header should be correct</title> +</head> +<body background="background-referrer.sjs"> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-referrer.sjs b/layout/reftests/backgrounds/background-referrer.sjs new file mode 100644 index 0000000000..a00a71ebd8 --- /dev/null +++ b/layout/reftests/backgrounds/background-referrer.sjs @@ -0,0 +1,72 @@ +const BinaryOutputStream = Components.Constructor("@mozilla.org/binaryoutputstream;1", "nsIBinaryOutputStream", "setOutputStream"); + +/* +# Python used to generate the following byte array +def toHex(n): + if n < 16: return "0x" + hex(n)[2:].upper() + return "0x" + hex(n)[2:].upper() + +def hexFile(name): + f = open(name, "rb") + try: + while True: + print toHex(ord(f.read(1))) + ", ", + except: + pass + +hexFile("layout/reftests/backgrounds/background-referrer-image.png") +*/ + +const IMAGE_DATA = + [ + 0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A, 0x00, 0x00, 0x00, + 0x0D, 0x49, 0x48, 0x44, 0x52, 0x00, 0x00, 0x00, 0x64, 0x00, 0x00, + 0x00, 0x64, 0x08, 0x02, 0x00, 0x00, 0x00, 0xFF, 0x80, 0x02, 0x03, + 0x00, 0x00, 0x00, 0x01, 0x73, 0x52, 0x47, 0x42, 0x00, 0xAE, 0xCE, + 0x1C, 0xE9, 0x00, 0x00, 0x00, 0x9E, 0x49, 0x44, 0x41, 0x54, 0x78, + 0xDA, 0xED, 0xD0, 0x31, 0x01, 0x00, 0x00, 0x08, 0x03, 0xA0, 0x69, + 0xFF, 0xCE, 0x5A, 0xC1, 0xCF, 0x07, 0x22, 0x50, 0x99, 0x70, 0xD4, + 0x0A, 0x64, 0xC9, 0x92, 0x25, 0x4B, 0x96, 0x2C, 0x05, 0xB2, 0x64, + 0xC9, 0x92, 0x25, 0x4B, 0x96, 0x02, 0x59, 0xB2, 0x64, 0xC9, 0x92, + 0x25, 0x4B, 0x81, 0x2C, 0x59, 0xB2, 0x64, 0xC9, 0x92, 0xA5, 0x40, + 0x96, 0x2C, 0x59, 0xB2, 0x64, 0xC9, 0x52, 0x20, 0x4B, 0x96, 0x2C, + 0x59, 0xB2, 0x64, 0x29, 0x90, 0x25, 0x4B, 0x96, 0x2C, 0x59, 0xB2, + 0x14, 0xC8, 0x92, 0x25, 0x4B, 0x96, 0x2C, 0x59, 0x0A, 0x64, 0xC9, + 0x92, 0x25, 0x4B, 0x96, 0x2C, 0x05, 0xB2, 0x64, 0xC9, 0x92, 0x25, + 0x4B, 0x96, 0x02, 0x59, 0xB2, 0x64, 0xC9, 0x92, 0x25, 0x4B, 0x81, + 0x2C, 0x59, 0xB2, 0x64, 0xC9, 0x92, 0xA5, 0x40, 0x96, 0x2C, 0x59, + 0xB2, 0x64, 0xC9, 0x52, 0x20, 0x4B, 0x96, 0x2C, 0x59, 0xB2, 0x64, + 0x29, 0x90, 0x25, 0x4B, 0x96, 0x2C, 0x59, 0xB2, 0x14, 0xC8, 0x92, + 0x25, 0x4B, 0x96, 0x2C, 0x59, 0x0A, 0x64, 0xC9, 0xFA, 0xB6, 0x89, + 0x5F, 0x01, 0xC7, 0x24, 0x83, 0xB2, 0x0C, 0x00, 0x00, 0x00, 0x00, + 0x49, 0x45, 0x4E, 0x44, 0xAE, 0x42, 0x60, 0x82, + ]; + +function handleRequest(request, response) +{ + response.setHeader("Content-Type", "text/plain", false); + response.setHeader("Cache-Control", "no-cache", false); + + var referrer = request.hasHeader("Referer") ? + request.getHeader("Referer") : ""; + + // Test url looks like: + // http://localhost:port/timestamp/number/background-referrer.html + // Except in Android, where it looks like: + // http://A.B.C.D:port/timestamp/number/background-referrer.html + // where A.B.C.D is the IP address of the box the reftest HTTP server is + // running on. And maybe that will change. So just test for ending in + // "/background-referrer.html". + if (/\/background-referrer.html$/.test(referrer)) + { + response.setHeader("Content-Type", "image/png", false); + + var stream = new BinaryOutputStream(response.bodyOutputStream); + stream.writeByteArray(IMAGE_DATA); + } + else + { + response.setStatusLine(request.httpVersion, 404, "Not found"); + response.write("Accept header contained: " + accept); + } +} diff --git a/layout/reftests/backgrounds/background-repeat-1-ref.html b/layout/reftests/backgrounds/background-repeat-1-ref.html new file mode 100644 index 0000000000..abcad7fef7 --- /dev/null +++ b/layout/reftests/backgrounds/background-repeat-1-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<!-- +spec: http://dev.w3.org/csswg/css3-background/#the-background-repeat +--> +<head> +<title>background-repeat single value mapping reference</title> +<style> +div +{ + width: 128px; + height: 128px; + background-image: url(aqua-yellow-32x32.png); + border: 1px solid black; +} +#no_repeat +{ + background-repeat: no-repeat; /* no-repeat no-repeat */ +} +#repeat +{ + background-repeat: repeat; /* repeat repeat */ +} +#repeat_x +{ + background-repeat: repeat-x; /* repeat no-repeat */ +} +#repeat_y +{ + background-repeat: repeat-y; /* no-repeat repeat */ +} +</style> +</head> +<body> + <div id="no_repeat"></div> + <div id="repeat"></div> + <div id="repeat_x"></div> + <div id="repeat_y"></div> +</body> +</html> + + diff --git a/layout/reftests/backgrounds/background-repeat-1.html b/layout/reftests/backgrounds/background-repeat-1.html new file mode 100644 index 0000000000..c5f979e6bb --- /dev/null +++ b/layout/reftests/backgrounds/background-repeat-1.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<!-- +spec: http://dev.w3.org/csswg/css3-background/#the-background-repeat +--> +<head> +<title>background-repeat single value mapping</title> +<style> +div +{ + width: 128px; + height: 128px; + background-image: url(aqua-yellow-32x32.png); + border: 1px solid black; +} +#no_repeat +{ + background-repeat: no-repeat no-repeat; /* no-repeat */ +} +#repeat +{ + background-repeat: repeat repeat; /* repeat */ +} +#repeat_x +{ + background-repeat: repeat no-repeat; /* repeat-x */ +} +#repeat_y +{ + background-repeat: no-repeat repeat; /* repeat-y */ +} +</style> +</head> +<body> + <div id="no_repeat"></div> + <div id="repeat"></div> + <div id="repeat_x"></div> + <div id="repeat_y"></div> +</body> +</html> + + diff --git a/layout/reftests/backgrounds/background-repeat-large-area-ref.html b/layout/reftests/backgrounds/background-repeat-large-area-ref.html new file mode 100644 index 0000000000..17d8545554 --- /dev/null +++ b/layout/reftests/backgrounds/background-repeat-large-area-ref.html @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Make sure that repeated background images are painted even at extreme scroll positions</title> + +<style> + +html { + background-image: url(green-8x20-blue-8x20-vertical.png); + overflow: hidden; +} + +</style> diff --git a/layout/reftests/backgrounds/background-repeat-large-area.html b/layout/reftests/backgrounds/background-repeat-large-area.html new file mode 100644 index 0000000000..0c9356382f --- /dev/null +++ b/layout/reftests/backgrounds/background-repeat-large-area.html @@ -0,0 +1,42 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html lang="en" class="reftest-wait"> +<meta charset="utf-8"> +<title>Make sure that repeated background images are painted even at extreme scroll positions</title> +<!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=671302 --> + +<style> + +html { + background-image: url(green-8x20-blue-8x20-vertical.png); + overflow: hidden; +} + +html, body { + margin: 0; +} + +body { + height: 100000px; +} + +div { + height: 1000px; + background-color: red; +} + +</style> + +<div></div> + +<script> + +window.addEventListener("MozReftestInvalidate", function () { + document.documentElement.scrollTop = 16 * 3000; // = 48000 > 32768 + document.documentElement.removeAttribute("class"); +}); + +</script> diff --git a/layout/reftests/backgrounds/background-repeat-resampling-ref.html b/layout/reftests/backgrounds/background-repeat-resampling-ref.html new file mode 100644 index 0000000000..c395175353 --- /dev/null +++ b/layout/reftests/backgrounds/background-repeat-resampling-ref.html @@ -0,0 +1,10 @@ +<div style="background: url(grid-large.png); + background-size: 16px 100%; + width:100px; height: 400px; + background-repeat: none; + position: absolute;"></div> + +<div style="background-color: black; + height: 30px; width: 100px; + margin-top: 370px; + position: absolute;"></div> diff --git a/layout/reftests/backgrounds/background-repeat-resampling.html b/layout/reftests/backgrounds/background-repeat-resampling.html new file mode 100644 index 0000000000..427654ce15 --- /dev/null +++ b/layout/reftests/backgrounds/background-repeat-resampling.html @@ -0,0 +1,4 @@ +<div style="background: url(grid-large.png); + background-size: 16px 100%; + width:100px; height: 400px; + background-repeat: repeat"></div> diff --git a/layout/reftests/backgrounds/background-size-auto-auto.html b/layout/reftests/backgrounds/background-size-auto-auto.html new file mode 100644 index 0000000000..982dd194dd --- /dev/null +++ b/layout/reftests/backgrounds/background-size-auto-auto.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: auto auto;</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; + background-size: auto auto; +} + </style> +</head> +<body> +<div id="outer"></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-auto-length-ref.html b/layout/reftests/backgrounds/background-size-auto-length-ref.html new file mode 100644 index 0000000000..ae7535a84b --- /dev/null +++ b/layout/reftests/backgrounds/background-size-auto-length-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: auto 16px; reference</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; +} +#inner +{ + width: 16px; + height: 16px; + background-image: url(aqua-32x32.png); +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-auto-length.html b/layout/reftests/backgrounds/background-size-auto-length.html new file mode 100644 index 0000000000..768d022f79 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-auto-length.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: auto 16px;</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; +} +#inner +{ + width: 64px; + height: 128px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; + background-size: auto 16px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-auto-percent.html b/layout/reftests/backgrounds/background-size-auto-percent.html new file mode 100644 index 0000000000..73551e5613 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-auto-percent.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: auto 12.5%;</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; +} +#inner +{ + width: 64px; + height: 128px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; + background-size: auto 12.5%; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-auto-ref.html b/layout/reftests/backgrounds/background-size-auto-ref.html new file mode 100644 index 0000000000..8b2bd45d51 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-auto-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: auto; reference</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; +} +#inner +{ + width: 32px; + height: 32px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-auto.html b/layout/reftests/backgrounds/background-size-auto.html new file mode 100644 index 0000000000..00a567cc3f --- /dev/null +++ b/layout/reftests/backgrounds/background-size-auto.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: auto;</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-body-contain-no-repeat.html b/layout/reftests/backgrounds/background-size-body-contain-no-repeat.html new file mode 100644 index 0000000000..0b2ff1fd27 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-body-contain-no-repeat.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: contain; on body, no-repeat, fixed</title> + <style type="text/css"> +body +{ + background-image: url(aqua-32x32.png); + background-attachment: fixed; + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-body-contain-not-fixed.html b/layout/reftests/backgrounds/background-size-body-contain-not-fixed.html new file mode 100644 index 0000000000..15b1f992aa --- /dev/null +++ b/layout/reftests/backgrounds/background-size-body-contain-not-fixed.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: contain; not fixed, no-repeat on body</title> + <style type="text/css"> +body +{ + background-image: url(aqua-32x32.png); + background-attachment: scroll; + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-body-contain.html b/layout/reftests/backgrounds/background-size-body-contain.html new file mode 100644 index 0000000000..ad1aa5fefe --- /dev/null +++ b/layout/reftests/backgrounds/background-size-body-contain.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: contain; fixed, repeat on body</title> + <style type="text/css"> +body +{ + background-image: url(aqua-32x32.png); + background-attachment: fixed; + background-size: contain; +} + </style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-body-cover-no-repeat.html b/layout/reftests/backgrounds/background-size-body-cover-no-repeat.html new file mode 100644 index 0000000000..c32d173761 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-body-cover-no-repeat.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: cover; on body, no-repeat, fixed</title> + <style type="text/css"> +body +{ + background-image: url(aqua-32x32.png); + background-attachment: fixed; + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-body-cover-not-fixed.html b/layout/reftests/backgrounds/background-size-body-cover-not-fixed.html new file mode 100644 index 0000000000..d61dd3e2ee --- /dev/null +++ b/layout/reftests/backgrounds/background-size-body-cover-not-fixed.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: cover; no-repeat, not-fixed on body</title> + <style type="text/css"> +body +{ + background-image: url(aqua-32x32.png); + background-attachment: scroll; + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-body-cover-ref.html b/layout/reftests/backgrounds/background-size-body-cover-ref.html new file mode 100644 index 0000000000..3dfe4ea6b7 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-body-cover-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: cover; on body reference</title> + <style type="text/css"> +body +{ + background-image: url(aqua-32x32.png); +} + </style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-body-cover.html b/layout/reftests/backgrounds/background-size-body-cover.html new file mode 100644 index 0000000000..88fd8a60ea --- /dev/null +++ b/layout/reftests/backgrounds/background-size-body-cover.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: cover; on body</title> + <style type="text/css"> +body +{ + background-image: url(aqua-32x32.png); + background-attachment: fixed; + background-size: cover; +} + </style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-body-percent-percent-no-repeat.html b/layout/reftests/backgrounds/background-size-body-percent-percent-no-repeat.html new file mode 100644 index 0000000000..7dc53ddfe1 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-body-percent-percent-no-repeat.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: 100% 100%; no-repeat/fixed on body</title> + <style type="text/css"> +body +{ + background-image: url(aqua-32x32.png); + background-attachment: fixed; + background-size: 100% 100%; + background-repeat: no-repeat; +} + </style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-body-percent-percent-not-fixed.html b/layout/reftests/backgrounds/background-size-body-percent-percent-not-fixed.html new file mode 100644 index 0000000000..2e5dd8000b --- /dev/null +++ b/layout/reftests/backgrounds/background-size-body-percent-percent-not-fixed.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: 100% 100%; no-repeat/not fixed on body</title> + <style type="text/css"> +body +{ + background-image: url(aqua-32x32.png); + background-attachment: scroll; + background-size: 100% 100%; +} + </style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-body-percent-percent-overflow-ref.html b/layout/reftests/backgrounds/background-size-body-percent-percent-overflow-ref.html new file mode 100644 index 0000000000..c9bfd99819 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-body-percent-percent-overflow-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: 100% 100%; on body</title> + <style type="text/css"> +body +{ + background-image: url(green-16x20.png); +} + </style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-body-percent-percent-overflow.html b/layout/reftests/backgrounds/background-size-body-percent-percent-overflow.html new file mode 100644 index 0000000000..f38f926435 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-body-percent-percent-overflow.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: 100% 100%; on body</title> + <style type="text/css"> +body +{ + background-image: url(green-8x20-blue-8x20-vertical.png); + background-repeat: no-repeat; + background-attachment: fixed; + overflow: hidden; + + /* + * This should not affect how the background paints, that is, how the + * background image is sized: + * + * If the ‘background-attachment’ value for this image is ‘fixed’ [...] the + * background positioning area is the initial containing block [CSS21]. + * + * Thus '100% 100%' below is relative to the viewport size, so we expect to + * see a background which, modulo aliasing, is half green and half blue. + */ + height: 10000px; + + background-size: 100% 100%; +} + </style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-body-percent-percent-ref.html b/layout/reftests/backgrounds/background-size-body-percent-percent-ref.html new file mode 100644 index 0000000000..3f03f74afa --- /dev/null +++ b/layout/reftests/backgrounds/background-size-body-percent-percent-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: 100% 100%; on body reference</title> + <style type="text/css"> +body +{ + background-image: url(aqua-32x32.png); +} + </style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-body-percent-percent.html b/layout/reftests/backgrounds/background-size-body-percent-percent.html new file mode 100644 index 0000000000..c8861a1bc5 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-body-percent-percent.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: 100% 100%; on body</title> + <style type="text/css"> +body +{ + background-image: url(aqua-32x32.png); + background-attachment: fixed; + background-size: 100% 100%; +} + </style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-body-single-not-fixed.html b/layout/reftests/backgrounds/background-size-body-single-not-fixed.html new file mode 100644 index 0000000000..e901abad62 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-body-single-not-fixed.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: contain; on body</title> + <style type="text/css"> +body +{ + background-image: url(aqua-32x32.png); + background-attachment: scroll; + background-repeat: no-repeat; +} + </style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-clone.html b/layout/reftests/backgrounds/background-size-clone.html new file mode 100644 index 0000000000..af6fdef423 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-clone.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> + <title>box-decoration-break: clone</title> + <style type="text/css"> +@font-face +{ + font-family: Ahem; + src: url(../fonts/Ahem.ttf); +} + +#outer +{ + border: 1px solid black; + width: 10em; +} +#ahem-lines +{ + font-family: Ahem; + font-size: 32px; + white-space: pre; + background-image: url(blue-8x20-green-8x20.png); + background-repeat: no-repeat; + box-decoration-break: clone; +} +</style> +</head> +<body> +<div id="outer"> +<span id="ahem-lines"> <!-- EOL --> + <!-- mix it up for clone --><!-- EOL --> + <!-- EOL --> + <!-- EOL --> + </span></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-contain-clip-border-ref.html b/layout/reftests/backgrounds/background-size-contain-clip-border-ref.html new file mode 100644 index 0000000000..45bef665c5 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-contain-clip-border-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: contain; background-clip: border-box reference</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; +} +#inner +{ + border: 20px solid white; + width: 24px; + height: 88px; +} +#innermost +{ + width: 24px; + height: 24px; + background-image: url(aqua-32x32.png); +} + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="innermost"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-contain-clip-border.html b/layout/reftests/backgrounds/background-size-contain-clip-border.html new file mode 100644 index 0000000000..10393efa42 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-contain-clip-border.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: contain; background-clip: border-box</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; +} +#inner +{ + border: 20px solid transparent; + width: 24px; + height: 88px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; + background-size: contain; + background-clip: border-box; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border-padding-ref.html b/layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border-padding-ref.html new file mode 100644 index 0000000000..7d29a5a035 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border-padding-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: contain; background-clip: padding-box reference, background-origin: border-box</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; +} +#inner +{ + border: 20px solid white; + width: 24px; + height: 88px; +} +#innermost1 +{ + width: 24px; + height: 44px; + background-image: url(aqua-32x32.png); +} +#innermost2 +{ + width: 24px; + height: 44px; + background-color: lime; +} + </style> +</head> +<body> +<div id="outer"><div + id="inner"><div + id="innermost1"></div><div + id="innermost2"></div + ></div + ></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border-padding.html b/layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border-padding.html new file mode 100644 index 0000000000..5348f24c0d --- /dev/null +++ b/layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border-padding.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: contain; background-clip: padding-box, background-origin: border-box</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; +} +#inner +{ + border: 20px solid transparent; + padding: 10px; + width: 4px; + height: 68px; + background-image: url(aqua-32x32.png); + background-color: lime; + background-repeat: no-repeat; + background-size: contain; + background-clip: padding-box; + background-origin: border-box; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border-ref.html b/layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border-ref.html new file mode 100644 index 0000000000..59f8103c08 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: contain; background-clip: padding-box reference, background-origin: border-box</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; +} +#inner +{ + border: 20px solid white; + width: 24px; + height: 88px; +} +#innermost +{ + width: 24px; + height: 44px; + background-image: url(aqua-32x32.png); +} + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="innermost"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border.html b/layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border.html new file mode 100644 index 0000000000..d0eebb0ace --- /dev/null +++ b/layout/reftests/backgrounds/background-size-contain-clip-padding-origin-border.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: contain; background-clip: padding-box, background-origin: border-box</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; +} +#inner +{ + border: 20px solid transparent; + width: 24px; + height: 88px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; + background-size: contain; + background-clip: padding-box; + background-origin: border-box; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-contain-clip-padding-ref.html b/layout/reftests/backgrounds/background-size-contain-clip-padding-ref.html new file mode 100644 index 0000000000..1c5d368e07 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-contain-clip-padding-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: contain; background-clip: padding-box reference</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; +} +#inner +{ + border: 20px solid white; + width: 24px; + height: 88px; +} +#innermost +{ + width: 24px; + height: 24px; + background-image: url(aqua-32x32.png); +} + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="innermost"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-contain-clip-padding.html b/layout/reftests/backgrounds/background-size-contain-clip-padding.html new file mode 100644 index 0000000000..d04f1642b5 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-contain-clip-padding.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: contain; background-clip: padding-box</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; +} +#inner +{ + border: 20px solid transparent; + width: 24px; + height: 88px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; + background-size: contain; + background-clip: padding-box; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-contain-position-fifty-fifty-ref.html b/layout/reftests/backgrounds/background-size-contain-position-fifty-fifty-ref.html new file mode 100644 index 0000000000..811f4c047c --- /dev/null +++ b/layout/reftests/backgrounds/background-size-contain-position-fifty-fifty-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: contain; background-position: 50% 50% reference</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; +} +#inner1 +{ + width: 64px; + height: 32px; +} +#inner2 +{ + width: 64px; + height: 64px; + background-image: url(aqua-32x32.png); +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div><div id="inner2"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-contain-position-fifty-fifty.html b/layout/reftests/backgrounds/background-size-contain-position-fifty-fifty.html new file mode 100644 index 0000000000..76e1a0772c --- /dev/null +++ b/layout/reftests/backgrounds/background-size-contain-position-fifty-fifty.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: contain; background-position: 50% 50%</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; +} +#inner +{ + width: 64px; + height: 128px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; + background-size: contain; + background-position: 50% 50%; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-contain-ref.html b/layout/reftests/backgrounds/background-size-contain-ref.html new file mode 100644 index 0000000000..53c346cc74 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-contain-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: contain; reference</title> + <style type="text/css"> +#outer +{ + border: 10px solid black; + width: 64px; + height: 128px; +} +#inner +{ + width: 64px; + height: 64px; + background-image: url(aqua-32x32.png); +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-contain.html b/layout/reftests/backgrounds/background-size-contain.html new file mode 100644 index 0000000000..1be525632c --- /dev/null +++ b/layout/reftests/backgrounds/background-size-contain.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: contain;</title> + <style type="text/css"> +#outer +{ + border: 10px solid black; + width: 64px; + height: 128px; +} +#inner +{ + width: 64px; + height: 128px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-cover-clone.html b/layout/reftests/backgrounds/background-size-cover-clone.html new file mode 100644 index 0000000000..8abd119d26 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-cover-clone.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: cover; box-decoration-break: clone</title> + <style type="text/css"> +@font-face +{ + font-family: Ahem; + src: url(../fonts/Ahem.ttf); +} + +#outer +{ + border: 1px solid black; + width: 10em; +} +#ahem-lines +{ + font-family: Ahem; + font-size: 32px; + white-space: pre; + background-image: url(blue-8x20-green-8x20.png); + background-repeat: no-repeat; + background-size: cover; + box-decoration-break: clone; +} +</style> +</head> +<body> +<div id="outer"> +<span id="ahem-lines"> <!-- EOL --> + <!-- mix it up for clone --><!-- EOL --> + <!-- EOL --> + <!-- EOL --> + </span></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-cover-ref.html b/layout/reftests/backgrounds/background-size-cover-ref.html new file mode 100644 index 0000000000..7d74f7b3c2 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-cover-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: cover; reference</title> + <style type="text/css"> +#outer +{ + border: 10px solid black; + width: 64px; + height: 128px; + background-image: url(aqua-32x32.png); +} + </style> +</head> +<body> +<div id="outer"></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-cover-slice.html b/layout/reftests/backgrounds/background-size-cover-slice.html new file mode 100644 index 0000000000..9969971f29 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-cover-slice.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: cover; box-decoration-break: slice</title> + <style type="text/css"> +@font-face +{ + font-family: Ahem; + src: url(../fonts/Ahem.ttf); +} + +#outer +{ + border: 1px solid black; + width: 10em; +} +#ahem-lines +{ + font-family: Ahem; + font-size: 32px; + white-space: pre; + background-image: url(blue-8x20-green-8x20.png); + background-repeat: no-repeat; + background-size: cover; + box-decoration-break: slice; +} +</style> +</head> +<body> +<div id="outer"> +<span id="ahem-lines"> <!-- EOL --> + <!-- mix it up for slice --><!-- EOL --> + <!-- EOL --> + <!-- EOL --> + </span></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-cover.html b/layout/reftests/backgrounds/background-size-cover.html new file mode 100644 index 0000000000..d32d3fbba9 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-cover.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: cover;</title> + <style type="text/css"> +#outer +{ + border: 10px solid black; + width: 64px; + height: 128px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-length-auto.html b/layout/reftests/backgrounds/background-size-length-auto.html new file mode 100644 index 0000000000..f3e9386f1b --- /dev/null +++ b/layout/reftests/backgrounds/background-size-length-auto.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: 16px auto;</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; +} +#inner +{ + width: 64px; + height: 128px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; + background-size: 16px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-length-length-ref.html b/layout/reftests/backgrounds/background-size-length-length-ref.html new file mode 100644 index 0000000000..05b5c67587 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-length-length-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: 32px 64px; reference</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; +} +#inner +{ + width: 32px; + height: 64px; + background-image: url(aqua-32x32.png); +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-length-length.html b/layout/reftests/backgrounds/background-size-length-length.html new file mode 100644 index 0000000000..8d4f106824 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-length-length.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: 32px 64px;</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; +} +#inner +{ + width: 64px; + height: 128px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; + background-size: 32px 64px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-length-percent-ref.html b/layout/reftests/backgrounds/background-size-length-percent-ref.html new file mode 100644 index 0000000000..9c95873190 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-length-percent-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: 16px 25%;</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; +} +#inner +{ + width: 16px; + height: 32px; + background-image: url(aqua-32x32.png); +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-length-percent.html b/layout/reftests/backgrounds/background-size-length-percent.html new file mode 100644 index 0000000000..0769009a9e --- /dev/null +++ b/layout/reftests/backgrounds/background-size-length-percent.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: 16px 25%;</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; +} +#inner +{ + width: 64px; + height: 128px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; + background-size: 16px 25%; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-length.html b/layout/reftests/backgrounds/background-size-length.html new file mode 100644 index 0000000000..f7d188cb1f --- /dev/null +++ b/layout/reftests/backgrounds/background-size-length.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: 16px;</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; +} +#inner +{ + width: 64px; + height: 128px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; + background-size: 16px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-monster-ch.html b/layout/reftests/backgrounds/background-size-monster-ch.html new file mode 100644 index 0000000000..4d46406e51 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-monster-ch.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> + <title>Characters-to-twips conversions testing</title> + <style type="text/css"> +body +{ + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC); + background-size: 2147483640ch; +} + </style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-monster-cm.html b/layout/reftests/backgrounds/background-size-monster-cm.html new file mode 100644 index 0000000000..e40273af4b --- /dev/null +++ b/layout/reftests/backgrounds/background-size-monster-cm.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> + <title>Centimeters-to-twips conversions testing</title> + <style type="text/css"> +body +{ + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC); + background-size: 2147483640cm; +} + </style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-monster-em.html b/layout/reftests/backgrounds/background-size-monster-em.html new file mode 100644 index 0000000000..1543adbe32 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-monster-em.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> + <title>Ems-to-twips conversions testing</title> + <style type="text/css"> +body +{ + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC); + background-size: 2147483640em; +} + </style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-monster-ex.html b/layout/reftests/backgrounds/background-size-monster-ex.html new file mode 100644 index 0000000000..a55761bda3 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-monster-ex.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> + <title>Exes-to-twips conversions testing</title> + <style type="text/css"> +body +{ + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC); + background-size: 2147483640ex; +} + </style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-monster-inches.html b/layout/reftests/backgrounds/background-size-monster-inches.html new file mode 100644 index 0000000000..a9b1fe03b6 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-monster-inches.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> + <title>Inches-to-twips conversions testing</title> + <style type="text/css"> +body +{ + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC); + background-size: 2147483640in; +} + </style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-monster-mm.html b/layout/reftests/backgrounds/background-size-monster-mm.html new file mode 100644 index 0000000000..3ebd5ac337 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-monster-mm.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> + <title>Millimeters-to-twips conversions testing</title> + <style type="text/css"> +body +{ + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC); + background-size: 2147483640mm; +} + </style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-monster-pc.html b/layout/reftests/backgrounds/background-size-monster-pc.html new file mode 100644 index 0000000000..fa59295962 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-monster-pc.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> + <title>Picas-to-twips conversions testing</title> + <style type="text/css"> +body +{ + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC); + background-size: 2147483640pc; +} + </style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-monster-pt.html b/layout/reftests/backgrounds/background-size-monster-pt.html new file mode 100644 index 0000000000..a58bd8156c --- /dev/null +++ b/layout/reftests/backgrounds/background-size-monster-pt.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> + <title>Points-to-twips conversions testing</title> + <style type="text/css"> +body +{ + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC); + background-size: 2147483640pt; +} + </style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-monster-px.html b/layout/reftests/backgrounds/background-size-monster-px.html new file mode 100644 index 0000000000..bfa52bbc63 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-monster-px.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> + <title>Pixels-to-twips conversions testing</title> + <style type="text/css"> +body +{ + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC); + background-size: 2147483640px; +} + </style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-monster-ref.html b/layout/reftests/backgrounds/background-size-monster-ref.html new file mode 100644 index 0000000000..e4950ac5d3 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-monster-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<head> + <title>Twips conversion reference</title> + <style type="text/css"> +body +{ + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC); +} + </style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-monster-rem.html b/layout/reftests/backgrounds/background-size-monster-rem.html new file mode 100644 index 0000000000..2db00604e7 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-monster-rem.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> + <title>Root-ems-to-twips conversions testing</title> + <style type="text/css"> +body +{ + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC); + background-size: 2147483640rem; +} + </style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-percent-auto.html b/layout/reftests/backgrounds/background-size-percent-auto.html new file mode 100644 index 0000000000..82ba188aef --- /dev/null +++ b/layout/reftests/backgrounds/background-size-percent-auto.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: 25% auto;</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; +} +#inner +{ + width: 64px; + height: 128px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; + background-size: 25% auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-percent-length.html b/layout/reftests/backgrounds/background-size-percent-length.html new file mode 100644 index 0000000000..63eb52f616 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-percent-length.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: 25% 32px;</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; +} +#inner +{ + width: 64px; + height: 128px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; + background-size: 25% 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-percent-percent-ref.html b/layout/reftests/backgrounds/background-size-percent-percent-ref.html new file mode 100644 index 0000000000..a30b75c6b0 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-percent-percent-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: 50% 25%; reference</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; +} +#inner +{ + width: 32px; + height: 32px; + background-image: url(aqua-32x32.png); +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-percent-percent-stretch-ref.html b/layout/reftests/backgrounds/background-size-percent-percent-stretch-ref.html new file mode 100644 index 0000000000..65c999d6d9 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-percent-percent-stretch-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: 100% 100%; stretch reference</title> + <style type="text/css"> +#outer +{ + border: 10px solid black; + width: 60px; + height: 120px; +} +#inner1 +{ + background: blue; + width: 15px; + height: 120px; + display: inline-block; + background-image: url(blue-16x20.png); + + /* obscure sampling artifacts at the color boundary */ + border-right: 5px solid black; +} +#inner2 +{ + background: lime; + width: 35px; + height: 120px; + display: inline-block; + background-image: url(green-16x20.png); + + /* obscure sampling artifacts at the color boundary */ + border-left: 5px solid black; +} + </style> +</head> +<body> +<div id="outer"><div id="inner1"></div><div id="inner2"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-percent-percent-stretch.html b/layout/reftests/backgrounds/background-size-percent-percent-stretch.html new file mode 100644 index 0000000000..912413d699 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-percent-percent-stretch.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: 100% 100%; stretch</title> + <style type="text/css"> +#outer +{ + border: 10px solid black; + width: 60px; + height: 120px; +} +#inner +{ + width: 60px; + height: 120px; + background-image: url(blue-8x20-green-16x20.png); + background-repeat: no-repeat; + background-size: 100% 100%; +} +#innermost +{ + width: 15px; + height: 120px; + + /* obscure sampling artifacts at the color boundary */ + border-right: 10px solid black; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="innermost"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-percent-percent.html b/layout/reftests/backgrounds/background-size-percent-percent.html new file mode 100644 index 0000000000..0219da5bb3 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-percent-percent.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: 50% 25%;</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; +} +#inner +{ + width: 64px; + height: 128px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; + background-size: 50% 25%; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-percent.html b/layout/reftests/backgrounds/background-size-percent.html new file mode 100644 index 0000000000..a7b1db127f --- /dev/null +++ b/layout/reftests/backgrounds/background-size-percent.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: 25%;</title> + <style type="text/css"> +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; +} +#inner +{ + width: 64px; + height: 128px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; + background-size: 25%; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-slice.html b/layout/reftests/backgrounds/background-size-slice.html new file mode 100644 index 0000000000..94fe4d8624 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-slice.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> + <title>box-decoration-break: slice</title> + <style type="text/css"> +@font-face +{ + font-family: Ahem; + src: url(../fonts/Ahem.ttf); +} + +#outer +{ + border: 1px solid black; + width: 10em; +} +#ahem-lines +{ + font-family: Ahem; + font-size: 32px; + white-space: pre; + background-image: url(blue-8x20-green-8x20.png); + background-repeat: no-repeat; + box-decoration-break: slice; +} +</style> +</head> +<body> +<div id="outer"> +<span id="ahem-lines"> <!-- EOL --> + <!-- mix it up for slice --><!-- EOL --> + <!-- EOL --> + <!-- EOL --> + </span></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-zoom-no-repeat-ref.html b/layout/reftests/backgrounds/background-size-zoom-no-repeat-ref.html new file mode 100644 index 0000000000..dd05ee386a --- /dev/null +++ b/layout/reftests/backgrounds/background-size-zoom-no-repeat-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size + zoom</title> + <style type="text/css"> +html +{ + margin: 0; + padding: 10px; +} +body +{ + margin: 0; + padding: 0; +} +#outer +{ + border: 2px solid black; + width: 128px; + height: 256px; +} +#inner +{ + width: 32px; + height: 32px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-zoom-no-repeat.html b/layout/reftests/backgrounds/background-size-zoom-no-repeat.html new file mode 100644 index 0000000000..24e2fa3ba6 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-zoom-no-repeat.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html reftest-zoom="2"> +<head> + <title>background-size + zoom</title> + <style type="text/css"> +html +{ + margin: 0; + padding: 5px; +} +body +{ + margin: 0; + padding: 0; +} +#outer +{ + border: 1px solid black; + width: 64px; + height: 128px; +} +#inner +{ + width: 64px; + height: 128px; + background-image: url(aqua-32x32.png); + background-repeat: no-repeat; + background-size: 25%; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-zoom-repeat-ref.html b/layout/reftests/backgrounds/background-size-zoom-repeat-ref.html new file mode 100644 index 0000000000..1a5a1fd0af --- /dev/null +++ b/layout/reftests/backgrounds/background-size-zoom-repeat-ref.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> +<head> + <title>background-size: 64px 40px; repeat, zoom reference</title> + <style type="text/css"> +html +{ + margin: 0; + padding: 0; +} +body +{ + margin: 0; + padding: 20px; +} +#outer +{ + width: 512px; + height: 320px; +} + /* + * PRE-ZOOM: + * 2x size the image, then tile it 4x4 across the div; sampling artifacts at + * 32px horizontal offset, then every 64px for the full height of the div. + * POST-ZOOM: + * 4x size the image, then tile it 4x4 across the div; sampling artifacts at + * 64px horizontal offset, then every 128px for the full height of the div. + */ + +/* Aargh, sampling artifacts, we hates them, precioussss. */ +#outer > div +{ + display: inline-block; + width: 56px; + height: 320px; +} +.blue +{ + background: url(blue-16x20.png); + border-right: 8px solid black; +} +.green +{ + background: url(green-16x20.png); + border-left: 8px solid black; +} + </style> +</head> +<body> +<div id="outer"><div + class="blue"></div><div + class="green"></div><div + class="blue"></div><div + class="green"></div><div + class="blue"></div><div + class="green"></div><div + class="blue"></div><div + class="green"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-size-zoom-repeat.html b/layout/reftests/backgrounds/background-size-zoom-repeat.html new file mode 100644 index 0000000000..97df2b53f2 --- /dev/null +++ b/layout/reftests/backgrounds/background-size-zoom-repeat.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html reftest-zoom="2"> +<head> + <title>background-size: 64px 40px; repeat, zoom</title> + <style type="text/css"> +html +{ + margin: 0; + padding: 0; +} +body +{ + margin: 0; + padding: 10px; +} +#outer +{ + /* + * PRE-ZOOM: + * 2x size the image, then tile it 4x4 across the div; sampling artifacts at + * 32px horizontal offset, then every 64px for the full height of the div. + * POST-ZOOM: + * 4x size the image, then tile it 4x4 across the div; sampling artifacts at + * 64px horizontal offset, then every 128px for the full height of the div. + */ + width: 256px; + height: 160px; + background-image: url(blue-16x20-green-16x20.png); + background-repeat: repeat; + background-size: 64px 40px; +} + +/* Aargh, sampling artifacts, we hates them, precioussss. */ +#outer > div +{ + display: inline-block; + width: 28px; + height: 160px; +} +.blue +{ + border-right: 4px solid black; +} +.green +{ + border-left: 4px solid black; +} + </style> +</head> +<body> +<div id="outer"><div + class="blue"></div><div + class="green"></div><div + class="blue"></div><div + class="green"></div><div + class="blue"></div><div + class="green"></div><div + class="blue"></div><div + class="green"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/background-tiling-zoom-1-ref.html b/layout/reftests/backgrounds/background-tiling-zoom-1-ref.html new file mode 100644 index 0000000000..189dcb4699 --- /dev/null +++ b/layout/reftests/backgrounds/background-tiling-zoom-1-ref.html @@ -0,0 +1,75 @@ +<!DOCTYPE HTML> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html reftest-zoom="1.3"> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + + html, body { + margin: 0; + border: none; + padding: 0; + } + + div { + background-color: lime; + border: 1px solid black; + margin: 5px; + position: absolute + } + + div.horizontal { + height: 10px; + left: 0px; + } + + div.vertical { + top: 120px; + width: 10px; + } + + div.horizontal-single-color { + height: 10px; + left: 40px; + } + + div.vertical-single-color { + top: 160px; + width: 10px; + } + +</style> +</head> +<body> + +<div class="horizontal" style="top: 0px; width: 30px"></div> +<div class="horizontal" style="top: 20px; width: 30.1px"></div> +<div class="horizontal" style="top: 40px; width: 30.3px"></div> +<div class="horizontal" style="top: 60px; width: 30.5px"></div> +<div class="horizontal" style="top: 80px; width: 30.7px"></div> +<div class="horizontal" style="top: 100px; width: 30.9px"></div> + +<div class="horizontal-single-color" style="top: 0px; width: 30px"></div> +<div class="horizontal-single-color" style="top: 20px; width: 30.1px"></div> +<div class="horizontal-single-color" style="top: 40px; width: 30.3px"></div> +<div class="horizontal-single-color" style="top: 60px; width: 30.5px"></div> +<div class="horizontal-single-color" style="top: 80px; width: 30.7px"></div> +<div class="horizontal-single-color" style="top: 100px; width: 30.9px"></div> + +<div class="vertical" style="left: 0px; height: 30px"></div> +<div class="vertical" style="left: 20px; height: 30.1px"></div> +<div class="vertical" style="left: 40px; height: 30.3px"></div> +<div class="vertical" style="left: 60px; height: 30.5px"></div> +<div class="vertical" style="left: 80px; height: 30.7px"></div> +<div class="vertical" style="left: 100px; height: 30.9px"></div> + +<div class="vertical-single-color" style="left: 0px; height: 30px"></div> +<div class="vertical-single-color" style="left: 20px; height: 30.1px"></div> +<div class="vertical-single-color" style="left: 40px; height: 30.3px"></div> +<div class="vertical-single-color" style="left: 60px; height: 30.5px"></div> +<div class="vertical-single-color" style="left: 80px; height: 30.7px"></div> +<div class="vertical-single-color" style="left: 100px; height: 30.9px"></div> + +</body> +</html> diff --git a/layout/reftests/backgrounds/background-tiling-zoom-1.html b/layout/reftests/backgrounds/background-tiling-zoom-1.html new file mode 100644 index 0000000000..e72af03e14 --- /dev/null +++ b/layout/reftests/backgrounds/background-tiling-zoom-1.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html reftest-zoom="1.3"> +<head> +<title>Pixel rounding testcase</title> +<style type="text/css"> + + html, body { + margin: 0; + border: none; + padding: 0; + } + + div { + border: 1px solid black; + margin: 5px; + position: absolute + } + + /* For these tests we use images containing two colors, even though only one + color will be visible, to avoid special single-color-image code paths. */ + div.horizontal { + background-image: url(lime-and-blue-1x25.png); + height: 10px; + left: 0px; + } + + div.vertical { + background-image: url(lime-and-blue-25x1.png); + top: 120px; + width: 10px; + } + + /* For these tests we use images containing only one color to ensure that we + hit the special single-color-image code paths. */ + div.horizontal-single-color { + background-image: url(lime-1x25.png); + height: 10px; + left: 40px; + } + + div.vertical-single-color { + background-image: url(lime-25x1.png); + top: 160px; + width: 10px; + } + +</style> +</head> +<body> + +<div class="horizontal" style="top: 0px; width: 30px"></div> +<div class="horizontal" style="top: 20px; width: 30.1px"></div> +<div class="horizontal" style="top: 40px; width: 30.3px"></div> +<div class="horizontal" style="top: 60px; width: 30.5px"></div> +<div class="horizontal" style="top: 80px; width: 30.7px"></div> +<div class="horizontal" style="top: 100px; width: 30.9px"></div> + +<div class="horizontal-single-color" style="top: 0px; width: 30px"></div> +<div class="horizontal-single-color" style="top: 20px; width: 30.1px"></div> +<div class="horizontal-single-color" style="top: 40px; width: 30.3px"></div> +<div class="horizontal-single-color" style="top: 60px; width: 30.5px"></div> +<div class="horizontal-single-color" style="top: 80px; width: 30.7px"></div> +<div class="horizontal-single-color" style="top: 100px; width: 30.9px"></div> + +<div class="vertical" style="left: 0px; height: 30px"></div> +<div class="vertical" style="left: 20px; height: 30.1px"></div> +<div class="vertical" style="left: 40px; height: 30.3px"></div> +<div class="vertical" style="left: 60px; height: 30.5px"></div> +<div class="vertical" style="left: 80px; height: 30.7px"></div> +<div class="vertical" style="left: 100px; height: 30.9px"></div> + +<div class="vertical-single-color" style="left: 0px; height: 30px"></div> +<div class="vertical-single-color" style="left: 20px; height: 30.1px"></div> +<div class="vertical-single-color" style="left: 40px; height: 30.3px"></div> +<div class="vertical-single-color" style="left: 60px; height: 30.5px"></div> +<div class="vertical-single-color" style="left: 80px; height: 30.7px"></div> +<div class="vertical-single-color" style="left: 100px; height: 30.9px"></div> + +</body> +</html> diff --git a/layout/reftests/backgrounds/blue-16x20-green-16x20.png b/layout/reftests/backgrounds/blue-16x20-green-16x20.png Binary files differnew file mode 100644 index 0000000000..9bf59ebdf1 --- /dev/null +++ b/layout/reftests/backgrounds/blue-16x20-green-16x20.png diff --git a/layout/reftests/backgrounds/blue-16x20-green-8x20.png b/layout/reftests/backgrounds/blue-16x20-green-8x20.png Binary files differnew file mode 100644 index 0000000000..9d025d1bcc --- /dev/null +++ b/layout/reftests/backgrounds/blue-16x20-green-8x20.png diff --git a/layout/reftests/backgrounds/blue-16x20.png b/layout/reftests/backgrounds/blue-16x20.png Binary files differnew file mode 100644 index 0000000000..f0f4d319e8 --- /dev/null +++ b/layout/reftests/backgrounds/blue-16x20.png diff --git a/layout/reftests/backgrounds/blue-32x32.png b/layout/reftests/backgrounds/blue-32x32.png Binary files differnew file mode 100644 index 0000000000..deefd19b2a --- /dev/null +++ b/layout/reftests/backgrounds/blue-32x32.png diff --git a/layout/reftests/backgrounds/blue-8x20-green-16x20.png b/layout/reftests/backgrounds/blue-8x20-green-16x20.png Binary files differnew file mode 100644 index 0000000000..7caad35c4c --- /dev/null +++ b/layout/reftests/backgrounds/blue-8x20-green-16x20.png diff --git a/layout/reftests/backgrounds/blue-8x20-green-8x20.png b/layout/reftests/backgrounds/blue-8x20-green-8x20.png Binary files differnew file mode 100644 index 0000000000..de47c026a2 --- /dev/null +++ b/layout/reftests/backgrounds/blue-8x20-green-8x20.png diff --git a/layout/reftests/backgrounds/blue-8x20.png b/layout/reftests/backgrounds/blue-8x20.png Binary files differnew file mode 100644 index 0000000000..c8bdd73cbc --- /dev/null +++ b/layout/reftests/backgrounds/blue-8x20.png diff --git a/layout/reftests/backgrounds/body-background-ref.html b/layout/reftests/backgrounds/body-background-ref.html new file mode 100644 index 0000000000..4ba77be0e8 --- /dev/null +++ b/layout/reftests/backgrounds/body-background-ref.html @@ -0,0 +1,2 @@ +<body style="background-image: url('aqua-yellow-32x32.png')"> +</body> diff --git a/layout/reftests/backgrounds/body-background.html b/layout/reftests/backgrounds/body-background.html new file mode 100644 index 0000000000..c6def1b795 --- /dev/null +++ b/layout/reftests/backgrounds/body-background.html @@ -0,0 +1,2 @@ +<body background="aqua-yellow-32x32.png"> +</body> diff --git a/layout/reftests/backgrounds/continuous-inline-1a.html b/layout/reftests/backgrounds/continuous-inline-1a.html new file mode 100644 index 0000000000..31ad8a14a6 --- /dev/null +++ b/layout/reftests/backgrounds/continuous-inline-1a.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <head> + <style> + span.b { display: inline-block; height: 20px; } + span.break::before { content: "\A"; white-space: pre-wrap; } + </style> + </head> + <body> + <span style="background: url(blue-16x20-green-16x20.png)"> + <span class="b" style="width: 24px"></span><span class="break"></span> + <span class="b" style="width: 8px"></span> + </span> + </body> +</html> diff --git a/layout/reftests/backgrounds/continuous-inline-1ab-ref.html b/layout/reftests/backgrounds/continuous-inline-1ab-ref.html new file mode 100644 index 0000000000..98a8631c26 --- /dev/null +++ b/layout/reftests/backgrounds/continuous-inline-1ab-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <style> + span.b { display: inline-block; height: 20px; } + </style> + </head> + <body> + <div> + <span style="background: url(blue-16x20-green-8x20.png);"> + <span class="b" style="width: 24px"></span> + </span> + </div> + <div> + <span style="background: url(green-8x20.png);"> + <span class="b" style="width: 8px"></span> + </span> + </div> + </body> +</html> diff --git a/layout/reftests/backgrounds/continuous-inline-1b.html b/layout/reftests/backgrounds/continuous-inline-1b.html new file mode 100644 index 0000000000..368b8f47c7 --- /dev/null +++ b/layout/reftests/backgrounds/continuous-inline-1b.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <head> + <style> + span.b { display: inline-block; height: 20px; } + span.break { display: block } + </style> + </head> + <body> + <span style="background: url(blue-16x20-green-16x20.png)"> + <span class="b" style="width: 24px"></span><span class="break"></span> + <span class="b" style="width: 8px"></span> + </span> + </body> +</html> diff --git a/layout/reftests/backgrounds/continuous-inline-1c.html b/layout/reftests/backgrounds/continuous-inline-1c.html new file mode 100644 index 0000000000..200783d3a5 --- /dev/null +++ b/layout/reftests/backgrounds/continuous-inline-1c.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <head> + <style> + span.b { display: inline-block; height: 20px; } + span.break::before { content: "\A"; white-space: pre-wrap; } + </style> + </head> + <body> + <span style="background: url(blue-16x20-green-16x20.png) no-repeat"> + <span class="b" style="width: 24px"></span><span class="break"></span> + <span class="b" style="width: 24px"></span> + </span> + </body> +</html> diff --git a/layout/reftests/backgrounds/continuous-inline-1cd-ref.html b/layout/reftests/backgrounds/continuous-inline-1cd-ref.html new file mode 100644 index 0000000000..2e469a40eb --- /dev/null +++ b/layout/reftests/backgrounds/continuous-inline-1cd-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <style> + span.b { display: inline-block; height: 20px; } + </style> + </head> + <body> + <div> + <span style="background: url(blue-16x20-green-8x20.png) no-repeat;"> + <span class="b" style="width: 24px"></span> + </span> + </div> + <div> + <span style="background: url(green-8x20.png) no-repeat;"> + <span class="b" style="width: 8px"></span> + </span> + </div> + </body> +</html> diff --git a/layout/reftests/backgrounds/continuous-inline-1d.html b/layout/reftests/backgrounds/continuous-inline-1d.html new file mode 100644 index 0000000000..f4f028e02e --- /dev/null +++ b/layout/reftests/backgrounds/continuous-inline-1d.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <head> + <style> + span.b { display: inline-block; height: 20px; } + span.break { display: block; } + </style> + </head> + <body> + <span style="background: url(blue-16x20-green-16x20.png) no-repeat"> + <span class="b" style="width: 24px"></span><span class="break"></span> + <span class="b" style="width: 24px"></span> + </span> + </body> +</html> diff --git a/layout/reftests/backgrounds/continuous-inline-2-ref.html b/layout/reftests/backgrounds/continuous-inline-2-ref.html new file mode 100644 index 0000000000..2c2fe8a5d8 --- /dev/null +++ b/layout/reftests/backgrounds/continuous-inline-2-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <style> + span.b { display: inline-block; height: 20px; } + </style> + </head> + <body> + <div> + <span style="background: url(blue-8x20.png);"> + <span class="b" style="width: 8px"></span> + </span> + </div> + <div> + <span style="background: url(blue-8x20-green-16x20.png);"> + <span class="b" style="width: 24px"></span> + </span> + </div> + </body> +</html> diff --git a/layout/reftests/backgrounds/continuous-inline-2a.html b/layout/reftests/backgrounds/continuous-inline-2a.html new file mode 100644 index 0000000000..2cec6d6879 --- /dev/null +++ b/layout/reftests/backgrounds/continuous-inline-2a.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <head> + <style> + span.b { display: inline-block; height: 20px; } + span.break::before { content: "\A"; white-space: pre-wrap; } + </style> + </head> + <body> + <span style="background: url(blue-16x20-green-16x20.png)"> + <span class="b" style="width: 8px"></span><span class="break"></span> + <span class="b" style="width: 24px"></span> + </span> + </body> +</html> diff --git a/layout/reftests/backgrounds/continuous-inline-2b.html b/layout/reftests/backgrounds/continuous-inline-2b.html new file mode 100644 index 0000000000..33c6a970cb --- /dev/null +++ b/layout/reftests/backgrounds/continuous-inline-2b.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <head> + <style> + span.b { display: inline-block; height: 20px; } + span.break { display: block } + </style> + </head> + <body> + <span style="background: url(blue-16x20-green-16x20.png)"> + <span class="b" style="width: 8px"></span><span class="break"></span> + <span class="b" style="width: 24px"></span> + </span> + </body> +</html> diff --git a/layout/reftests/backgrounds/continuous-inline-3-ref.html b/layout/reftests/backgrounds/continuous-inline-3-ref.html new file mode 100644 index 0000000000..daf7b57fea --- /dev/null +++ b/layout/reftests/backgrounds/continuous-inline-3-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <style> + span.b { display: inline-block; height: 20px; } + </style> + </head> + <body> + <div> + <span style="background: url(blue-8x20.png);"> + <span class="b" style="width: 8px"></span> + </span> + </div> + <div> + <span style="background: url(blue-8x20-green-8x20.png);"> + <span class="b" style="width: 16px"></span> + </span> + </div> + <div> + <span style="background: url(green-8x20.png);"> + <span class="b" style="width: 8px"></span> + </span> + </div> + </body> +</html> diff --git a/layout/reftests/backgrounds/continuous-inline-3.html b/layout/reftests/backgrounds/continuous-inline-3.html new file mode 100644 index 0000000000..fbca2aa7bb --- /dev/null +++ b/layout/reftests/backgrounds/continuous-inline-3.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> + <head> + <style> + span.b { display: inline-block; height: 20px; } + span.break::before { content: "\A"; white-space: pre-wrap; } + </style> + </head> + <body> + <span style="background: url(blue-16x20-green-16x20.png)"> + <span class="b" style="width: 8px"></span><span class="break"></span> + <span class="b" style="width: 16px"></span><span class="break"></span> + <span class="b" style="width: 8px"></span> + </span> + </body> +</html> diff --git a/layout/reftests/backgrounds/continuous-inline-4-ref.html b/layout/reftests/backgrounds/continuous-inline-4-ref.html new file mode 100644 index 0000000000..5d943a21a6 --- /dev/null +++ b/layout/reftests/backgrounds/continuous-inline-4-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <style> + span.b { display: inline-block; height: 20px; } + </style> + </head> + <body> + <div> + <span style="background: url(blue-16x20-green-16x20.png);"> + <span class="b" style="width: 32px"></span></span><span + style="background: url(blue-16x20.png);"><span + class="b" style="width: 16px"></span> + </span> + </div> + <div> + <span style="background: url(green-16x20.png);"> + <span class="b" style="width: 16px"></span> + </span> + </div> + </body> +</html> diff --git a/layout/reftests/backgrounds/continuous-inline-4a.html b/layout/reftests/backgrounds/continuous-inline-4a.html new file mode 100644 index 0000000000..4e3d169946 --- /dev/null +++ b/layout/reftests/backgrounds/continuous-inline-4a.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <head> + <style> + span.b { display: inline-block; height: 20px; } + span.break::before { content: "\A"; white-space: pre-wrap; } + </style> + </head> + <body> + <span style="background: url(blue-16x20-green-16x20.png)"> + <span class="b" style="width: 48px"></span><span class="break"></span> + <span class="b" style="width: 16px"></span> + </span> + </body> +</html> diff --git a/layout/reftests/backgrounds/continuous-inline-4b.html b/layout/reftests/backgrounds/continuous-inline-4b.html new file mode 100644 index 0000000000..cc9ed3d95d --- /dev/null +++ b/layout/reftests/backgrounds/continuous-inline-4b.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <head> + <style> + span.b { display: inline-block; height: 20px; } + span.break { display: block; } + </style> + </head> + <body> + <span style="background: url(blue-16x20-green-16x20.png)"> + <span class="b" style="width: 48px"></span><span class="break"></span> + <span class="b" style="width: 16px"></span> + </span> + </body> +</html> diff --git a/layout/reftests/backgrounds/continuous-inline-5-ref.html b/layout/reftests/backgrounds/continuous-inline-5-ref.html new file mode 100644 index 0000000000..40e9ea3d1e --- /dev/null +++ b/layout/reftests/backgrounds/continuous-inline-5-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <style> + span.b { display: inline-block; height: 20px; } + </style> + </head> + <body> + <div> + <span style="background: url(blue-16x20-green-8x20.png);"> + <span class="b" style="width: 24px"></span> + </span> + </div> + <div> + <span style="background: url(green-8x20.png);"> + <span class="b" style="width: 8px"></span></span><span + style="background: url(blue-16x20.png);"><span + class="b" style="width: 16px"></span> + </span> + </div> + </body> +</html> diff --git a/layout/reftests/backgrounds/continuous-inline-5a.html b/layout/reftests/backgrounds/continuous-inline-5a.html new file mode 100644 index 0000000000..259460960a --- /dev/null +++ b/layout/reftests/backgrounds/continuous-inline-5a.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <head> + <style> + span.b { display: inline-block; height: 20px; } + span.break::before { content: "\A"; white-space: pre-wrap; } + </style> + </head> + <body> + <span style="background: url(blue-16x20-green-16x20.png)"> + <span class="b" style="width: 24px"></span><span class="break"></span> + <span class="b" style="width: 24px"></span> + </span> + </body> +</html> diff --git a/layout/reftests/backgrounds/continuous-inline-5b.html b/layout/reftests/backgrounds/continuous-inline-5b.html new file mode 100644 index 0000000000..e9473c9b2f --- /dev/null +++ b/layout/reftests/backgrounds/continuous-inline-5b.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <head> + <style> + span.b { display: inline-block; height: 20px; } + span.break { display: block } + </style> + </head> + <body> + <span style="background: url(blue-16x20-green-16x20.png)"> + <span class="b" style="width: 24px"></span><span class="break"></span> + <span class="b" style="width: 24px"></span> + </span> + </body> +</html> diff --git a/layout/reftests/backgrounds/delay-image-response.sjs b/layout/reftests/backgrounds/delay-image-response.sjs new file mode 100644 index 0000000000..418eaa24a9 --- /dev/null +++ b/layout/reftests/backgrounds/delay-image-response.sjs @@ -0,0 +1,65 @@ +const BinaryOutputStream = Components.Constructor("@mozilla.org/binaryoutputstream;1", "nsIBinaryOutputStream", "setOutputStream"); +/* This data is picked from image/test/reftest/generic/check-header.sjs */ +const IMAGE_DATA = + [ + 0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A, 0x00, 0x00, 0x00, + 0x0D, 0x49, 0x48, 0x44, 0x52, 0x00, 0x00, 0x00, 0x64, 0x00, 0x00, + 0x00, 0x64, 0x08, 0x02, 0x00, 0x00, 0x00, 0xFF, 0x80, 0x02, 0x03, + 0x00, 0x00, 0x00, 0x01, 0x73, 0x52, 0x47, 0x42, 0x00, 0xAE, 0xCE, + 0x1C, 0xE9, 0x00, 0x00, 0x00, 0x9E, 0x49, 0x44, 0x41, 0x54, 0x78, + 0xDA, 0xED, 0xD0, 0x31, 0x01, 0x00, 0x00, 0x08, 0x03, 0xA0, 0x69, + 0xFF, 0xCE, 0x5A, 0xC1, 0xCF, 0x07, 0x22, 0x50, 0x99, 0x70, 0xD4, + 0x0A, 0x64, 0xC9, 0x92, 0x25, 0x4B, 0x96, 0x2C, 0x05, 0xB2, 0x64, + 0xC9, 0x92, 0x25, 0x4B, 0x96, 0x02, 0x59, 0xB2, 0x64, 0xC9, 0x92, + 0x25, 0x4B, 0x81, 0x2C, 0x59, 0xB2, 0x64, 0xC9, 0x92, 0xA5, 0x40, + 0x96, 0x2C, 0x59, 0xB2, 0x64, 0xC9, 0x52, 0x20, 0x4B, 0x96, 0x2C, + 0x59, 0xB2, 0x64, 0x29, 0x90, 0x25, 0x4B, 0x96, 0x2C, 0x59, 0xB2, + 0x14, 0xC8, 0x92, 0x25, 0x4B, 0x96, 0x2C, 0x59, 0x0A, 0x64, 0xC9, + 0x92, 0x25, 0x4B, 0x96, 0x2C, 0x05, 0xB2, 0x64, 0xC9, 0x92, 0x25, + 0x4B, 0x96, 0x02, 0x59, 0xB2, 0x64, 0xC9, 0x92, 0x25, 0x4B, 0x81, + 0x2C, 0x59, 0xB2, 0x64, 0xC9, 0x92, 0xA5, 0x40, 0x96, 0x2C, 0x59, + 0xB2, 0x64, 0xC9, 0x52, 0x20, 0x4B, 0x96, 0x2C, 0x59, 0xB2, 0x64, + 0x29, 0x90, 0x25, 0x4B, 0x96, 0x2C, 0x59, 0xB2, 0x14, 0xC8, 0x92, + 0x25, 0x4B, 0x96, 0x2C, 0x59, 0x0A, 0x64, 0xC9, 0xFA, 0xB6, 0x89, + 0x5F, 0x01, 0xC7, 0x24, 0x83, 0xB2, 0x0C, 0x00, 0x00, 0x00, 0x00, + 0x49, 0x45, 0x4E, 0x44, 0xAE, 0x42, 0x60, 0x82, + ]; + +/** + * The timer is needed when a delay is set. We need it to be out of the method + * so it is not eaten alive by the GC. + */ +var timer; + +function handleRequest(request, response) { + var query = {}; + request.queryString.split('&').forEach(function (val) { + var [name, value] = val.split('='); + query[name] = unescape(value); + }); + + response.setStatusLine(request.httpVersion, 200, "OK"); + response.setHeader("Content-Type", "image/png", false); + + function imageWrite() { + var stream = new BinaryOutputStream(response.bodyOutputStream); + stream.writeByteArray(IMAGE_DATA); + } + + // If there is no delay, we write the image and leave. + if (!("delay" in query)) { + imageWrite(); + return; + } + + // If there is a delay, we create a timer which, when it fires, will write + // image and leave. + response.processAsync(); + const nsITimer = Components.interfaces.nsITimer; + + timer = Components.classes["@mozilla.org/timer;1"].createInstance(nsITimer); + timer.initWithCallback(function() { + imageWrite(); + response.finish(); + }, query["delay"], nsITimer.TYPE_ONE_SHOT); +} diff --git a/layout/reftests/backgrounds/div-background-ref.html b/layout/reftests/backgrounds/div-background-ref.html new file mode 100644 index 0000000000..7916b9cd0b --- /dev/null +++ b/layout/reftests/backgrounds/div-background-ref.html @@ -0,0 +1,3 @@ +<div style="background-image: url('aqua-yellow-32x32.png')"> +Ohai +</div> diff --git a/layout/reftests/backgrounds/div-background.html b/layout/reftests/backgrounds/div-background.html new file mode 100644 index 0000000000..224da0d155 --- /dev/null +++ b/layout/reftests/backgrounds/div-background.html @@ -0,0 +1,3 @@ +<div background="aqua-yellow-32x32.png"> +Ohai +</div> diff --git a/layout/reftests/backgrounds/fixed-bg-border-radius-ref.html b/layout/reftests/backgrounds/fixed-bg-border-radius-ref.html new file mode 100644 index 0000000000..f6f87dacc9 --- /dev/null +++ b/layout/reftests/backgrounds/fixed-bg-border-radius-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html>
+<html>
+<style>
+body {
+ height: 100%;
+ width: 100%;
+ background: red url('../bugs/repeatable-diagonal-gradient.png') no-repeat;
+ margin: 0px;
+ overflow: hidden;
+}
+div {
+ height:200px;
+ width: 1020px;
+ background: url('../bugs/repeatable-diagonal-gradient.png') no-repeat;
+ border-radius: 25px;
+}
+</style>
+<body>
+<div >
+</div>
+</body></html>
diff --git a/layout/reftests/backgrounds/fixed-bg-border-radius.html b/layout/reftests/backgrounds/fixed-bg-border-radius.html new file mode 100644 index 0000000000..9ab57276bf --- /dev/null +++ b/layout/reftests/backgrounds/fixed-bg-border-radius.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<style> +body { + height: 100%; + width: 100%; + background: red url('../bugs/repeatable-diagonal-gradient.png') no-repeat fixed; + margin: 0px; + overflow: hidden; +} +div { + height:200px; + width: 1020px; + background: url('../bugs/repeatable-diagonal-gradient.png') no-repeat fixed; + border-radius: 25px; +} +</style> +<body> +<div > +</div> +</body></html> diff --git a/layout/reftests/backgrounds/fixed-bg-with-transform-outside-viewport-1.html b/layout/reftests/backgrounds/fixed-bg-with-transform-outside-viewport-1.html new file mode 100644 index 0000000000..99b9b3ac34 --- /dev/null +++ b/layout/reftests/backgrounds/fixed-bg-with-transform-outside-viewport-1.html @@ -0,0 +1,15 @@ +<html> +<head> +<style> + #thediv { + position: absolute; left: 0; top: 100%; + -moz-transform: rotate(-90deg); + -moz-transform-origin: 0 0; + background: red url("blue-32x32.png") 0 0 fixed repeat; width: 200px; height: 200px; + } +</style> +</head> +<body> +<div id="thediv"></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/fixed-bg-with-transform-outside-viewport-ref.html b/layout/reftests/backgrounds/fixed-bg-with-transform-outside-viewport-ref.html new file mode 100644 index 0000000000..53ff1ddc3d --- /dev/null +++ b/layout/reftests/backgrounds/fixed-bg-with-transform-outside-viewport-ref.html @@ -0,0 +1,15 @@ +<html> +<head> +<style> + #thediv { + position: absolute; left: 0; top: 100%; + -moz-transform: rotate(-90deg); + -moz-transform-origin: 0 0; + background: blue 0 0 fixed repeat; width: 200px; height: 200px; + } +</style> +</head> +<body> +<div id="thediv"></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/fuchsia-32x32.png b/layout/reftests/backgrounds/fuchsia-32x32.png Binary files differnew file mode 100644 index 0000000000..7902bc31e0 --- /dev/null +++ b/layout/reftests/backgrounds/fuchsia-32x32.png diff --git a/layout/reftests/backgrounds/green-16x20.png b/layout/reftests/backgrounds/green-16x20.png Binary files differnew file mode 100644 index 0000000000..a62d275cf8 --- /dev/null +++ b/layout/reftests/backgrounds/green-16x20.png diff --git a/layout/reftests/backgrounds/green-8x20-blue-8x20-vertical.png b/layout/reftests/backgrounds/green-8x20-blue-8x20-vertical.png Binary files differnew file mode 100644 index 0000000000..4236f5b1ce --- /dev/null +++ b/layout/reftests/backgrounds/green-8x20-blue-8x20-vertical.png diff --git a/layout/reftests/backgrounds/green-8x20.png b/layout/reftests/backgrounds/green-8x20.png Binary files differnew file mode 100644 index 0000000000..9333015fcd --- /dev/null +++ b/layout/reftests/backgrounds/green-8x20.png diff --git a/layout/reftests/backgrounds/green-circle-alpha-32x32.png b/layout/reftests/backgrounds/green-circle-alpha-32x32.png Binary files differnew file mode 100644 index 0000000000..a007675a17 --- /dev/null +++ b/layout/reftests/backgrounds/green-circle-alpha-32x32.png diff --git a/layout/reftests/backgrounds/grid-large.png b/layout/reftests/backgrounds/grid-large.png Binary files differnew file mode 100644 index 0000000000..4de7c66782 --- /dev/null +++ b/layout/reftests/backgrounds/grid-large.png diff --git a/layout/reftests/backgrounds/iframe-translucent-color-1.html b/layout/reftests/backgrounds/iframe-translucent-color-1.html new file mode 100644 index 0000000000..a220ee0292 --- /dev/null +++ b/layout/reftests/backgrounds/iframe-translucent-color-1.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html> + <head> + </head> + <body> + <!-- contents of iframe <html style="background-color: rgba(255,0,0,0.50196)">--> + <iframe src="data:text/html,%3Chtml%20style%3D%22background-color%3A%20rgba%28255%2C0%2C0%2C0.50196%29%22%3E" + style="position: absolute; top: 0; left: 0; width: 100px; height: 100px; border: none"> + </body> +</html> diff --git a/layout/reftests/backgrounds/iframe-translucent-color-ref.html b/layout/reftests/backgrounds/iframe-translucent-color-ref.html new file mode 100644 index 0000000000..353dfe3077 --- /dev/null +++ b/layout/reftests/backgrounds/iframe-translucent-color-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <head> + </head> + <body> + <div style="position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-color: rgba(255,0,0,0.50196)"> + </div> + </body> +</html> diff --git a/layout/reftests/backgrounds/layers-layer-count-1-ref.xhtml b/layout/reftests/backgrounds/layers-layer-count-1-ref.xhtml new file mode 100644 index 0000000000..ba6a56b68c --- /dev/null +++ b/layout/reftests/backgrounds/layers-layer-count-1-ref.xhtml @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>css3-background: number of background layers determined by background-image</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://dev.w3.org/csswg/css3-background/#layering" /> + <meta name="flags" content="" /> + <style type="text/css"><![CDATA[ + + div { + position: relative; height: 100px; width: 100px; + } + + ]]></style> + </head> + <body> + + <div> + <img style="position: absolute; left: 10px; top: 10px" src="aqua-32x32.png" /> + </div> + <div> + <img style="position: absolute; left: 15px; top: 15px" src="fuchsia-32x32.png" /> + <img style="position: absolute; left: 20px; top: 20px" src="blue-32x32.png" /> + <img style="position: absolute; left: 5px; top: 5px" src="aqua-32x32.png" /> + <img style="position: absolute; left: 10px; top: 10px" src="yellow-32x32.png" /> + </div> + <div> + <img style="position: absolute; left: 20px; top: 20px" src="fuchsia-32x32.png" /> + <img style="position: absolute; left: 5px; top: 5px" src="yellow-32x32.png" /> + <img style="position: absolute; left: 10px; top: 10px" src="blue-32x32.png" /> + </div> + + </body> +</html> diff --git a/layout/reftests/backgrounds/layers-layer-count-2-ref.xhtml b/layout/reftests/backgrounds/layers-layer-count-2-ref.xhtml new file mode 100644 index 0000000000..b41d73a06d --- /dev/null +++ b/layout/reftests/backgrounds/layers-layer-count-2-ref.xhtml @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>css3-background: number of background layers determined by background-image</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://dev.w3.org/csswg/css3-background/#layering" /> + <meta name="flags" content="" /> + <style type="text/css"><![CDATA[ + + div { + position: relative; height: 100px; width: 100px; + } + + ]]></style> + </head> + <body> + + <div> + <img style="position: absolute; left: 10px; top: 10px" src="yellow-32x32.png" /> + </div> + <div> + <img style="position: absolute; left: 15px; top: 15px" src="fuchsia-32x32.png" /> + <img style="position: absolute; left: 20px; top: 20px" src="blue-32x32.png" /> + <img style="position: absolute; left: 0px; top: 0px" src="aqua-32x32.png" /> + <img style="position: absolute; left: 5px; top: 5px" src="yellow-32x32.png" /> + </div> + <div> + <img style="position: absolute; left: 20px; top: 20px" src="blue-32x32.png" /> + <img style="position: absolute; left: 5px; top: 5px" src="aqua-32x32.png" /> + <img style="position: absolute; left: 10px; top: 10px" src="yellow-32x32.png" /> + </div> + + </body> +</html> diff --git a/layout/reftests/backgrounds/layers-layer-count-cascade-1.xhtml b/layout/reftests/backgrounds/layers-layer-count-cascade-1.xhtml new file mode 100644 index 0000000000..66bc6d2a04 --- /dev/null +++ b/layout/reftests/backgrounds/layers-layer-count-cascade-1.xhtml @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>css3-background: number of background layers determined by background-image</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://dev.w3.org/csswg/css3-background/#layering" /> + <meta name="flags" content="" /> + <style type="text/css"><![CDATA[ + + div { + position: relative; height: 100px; width: 100px; + background-repeat: no-repeat; + background-position: 10px 10px, 5px 5px, 20px 20px, 15px 15px; + background-image: url(aqua-32x32.png); + } + + div.withclass { + background-image: url(yellow-32x32.png), url(aqua-32x32.png), url(blue-32x32.png), url(fuchsia-32x32.png), url(red-32x32.png); + } + + div#withid { + background-image: url(blue-32x32.png), url(yellow-32x32.png), url(fuchsia-32x32.png); + } + + + ]]></style> + </head> + <body> + + <div></div> + <div class="withclass"></div> + <div class="withclass" id="withid"></div> + + </body> +</html> diff --git a/layout/reftests/backgrounds/layers-layer-count-cascade-2.xhtml b/layout/reftests/backgrounds/layers-layer-count-cascade-2.xhtml new file mode 100644 index 0000000000..e14cc838d6 --- /dev/null +++ b/layout/reftests/backgrounds/layers-layer-count-cascade-2.xhtml @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>css3-background: number of background layers determined by background-image</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://dev.w3.org/csswg/css3-background/#layering" /> + <meta name="flags" content="" /> + <style type="text/css"><![CDATA[ + + div { + position: relative; height: 100px; width: 100px; + background-repeat: no-repeat; + background-position: 10px 10px; + background-image: url(yellow-32x32.png), url(aqua-32x32.png), url(blue-32x32.png), url(fuchsia-32x32.png), url(red-32x32.png); + } + + div.withclass { + background-position: 5px 5px, 0px 0px, 20px 20px, 15px 15px; + } + + div#withid { + background-position: 10px 10px, 5px 5px, 20px 20px; + } + + + ]]></style> + </head> + <body> + + <div></div> + <div class="withclass"></div> + <div class="withclass" id="withid"></div> + + </body> +</html> diff --git a/layout/reftests/backgrounds/layers-layer-count-inheritance-1.xhtml b/layout/reftests/backgrounds/layers-layer-count-inheritance-1.xhtml new file mode 100644 index 0000000000..06f28f51c1 --- /dev/null +++ b/layout/reftests/backgrounds/layers-layer-count-inheritance-1.xhtml @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>css3-background: number of background layers determined by background-image</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://dev.w3.org/csswg/css3-background/#layering" /> + <meta name="flags" content="" /> + <style type="text/css"><![CDATA[ + + body > div { + position: relative; height: 300px; width: 100px; + background-repeat: no-repeat; + background-position: 10px 10px, 5px 5px, 20px 20px, 15px 15px; + background-image: url(aqua-32x32.png); + } + + body > div > div { + position: absolute; height: 200px; width: 100px; top: 100px; left: 0; + background-repeat: no-repeat; + background-position: inherit; + background-image: url(yellow-32x32.png), url(aqua-32x32.png), url(blue-32x32.png), url(fuchsia-32x32.png), url(red-32x32.png); + } + + body > div > div > div { + position: absolute; height: 100px; width: 100px; top: 100px; left: 0; + background: inherit; + background-image: url(blue-32x32.png), url(yellow-32x32.png), url(fuchsia-32x32.png); + } + + + ]]></style> + </head> + <body> + + <div><div><div></div></div></div> + + </body> +</html> diff --git a/layout/reftests/backgrounds/layers-layer-count-inheritance-2.xhtml b/layout/reftests/backgrounds/layers-layer-count-inheritance-2.xhtml new file mode 100644 index 0000000000..4ddaae2462 --- /dev/null +++ b/layout/reftests/backgrounds/layers-layer-count-inheritance-2.xhtml @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>css3-background: number of background layers determined by background-image</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://dev.w3.org/csswg/css3-background/#layering" /> + <meta name="flags" content="" /> + <style type="text/css"><![CDATA[ + + body > div { + position: relative; height: 300px; width: 100px; + background-repeat: no-repeat; + background-position: 10px 10px; + background-image: url(yellow-32x32.png), url(aqua-32x32.png), url(blue-32x32.png), url(fuchsia-32x32.png), url(red-32x32.png); + } + + body > div > div { + position: absolute; height: 200px; width: 100px; top: 100px; left: 0; + background: inherit; + background-position: 5px 5px, 0px 0px, 20px 20px, 15px 15px; + } + + body > div > div > div { + position: absolute; height: 100px; width: 100px; top: 100px; left: 0; + background-image: inherit; + background-repeat: inherit; + background-position: 10px 10px, 5px 5px, 20px 20px; + } + + + ]]></style> + </head> + <body> + + <div><div><div></div></div></div> + + </body> +</html> diff --git a/layout/reftests/backgrounds/layers-stacking-order-ref.xhtml b/layout/reftests/backgrounds/layers-stacking-order-ref.xhtml new file mode 100644 index 0000000000..175c211328 --- /dev/null +++ b/layout/reftests/backgrounds/layers-stacking-order-ref.xhtml @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>css3-background: stacking order of layers</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://dev.w3.org/csswg/css3-background/#layering" /> + <meta name="flags" content="" /> + <style type="text/css"><![CDATA[ + + div#test { + position: relative; height: 100px; width: 100px; + } + + + ]]></style> + </head> + <body> + + <div id="test"> + <img src="aqua-32x32.png" style="position: absolute; left: 20px; top: 20px" /> + <img src="fuchsia-32x32.png" style="position: absolute; left: 10px; top: 10px" /> + <img src="yellow-32x32.png" style="position: absolute; left: 15px; top: 15px" /> + <img src="blue-32x32.png" style="position: absolute; left: 5px; top: 5px" /> + </div> + + </body> +</html> diff --git a/layout/reftests/backgrounds/layers-stacking-order.xhtml b/layout/reftests/backgrounds/layers-stacking-order.xhtml new file mode 100644 index 0000000000..16d1df9a1a --- /dev/null +++ b/layout/reftests/backgrounds/layers-stacking-order.xhtml @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>css3-background: stacking order of layers</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://dev.w3.org/csswg/css3-background/#layering" /> + <meta name="flags" content="" /> + <style type="text/css"><![CDATA[ + + div#test { + position: relative; height: 100px; width: 100px; + background: url(blue-32x32.png) 5px 5px no-repeat, + url(yellow-32x32.png) 15px 15px no-repeat, + url(fuchsia-32x32.png) 10px 10px no-repeat, + url(aqua-32x32.png) 20px 20px no-repeat; + } + + + ]]></style> + </head> + <body> + + <div id="test"></div> + + </body> +</html> diff --git a/layout/reftests/backgrounds/lime-1x25.png b/layout/reftests/backgrounds/lime-1x25.png Binary files differnew file mode 100644 index 0000000000..8d0167988a --- /dev/null +++ b/layout/reftests/backgrounds/lime-1x25.png diff --git a/layout/reftests/backgrounds/lime-25x1.png b/layout/reftests/backgrounds/lime-25x1.png Binary files differnew file mode 100644 index 0000000000..31e1c4087a --- /dev/null +++ b/layout/reftests/backgrounds/lime-25x1.png diff --git a/layout/reftests/backgrounds/lime-and-blue-1x25.png b/layout/reftests/backgrounds/lime-and-blue-1x25.png Binary files differnew file mode 100644 index 0000000000..05a27d9592 --- /dev/null +++ b/layout/reftests/backgrounds/lime-and-blue-1x25.png diff --git a/layout/reftests/backgrounds/lime-and-blue-25x1.png b/layout/reftests/backgrounds/lime-and-blue-25x1.png Binary files differnew file mode 100644 index 0000000000..4407676c46 --- /dev/null +++ b/layout/reftests/backgrounds/lime-and-blue-25x1.png diff --git a/layout/reftests/backgrounds/malformed.png b/layout/reftests/backgrounds/malformed.png new file mode 100644 index 0000000000..57a2dca5c0 --- /dev/null +++ b/layout/reftests/backgrounds/malformed.png @@ -0,0 +1 @@ +This is not a PNG file. diff --git a/layout/reftests/backgrounds/multi-background-clip-content-border-ref.html b/layout/reftests/backgrounds/multi-background-clip-content-border-ref.html new file mode 100644 index 0000000000..290b0b1996 --- /dev/null +++ b/layout/reftests/backgrounds/multi-background-clip-content-border-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<title>multi-background-clip-content-border-ref</title> +<style> + div#outer { background-image: url(green-16x20.png); + width: 100px; height: 100px; + border: 20px solid transparent; } + div#inner { background-image: url(aqua-32x32.png); + width: 100%; height: 100%; } +</style> +<div id="outer"><div id="inner"></div></div> diff --git a/layout/reftests/backgrounds/multi-background-clip-content-border.html b/layout/reftests/backgrounds/multi-background-clip-content-border.html new file mode 100644 index 0000000000..d13352f6f6 --- /dev/null +++ b/layout/reftests/backgrounds/multi-background-clip-content-border.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<title>multi-background-clip-content-border</title> +<style> + div { background-image: url(aqua-32x32.png), + url(green-16x20.png); + border: 20px solid transparent; + background-clip: content-box, border-box; + width: 100px; height: 100px; } +</style> +<div></div> diff --git a/layout/reftests/backgrounds/really-big-background-ref.html b/layout/reftests/backgrounds/really-big-background-ref.html new file mode 100644 index 0000000000..fc8cb841f1 --- /dev/null +++ b/layout/reftests/backgrounds/really-big-background-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<img src="really-big-background.png" style="width: 1600px; height: 1200px; position: absolute;"> diff --git a/layout/reftests/backgrounds/really-big-background.html b/layout/reftests/backgrounds/really-big-background.html new file mode 100644 index 0000000000..741a7cbfaa --- /dev/null +++ b/layout/reftests/backgrounds/really-big-background.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<img alt=" " style="background-image: url(really-big-background.png); width: 1600px; height: 1200px; position: absolute;"></img> diff --git a/layout/reftests/backgrounds/really-big-background.png b/layout/reftests/backgrounds/really-big-background.png Binary files differnew file mode 100644 index 0000000000..bd8705b8a5 --- /dev/null +++ b/layout/reftests/backgrounds/really-big-background.png diff --git a/layout/reftests/backgrounds/red-128-alpha-32x32.png b/layout/reftests/backgrounds/red-128-alpha-32x32.png Binary files differnew file mode 100644 index 0000000000..a85ac33257 --- /dev/null +++ b/layout/reftests/backgrounds/red-128-alpha-32x32.png diff --git a/layout/reftests/backgrounds/red-32x32.png b/layout/reftests/backgrounds/red-32x32.png Binary files differnew file mode 100644 index 0000000000..191e13ea11 --- /dev/null +++ b/layout/reftests/backgrounds/red-32x32.png diff --git a/layout/reftests/backgrounds/reftest.list b/layout/reftests/backgrounds/reftest.list new file mode 100644 index 0000000000..c9274594e1 --- /dev/null +++ b/layout/reftests/backgrounds/reftest.list @@ -0,0 +1,184 @@ +include vector/reftest.list + +== layers-stacking-order.xhtml layers-stacking-order-ref.xhtml +== layers-layer-count-cascade-1.xhtml layers-layer-count-1-ref.xhtml +== layers-layer-count-inheritance-1.xhtml layers-layer-count-1-ref.xhtml +== layers-layer-count-cascade-2.xhtml layers-layer-count-2-ref.xhtml +== layers-layer-count-inheritance-2.xhtml layers-layer-count-2-ref.xhtml +fuzzy(0-1,0-5000) == viewport-translucent-color-1.html viewport-translucent-color-ref.html +fuzzy(0-1,0-5000) == viewport-translucent-color-2.html viewport-translucent-color-ref.html +fuzzy(0-1,0-5000) == viewport-translucent-color-3.html viewport-translucent-color-ref.html +!= viewport-translucent-color-ref.html about:blank +fuzzy(0-1,0-10000) == iframe-translucent-color-1.html iframe-translucent-color-ref.html +fuzzy(0-1,0-1024) == translucent-color-1.html translucent-color-ref.html +fuzzy(0-1,0-1024) == translucent-color-2.html translucent-color-ref.html +fuzzy(0-1,0-1024) == translucent-color-3.html translucent-color-ref.html +!= translucent-color-ref.html about:blank +== root-element-display-none-1.html root-element-display-none-ref.html +== continuous-inline-1a.html continuous-inline-1ab-ref.html +== continuous-inline-1b.html continuous-inline-1ab-ref.html +== continuous-inline-1c.html continuous-inline-1cd-ref.html +== continuous-inline-1d.html continuous-inline-1cd-ref.html +== continuous-inline-2a.html continuous-inline-2-ref.html +== continuous-inline-2b.html continuous-inline-2-ref.html +== continuous-inline-3.html continuous-inline-3-ref.html +== continuous-inline-4a.html continuous-inline-4-ref.html +== continuous-inline-4b.html continuous-inline-4-ref.html +== continuous-inline-5a.html continuous-inline-5-ref.html +== continuous-inline-5b.html continuous-inline-5-ref.html +== background-redraw-237766.html background-redraw-237766-ref.html + +== background-clip-1.html background-clip-1-ref.html +== background-clip-2.html background-clip-2-ref.html + +== background-position-1a.html background-position-1-ref.html +== background-position-1b.html background-position-1-ref.html +== background-position-1c.html background-position-1-ref.html +== background-position-1d.html background-position-1-ref.html +== background-position-1e.html background-position-1-ref.html +== background-position-1f.html background-position-1-ref.html +== background-position-2a.html background-position-2-ref.html +== background-position-2b.html background-position-2-ref.html +== background-position-2c.html background-position-2-ref.html +== background-position-2d.html background-position-2-ref.html +== background-position-3a.html background-position-3-ref.html +== background-position-3b.html background-position-3-ref.html +== background-position-3c.html background-position-3-ref.html +== background-position-3d.html background-position-3-ref.html +== background-position-4a.html background-position-4-ref.html +== background-position-4b.html background-position-4-ref.html +== background-position-4c.html background-position-4-ref.html +== background-position-4d.html background-position-4-ref.html +== background-position-4e.html background-position-4-ref.html +== background-position-5.html background-position-5-ref.html +== background-position-6a.html background-position-6-ref.html +== background-position-6b.html background-position-6-ref.html +== background-position-7.html background-position-7-ref.html +== background-position-8.html background-position-8-ref.html + +== background-size-auto-auto.html background-size-auto-ref.html +== background-size-auto.html background-size-auto-ref.html +== background-size-contain.html background-size-contain-ref.html +== background-size-cover.html background-size-cover-ref.html +== background-size-auto-length.html background-size-auto-length-ref.html +== background-size-length-auto.html background-size-auto-length-ref.html +== background-size-length.html background-size-auto-length-ref.html +== background-size-auto-percent.html background-size-auto-length-ref.html +== background-size-percent-auto.html background-size-auto-length-ref.html +== background-size-percent.html background-size-auto-length-ref.html +== background-size-length-percent.html background-size-length-percent-ref.html +== background-size-percent-length.html background-size-length-percent-ref.html +== background-size-percent-percent.html background-size-percent-percent-ref.html +== background-size-length-length.html background-size-length-length-ref.html +== background-size-percent-percent-stretch.html background-size-percent-percent-stretch-ref.html + +== background-size-body-percent-percent.html background-size-body-percent-percent-ref.html +== background-size-body-percent-percent-no-repeat.html background-size-body-percent-percent-ref.html +== background-size-body-percent-percent-not-fixed.html background-size-body-percent-percent-ref.html +== background-size-body-cover.html background-size-body-cover-ref.html +== background-size-body-cover-no-repeat.html background-size-body-cover-ref.html +!= background-size-body-cover-not-fixed.html background-size-body-cover-ref.html +!= background-size-body-cover-not-fixed.html background-size-body-single-not-fixed.html + +# relies on reftest window having greater height than width +== background-size-body-contain.html background-size-body-cover-ref.html +!= background-size-body-contain-no-repeat.html background-size-body-cover-ref.html +!= background-size-body-contain-not-fixed.html background-size-body-cover-ref.html +!= background-size-body-cover-not-fixed.html background-size-body-contain-not-fixed.html + +!= background-size-body-percent-percent-overflow.html background-size-body-percent-percent-overflow-ref.html + +fails-if(useDrawSnapshot) == background-size-zoom-no-repeat.html background-size-zoom-no-repeat-ref.html # drawSnapshot doesn't deal with zoom properly. + +== background-size-contain-clip-padding.html background-size-contain-clip-padding-ref.html +== background-size-contain-clip-border.html background-size-contain-clip-border-ref.html +== background-size-contain-position-fifty-fifty.html background-size-contain-position-fifty-fifty-ref.html +== background-size-contain-clip-padding-origin-border.html background-size-contain-clip-padding-origin-border-ref.html +== background-size-contain-clip-padding-origin-border-padding.html background-size-contain-clip-padding-origin-border-padding-ref.html + +== background-layers-1a.html background-layers-1-ref.html +fuzzy-if(OSX,0-1,0-324) == background-layers-1b.html background-layers-1-ref.html + +# box-decoration-break's effect on backgrounds is touchy and hard to test due to stretching +# artifacts and the difficulty of covering exact lines, so just make sure +# background-size results in a different rendering when present. +!= background-size-cover-slice.html background-size-slice.html +!= background-size-cover-clone.html background-size-clone.html + +# ...and make sure each rendering with background-size is different from the +# other +!= background-size-cover-slice.html background-size-cover-clone.html + +== background-size-monster-ch.html background-size-monster-ref.html # bug 1129300 +== background-size-monster-cm.html background-size-monster-ref.html # bug 1129300 +== background-size-monster-em.html background-size-monster-ref.html # bug 1129300 +== background-size-monster-ex.html background-size-monster-ref.html # bug 1129300 +== background-size-monster-inches.html background-size-monster-ref.html # bug 1129300 +== background-size-monster-mm.html background-size-monster-ref.html # bug 1129300 +== background-size-monster-pc.html background-size-monster-ref.html # bug 1129300 +== background-size-monster-pt.html background-size-monster-ref.html # bug 1129300 +== background-size-monster-px.html background-size-monster-ref.html # bug 1129300 +== background-size-monster-rem.html background-size-monster-ref.html # bug 1129300 + +fails-if(useDrawSnapshot) == background-size-zoom-repeat.html background-size-zoom-repeat-ref.html # drawSnapshot doesn't deal with zoom properly. + +# -moz-default-background-color and -moz-default-color (bug 591341) +== background-moz-default-background-color.html background-moz-default-background-color-ref.html + +== fixed-bg-with-transform-outside-viewport-1.html fixed-bg-with-transform-outside-viewport-ref.html +fuzzy(0-2,0-83) == fixed-bg-border-radius.html fixed-bg-border-radius-ref.html + +HTTP == root-background-1.html root-background-ref.html +HTTP != root-background-1.html about:blank + +== really-big-background.html really-big-background-ref.html +== body-background.html body-background-ref.html +== table-background.html table-background-ref.html +!= div-background.html div-background-ref.html + +== background-repeat-1-ref.html background-repeat-1.html + +== multi-background-clip-content-border.html multi-background-clip-content-border-ref.html + +HTTP == background-referrer.html background-referrer-ref.html + +== attachment-scroll-positioning-1.html attachment-scroll-positioning-1-ref.html +== attachment-local-positioning-1.html attachment-local-positioning-1-ref.html +== attachment-local-positioning-2.html attachment-local-positioning-2-ref.html +== attachment-local-positioning-3.html attachment-local-positioning-3-ref.html +== attachment-local-positioning-4.html attachment-local-positioning-4-ref.html +== attachment-local-positioning-5.html attachment-local-positioning-5-ref.html + +== attachment-local-clipping-color-1.html attachment-local-clipping-color-1-ref.html +== attachment-local-clipping-color-2.html attachment-local-clipping-color-1-ref.html # Same ref as the previous test. +== attachment-local-clipping-color-3.html attachment-local-clipping-color-3-ref.html +fuzzy(0-1,0-300) == attachment-local-clipping-color-4.html attachment-local-clipping-color-4-ref.html +fuzzy(0-1,0-400) == attachment-local-clipping-color-5.html attachment-local-clipping-color-4-ref.html +fuzzy(0-51,0-320) == attachment-local-clipping-color-6.html attachment-local-clipping-color-6-ref.html + +== attachment-local-clipping-image-1.html attachment-local-clipping-image-1-ref.html +== attachment-local-clipping-image-2.html attachment-local-clipping-image-1-ref.html # Same ref as the previous test. +== attachment-local-clipping-image-3.html attachment-local-clipping-image-3-ref.html +# The next three tests are fuzzy due to bug 1128229. +fuzzy(0-95,0-2206) == attachment-local-clipping-image-4.html attachment-local-clipping-image-4-ref.html +fuzzy(0-95,0-2206) == attachment-local-clipping-image-5.html attachment-local-clipping-image-4-ref.html +fuzzy(0-109,0-908) fuzzy-if(geckoview&&device,64-64,2010-2830) == attachment-local-clipping-image-6.html attachment-local-clipping-image-6-ref.html + +fuzzy(0-1,0-84) == background-multiple-with-border-radius.html background-multiple-with-border-radius-ref.html +fuzzy(0-74,0-49600) fails-if(useDrawSnapshot) == background-repeat-large-area.html background-repeat-large-area-ref.html # bug 1734383 + +fuzzy(0-31,0-474) fails-if(useDrawSnapshot) == background-tiling-zoom-1.html background-tiling-zoom-1-ref.html # drawSnapshot doesn't deal with zoom properly + +skip-if(!cocoaWidget) == background-repeat-resampling.html background-repeat-resampling-ref.html + +fuzzy(0-102,0-2811) fuzzy-if(winWidget,153-153,2866-2866) fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu),50-50,2689-2689) == background-clip-text-1a.html background-clip-text-1-ref.html # Bug 1392106 +fuzzy(0-102,0-2811) fuzzy-if(winWidget,153-153,2866-2866) fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu),50-50,2689-2689) == background-clip-text-1b.html background-clip-text-1-ref.html # Bug 1392106 +fuzzy(0-102,0-2811) fuzzy-if(winWidget,153-153,2866-2866) fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu),50-50,2689-2689) == background-clip-text-1c.html background-clip-text-1-ref.html # Bug 1392106 +fuzzy(0-102,0-2811) fuzzy-if(winWidget,153-153,2866-2866) fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu),50-50,2689-2689) == background-clip-text-1d.html background-clip-text-1-ref.html # Bug 1392106 +fuzzy(0-102,0-2811) fuzzy-if(winWidget,153-153,2866-2866) fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu),50-50,2689-2689) == background-clip-text-1e.html background-clip-text-1-ref.html # Bug 1392106 + +== background-clip-text-2.html background-clip-text-2-ref.html + +random-if(Android) == background-clip-text-scale.html background-clip-text-scale-ref.html # bug 1733942 +!= background-clip-text-translate.html about:blank +!= text-clip-and-stroke.html text-clip-and-no-stroke.html diff --git a/layout/reftests/backgrounds/root-background-1.html b/layout/reftests/backgrounds/root-background-1.html new file mode 100644 index 0000000000..31cf95c82c --- /dev/null +++ b/layout/reftests/backgrounds/root-background-1.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<html style="visibility: hidden; background: url('delay-image-response.sjs?delay=200')"> + <body onload="document.documentElement.style.visibility = ''"> + </body> +</html> diff --git a/layout/reftests/backgrounds/root-background-ref.html b/layout/reftests/backgrounds/root-background-ref.html new file mode 100644 index 0000000000..5523098301 --- /dev/null +++ b/layout/reftests/backgrounds/root-background-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<html> + <body style="background: url('delay-image-response.sjs?delay=0')"> + </body> +</html> diff --git a/layout/reftests/backgrounds/root-element-display-none-1.html b/layout/reftests/backgrounds/root-element-display-none-1.html new file mode 100644 index 0000000000..0e0977433d --- /dev/null +++ b/layout/reftests/backgrounds/root-element-display-none-1.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html id="theroot" style="background-color: red" class="reftest-wait"> + <head> + <script> + function dodisplaynone() { + document.getElementById('theroot').style.display = 'none'; + document.documentElement.className = ""; + } + document.addEventListener("MozReftestInvalidate", dodisplaynone); + </script> + </head> + <body> + </body> +</html> diff --git a/layout/reftests/backgrounds/root-element-display-none-ref.html b/layout/reftests/backgrounds/root-element-display-none-ref.html new file mode 100644 index 0000000000..a37c733059 --- /dev/null +++ b/layout/reftests/backgrounds/root-element-display-none-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <head> + </head> + <body> + </body> +</html> diff --git a/layout/reftests/backgrounds/table-background-ref.html b/layout/reftests/backgrounds/table-background-ref.html new file mode 100644 index 0000000000..1a5ba5270f --- /dev/null +++ b/layout/reftests/backgrounds/table-background-ref.html @@ -0,0 +1,41 @@ +<html> +<body> +<table style="background-image: url('aqua-yellow-32x32.png')"> + <thead style="background-image: url('blue-16x20-green-16x20.png')"> + <tr> + <td> + Foo + </td> + <td style="background-image: url('yellow-32x32.png')"> + Bar + </td> + </tr> + </thead> + <tbody style="background-image: url('red-32x32.png')"> + <tr> + <th style="background-image: url('fuchsia-32x32.png')"> + Foo + </th> + <th> + Bar + </th> + </tr> + <tr style="background-image: url('fuchsia-32x32.png')"> + <td> + Foo + </td> + <td style="background-image: url('yellow-32x32.png')"> + Bar + </td> + </tr> + </tbody> + <tfoot style="background-image: url('yellow-32x32.png')"> + <tr> + <td> + Baz + </td> + </tr> + </tfoot> +</table> +</body> +</html> diff --git a/layout/reftests/backgrounds/table-background.html b/layout/reftests/backgrounds/table-background.html new file mode 100644 index 0000000000..36284f8a2f --- /dev/null +++ b/layout/reftests/backgrounds/table-background.html @@ -0,0 +1,41 @@ +<html> +<body> +<table background="aqua-yellow-32x32.png"> + <thead background="blue-16x20-green-16x20.png"> + <tr> + <td> + Foo + </td> + <td background="yellow-32x32.png"> + Bar + </td> + </tr> + </thead> + <tbody background="red-32x32.png"> + <tr> + <th background="fuchsia-32x32.png"> + Foo + </th> + <th> + Bar + </th> + </tr> + <tr background="fuchsia-32x32.png"> + <td> + Foo + </td> + <td background="yellow-32x32.png"> + Bar + </td> + </tr> + </tbody> + <tfoot background="yellow-32x32.png"> + <tr> + <td> + Baz + </td> + </tr> + </tfoot> +</table> +</body> +</html> diff --git a/layout/reftests/backgrounds/text-clip-and-no-stroke.html b/layout/reftests/backgrounds/text-clip-and-no-stroke.html new file mode 100644 index 0000000000..6210dd4a6a --- /dev/null +++ b/layout/reftests/backgrounds/text-clip-and-no-stroke.html @@ -0,0 +1,14 @@ +<style> + p { + margin: 1em 0; + padding: 1.4em; + background: linear-gradient(60deg, red, yellow, red, yellow, red); + font: 900 1.2em sans-serif; + text-decoration: underline; + -webkit-background-clip: text; + color: rgba(0,0,0,.2); + } + </style> + +<p>The background is clipped to the foreground text.</p> + diff --git a/layout/reftests/backgrounds/text-clip-and-stroke.html b/layout/reftests/backgrounds/text-clip-and-stroke.html new file mode 100644 index 0000000000..224c27773c --- /dev/null +++ b/layout/reftests/backgrounds/text-clip-and-stroke.html @@ -0,0 +1,15 @@ +<style> + p { + margin: 1em 0; + padding: 1.4em; + background: linear-gradient(60deg, red, yellow, red, yellow, red); + font: 900 1.2em sans-serif; + text-decoration: underline; + -webkit-background-clip: text; + -webkit-text-stroke: 2px transparent; + color: rgba(0,0,0,.2); + } + </style> + +<p>The background is clipped to the foreground text.</p> + diff --git a/layout/reftests/backgrounds/translucent-color-1.html b/layout/reftests/backgrounds/translucent-color-1.html new file mode 100644 index 0000000000..db534a4830 --- /dev/null +++ b/layout/reftests/backgrounds/translucent-color-1.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <head> + </head> + <body> + <div style="position: absolute; top: 0; left: 0; width: 32px; height: 32px; background-color: rgba(255,0,0,0.50196)"> + </div> + </body> +</html> diff --git a/layout/reftests/backgrounds/translucent-color-2.html b/layout/reftests/backgrounds/translucent-color-2.html new file mode 100644 index 0000000000..5d2c79ed10 --- /dev/null +++ b/layout/reftests/backgrounds/translucent-color-2.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <head> + </head> + <body> + <div style="position: absolute; top: 0; left: 0; width: 32px; height: 32px; background-image: url(red-128-alpha-32x32.png)"> + </div> + </body> +</html> diff --git a/layout/reftests/backgrounds/translucent-color-3.html b/layout/reftests/backgrounds/translucent-color-3.html new file mode 100644 index 0000000000..ce1d4f15aa --- /dev/null +++ b/layout/reftests/backgrounds/translucent-color-3.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <head> + </head> + <body> + <div style="position: absolute; top: 0; left: 0; width: 32px; height: 32px; background-color: rgb(255,0,0); opacity: 0.50196;"> + </div> + </body> +</html> diff --git a/layout/reftests/backgrounds/translucent-color-ref.html b/layout/reftests/backgrounds/translucent-color-ref.html new file mode 100644 index 0000000000..da6fbe117f --- /dev/null +++ b/layout/reftests/backgrounds/translucent-color-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <head> + </head> + <body> + <img style="position:absolute; top: 0; left: 0; width: 32px; height: 32px;" src="red-128-alpha-32x32.png"> + </img> + </body> +</html> diff --git a/layout/reftests/backgrounds/transparent-32x32.png b/layout/reftests/backgrounds/transparent-32x32.png Binary files differnew file mode 100644 index 0000000000..62b1906cc9 --- /dev/null +++ b/layout/reftests/backgrounds/transparent-32x32.png diff --git a/layout/reftests/backgrounds/vector/diagonal-percentage-vector-background-ref.html b/layout/reftests/backgrounds/vector/diagonal-percentage-vector-background-ref.html new file mode 100644 index 0000000000..48af46c0d7 --- /dev/null +++ b/layout/reftests/backgrounds/vector/diagonal-percentage-vector-background-ref.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>Scaled vector image without intrinsic dimensions as background, with rendering dependent on the diagonal</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +#outer +{ + width: 256px; height: 768px; + border: 1px solid black; +} +#inner +{ + width: 100px; height: 700px; + background-image: url(diagonal-scaled-fixed.svg); + background-repeat: no-repeat; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/diagonal-percentage-vector-background.html b/layout/reftests/backgrounds/vector/diagonal-percentage-vector-background.html new file mode 100644 index 0000000000..74fbb8b51c --- /dev/null +++ b/layout/reftests/backgrounds/vector/diagonal-percentage-vector-background.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>Scaled vector image without intrinsic dimensions as background, with rendering dependent on the diagonal</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +#outer +{ + width: 256px; height: 768px; + border: 1px solid black; +} +#inner +{ + width: 100px; height: 700px; + background-image: url(diagonal-scaled.svg); + background-repeat: no-repeat; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/diagonal-scaled-fixed.svg b/layout/reftests/backgrounds/vector/diagonal-scaled-fixed.svg new file mode 100644 index 0000000000..bf0dcfb59b --- /dev/null +++ b/layout/reftests/backgrounds/vector/diagonal-scaled-fixed.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="700px"> + <title>Vector image with intrinsic dimensions, reference for diagonal-scaled.svg</title> + <rect y="0" width="100px" height="350px" fill="lime"/> + <rect y="350px" width="100px" height="350px" fill="aqua"/> + <rect y="175px" width="50px" height="350px" fill="fuchsia"/> +</svg> diff --git a/layout/reftests/backgrounds/vector/diagonal-scaled.svg b/layout/reftests/backgrounds/vector/diagonal-scaled.svg new file mode 100644 index 0000000000..391a9abe84 --- /dev/null +++ b/layout/reftests/backgrounds/vector/diagonal-scaled.svg @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Vector image without intrinsic dimensions with percentage stroke-width (proportional to the diagonal)</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> + <!-- + A percent stroke-width is resolved with respect to: + + d = sqrt(vh**2 + vw**2) / sqrt(2) + + where vh/vw are the image viewport width/height. Because this image has no + intrinsic dimensions or ratio, it expands to fill the entire background + positioning area, so its width is 100px and its height is 700px. For those + carefully-chosen dimensions, d = 500px, so 10% of that creates a 50px-wide + rectangle, vertically centered and horizontally left-aligned in the image. + --> + <line x1="25%" y1="25%" x2="25%" y2="75%" stroke="fuchsia" stroke-width="10%"/> +</svg> diff --git a/layout/reftests/backgrounds/vector/empty/intrinsic-ratio-no-dimensions.svg b/layout/reftests/backgrounds/vector/empty/intrinsic-ratio-no-dimensions.svg new file mode 100644 index 0000000000..e116d8f1f7 --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/intrinsic-ratio-no-dimensions.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 8 0" + preserveAspectRatio="none"> + <title>Image with zero-width ratio, no dimensions</title> + <rect y="0" width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/backgrounds/vector/empty/intrinsic-ratio-zero-height.svg b/layout/reftests/backgrounds/vector/empty/intrinsic-ratio-zero-height.svg new file mode 100644 index 0000000000..e691e3f918 --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/intrinsic-ratio-zero-height.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="8px" + viewBox="0 0 8 0" + preserveAspectRatio="none"> + <title>Image with zero-height ratio, width</title> + <rect y="0" width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/backgrounds/vector/empty/intrinsic-ratio-zero-width.svg b/layout/reftests/backgrounds/vector/empty/intrinsic-ratio-zero-width.svg new file mode 100644 index 0000000000..df36531671 --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/intrinsic-ratio-zero-width.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="8px" + viewBox="0 0 0 8" + preserveAspectRatio="none"> + <title>Image with zero-width ratio, width</title> + <rect y="0" width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/backgrounds/vector/empty/nonpercent-width-omitted-height-extreme-viewbox.svg b/layout/reftests/backgrounds/vector/empty/nonpercent-width-omitted-height-extreme-viewbox.svg new file mode 100644 index 0000000000..052ed2ab39 --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/nonpercent-width-omitted-height-extreme-viewbox.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="8px" + viewBox="0 0 2147483647 1" + preserveAspectRatio="none"> + <title>Image with non-percent width, omitted height, extreme viewbox</title> + <rect y="0" width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/backgrounds/vector/empty/omitted-width-nonpercent-height-extreme-viewbox.svg b/layout/reftests/backgrounds/vector/empty/omitted-width-nonpercent-height-extreme-viewbox.svg new file mode 100644 index 0000000000..9e9b0b431a --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/omitted-width-nonpercent-height-extreme-viewbox.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + height="8px" + viewBox="0 0 1 2147483647" + preserveAspectRatio="none"> + <title>Image with omitted width, non-percent height, extreme viewbox</title> + <rect y="0" width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/backgrounds/vector/empty/ref-tall-empty.html b/layout/reftests/backgrounds/vector/empty/ref-tall-empty.html new file mode 100644 index 0000000000..37e411f081 --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/ref-tall-empty.html @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall reference, empty</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} + </style> +</head> +<body> +<div id="outer"></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/empty/ref-tall-lime.html b/layout/reftests/backgrounds/vector/empty/ref-tall-lime.html new file mode 100644 index 0000000000..d0f18bfcfc --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/ref-tall-lime.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall reference, lime fill</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background: lime; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/empty/ref-wide-empty.html b/layout/reftests/backgrounds/vector/empty/ref-wide-empty.html new file mode 100644 index 0000000000..16ad533156 --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/ref-wide-empty.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide reference, empty</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; + border: 1px solid black; +} + </style> +</head> +<body> +<div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/empty/ref-wide-lime.html b/layout/reftests/backgrounds/vector/empty/ref-wide-lime.html new file mode 100644 index 0000000000..7ae51768a8 --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/ref-wide-lime.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide reference, empty</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background: lime; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/empty/reftest.list b/layout/reftests/backgrounds/vector/empty/reftest.list new file mode 100644 index 0000000000..d83e5c1da6 --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/reftest.list @@ -0,0 +1,26 @@ +== tall--contain--height.html ref-tall-empty.html +== tall--contain--width.html ref-tall-empty.html +== wide--contain--height.html ref-wide-empty.html +== wide--contain--width.html ref-wide-empty.html + +# These tests fail because of integer overflow; see bug 894555. +fails == tall--cover--height.html ref-tall-lime.html +fails == tall--cover--width.html ref-tall-lime.html +fails == wide--cover--height.html ref-wide-lime.html +fails == wide--cover--width.html ref-wide-lime.html + +== zero-height-ratio-contain.html ref-tall-empty.html +== zero-height-ratio-cover.html ref-tall-empty.html +== zero-height-ratio-auto-auto.html ref-tall-empty.html +== zero-height-ratio-auto-5px.html ref-tall-empty.html +== zero-height-ratio-5px-auto.html ref-tall-empty.html +== zero-width-ratio-contain.html ref-tall-empty.html +== zero-width-ratio-cover.html ref-tall-empty.html +== zero-width-ratio-auto-auto.html ref-tall-empty.html +== zero-width-ratio-auto-5px.html ref-tall-empty.html +== zero-width-ratio-5px-auto.html ref-tall-empty.html +== zero-ratio-no-dimensions-contain.html ref-tall-empty.html +== zero-ratio-no-dimensions-cover.html ref-tall-empty.html +== zero-ratio-no-dimensions-auto-5px.html ref-tall-empty.html +== zero-ratio-no-dimensions-5px-auto.html ref-tall-empty.html +== zero-ratio-no-dimensions-auto-auto.html ref-tall-empty.html diff --git a/layout/reftests/backgrounds/vector/empty/tall--contain--height.html b/layout/reftests/backgrounds/vector/empty/tall--contain--height.html new file mode 100644 index 0000000000..8c0d38a301 --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/tall--contain--height.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: contain; for nonpercent-width-omitted-height-extreme-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-omitted-height-extreme-viewbox.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/empty/tall--contain--width.html b/layout/reftests/backgrounds/vector/empty/tall--contain--width.html new file mode 100644 index 0000000000..2fe4ac8d83 --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/tall--contain--width.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: contain; for omitted-width-nonpercent-height-extreme-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-nonpercent-height-extreme-viewbox.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/empty/tall--cover--height.html b/layout/reftests/backgrounds/vector/empty/tall--cover--height.html new file mode 100644 index 0000000000..be40ed2e8c --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/tall--cover--height.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: cover; for nonpercent-width-omitted-height-extreme-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-omitted-height-extreme-viewbox.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/empty/tall--cover--width.html b/layout/reftests/backgrounds/vector/empty/tall--cover--width.html new file mode 100644 index 0000000000..e4fea72c9b --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/tall--cover--width.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: cover; for omitted-width-nonpercent-height-extreme-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-nonpercent-height-extreme-viewbox.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/empty/wide--contain--height.html b/layout/reftests/backgrounds/vector/empty/wide--contain--height.html new file mode 100644 index 0000000000..e81082f106 --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/wide--contain--height.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: contain; for nonpercent-width-omitted-height-extreme-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-omitted-height-extreme-viewbox.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/empty/wide--contain--width.html b/layout/reftests/backgrounds/vector/empty/wide--contain--width.html new file mode 100644 index 0000000000..2b88a018c9 --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/wide--contain--width.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: contain; for omitted-width-nonpercent-height-extreme-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-nonpercent-height-extreme-viewbox.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/empty/wide--cover--height.html b/layout/reftests/backgrounds/vector/empty/wide--cover--height.html new file mode 100644 index 0000000000..7b6c323e41 --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/wide--cover--height.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: cover; for nonpercent-width-omitted-height-extreme-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-omitted-height-extreme-viewbox.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/empty/wide--cover--width.html b/layout/reftests/backgrounds/vector/empty/wide--cover--width.html new file mode 100644 index 0000000000..beb516db31 --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/wide--cover--width.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: cover; for omitted-width-nonpercent-height-extreme-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-nonpercent-height-extreme-viewbox.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/empty/zero-height-ratio-5px-auto.html b/layout/reftests/backgrounds/vector/empty/zero-height-ratio-5px-auto.html new file mode 100644 index 0000000000..059a075fdc --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/zero-height-ratio-5px-auto.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>zero height ratio, 5px auto</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(intrinsic-ratio-zero-height.svg); + background-repeat: no-repeat; + background-size: 5px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/empty/zero-height-ratio-auto-5px.html b/layout/reftests/backgrounds/vector/empty/zero-height-ratio-auto-5px.html new file mode 100644 index 0000000000..99a0b070cd --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/zero-height-ratio-auto-5px.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>zero height ratio, auto 5px</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(intrinsic-ratio-zero-height.svg); + background-repeat: no-repeat; + background-size: auto 5px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/empty/zero-height-ratio-auto-auto.html b/layout/reftests/backgrounds/vector/empty/zero-height-ratio-auto-auto.html new file mode 100644 index 0000000000..82d34bfee0 --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/zero-height-ratio-auto-auto.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>zero height ratio, auto auto</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(intrinsic-ratio-zero-height.svg); + background-repeat: no-repeat; + background-size: auto auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/empty/zero-height-ratio-contain.html b/layout/reftests/backgrounds/vector/empty/zero-height-ratio-contain.html new file mode 100644 index 0000000000..caf6c57d6d --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/zero-height-ratio-contain.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>zero height ratio, contain</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(intrinsic-ratio-zero-height.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/empty/zero-height-ratio-cover.html b/layout/reftests/backgrounds/vector/empty/zero-height-ratio-cover.html new file mode 100644 index 0000000000..a34dd61648 --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/zero-height-ratio-cover.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>zero height ratio, cover</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(intrinsic-ratio-zero-height.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-5px-auto.html b/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-5px-auto.html new file mode 100644 index 0000000000..2581e299b8 --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-5px-auto.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>zero ratio, no dimensions, 5px auto</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(intrinsic-ratio-no-dimensions.svg); + background-repeat: no-repeat; + background-size: 5px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-auto-5px.html b/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-auto-5px.html new file mode 100644 index 0000000000..4198c9d06d --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-auto-5px.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>zero ratio, no dimensions, auto 5px</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(intrinsic-ratio-no-dimensions.svg); + background-repeat: no-repeat; + background-size: auto 5px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-auto-auto.html b/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-auto-auto.html new file mode 100644 index 0000000000..85c20fd1e3 --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-auto-auto.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>zero ratio, no dimensions, auto auto</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(intrinsic-ratio-no-dimensions.svg); + background-repeat: no-repeat; + background-size: auto auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-contain.html b/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-contain.html new file mode 100644 index 0000000000..fa62a25316 --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-contain.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>zero ratio, no dimensions, contain</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(intrinsic-ratio-no-dimensions.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-cover.html b/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-cover.html new file mode 100644 index 0000000000..771269e2cb --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/zero-ratio-no-dimensions-cover.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>zero ratio, no dimensions, cover</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(intrinsic-ratio-no-dimensions.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/empty/zero-width-ratio-5px-auto.html b/layout/reftests/backgrounds/vector/empty/zero-width-ratio-5px-auto.html new file mode 100644 index 0000000000..675e75b396 --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/zero-width-ratio-5px-auto.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>zero height ratio, 5px auto</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(intrinsic-ratio-zero-width.svg); + background-repeat: no-repeat; + background-size: 5px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/empty/zero-width-ratio-auto-5px.html b/layout/reftests/backgrounds/vector/empty/zero-width-ratio-auto-5px.html new file mode 100644 index 0000000000..c16d11df76 --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/zero-width-ratio-auto-5px.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>zero height ratio, auto 5px</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(intrinsic-ratio-zero-width.svg); + background-repeat: no-repeat; + background-size: auto 5px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/empty/zero-width-ratio-auto-auto.html b/layout/reftests/backgrounds/vector/empty/zero-width-ratio-auto-auto.html new file mode 100644 index 0000000000..78a7327ab1 --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/zero-width-ratio-auto-auto.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>zero width ratio, auto auto</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(intrinsic-ratio-zero-width.svg); + background-repeat: no-repeat; + background-size: auto auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/empty/zero-width-ratio-contain.html b/layout/reftests/backgrounds/vector/empty/zero-width-ratio-contain.html new file mode 100644 index 0000000000..5604983772 --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/zero-width-ratio-contain.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>zero width ratio, contain</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(intrinsic-ratio-zero-width.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/empty/zero-width-ratio-cover.html b/layout/reftests/backgrounds/vector/empty/zero-width-ratio-cover.html new file mode 100644 index 0000000000..a1e6c52f4d --- /dev/null +++ b/layout/reftests/backgrounds/vector/empty/zero-width-ratio-cover.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>zero width ratio, cover</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(intrinsic-ratio-zero-width.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/no-aspect-ratio-normal.html b/layout/reftests/backgrounds/vector/no-aspect-ratio-normal.html new file mode 100644 index 0000000000..72140a91af --- /dev/null +++ b/layout/reftests/backgrounds/vector/no-aspect-ratio-normal.html @@ -0,0 +1,28 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>32px background positioning area size; 32px 32px background-size; for omitted-width-omitted-height-viewbox-no-preserve.svg</title>
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+#inner
+{
+ width: 32px;
+ height: 32px;
+ background-image: url(omitted-width-omitted-height-viewbox-no-preserve.svg);
+ background-repeat: no-repeat;
+ background-size: 32px 32px;
+}
+ </style>
+</head>
+<body>
+<div id="inner"></div>
+</body>
+</html>
\ No newline at end of file diff --git a/layout/reftests/backgrounds/vector/no-aspect-ratio-wide.html b/layout/reftests/backgrounds/vector/no-aspect-ratio-wide.html new file mode 100644 index 0000000000..fd110f617a --- /dev/null +++ b/layout/reftests/backgrounds/vector/no-aspect-ratio-wide.html @@ -0,0 +1,28 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>wide background positioning area size; 32px 32px 32px 32px background-size; for omitted-width-omitted-height-viewbox-no-preserve.svg</title>
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" />
+ <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" />
+ <meta name="flags" content="svg" />
+ <style type="text/css">
+#inner
+{
+ width: 640px;
+ height: 32px;
+ background-image: url(omitted-width-omitted-height-viewbox-no-preserve.svg);
+ background-repeat: no-repeat;
+ background-size: 32px 32px;
+}
+ </style>
+</head>
+<body>
+<div id="inner"></div>
+</body>
+</html>
\ No newline at end of file diff --git a/layout/reftests/backgrounds/vector/nonpercent-width-nonpercent-height-viewbox.svg b/layout/reftests/backgrounds/vector/nonpercent-width-nonpercent-height-viewbox.svg new file mode 100644 index 0000000000..9014ad5bf6 --- /dev/null +++ b/layout/reftests/backgrounds/vector/nonpercent-width-nonpercent-height-viewbox.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="8px" height="32px" + viewBox="0 0 4 64" + preserveAspectRatio="none"> + <title>Image with non-percent width, non-percent height, viewbox</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/layout/reftests/backgrounds/vector/nonpercent-width-nonpercent-height.svg b/layout/reftests/backgrounds/vector/nonpercent-width-nonpercent-height.svg new file mode 100644 index 0000000000..60f9e724e0 --- /dev/null +++ b/layout/reftests/backgrounds/vector/nonpercent-width-nonpercent-height.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="8px" height="32px"> + <title>Image with non-percentage dimensions</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/layout/reftests/backgrounds/vector/nonpercent-width-omitted-height-viewbox.svg b/layout/reftests/backgrounds/vector/nonpercent-width-omitted-height-viewbox.svg new file mode 100644 index 0000000000..8c794b6139 --- /dev/null +++ b/layout/reftests/backgrounds/vector/nonpercent-width-omitted-height-viewbox.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="8px" + viewBox="0 0 4 64" + preserveAspectRatio="none"> + <title>Image with non-percent width, omitted height, viewbox</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/layout/reftests/backgrounds/vector/nonpercent-width-omitted-height.svg b/layout/reftests/backgrounds/vector/nonpercent-width-omitted-height.svg new file mode 100644 index 0000000000..b506e625db --- /dev/null +++ b/layout/reftests/backgrounds/vector/nonpercent-width-omitted-height.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="8px"> + <title>Image with non-percent width, omitted height</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/layout/reftests/backgrounds/vector/nonpercent-width-percent-height-viewbox.svg b/layout/reftests/backgrounds/vector/nonpercent-width-percent-height-viewbox.svg new file mode 100644 index 0000000000..3a114ccc54 --- /dev/null +++ b/layout/reftests/backgrounds/vector/nonpercent-width-percent-height-viewbox.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="8px" height="50%" + viewBox="0 0 4 64" + preserveAspectRatio="none"> + <title>Image with non-percent width, percent height, viewbox</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/layout/reftests/backgrounds/vector/nonpercent-width-percent-height.svg b/layout/reftests/backgrounds/vector/nonpercent-width-percent-height.svg new file mode 100644 index 0000000000..398291e3b7 --- /dev/null +++ b/layout/reftests/backgrounds/vector/nonpercent-width-percent-height.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="8px" height="50%"> + <title>Image with non-percent width, percent height</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/layout/reftests/backgrounds/vector/omitted-width-nonpercent-height-viewbox.svg b/layout/reftests/backgrounds/vector/omitted-width-nonpercent-height-viewbox.svg new file mode 100644 index 0000000000..ebf4d94ec4 --- /dev/null +++ b/layout/reftests/backgrounds/vector/omitted-width-nonpercent-height-viewbox.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + height="32px" + viewBox="0 0 4 64" + preserveAspectRatio="none"> + <title>Image with omitted width, non-percent height, viewbox</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/layout/reftests/backgrounds/vector/omitted-width-nonpercent-height.svg b/layout/reftests/backgrounds/vector/omitted-width-nonpercent-height.svg new file mode 100644 index 0000000000..b6985ad010 --- /dev/null +++ b/layout/reftests/backgrounds/vector/omitted-width-nonpercent-height.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + height="32px"> + <title>Image with omitted width, non-percent height</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/layout/reftests/backgrounds/vector/omitted-width-omitted-height-viewbox-no-preserve.svg b/layout/reftests/backgrounds/vector/omitted-width-omitted-height-viewbox-no-preserve.svg new file mode 100644 index 0000000000..9acae51aa8 --- /dev/null +++ b/layout/reftests/backgrounds/vector/omitted-width-omitted-height-viewbox-no-preserve.svg @@ -0,0 +1,10 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 64 64">
+ <title>Image with omitted width, omitted height, viewbox, don't preserve aspect ratio</title>
+ <rect y="0" width="100%" height="50%" fill="lime"/>
+ <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/omitted-width-omitted-height-viewbox.svg b/layout/reftests/backgrounds/vector/omitted-width-omitted-height-viewbox.svg new file mode 100644 index 0000000000..bcea95cdc9 --- /dev/null +++ b/layout/reftests/backgrounds/vector/omitted-width-omitted-height-viewbox.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 4 64" + preserveAspectRatio="none"> + <title>Image with omitted width, omitted height, viewbox</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/layout/reftests/backgrounds/vector/omitted-width-omitted-height.svg b/layout/reftests/backgrounds/vector/omitted-width-omitted-height.svg new file mode 100644 index 0000000000..d086213878 --- /dev/null +++ b/layout/reftests/backgrounds/vector/omitted-width-omitted-height.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Image with omitted width, omitted height</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/layout/reftests/backgrounds/vector/omitted-width-percent-height-viewbox.svg b/layout/reftests/backgrounds/vector/omitted-width-percent-height-viewbox.svg new file mode 100644 index 0000000000..265c26a9a8 --- /dev/null +++ b/layout/reftests/backgrounds/vector/omitted-width-percent-height-viewbox.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + height="50%" + viewBox="0 0 4 64" + preserveAspectRatio="none"> + <title>Image with omitted width, percent height, viewbox</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/layout/reftests/backgrounds/vector/omitted-width-percent-height.svg b/layout/reftests/backgrounds/vector/omitted-width-percent-height.svg new file mode 100644 index 0000000000..b44560175d --- /dev/null +++ b/layout/reftests/backgrounds/vector/omitted-width-percent-height.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + height="50%"> + <title>Image with omitted width, percent height</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/layout/reftests/backgrounds/vector/percent-width-nonpercent-height-viewbox.svg b/layout/reftests/backgrounds/vector/percent-width-nonpercent-height-viewbox.svg new file mode 100644 index 0000000000..645c4c0244 --- /dev/null +++ b/layout/reftests/backgrounds/vector/percent-width-nonpercent-height-viewbox.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="50%" height="32px" + viewBox="0 0 4 64" + preserveAspectRatio="none"> + <title>Image with percent width, non-percent height, viewbox</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/layout/reftests/backgrounds/vector/percent-width-nonpercent-height.svg b/layout/reftests/backgrounds/vector/percent-width-nonpercent-height.svg new file mode 100644 index 0000000000..e733115019 --- /dev/null +++ b/layout/reftests/backgrounds/vector/percent-width-nonpercent-height.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="50%" height="32px"> + <title>Image with percent width, non-percent height</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/layout/reftests/backgrounds/vector/percent-width-omitted-height-viewbox.svg b/layout/reftests/backgrounds/vector/percent-width-omitted-height-viewbox.svg new file mode 100644 index 0000000000..ef0a467678 --- /dev/null +++ b/layout/reftests/backgrounds/vector/percent-width-omitted-height-viewbox.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="50%" + viewBox="0 0 4 64" + preserveAspectRatio="none"> + <title>Image with percent width, omitted height, viewbox</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/layout/reftests/backgrounds/vector/percent-width-omitted-height.svg b/layout/reftests/backgrounds/vector/percent-width-omitted-height.svg new file mode 100644 index 0000000000..76e9cef3c6 --- /dev/null +++ b/layout/reftests/backgrounds/vector/percent-width-omitted-height.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="50%"> + <title>Image with percent width, omitted height</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/layout/reftests/backgrounds/vector/percent-width-percent-height-viewbox.svg b/layout/reftests/backgrounds/vector/percent-width-percent-height-viewbox.svg new file mode 100644 index 0000000000..be23fe2d2d --- /dev/null +++ b/layout/reftests/backgrounds/vector/percent-width-percent-height-viewbox.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="25%" height="50%" + viewBox="0 0 4 64" + preserveAspectRatio="none"> + <title>Image with percent width, percent height, viewbox</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/layout/reftests/backgrounds/vector/percent-width-percent-height.svg b/layout/reftests/backgrounds/vector/percent-width-percent-height.svg new file mode 100644 index 0000000000..db197fb304 --- /dev/null +++ b/layout/reftests/backgrounds/vector/percent-width-percent-height.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="25%" height="50%"> + <title>Image with percent width, percent height</title> + <rect y="0" width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="aqua"/> +</svg> diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime192x384-aqua192x384.html b/layout/reftests/backgrounds/vector/ref-tall-lime192x384-aqua192x384.html new file mode 100644 index 0000000000..c6e0f556af --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-tall-lime192x384-aqua192x384.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall reference, 192x384 lime, 192x384 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 192px; height: 768px; +} +#inner > div { width: 192px; height: 384px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime256x16-aqua256x16.html b/layout/reftests/backgrounds/vector/ref-tall-lime256x16-aqua256x16.html new file mode 100644 index 0000000000..8e31125cc4 --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-tall-lime256x16-aqua256x16.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall reference, 256x16 lime, 256x16 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 256px; height: 32px; +} +#inner > div { width: 256px; height: 16px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime256x384-aqua256x384.html b/layout/reftests/backgrounds/vector/ref-tall-lime256x384-aqua256x384.html new file mode 100644 index 0000000000..1060860355 --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-tall-lime256x384-aqua256x384.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall reference, 256x384 lime, 256x384 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 256px; height: 768px; +} +#inner > div { width: 256px; height: 384px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime256x512-aqua256x256.html b/layout/reftests/backgrounds/vector/ref-tall-lime256x512-aqua256x256.html new file mode 100644 index 0000000000..9b67682cd7 --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-tall-lime256x512-aqua256x256.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall reference, 256x512 lime, 256x256 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 256px; height: 768px; +} +#inner > div { width: 256px; } +#top { background-color: lime; height: 512px; } +#bottom { background-color: aqua; height: 256px; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime256x768.html b/layout/reftests/backgrounds/vector/ref-tall-lime256x768.html new file mode 100644 index 0000000000..792c7d7c06 --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-tall-lime256x768.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall reference, 256x512 lime, 256x256 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +#outer +{ + width: 256px; height: 768px; + background-color: lime; + border: 1px solid black; +} + </style> +</head> +<body> +<div id="outer"></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime2x16-aqua2x16.html b/layout/reftests/backgrounds/vector/ref-tall-lime2x16-aqua2x16.html new file mode 100644 index 0000000000..d95edcda43 --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-tall-lime2x16-aqua2x16.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall reference, 2x16 lime, 2x16 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 2px; height: 32px; +} +#inner > div { width: 2px; height: 16px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime32x128-aqua32x128.html b/layout/reftests/backgrounds/vector/ref-tall-lime32x128-aqua32x128.html new file mode 100644 index 0000000000..dbd1e1bfde --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-tall-lime32x128-aqua32x128.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall reference, 32x128 lime, 32x128 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 32px; height: 256px; +} +#inner > div { width: 32px; height: 128px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime32x16-aqua32x16.html b/layout/reftests/backgrounds/vector/ref-tall-lime32x16-aqua32x16.html new file mode 100644 index 0000000000..00316e0749 --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-tall-lime32x16-aqua32x16.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall reference, 32x16 lime, 32x16 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 32px; height: 32px; +} +#inner > div { width: 32px; height: 16px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime32x256-aqua32x256.html b/layout/reftests/backgrounds/vector/ref-tall-lime32x256-aqua32x256.html new file mode 100644 index 0000000000..c4d9ab0cf8 --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-tall-lime32x256-aqua32x256.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall reference, 32x256 lime, 32x256 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 32px; height: 512px; +} +#inner > div { width: 32px; height: 256px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime32x384-aqua32x384.html b/layout/reftests/backgrounds/vector/ref-tall-lime32x384-aqua32x384.html new file mode 100644 index 0000000000..aa78e40a7c --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-tall-lime32x384-aqua32x384.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall reference, 32x384 lime, 32x384 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 32px; height: 768px; +} +#inner > div { width: 32px; height: 384px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime32x64-aqua32x64.html b/layout/reftests/backgrounds/vector/ref-tall-lime32x64-aqua32x64.html new file mode 100644 index 0000000000..f7ffadb7b7 --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-tall-lime32x64-aqua32x64.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall reference, 32x64 lime, 32x64 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 32px; height: 128px; +} +#inner > div { width: 32px; height: 64px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime48x384-aqua48x384.html b/layout/reftests/backgrounds/vector/ref-tall-lime48x384-aqua48x384.html new file mode 100644 index 0000000000..2153798ff6 --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-tall-lime48x384-aqua48x384.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall reference, 48x384 lime, 48x384 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 48px; height: 768px; +} +#inner > div { width: 48px; height: 384px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime4x16-aqua4x16.html b/layout/reftests/backgrounds/vector/ref-tall-lime4x16-aqua4x16.html new file mode 100644 index 0000000000..fc9b39883e --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-tall-lime4x16-aqua4x16.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall reference, 4x16 lime, 4x16 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 4px; height: 32px; +} +#inner > div { width: 4px; height: 16px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime8x16-aqua8x16.html b/layout/reftests/backgrounds/vector/ref-tall-lime8x16-aqua8x16.html new file mode 100644 index 0000000000..2275861a03 --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-tall-lime8x16-aqua8x16.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall reference, 8x16 lime, 8x16 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 8px; height: 32px; +} +#inner > div { width: 8px; height: 16px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime8x32-aqua8x32.html b/layout/reftests/backgrounds/vector/ref-tall-lime8x32-aqua8x32.html new file mode 100644 index 0000000000..804a16dd22 --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-tall-lime8x32-aqua8x32.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall reference, 8x32 lime, 8x32 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 8px; height: 64px; +} +#inner > div { width: 8px; height: 32px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime8x384-aqua8x384.html b/layout/reftests/backgrounds/vector/ref-tall-lime8x384-aqua8x384.html new file mode 100644 index 0000000000..c9ce995ff5 --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-tall-lime8x384-aqua8x384.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall reference, 8x384 lime, 8x384 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 8px; height: 768px; +} +#inner > div { width: 8px; height: 384px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime8x64-aqua8x64.html b/layout/reftests/backgrounds/vector/ref-tall-lime8x64-aqua8x64.html new file mode 100644 index 0000000000..8c80b0d431 --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-tall-lime8x64-aqua8x64.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall reference, 8x64 lime, 8x64 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 8px; height: 128px; +} +#inner > div { width: 8px; height: 64px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime12x128-aqua12x128.html b/layout/reftests/backgrounds/vector/ref-wide-lime12x128-aqua12x128.html new file mode 100644 index 0000000000..dbb2549ee6 --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-wide-lime12x128-aqua12x128.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide reference, 12x128 lime, 12x128 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 12px; height: 256px; +} +#inner > div { width: 12px; height: 128px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime12x16-aqua12x16.html b/layout/reftests/backgrounds/vector/ref-wide-lime12x16-aqua12x16.html new file mode 100644 index 0000000000..3ac4d56eaa --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-wide-lime12x16-aqua12x16.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide reference, 12x16 lime, 12x16 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 12px; height: 32px; +} +#inner > div { width: 12px; height: 16px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime12x24-aqua12x24.html b/layout/reftests/backgrounds/vector/ref-wide-lime12x24-aqua12x24.html new file mode 100644 index 0000000000..72fd8a2632 --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-wide-lime12x24-aqua12x24.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide reference, 12x24 lime, 12x24 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 12px; height: 48px; +} +#inner > div { width: 12px; height: 24px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime12x96-aqua12x96.html b/layout/reftests/backgrounds/vector/ref-wide-lime12x96-aqua12x96.html new file mode 100644 index 0000000000..f7640c61d5 --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-wide-lime12x96-aqua12x96.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide reference, 12x96 lime, 12x96 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 12px; height: 192px; +} +#inner > div { width: 12px; height: 96px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime16x128-aqua16x128.html b/layout/reftests/backgrounds/vector/ref-wide-lime16x128-aqua16x128.html new file mode 100644 index 0000000000..d19a76d100 --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-wide-lime16x128-aqua16x128.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide reference, 16x128 lime, 16x128 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 16px; height: 256px; +} +#inner > div { width: 16px; height: 128px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime2x16-aqua2x16.html b/layout/reftests/backgrounds/vector/ref-wide-lime2x16-aqua2x16.html new file mode 100644 index 0000000000..7db5654de3 --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-wide-lime2x16-aqua2x16.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide reference, 2x16 lime, 2x16 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 2px; height: 32px; +} +#inner > div { width: 2px; height: 16px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime64x128-aqua64x128.html b/layout/reftests/backgrounds/vector/ref-wide-lime64x128-aqua64x128.html new file mode 100644 index 0000000000..9bfd66385e --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-wide-lime64x128-aqua64x128.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide reference, 64x128 lime, 64x128 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 64px; height: 256px; +} +#inner > div { width: 64px; height: 128px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime768x128-aqua768x128.html b/layout/reftests/backgrounds/vector/ref-wide-lime768x128-aqua768x128.html new file mode 100644 index 0000000000..68de63ce7a --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-wide-lime768x128-aqua768x128.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide reference, 768x128 lime, 768x128 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 768px; height: 256px; +} +#inner > div { width: 768px; height: 128px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime768x16-aqua768x16.html b/layout/reftests/backgrounds/vector/ref-wide-lime768x16-aqua768x16.html new file mode 100644 index 0000000000..ed521f5bac --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-wide-lime768x16-aqua768x16.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide reference, 768x16 lime, 768x16 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 768px; height: 32px; +} +#inner > div { width: 768px; height: 16px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime768x256.html b/layout/reftests/backgrounds/vector/ref-wide-lime768x256.html new file mode 100644 index 0000000000..137d4f2cdd --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-wide-lime768x256.html @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide reference, 768x256 lime</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 768px; height: 256px; + background-color: lime; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime8x128-aqua8x128.html b/layout/reftests/backgrounds/vector/ref-wide-lime8x128-aqua8x128.html new file mode 100644 index 0000000000..7328e5b121 --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-wide-lime8x128-aqua8x128.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide reference, 8x128 lime, 8x128 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 8px; height: 256px; +} +#inner > div { width: 8px; height: 128px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime8x16-aqua8x16.html b/layout/reftests/backgrounds/vector/ref-wide-lime8x16-aqua8x16.html new file mode 100644 index 0000000000..ee84895643 --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-wide-lime8x16-aqua8x16.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide reference, 8x16 lime, 8x16 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 8px; height: 32px; +} +#inner > div { width: 8px; height: 16px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime8x64-aqua8x64.html b/layout/reftests/backgrounds/vector/ref-wide-lime8x64-aqua8x64.html new file mode 100644 index 0000000000..069617c2b3 --- /dev/null +++ b/layout/reftests/backgrounds/vector/ref-wide-lime8x64-aqua8x64.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide reference, 8x64 lime, 8x64 aqua</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + width: 8px; height: 128px; +} +#inner > div { width: 8px; height: 64px; } +#top { background-color: lime; } +#bottom { background-color: aqua; } + </style> +</head> +<body> +<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/reftest.list b/layout/reftests/backgrounds/vector/reftest.list new file mode 100644 index 0000000000..2ed940449d --- /dev/null +++ b/layout/reftests/backgrounds/vector/reftest.list @@ -0,0 +1,204 @@ +include empty/reftest.list + +################################################################################ +# For reference (although the wide--32px-auto* tests/names were changed to +# avoid viewBox-directed scaling to make the scaled height less than the wide- +# tests height): +# +# for ORIENTATION in tall wide; do for SIZE in 32px-auto auto-32px auto contain cover; do for VIMAGE in *.svg; do cat template.html | sed -e "s/SIZE/$(echo $SIZE | sed -e 's/-/ /')/g" | sed -e "s/VIMAGE/$VIMAGE/g" | sed -e "s/TALLWIDE/$ORIENTATION/g" | sed -e "s/ORIENTATION/$(if [ "$ORIENTATION" = "tall" ]; then echo 'width: 256px; height: 768px'; else echo 'width: 768px; height: 256px'; fi)/g" > $ORIENTATION--$SIZE--$(echo $VIMAGE | sed -e 's/.svg//').html; echo "== $ORIENTATION--$SIZE--$(echo $VIMAGE | sed -e 's/.svg//').html ###" >> reftest.list; done; echo >> reftest.list; done; done +# +################################################################################ + +== tall--32px-auto--nonpercent-width-nonpercent-height.html ref-tall-lime32x64-aqua32x64.html +== tall--32px-auto--nonpercent-width-nonpercent-height-viewbox.html ref-tall-lime32x64-aqua32x64.html +== tall--32px-auto--nonpercent-width-omitted-height.html ref-tall-lime32x384-aqua32x384.html +== tall--32px-auto--nonpercent-width-omitted-height-viewbox.html ref-tall-lime32x256-aqua32x256.html +== tall--32px-auto--nonpercent-width-percent-height.html ref-tall-lime32x384-aqua32x384.html +== tall--32px-auto--nonpercent-width-percent-height-viewbox.html ref-tall-lime32x256-aqua32x256.html +== tall--32px-auto--omitted-width-nonpercent-height.html ref-tall-lime32x16-aqua32x16.html +== tall--32px-auto--omitted-width-nonpercent-height-viewbox.html ref-tall-lime32x256-aqua32x256.html +== tall--32px-auto--omitted-width-omitted-height.html ref-tall-lime32x384-aqua32x384.html +== tall--32px-auto--omitted-width-omitted-height-viewbox.html ref-tall-lime32x256-aqua32x256.html +== tall--32px-auto--omitted-width-percent-height.html ref-tall-lime32x384-aqua32x384.html +== tall--32px-auto--omitted-width-percent-height-viewbox.html ref-tall-lime32x256-aqua32x256.html +== tall--32px-auto--percent-width-nonpercent-height.html ref-tall-lime32x16-aqua32x16.html +== tall--32px-auto--percent-width-nonpercent-height-viewbox.html ref-tall-lime32x256-aqua32x256.html +== tall--32px-auto--percent-width-omitted-height.html ref-tall-lime32x384-aqua32x384.html +== tall--32px-auto--percent-width-omitted-height-viewbox.html ref-tall-lime32x256-aqua32x256.html +== tall--32px-auto--percent-width-percent-height.html ref-tall-lime32x384-aqua32x384.html +== tall--32px-auto--percent-width-percent-height-viewbox.html ref-tall-lime32x256-aqua32x256.html + +== tall--auto-32px--nonpercent-width-nonpercent-height.html ref-tall-lime8x16-aqua8x16.html +== tall--auto-32px--nonpercent-width-nonpercent-height-viewbox.html ref-tall-lime8x16-aqua8x16.html +== tall--auto-32px--nonpercent-width-omitted-height.html ref-tall-lime8x16-aqua8x16.html # bug 773482 +== tall--auto-32px--nonpercent-width-omitted-height-viewbox.html ref-tall-lime2x16-aqua2x16.html +== tall--auto-32px--nonpercent-width-percent-height.html ref-tall-lime8x16-aqua8x16.html +== tall--auto-32px--nonpercent-width-percent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html +== tall--auto-32px--omitted-width-nonpercent-height.html ref-tall-lime256x16-aqua256x16.html +== tall--auto-32px--omitted-width-nonpercent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html +== tall--auto-32px--omitted-width-omitted-height.html ref-tall-lime256x16-aqua256x16.html +== tall--auto-32px--omitted-width-omitted-height-viewbox.html ref-tall-lime2x16-aqua2x16.html +== tall--auto-32px--omitted-width-percent-height.html ref-tall-lime256x16-aqua256x16.html +== tall--auto-32px--omitted-width-percent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html +== tall--auto-32px--percent-width-nonpercent-height.html ref-tall-lime256x16-aqua256x16.html +== tall--auto-32px--percent-width-nonpercent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html +== tall--auto-32px--percent-width-omitted-height.html ref-tall-lime256x16-aqua256x16.html +== tall--auto-32px--percent-width-omitted-height-viewbox.html ref-tall-lime2x16-aqua2x16.html +== tall--auto-32px--percent-width-percent-height.html ref-tall-lime256x16-aqua256x16.html +== tall--auto-32px--percent-width-percent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html + +== tall--auto--nonpercent-width-nonpercent-height.html ref-tall-lime8x16-aqua8x16.html +== tall--auto--nonpercent-width-nonpercent-height-viewbox.html ref-tall-lime8x16-aqua8x16.html +== tall--auto--nonpercent-width-omitted-height.html ref-tall-lime8x384-aqua8x384.html +== tall--auto--nonpercent-width-omitted-height-viewbox.html ref-tall-lime8x64-aqua8x64.html +== tall--auto--nonpercent-width-percent-height.html ref-tall-lime8x384-aqua8x384.html +== tall--auto--nonpercent-width-percent-height-viewbox.html ref-tall-lime8x64-aqua8x64.html +== tall--auto--omitted-width-nonpercent-height.html ref-tall-lime256x16-aqua256x16.html +== tall--auto--omitted-width-nonpercent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html +== tall--auto--omitted-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html +== tall--auto--omitted-width-omitted-height-viewbox.html ref-tall-lime48x384-aqua48x384.html +== tall--auto--omitted-width-percent-height.html ref-tall-lime256x384-aqua256x384.html +== tall--auto--omitted-width-percent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html +== tall--auto--percent-width-nonpercent-height.html ref-tall-lime256x16-aqua256x16.html +== tall--auto--percent-width-nonpercent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html +== tall--auto--percent-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html +== tall--auto--percent-width-omitted-height-viewbox.html ref-tall-lime48x384-aqua48x384.html +== tall--auto--percent-width-percent-height.html ref-tall-lime256x384-aqua256x384.html +== tall--auto--percent-width-percent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html + +== tall--contain--nonpercent-width-nonpercent-height.html ref-tall-lime192x384-aqua192x384.html +== tall--contain--nonpercent-width-nonpercent-height-viewbox.html ref-tall-lime192x384-aqua192x384.html +== tall--contain--nonpercent-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html +== tall--contain--nonpercent-width-omitted-height-viewbox.html ref-tall-lime48x384-aqua48x384.html +== tall--contain--nonpercent-width-percent-height.html ref-tall-lime256x384-aqua256x384.html +== tall--contain--nonpercent-width-percent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html +== tall--contain--omitted-width-nonpercent-height.html ref-tall-lime256x384-aqua256x384.html +== tall--contain--omitted-width-nonpercent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html +== tall--contain--omitted-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html +== tall--contain--omitted-width-omitted-height-viewbox.html ref-tall-lime48x384-aqua48x384.html +== tall--contain--omitted-width-percent-height.html ref-tall-lime256x384-aqua256x384.html +== tall--contain--omitted-width-percent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html +== tall--contain--percent-width-nonpercent-height.html ref-tall-lime256x384-aqua256x384.html +== tall--contain--percent-width-nonpercent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html +== tall--contain--percent-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html +== tall--contain--percent-width-omitted-height-viewbox.html ref-tall-lime48x384-aqua48x384.html +== tall--contain--percent-width-percent-height.html ref-tall-lime256x384-aqua256x384.html +== tall--contain--percent-width-percent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html +== tall--cover--nonpercent-width-nonpercent-height.html ref-tall-lime256x512-aqua256x256.html +== tall--cover--nonpercent-width-nonpercent-height-viewbox.html ref-tall-lime256x512-aqua256x256.html +== tall--cover--nonpercent-width-nonpercent-height--crisp.html ref-tall-lime256x512-aqua256x256.html +== tall--cover--nonpercent-width-nonpercent-height-viewbox--crisp.html ref-tall-lime256x512-aqua256x256.html +== tall--cover--nonpercent-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html +== tall--cover--nonpercent-width-omitted-height-viewbox.html ref-tall-lime256x768.html +== tall--cover--nonpercent-width-percent-height.html ref-tall-lime256x384-aqua256x384.html +== tall--cover--nonpercent-width-percent-height-viewbox.html ref-tall-lime256x768.html +== tall--cover--omitted-width-nonpercent-height.html ref-tall-lime256x384-aqua256x384.html +== tall--cover--omitted-width-nonpercent-height-viewbox.html ref-tall-lime256x768.html +== tall--cover--omitted-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html +== tall--cover--omitted-width-omitted-height-viewbox.html ref-tall-lime256x768.html +== tall--cover--omitted-width-percent-height.html ref-tall-lime256x384-aqua256x384.html +== tall--cover--omitted-width-percent-height-viewbox.html ref-tall-lime256x768.html +== tall--cover--percent-width-nonpercent-height.html ref-tall-lime256x384-aqua256x384.html +== tall--cover--percent-width-nonpercent-height-viewbox.html ref-tall-lime256x768.html +== tall--cover--percent-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html +== tall--cover--percent-width-omitted-height-viewbox.html ref-tall-lime256x768.html +== tall--cover--percent-width-percent-height.html ref-tall-lime256x384-aqua256x384.html +== tall--cover--percent-width-percent-height-viewbox.html ref-tall-lime256x768.html + +== wide--12px-auto--nonpercent-width-nonpercent-height.html ref-wide-lime12x24-aqua12x24.html +== wide--12px-auto--nonpercent-width-nonpercent-height-viewbox.html ref-wide-lime12x24-aqua12x24.html +== wide--12px-auto--nonpercent-width-omitted-height.html ref-wide-lime12x128-aqua12x128.html +== wide--12px-auto--nonpercent-width-omitted-height-viewbox.html ref-wide-lime12x96-aqua12x96.html +== wide--12px-auto--nonpercent-width-percent-height.html ref-wide-lime12x128-aqua12x128.html +== wide--12px-auto--nonpercent-width-percent-height-viewbox.html ref-wide-lime12x96-aqua12x96.html +== wide--12px-auto--omitted-width-nonpercent-height.html ref-wide-lime12x16-aqua12x16.html +== wide--12px-auto--omitted-width-nonpercent-height-viewbox.html ref-wide-lime12x96-aqua12x96.html +== wide--12px-auto--omitted-width-omitted-height.html ref-wide-lime12x128-aqua12x128.html +== wide--12px-auto--omitted-width-omitted-height-viewbox.html ref-wide-lime12x96-aqua12x96.html +== wide--12px-auto--omitted-width-percent-height.html ref-wide-lime12x128-aqua12x128.html +== wide--12px-auto--omitted-width-percent-height-viewbox.html ref-wide-lime12x96-aqua12x96.html +== wide--12px-auto--percent-width-nonpercent-height.html ref-wide-lime12x16-aqua12x16.html +== wide--12px-auto--percent-width-nonpercent-height-viewbox.html ref-wide-lime12x96-aqua12x96.html +== wide--12px-auto--percent-width-omitted-height.html ref-wide-lime12x128-aqua12x128.html +== wide--12px-auto--percent-width-omitted-height-viewbox.html ref-wide-lime12x96-aqua12x96.html +== wide--12px-auto--percent-width-percent-height.html ref-wide-lime12x128-aqua12x128.html +== wide--12px-auto--percent-width-percent-height-viewbox.html ref-wide-lime12x96-aqua12x96.html + +== wide--auto-32px--nonpercent-width-nonpercent-height.html ref-wide-lime8x16-aqua8x16.html +== wide--auto-32px--nonpercent-width-nonpercent-height-viewbox.html ref-wide-lime8x16-aqua8x16.html +== wide--auto-32px--nonpercent-width-omitted-height.html ref-wide-lime8x16-aqua8x16.html +== wide--auto-32px--nonpercent-width-omitted-height-viewbox.html ref-wide-lime2x16-aqua2x16.html +== wide--auto-32px--nonpercent-width-percent-height.html ref-wide-lime8x16-aqua8x16.html +== wide--auto-32px--nonpercent-width-percent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html +== wide--auto-32px--omitted-width-nonpercent-height.html ref-wide-lime768x16-aqua768x16.html +== wide--auto-32px--omitted-width-nonpercent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html +== wide--auto-32px--omitted-width-omitted-height.html ref-wide-lime768x16-aqua768x16.html +== wide--auto-32px--omitted-width-omitted-height-viewbox.html ref-wide-lime2x16-aqua2x16.html +== wide--auto-32px--omitted-width-percent-height.html ref-wide-lime768x16-aqua768x16.html +== wide--auto-32px--omitted-width-percent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html +== wide--auto-32px--percent-width-nonpercent-height.html ref-wide-lime768x16-aqua768x16.html +== wide--auto-32px--percent-width-nonpercent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html +== wide--auto-32px--percent-width-omitted-height.html ref-wide-lime768x16-aqua768x16.html +== wide--auto-32px--percent-width-omitted-height-viewbox.html ref-wide-lime2x16-aqua2x16.html +== wide--auto-32px--percent-width-percent-height.html ref-wide-lime768x16-aqua768x16.html +== wide--auto-32px--percent-width-percent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html + +== wide--auto--nonpercent-width-nonpercent-height.html ref-wide-lime8x16-aqua8x16.html +== wide--auto--nonpercent-width-nonpercent-height-viewbox.html ref-wide-lime8x16-aqua8x16.html +== wide--auto--nonpercent-width-omitted-height.html ref-wide-lime8x128-aqua8x128.html +== wide--auto--nonpercent-width-omitted-height-viewbox.html ref-wide-lime8x64-aqua8x64.html +== wide--auto--nonpercent-width-percent-height.html ref-wide-lime8x128-aqua8x128.html +== wide--auto--nonpercent-width-percent-height-viewbox.html ref-wide-lime8x64-aqua8x64.html +== wide--auto--omitted-width-nonpercent-height.html ref-wide-lime768x16-aqua768x16.html +== wide--auto--omitted-width-nonpercent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html +== wide--auto--omitted-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html +== wide--auto--omitted-width-omitted-height-viewbox.html ref-wide-lime16x128-aqua16x128.html +== wide--auto--omitted-width-percent-height.html ref-wide-lime768x128-aqua768x128.html +== wide--auto--omitted-width-percent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html +== wide--auto--percent-width-nonpercent-height.html ref-wide-lime768x16-aqua768x16.html +== wide--auto--percent-width-nonpercent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html +== wide--auto--percent-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html +== wide--auto--percent-width-omitted-height-viewbox.html ref-wide-lime16x128-aqua16x128.html +== wide--auto--percent-width-percent-height.html ref-wide-lime768x128-aqua768x128.html +== wide--auto--percent-width-percent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html + +== wide--contain--nonpercent-width-nonpercent-height.html ref-wide-lime64x128-aqua64x128.html +== wide--contain--nonpercent-width-nonpercent-height-viewbox.html ref-wide-lime64x128-aqua64x128.html +== wide--contain--nonpercent-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html +== wide--contain--nonpercent-width-omitted-height-viewbox.html ref-wide-lime16x128-aqua16x128.html +== wide--contain--nonpercent-width-percent-height.html ref-wide-lime768x128-aqua768x128.html +== wide--contain--nonpercent-width-percent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html +== wide--contain--omitted-width-nonpercent-height.html ref-wide-lime768x128-aqua768x128.html +== wide--contain--omitted-width-nonpercent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html +== wide--contain--omitted-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html +== wide--contain--omitted-width-omitted-height-viewbox.html ref-wide-lime16x128-aqua16x128.html +== wide--contain--omitted-width-percent-height.html ref-wide-lime768x128-aqua768x128.html +== wide--contain--omitted-width-percent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html +== wide--contain--percent-width-nonpercent-height.html ref-wide-lime768x128-aqua768x128.html +== wide--contain--percent-width-nonpercent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html +== wide--contain--percent-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html +== wide--contain--percent-width-omitted-height-viewbox.html ref-wide-lime16x128-aqua16x128.html +== wide--contain--percent-width-percent-height.html ref-wide-lime768x128-aqua768x128.html +== wide--contain--percent-width-percent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html + +== wide--cover--nonpercent-width-nonpercent-height.html ref-wide-lime768x256.html +== wide--cover--nonpercent-width-nonpercent-height-viewbox.html ref-wide-lime768x256.html +== wide--cover--nonpercent-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html +== wide--cover--nonpercent-width-omitted-height-viewbox.html ref-wide-lime768x256.html +== wide--cover--nonpercent-width-percent-height.html ref-wide-lime768x128-aqua768x128.html +== wide--cover--nonpercent-width-percent-height-viewbox.html ref-wide-lime768x256.html +== wide--cover--omitted-width-nonpercent-height.html ref-wide-lime768x128-aqua768x128.html +== wide--cover--omitted-width-nonpercent-height-viewbox.html ref-wide-lime768x256.html +== wide--cover--omitted-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html +== wide--cover--omitted-width-omitted-height-viewbox.html ref-wide-lime768x256.html +== wide--cover--omitted-width-percent-height.html ref-wide-lime768x128-aqua768x128.html +== wide--cover--omitted-width-percent-height-viewbox.html ref-wide-lime768x256.html +== wide--cover--percent-width-nonpercent-height.html ref-wide-lime768x128-aqua768x128.html +== wide--cover--percent-width-nonpercent-height-viewbox.html ref-wide-lime768x256.html +== wide--cover--percent-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html +== wide--cover--percent-width-omitted-height-viewbox.html ref-wide-lime768x256.html +== wide--cover--percent-width-percent-height.html ref-wide-lime768x128-aqua768x128.html +== wide--cover--percent-width-percent-height-viewbox.html ref-wide-lime768x256.html + +== diagonal-percentage-vector-background.html diagonal-percentage-vector-background-ref.html +== no-aspect-ratio-wide.html no-aspect-ratio-normal.html diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..028bb9f772 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: 32px auto; for nonpercent-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: 32px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-nonpercent-height.html new file mode 100644 index 0000000000..a82322c011 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: 32px auto; for nonpercent-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: 32px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..9f6ff8ee74 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: 32px auto; for nonpercent-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: 32px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-omitted-height.html new file mode 100644 index 0000000000..3dc583a7fe --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: 32px auto; for nonpercent-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: 32px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..eb665efd30 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: 32px auto; for nonpercent-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: 32px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-percent-height.html new file mode 100644 index 0000000000..2f56317a1e --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: 32px auto; for nonpercent-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-percent-height.svg); + background-repeat: no-repeat; + background-size: 32px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..b7488305e5 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: 32px auto; for omitted-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: 32px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-nonpercent-height.html new file mode 100644 index 0000000000..9a666cc72d --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: 32px auto; for omitted-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: 32px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..79662459b4 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: 32px auto; for omitted-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: 32px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-omitted-height.html new file mode 100644 index 0000000000..4e7486893c --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: 32px auto; for omitted-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: 32px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-percent-height-viewbox.html new file mode 100644 index 0000000000..dc68871035 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: 32px auto; for omitted-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: 32px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-percent-height.html new file mode 100644 index 0000000000..947ec8df97 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: 32px auto; for omitted-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-percent-height.svg); + background-repeat: no-repeat; + background-size: 32px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..f07a9cfc6e --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: 32px auto; for percent-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: 32px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-nonpercent-height.html new file mode 100644 index 0000000000..98a4eeaa55 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: 32px auto; for percent-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: 32px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..bbd28a5582 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: 32px auto; for percent-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: 32px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-omitted-height.html new file mode 100644 index 0000000000..612030bd41 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: 32px auto; for percent-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: 32px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..597111ff61 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: 32px auto; for percent-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: 32px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-percent-height.html new file mode 100644 index 0000000000..8e8ba9e28e --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: 32px auto; for percent-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-percent-height.svg); + background-repeat: no-repeat; + background-size: 32px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..381442e9ff --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto; for nonpercent-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-nonpercent-height.html new file mode 100644 index 0000000000..535249a435 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto; for nonpercent-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..a21c0b59a3 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto; for nonpercent-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-omitted-height.html new file mode 100644 index 0000000000..613ceea0c5 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto; for nonpercent-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..704ed5ec0b --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto; for nonpercent-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-percent-height.html new file mode 100644 index 0000000000..b44f11eb45 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto; for nonpercent-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-percent-height.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..9dba9aa4c8 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto; for omitted-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-nonpercent-height.html new file mode 100644 index 0000000000..b1738e19d6 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto; for omitted-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..a33d5f226f --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto; for omitted-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-omitted-height.html new file mode 100644 index 0000000000..6bad152af0 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto; for omitted-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-percent-height-viewbox.html new file mode 100644 index 0000000000..e420967682 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto; for omitted-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-percent-height.html new file mode 100644 index 0000000000..0f47281a3d --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto; for omitted-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-percent-height.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto--percent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..16d3633526 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto--percent-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto; for percent-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--auto--percent-width-nonpercent-height.html new file mode 100644 index 0000000000..bcade3197f --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto--percent-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto; for percent-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto--percent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..570ec91cf7 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto--percent-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto; for percent-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--auto--percent-width-omitted-height.html new file mode 100644 index 0000000000..36566da208 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto--percent-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto; for percent-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto--percent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..c9bcaaabaf --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto--percent-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto; for percent-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--auto--percent-width-percent-height.html new file mode 100644 index 0000000000..784d15b630 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto--percent-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto; for percent-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-percent-height.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..32e6a6ab3b --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto 32px; for nonpercent-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-nonpercent-height.html new file mode 100644 index 0000000000..f07ca6aba0 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto 32px; for nonpercent-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..15061db707 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto 32px; for nonpercent-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-omitted-height.html new file mode 100644 index 0000000000..2a2e99a316 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto 32px; for nonpercent-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..6c7855d680 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto 32px; for nonpercent-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-percent-height.html new file mode 100644 index 0000000000..320ab0e01f --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto 32px; for nonpercent-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-percent-height.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..f0129ba215 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto 32px; for omitted-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-nonpercent-height.html new file mode 100644 index 0000000000..700142d5ab --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto 32px; for omitted-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..effa92b3f1 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto 32px; for omitted-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-omitted-height.html new file mode 100644 index 0000000000..5a5ce372d6 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto 32px; for omitted-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-percent-height-viewbox.html new file mode 100644 index 0000000000..a38195c7cd --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto 32px; for omitted-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-percent-height.html new file mode 100644 index 0000000000..0e3b7a1e49 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto 32px; for omitted-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-percent-height.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..d763734804 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto 32px; for percent-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-nonpercent-height.html new file mode 100644 index 0000000000..93d5bc2aa1 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto 32px; for percent-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..dec3128672 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto 32px; for percent-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-omitted-height.html new file mode 100644 index 0000000000..4f8e57da70 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto 32px; for percent-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..61c83a481b --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto 32px; for percent-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-percent-height.html new file mode 100644 index 0000000000..c1c35a8cdf --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: auto 32px; for percent-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-percent-height.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..35c5224568 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: contain; for nonpercent-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-nonpercent-height.html new file mode 100644 index 0000000000..0460b94298 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: contain; for nonpercent-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..1b9a541f99 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: contain; for nonpercent-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-omitted-height.html new file mode 100644 index 0000000000..95a5c1574c --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: contain; for nonpercent-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..3f8fdd2391 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: contain; for nonpercent-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-percent-height.html new file mode 100644 index 0000000000..4d365e0a55 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: contain; for nonpercent-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-percent-height.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--contain--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..82d9d3d944 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: contain; for omitted-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--contain--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-nonpercent-height.html new file mode 100644 index 0000000000..6fb7f6aa56 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: contain; for omitted-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--contain--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..0ddec7426d --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: contain; for omitted-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--contain--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-omitted-height.html new file mode 100644 index 0000000000..453aeca773 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: contain; for omitted-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--contain--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-percent-height-viewbox.html new file mode 100644 index 0000000000..e34d8703ed --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: contain; for omitted-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--contain--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-percent-height.html new file mode 100644 index 0000000000..986eb2b526 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: contain; for omitted-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-percent-height.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--contain--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--contain--percent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..bca47e5d17 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--contain--percent-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: contain; for percent-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--contain--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--contain--percent-width-nonpercent-height.html new file mode 100644 index 0000000000..56e0587a35 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--contain--percent-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: contain; for percent-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--contain--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--contain--percent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..c758225bc1 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--contain--percent-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: contain; for percent-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--contain--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--contain--percent-width-omitted-height.html new file mode 100644 index 0000000000..e454f28fc4 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--contain--percent-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: contain; for percent-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--contain--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--contain--percent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..0123410e32 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--contain--percent-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: contain; for percent-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--contain--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--contain--percent-width-percent-height.html new file mode 100644 index 0000000000..14c483e235 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--contain--percent-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: contain; for percent-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-percent-height.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height--crisp.html b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height--crisp.html new file mode 100644 index 0000000000..00356e83bf --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height--crisp.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: cover; for nonpercent-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: cover; + image-rendering: -moz-crisp-edges; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox--crisp.html b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox--crisp.html new file mode 100644 index 0000000000..71e9790ebf --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox--crisp.html @@ -0,0 +1,36 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: cover; for nonpercent-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: cover; + image-rendering: -moz-crisp-edges; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..7029cc7091 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox.html @@ -0,0 +1,36 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: cover; for nonpercent-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: cover; + /* XXX image-rendering: -moz-crisp-edges; */ +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height.html new file mode 100644 index 0000000000..3574bf501c --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: cover; for nonpercent-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: cover; + /* XXX image-rendering: -moz-crisp-edges; */ +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..a46ace1e65 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: cover; for nonpercent-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-omitted-height.html new file mode 100644 index 0000000000..38ff1e6d0c --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: cover; for nonpercent-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..f68cc62f9a --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: cover; for nonpercent-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-percent-height.html new file mode 100644 index 0000000000..87128908f8 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: cover; for nonpercent-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-percent-height.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--cover--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..b0be12e5f1 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: cover; for omitted-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--cover--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-nonpercent-height.html new file mode 100644 index 0000000000..a560625f83 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: cover; for omitted-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--cover--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..6d77c6844e --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: cover; for omitted-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--cover--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-omitted-height.html new file mode 100644 index 0000000000..e00cfed975 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: cover; for omitted-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--cover--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-percent-height-viewbox.html new file mode 100644 index 0000000000..fefb927752 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: cover; for omitted-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--cover--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-percent-height.html new file mode 100644 index 0000000000..c9b8006b4f --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: cover; for omitted-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-percent-height.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--cover--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--cover--percent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..8549f85b5e --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--cover--percent-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: cover; for percent-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--cover--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--cover--percent-width-nonpercent-height.html new file mode 100644 index 0000000000..7734a3b4fe --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--cover--percent-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: cover; for percent-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--cover--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--cover--percent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..2be708373e --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--cover--percent-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: cover; for percent-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--cover--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--cover--percent-width-omitted-height.html new file mode 100644 index 0000000000..1bd5b3cf24 --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--cover--percent-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: cover; for percent-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--cover--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--cover--percent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..e87ba6ba6f --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--cover--percent-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: cover; for percent-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/tall--cover--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--cover--percent-width-percent-height.html new file mode 100644 index 0000000000..4930568ebe --- /dev/null +++ b/layout/reftests/backgrounds/vector/tall--cover--percent-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>tall background-size: cover; for percent-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 256px; height: 768px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-percent-height.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/template.html b/layout/reftests/backgrounds/vector/template.html new file mode 100644 index 0000000000..65a4036367 --- /dev/null +++ b/layout/reftests/backgrounds/vector/template.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>TALLWIDE background-size: SIZE; for VIMAGE</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + ORIENTATION; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(VIMAGE); + background-repeat: no-repeat; + background-size: SIZE; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..3acb1471eb --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: 12px auto; for nonpercent-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: 12px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-nonpercent-height.html new file mode 100644 index 0000000000..c68bb126e2 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: 12px auto; for nonpercent-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: 12px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..5fac51f7a3 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: 12px auto; for nonpercent-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: 12px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-omitted-height.html new file mode 100644 index 0000000000..39139bf07d --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: 12px auto; for nonpercent-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: 12px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..2004537d59 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: 12px auto; for nonpercent-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: 12px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-percent-height.html new file mode 100644 index 0000000000..12421f6d69 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: 12px auto; for nonpercent-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-percent-height.svg); + background-repeat: no-repeat; + background-size: 12px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..a735c0cfd9 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: 12px auto; for omitted-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: 12px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-nonpercent-height.html new file mode 100644 index 0000000000..bc020f0fca --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: 12px auto; for omitted-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: 12px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..169e379948 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: 12px auto; for omitted-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: 12px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-omitted-height.html new file mode 100644 index 0000000000..684d18a175 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: 12px auto; for omitted-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: 12px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-percent-height-viewbox.html new file mode 100644 index 0000000000..c2f82c36e7 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: 12px auto; for omitted-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: 12px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-percent-height.html new file mode 100644 index 0000000000..6f3ddb69ac --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: 12px auto; for omitted-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-percent-height.svg); + background-repeat: no-repeat; + background-size: 12px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..0bc05e7306 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: 12px auto; for percent-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: 12px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-nonpercent-height.html new file mode 100644 index 0000000000..9b4b2acc76 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: 12px auto; for percent-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: 12px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..0c30c0b353 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: 12px auto; for percent-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: 12px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-omitted-height.html new file mode 100644 index 0000000000..cc873a55b3 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: 12px auto; for percent-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: 12px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..42614c4b55 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: 12px auto; for percent-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: 12px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-percent-height.html new file mode 100644 index 0000000000..e39b610933 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: 12px auto; for percent-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-percent-height.svg); + background-repeat: no-repeat; + background-size: 12px auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..1cd8d94c3f --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto; for nonpercent-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-nonpercent-height.html new file mode 100644 index 0000000000..08bd7f2564 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto; for nonpercent-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..71cf8f61ec --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto; for nonpercent-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-omitted-height.html new file mode 100644 index 0000000000..0ace95021a --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto; for nonpercent-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..e1f7f2618f --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto; for nonpercent-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-percent-height.html new file mode 100644 index 0000000000..18312be470 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto; for nonpercent-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-percent-height.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..f66416b17d --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto; for omitted-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-nonpercent-height.html new file mode 100644 index 0000000000..f6f2be7318 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto; for omitted-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..78f3a3a36c --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto; for omitted-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-omitted-height.html new file mode 100644 index 0000000000..83c76cd828 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto; for omitted-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-percent-height-viewbox.html new file mode 100644 index 0000000000..e04a81216b --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto; for omitted-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-percent-height.html new file mode 100644 index 0000000000..99a7cd2b04 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto; for omitted-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-percent-height.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto--percent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..4e5a077551 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto--percent-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto; for percent-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--auto--percent-width-nonpercent-height.html new file mode 100644 index 0000000000..355985de97 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto--percent-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto; for percent-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto--percent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..e259690333 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto--percent-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto; for percent-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--auto--percent-width-omitted-height.html new file mode 100644 index 0000000000..70471cd700 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto--percent-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto; for percent-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto--percent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..2aac967a96 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto--percent-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto; for percent-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--auto--percent-width-percent-height.html new file mode 100644 index 0000000000..7d119a3720 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto--percent-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto; for percent-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-percent-height.svg); + background-repeat: no-repeat; + background-size: auto; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..f8d3da2c32 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto 32px; for nonpercent-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-nonpercent-height.html new file mode 100644 index 0000000000..8bd16d110d --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto 32px; for nonpercent-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..4573e583a2 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto 32px; for nonpercent-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-omitted-height.html new file mode 100644 index 0000000000..e8b20f292c --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto 32px; for nonpercent-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..5a1e405fbe --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto 32px; for nonpercent-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-percent-height.html new file mode 100644 index 0000000000..4890bc5c76 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto 32px; for nonpercent-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-percent-height.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..1d37678e43 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto 32px; for omitted-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-nonpercent-height.html new file mode 100644 index 0000000000..a58e491aad --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto 32px; for omitted-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..12fe975412 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto 32px; for omitted-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-omitted-height.html new file mode 100644 index 0000000000..0cc08fde1b --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto 32px; for omitted-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-percent-height-viewbox.html new file mode 100644 index 0000000000..13de26257f --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto 32px; for omitted-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-percent-height.html new file mode 100644 index 0000000000..d50223df67 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto 32px; for omitted-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-percent-height.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..1c53353495 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto 32px; for percent-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-nonpercent-height.html new file mode 100644 index 0000000000..9088fde48c --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto 32px; for percent-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..8ff18c4a4b --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto 32px; for percent-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-omitted-height.html new file mode 100644 index 0000000000..a80cfd5a66 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto 32px; for percent-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..a1edcd802f --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto 32px; for percent-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-percent-height.html new file mode 100644 index 0000000000..9f0186a520 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: auto 32px; for percent-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-percent-height.svg); + background-repeat: no-repeat; + background-size: auto 32px; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..e31e2e00c2 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: contain; for nonpercent-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-nonpercent-height.html new file mode 100644 index 0000000000..c3578b0619 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: contain; for nonpercent-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..2f96d08ddc --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: contain; for nonpercent-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-omitted-height.html new file mode 100644 index 0000000000..bfe7b03358 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: contain; for nonpercent-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..d12e35c98f --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: contain; for nonpercent-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-percent-height.html new file mode 100644 index 0000000000..3e098fa36d --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: contain; for nonpercent-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-percent-height.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--contain--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..11dc154351 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: contain; for omitted-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--contain--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-nonpercent-height.html new file mode 100644 index 0000000000..0c4ed8af5b --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: contain; for omitted-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--contain--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..7183a07b98 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: contain; for omitted-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--contain--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-omitted-height.html new file mode 100644 index 0000000000..b50a442940 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: contain; for omitted-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--contain--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-percent-height-viewbox.html new file mode 100644 index 0000000000..b4dd27945d --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: contain; for omitted-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--contain--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-percent-height.html new file mode 100644 index 0000000000..642f26cc9d --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: contain; for omitted-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-percent-height.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--contain--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--contain--percent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..80e3381546 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--contain--percent-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: contain; for percent-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--contain--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--contain--percent-width-nonpercent-height.html new file mode 100644 index 0000000000..bf6a42b2a8 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--contain--percent-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: contain; for percent-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--contain--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--contain--percent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..98ca31c88b --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--contain--percent-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: contain; for percent-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--contain--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--contain--percent-width-omitted-height.html new file mode 100644 index 0000000000..22325f2706 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--contain--percent-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: contain; for percent-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--contain--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--contain--percent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..33cf379678 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--contain--percent-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: contain; for percent-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--contain--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--contain--percent-width-percent-height.html new file mode 100644 index 0000000000..2347d35d67 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--contain--percent-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: contain; for percent-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-percent-height.svg); + background-repeat: no-repeat; + background-size: contain; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..bab00d6b91 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: cover; for nonpercent-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-nonpercent-height.html new file mode 100644 index 0000000000..ab7ecd975a --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: cover; for nonpercent-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..ba6395a0b6 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: cover; for nonpercent-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-omitted-height.html new file mode 100644 index 0000000000..c48b1c447e --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: cover; for nonpercent-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..e43de25707 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: cover; for nonpercent-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-percent-height.html new file mode 100644 index 0000000000..70e1abce0c --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: cover; for nonpercent-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(nonpercent-width-percent-height.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--cover--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..6095500e1f --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: cover; for omitted-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--cover--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-nonpercent-height.html new file mode 100644 index 0000000000..8da880e776 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: cover; for omitted-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--cover--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..328284f18d --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: cover; for omitted-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--cover--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-omitted-height.html new file mode 100644 index 0000000000..b269803595 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: cover; for omitted-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--cover--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-percent-height-viewbox.html new file mode 100644 index 0000000000..3957178704 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: cover; for omitted-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--cover--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-percent-height.html new file mode 100644 index 0000000000..4133a7ba62 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: cover; for omitted-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(omitted-width-percent-height.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--cover--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--cover--percent-width-nonpercent-height-viewbox.html new file mode 100644 index 0000000000..3795b93e0d --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--cover--percent-width-nonpercent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: cover; for percent-width-nonpercent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-nonpercent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--cover--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--cover--percent-width-nonpercent-height.html new file mode 100644 index 0000000000..fd75fedfab --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--cover--percent-width-nonpercent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: cover; for percent-width-nonpercent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-nonpercent-height.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--cover--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--cover--percent-width-omitted-height-viewbox.html new file mode 100644 index 0000000000..71d1ede86b --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--cover--percent-width-omitted-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: cover; for percent-width-omitted-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-omitted-height-viewbox.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--cover--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--cover--percent-width-omitted-height.html new file mode 100644 index 0000000000..d38969ffc3 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--cover--percent-width-omitted-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: cover; for percent-width-omitted-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-omitted-height.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--cover--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--cover--percent-width-percent-height-viewbox.html new file mode 100644 index 0000000000..17da1912ad --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--cover--percent-width-percent-height-viewbox.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: cover; for percent-width-percent-height-viewbox.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-percent-height-viewbox.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/vector/wide--cover--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--cover--percent-width-percent-height.html new file mode 100644 index 0000000000..f688223fb4 --- /dev/null +++ b/layout/reftests/backgrounds/vector/wide--cover--percent-width-percent-height.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>wide background-size: cover; for percent-width-percent-height.svg</title> + <link rel="author" title="Jeff Walden" href="http://whereswalden.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" /> + <link rel="help" href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" /> + <meta name="flags" content="svg" /> + <style type="text/css"> +div +{ + width: 768px; height: 256px; +} +#outer +{ + border: 1px solid black; +} +#inner +{ + background-image: url(percent-width-percent-height.svg); + background-repeat: no-repeat; + background-size: cover; +} + </style> +</head> +<body> +<div id="outer"><div id="inner"></div></div> +</body> +</html> diff --git a/layout/reftests/backgrounds/viewport-translucent-color-1.html b/layout/reftests/backgrounds/viewport-translucent-color-1.html new file mode 100644 index 0000000000..8fa8f976e9 --- /dev/null +++ b/layout/reftests/backgrounds/viewport-translucent-color-1.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html style="background-color: rgba(255,0,0,0.50196)"> + <head> + </head> + <body> + </body> +</html> diff --git a/layout/reftests/backgrounds/viewport-translucent-color-2.html b/layout/reftests/backgrounds/viewport-translucent-color-2.html new file mode 100644 index 0000000000..644f42fd98 --- /dev/null +++ b/layout/reftests/backgrounds/viewport-translucent-color-2.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <head> + </head> + <body> + <div style="position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: url(red-128-alpha-32x32.png)"> + </div> + </body> +</html> diff --git a/layout/reftests/backgrounds/viewport-translucent-color-3.html b/layout/reftests/backgrounds/viewport-translucent-color-3.html new file mode 100644 index 0000000000..28030f1bee --- /dev/null +++ b/layout/reftests/backgrounds/viewport-translucent-color-3.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html style="background-image: url(red-128-alpha-32x32.png)"> + <head> + </head> + <body> + </body> +</html> diff --git a/layout/reftests/backgrounds/viewport-translucent-color-ref.html b/layout/reftests/backgrounds/viewport-translucent-color-ref.html new file mode 100644 index 0000000000..267d43fd7a --- /dev/null +++ b/layout/reftests/backgrounds/viewport-translucent-color-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <head> + </head> + <body> + <div style="position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(255,0,0,0.50196)"> + </div> + </body> +</html> diff --git a/layout/reftests/backgrounds/yellow-32x32.png b/layout/reftests/backgrounds/yellow-32x32.png Binary files differnew file mode 100644 index 0000000000..a45f8111b4 --- /dev/null +++ b/layout/reftests/backgrounds/yellow-32x32.png |
