diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-backgrounds/background-attachment-local')
31 files changed, 807 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/aqua-yellow-32x32.png b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/aqua-yellow-32x32.png Binary files differnew file mode 100644 index 0000000000..42f8a2100b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/aqua-yellow-32x32.png diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-1-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-1-ref.html new file mode 100644 index 0000000000..e3cc0375a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Test</p> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-1.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-1.html new file mode 100644 index 0000000000..8cb76ee89c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Test</p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-2.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-2.html new file mode 100644 index 0000000000..c3895a9c25 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Test</p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-3-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-3-ref.html new file mode 100644 index 0000000000..6a60077e8d --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Test</p> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-3.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-3.html new file mode 100644 index 0000000000..f81a804286 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Test</p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-4-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-4-ref.html new file mode 100644 index 0000000000..db18749d0f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Test</p> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-4.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-4.html new file mode 100644 index 0000000000..78e823c888 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Test</p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-5.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-5.html new file mode 100644 index 0000000000..136b704bd6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-5.html @@ -0,0 +1,32 @@ +<!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" /> +<meta name=fuzzy content="0-10;0-160"> +<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>Test</p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-6-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-6-ref.html new file mode 100644 index 0000000000..f23e2274a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Test</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-6.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-color-6.html new file mode 100644 index 0000000000..fd13d7183a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Test</p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-1-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-1-ref.html new file mode 100644 index 0000000000..7cbaa919c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Test</p> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-1.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-1.html new file mode 100644 index 0000000000..caca856de9 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Test</p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-2.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-2.html new file mode 100644 index 0000000000..c5dca00cb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Test</p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-3-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-3-ref.html new file mode 100644 index 0000000000..f48df68f3e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Test</p> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-3.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-3.html new file mode 100644 index 0000000000..1e20e679a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Test</p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-4-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-4-ref.html new file mode 100644 index 0000000000..4432334d34 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Test</p> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-4.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-4.html new file mode 100644 index 0000000000..9a8366242e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Test</p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-5.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-5.html new file mode 100644 index 0000000000..1d6f1a8c66 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-5.html @@ -0,0 +1,32 @@ +<!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" /> +<meta name=fuzzy content="0-10;0-300"> +<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>Test</p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-6-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-6-ref.html new file mode 100644 index 0000000000..a4e62038f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Test</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-6.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-clipping-image-6.html new file mode 100644 index 0000000000..11cb068caf --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Test</p> + </div> +</div> +<script> +document.getElementById('outer').scrollTop = 15; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-2-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-2-ref.html new file mode 100644 index 0000000000..e61ccba6c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Lorem ipsum dolor sit amet</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-2.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-2.html new file mode 100644 index 0000000000..c358fd47f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Lorem ipsum dolor sit amet</p> + </div> +</div> +<script> +var outer = document.getElementById('outer'); +outer.scrollLeft = 40; +outer.scrollTop = 60; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-3-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-3-ref.html new file mode 100644 index 0000000000..d3e1d0bded --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Lorem ipsum dolor sit amet</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-3.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-3.html new file mode 100644 index 0000000000..b370048e7a --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Lorem ipsum dolor sit amet</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/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-4-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-4-ref.html new file mode 100644 index 0000000000..8e5b383d7c --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Lorem ipsum dolor sit amet</p> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-4.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-4.html new file mode 100644 index 0000000000..d0dbfe166e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Lorem ipsum dolor sit amet</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/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-5-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-5-ref.html new file mode 100644 index 0000000000..ad7c577737 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Test</p> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-5.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-local-positioning-5.html new file mode 100644 index 0000000000..ae02307354 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Test</p> +</div> +<script> +document.getElementsByTagName('div')[0].scrollTop = 15; +</script> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-scroll-positioning-1-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-scroll-positioning-1-ref.html new file mode 100644 index 0000000000..b9cd919bc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Test</p> +</div> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-scroll-positioning-1.html b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/attachment-scroll-positioning-1.html new file mode 100644 index 0000000000..67bccc350e --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-attachment-local/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>Test</p> +</div> +<script> +document.getElementsByTagName('div')[0].scrollTop = 60; +</script> |
