diff options
Diffstat (limited to 'layout/reftests/css-mediaqueries')
44 files changed, 1352 insertions, 0 deletions
diff --git a/layout/reftests/css-mediaqueries/greenbox-print.html b/layout/reftests/css-mediaqueries/greenbox-print.html new file mode 100644 index 0000000000..f3fff0598c --- /dev/null +++ b/layout/reftests/css-mediaqueries/greenbox-print.html @@ -0,0 +1,13 @@ +<!doctype html> +<meta charset="utf-8"> +<html class="reftest-paged"> +<title>A reference of green box</title> +<style> +div { + width: 100px; + height: 100px; + background-color: green; +} +</style> +<div></div> +</html> diff --git a/layout/reftests/css-mediaqueries/greenbox.html b/layout/reftests/css-mediaqueries/greenbox.html new file mode 100644 index 0000000000..faf31fffc4 --- /dev/null +++ b/layout/reftests/css-mediaqueries/greenbox.html @@ -0,0 +1,13 @@ +<!doctype html> +<meta charset="utf-8"> +<html> +<title>A reference of green box</title> +<style> +div { + width: 100px; + height: 100px; + background-color: green; +} +</style> +<div></div> +</html> diff --git a/layout/reftests/css-mediaqueries/mq_overflow-block-ref.html b/layout/reftests/css-mediaqueries/mq_overflow-block-ref.html new file mode 100644 index 0000000000..89b8f52d44 --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_overflow-block-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<html> + <span>A</span> + <span>C</span> + <span>D</span> diff --git a/layout/reftests/css-mediaqueries/mq_overflow-block-ref.svg b/layout/reftests/css-mediaqueries/mq_overflow-block-ref.svg new file mode 100644 index 0000000000..3f5afa40a9 --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_overflow-block-ref.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + circle { fill: red } + .b { fill: green } + .e { fill: green } + </style> + <circle cx="5" cy="10" r="5" class="a">A</circle> + <circle cx="15" cy="10" r="5" class="b">B</circle> + <circle cx="25" cy="10" r="5" class="c">C</circle> + <circle cx="35" cy="10" r="5" class="d">D</circle> + <circle cx="45" cy="10" r="5" class="e">E</circle> +</svg> diff --git a/layout/reftests/css-mediaqueries/mq_overflow-block.html b/layout/reftests/css-mediaqueries/mq_overflow-block.html new file mode 100644 index 0000000000..1e31e9855d --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_overflow-block.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <style> + @media (overflow-block: none) { + .a { display: none } + } + @media (overflow-block: scroll) { + .b { display: none } + } + @media (overflow-block: paged) { + .c { display: none } + } + @media (overflow-block: something-new-and-unknown) { + .d { display: none } + } + @media (overflow-block) { + .e { display: none } + } + </style> + <span class=a>A</span> + <span class=b>B</span> + <span class=c>C</span> + <span class=d>D</span> + <span class=e>E</span> diff --git a/layout/reftests/css-mediaqueries/mq_overflow-block.svg b/layout/reftests/css-mediaqueries/mq_overflow-block.svg new file mode 100644 index 0000000000..cdbcee816c --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_overflow-block.svg @@ -0,0 +1,25 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + circle { fill: red } + @media (overflow-block: none) { + .a { fill: green } + } + @media (overflow-block: scroll) { + .b { fill: green } + } + @media (overflow-block: paged) { + .c { fill: green } + } + @media (overflow-block: something-new-and-unknown) { + .d { fill: green } + } + @media (overflow-block) { + .e { fill: green } + } + </style> + <circle cx="5" cy="10" r="5" class="a">A</circle> + <circle cx="15" cy="10" r="5" class="b">B</circle> + <circle cx="25" cy="10" r="5" class="c">C</circle> + <circle cx="35" cy="10" r="5" class="d">D</circle> + <circle cx="45" cy="10" r="5" class="e">E</circle> +</svg> diff --git a/layout/reftests/css-mediaqueries/mq_overflow-inline-ref.html b/layout/reftests/css-mediaqueries/mq_overflow-inline-ref.html new file mode 100644 index 0000000000..0c64c8598d --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_overflow-inline-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<html> + <span>A</span> + <span>D</span> diff --git a/layout/reftests/css-mediaqueries/mq_overflow-inline.html b/layout/reftests/css-mediaqueries/mq_overflow-inline.html new file mode 100644 index 0000000000..f5d94d9f53 --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_overflow-inline.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <style> + @media (overflow-inline: none) { + .a { display: none } + } + @media (overflow-inline: scroll) { + .b { display: none } + } + @media (overflow-inline) { + .c { display: none } + } + @media (overflow-inline: something-new-and-unknown) { + .d { display: none } + } + </style> + <span class=a>A</span> + <span class=b>B</span> + <span class=c>C</span> + <span class=d>D</span> diff --git a/layout/reftests/css-mediaqueries/mq_prefers_color_scheme.html b/layout/reftests/css-mediaqueries/mq_prefers_color_scheme.html new file mode 100644 index 0000000000..4755fd803e --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_prefers_color_scheme.html @@ -0,0 +1,16 @@ +<!doctype html> +<meta charset="utf-8"> +<html> +<title>prefers-color-scheme is supported</title> +<style> +div { + width: 100px; + height: 100px; +} + +@media (prefers-color-scheme) { + div { background-color: green; } +} +</style> +<div></div> +</html> diff --git a/layout/reftests/css-mediaqueries/mq_prefers_color_scheme_dark.html b/layout/reftests/css-mediaqueries/mq_prefers_color_scheme_dark.html new file mode 100644 index 0000000000..c7b961b398 --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_prefers_color_scheme_dark.html @@ -0,0 +1,19 @@ +<!doctype html> +<meta charset="utf-8"> +<html> +<title>prefers-color-scheme: dark</title> +<style> +div { + width: 100px; + height: 100px; +} + +@media (prefers-color-scheme: dark) { + div { background-color: green; } +} +@media (prefers-color-scheme: light) { + div { background-color: red; } +} +</style> +<div></div> +</html> diff --git a/layout/reftests/css-mediaqueries/mq_prefers_color_scheme_light.html b/layout/reftests/css-mediaqueries/mq_prefers_color_scheme_light.html new file mode 100644 index 0000000000..61dc8dece0 --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_prefers_color_scheme_light.html @@ -0,0 +1,19 @@ +<!doctype html> +<meta charset="utf-8"> +<html> +<title>prefers-color-scheme: light</title> +<style> +div { + width: 100px; + height: 100px; +} + +@media (prefers-color-scheme: light) { + div { background-color: green; } +} +@media (prefers-color-scheme: dark) { + div { background-color: red; } +} +</style> +<div></div> +</html> diff --git a/layout/reftests/css-mediaqueries/mq_prefers_color_scheme_print.html b/layout/reftests/css-mediaqueries/mq_prefers_color_scheme_print.html new file mode 100644 index 0000000000..d6a1137b63 --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_prefers_color_scheme_print.html @@ -0,0 +1,19 @@ +<!doctype html> +<meta charset="utf-8"> +<html class="reftest-paged"> +<title>prefers-color-scheme: light in print mode</title> +<style> +div { + width: 100px; + height: 100px; +} + +@media (prefers-color-scheme: light) { + div { background-color: green; } +} +@media (prefers-color-scheme: dark) { + div { background-color: red; } +} +</style> +<div></div> +</html> diff --git a/layout/reftests/css-mediaqueries/mq_prefers_reduced_motion.html b/layout/reftests/css-mediaqueries/mq_prefers_reduced_motion.html new file mode 100644 index 0000000000..03fd0c2a75 --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_prefers_reduced_motion.html @@ -0,0 +1,16 @@ +<!doctype html> +<meta charset="utf-8"> +<html> +<title>prefers-reduced-motion</title> +<style> +div { + width: 100px; + height: 100px; +} + +@media (prefers-reduced-motion) { + div { background-color: green; } +} +</style> +<div></div> +</html> diff --git a/layout/reftests/css-mediaqueries/mq_prefers_reduced_motion_both.html b/layout/reftests/css-mediaqueries/mq_prefers_reduced_motion_both.html new file mode 100644 index 0000000000..cda0b01d47 --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_prefers_reduced_motion_both.html @@ -0,0 +1,19 @@ +<!doctype html> +<meta charset="utf-8"> +<title>prefers-reduced-motion</title> +<style> +div { + width: 100px; + height: 100px; + background-color: red; +} + +@media (prefers-reduced-motion: no-preference) { + div { background-color: green; } +} + +@media (prefers-reduced-motion) { + div { background-color: green; } +} +</style> +<div></div> diff --git a/layout/reftests/css-mediaqueries/mq_prefers_reduced_motion_no_preference.html b/layout/reftests/css-mediaqueries/mq_prefers_reduced_motion_no_preference.html new file mode 100644 index 0000000000..9a8dd0c3f6 --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_prefers_reduced_motion_no_preference.html @@ -0,0 +1,16 @@ +<!doctype html> +<meta charset="utf-8"> +<html> +<title>prefers-reduced-motion: no-preference</title> +<style> +div { + width: 100px; + height: 100px; +} + +@media (prefers-reduced-motion: no-preference) { + div { background-color: green; } +} +</style> +<div></div> +</html> diff --git a/layout/reftests/css-mediaqueries/mq_prefers_reduced_motion_reduce.html b/layout/reftests/css-mediaqueries/mq_prefers_reduced_motion_reduce.html new file mode 100644 index 0000000000..ddc9813dee --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_prefers_reduced_motion_reduce.html @@ -0,0 +1,16 @@ +<!doctype html> +<meta charset="utf-8"> +<html> +<title>prefers-reduced-motion: reduce</title> +<style> +div { + width: 100px; + height: 100px; +} + +@media (prefers-reduced-motion: reduce) { + div { background-color: green; } +} +</style> +<div></div> +</html> diff --git a/layout/reftests/css-mediaqueries/mq_print-ref.xhtml b/layout/reftests/css-mediaqueries/mq_print-ref.xhtml new file mode 100644 index 0000000000..0677f6cc3d --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_print-ref.xhtml @@ -0,0 +1,33 @@ +<?xml version="1.0" encoding="iso-8859-1" ?> +<!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" class="reftest-paged"> +<head> + <title>Media Query - print mode test - Reference</title> + <style><![CDATA[ + p {height: 10px; width: 100px; color: yellow; } + p.y { color: aqua; } + p.n { color: yellow; } + ]]></style> +</head> + +<body> + <p class="y">a</p> + <p class="n">b</p> + <p class="y">c</p> + <p class="y">d</p> + <p class="y">e</p> + <p class="y">f</p> + <p class="y">g</p> + <p class="y">h</p> + <p class="y">i</p> + <p class="n">j</p> + <p class="n">k</p> + <p class="n">l</p> + <p class="n">m</p> + <p class="n">n</p> + <p class="n">o</p> + <p class="n">p</p> +</body> +</html> diff --git a/layout/reftests/css-mediaqueries/mq_print_aspectratio.xhtml b/layout/reftests/css-mediaqueries/mq_print_aspectratio.xhtml new file mode 100644 index 0000000000..4167aaf120 --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_print_aspectratio.xhtml @@ -0,0 +1,55 @@ +<?xml version="1.0" encoding="iso-8859-1" ?> +<!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" class="reftest-paged"> +<head> + <title>Media Query - Print mode test - aspect-ratio</title> + <style type="text/css"><![CDATA[ + p {height: 10px; width: 100px; color: yellow; } + @media print { .a { color: aqua; } } + @media screen { .b { color: aqua; } } + + @media (aspect-ratio: 4/2) { .c { color: aqua; } } /* y */ + @media (aspect-ratio: 8/4) { .d { color: aqua; } } /* y */ + @media (aspect-ratio: 12/6) { .e { color: aqua; } } /* y */ + + @media print and (aspect-ratio: 4/2) { .f {color: aqua; } } /* y */ + @media print and (aspect-ratio: 8/4) { .g {color: aqua; } }/* y */ + @media print and (aspect-ratio: 12/6) { .h {color: aqua; } }/* y */ + + @media all and (aspect-ratio: 4/2) { .i { color: aqua; } } /* y */ + + + /* negative cases */ + @media all and (aspect-ratio: 3/2) { .j { color: aqua; } } /* n */ + + @media (aspect-ratio: 4/3) { .k { color: aqua; } } /* n */ + @media (aspect-ratio: 3/4) { .l { color: aqua; } } /* n */ + @media (aspect-ratio: 16/9) { .m { color: aqua; } } /* n */ + + @media screen and (aspect-ratio: 4/2) { .n {color: aqua; } } /* n */ + @media screen and (aspect-ratio: 8/4) { .o {color: aqua; } } /* n */ + @media screen and (aspect-ratio: 12/6) { .p {color: aqua; } } /* n */ + + ]]></style> +</head> + +<body> + <p class="a">a</p> + <p class="b">b</p> + <p class="c">c</p> + <p class="d">d</p> + <p class="e">e</p> + <p class="f">f</p> + <p class="g">g</p> + <p class="h">h</p> + <p class="i">i</p> + <p class="j">j</p> + <p class="k">k</p> + <p class="l">l</p> + <p class="m">m</p> + <p class="n">n</p> + <p class="o">o</p> + <p class="p">p</p> + +</body> +</html> diff --git a/layout/reftests/css-mediaqueries/mq_print_deviceaspectratio.xhtml b/layout/reftests/css-mediaqueries/mq_print_deviceaspectratio.xhtml new file mode 100644 index 0000000000..5bc28531bb --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_print_deviceaspectratio.xhtml @@ -0,0 +1,55 @@ +<?xml version="1.0" encoding="iso-8859-1" ?> +<!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" class="reftest-paged"> +<head> + <title>Media Query - Print mode test - Device-aspect-ratio</title> + <style type="text/css"><![CDATA[ + p {height: 10px; width: 100px; color: yellow; } + @media print { .a { color: aqua; } } + @media screen { .b { color: aqua; } } + + /* not sure if the 3/5 will work as aspect ratio is width/height */ + @media (device-aspect-ratio: 5/3) { .c { color: aqua; } } /* y */ + @media (device-aspect-ratio: 10/6) { .d { color: aqua; } } /* y */ + @media (device-aspect-ratio: 15/9) { .e { color: aqua; } } /* y */ + + @media print and (device-aspect-ratio: 5/3) { .f {color: aqua; } } /* y */ + @media print and (device-aspect-ratio: 10/6) { .g {color: aqua; } }/* y */ + @media print and (device-aspect-ratio: 15/9) { .h {color: aqua; } }/* y */ + + @media all and (device-aspect-ratio: 5/3) { .i { color: aqua; } } /* y */ + + + /* negative cases */ + @media all and (device-aspect-ratio: 3/2) { .j { color: aqua; } } /* n */ + + @media (device-aspect-ratio: 4/3) { .k { color: aqua; } } /* n */ + @media (device-aspect-ratio: 3/4) { .l { color: aqua; } } /* n */ + @media (device-aspect-ratio: 16/9) { .m { color: aqua; } } /* n */ + + @media screen and (device-aspect-ratio: 5/3) { .n {color: aqua; } } /* n */ + @media screen and (device-aspect-ratio: 10/6) { .o {color: aqua; } } /* n */ + @media screen and (device-aspect-ratio: 15/9) { .p {color: aqua; } } /* n */ + + ]]></style> +</head> + +<body> + <p class="a">a</p> + <p class="b">b</p> + <p class="c">c</p> + <p class="d">d</p> + <p class="e">e</p> + <p class="f">f</p> + <p class="g">g</p> + <p class="h">h</p> + <p class="i">i</p> + <p class="j">j</p> + <p class="k">k</p> + <p class="l">l</p> + <p class="m">m</p> + <p class="n">n</p> + <p class="o">o</p> + <p class="p">p</p> +</body> +</html> diff --git a/layout/reftests/css-mediaqueries/mq_print_deviceheight.xhtml b/layout/reftests/css-mediaqueries/mq_print_deviceheight.xhtml new file mode 100644 index 0000000000..a1d4ac184a --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_print_deviceheight.xhtml @@ -0,0 +1,55 @@ +<?xml version="1.0" encoding="iso-8859-1" ?> +<!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" class="reftest-paged"> +<head> + <title>Media Query - Print mode test - device-height</title> + <style type="text/css"><![CDATA[ + p {height: 10px; width: 100px; color: yellow; } + @media print { .a { color: aqua; } } + @media screen { .b { color: aqua; } } + + /* we set the height to 3inches/216pt/76mm in the reftest-paged class*/ + @media (device-height: 3in) { .c { color: aqua; } } /* y */ + @media (device-height: 216pt) { .d { color: aqua; } } /* y */ + @media (device-height: 76.2mm) { .e { color: aqua; } } /* y */ + + @media print and (device-height: 3in) { .f {color: aqua; } } /* y */ + @media print and (device-height: 216pt) { .g {color: aqua; } }/* y */ + @media print and (device-height: 76.2mm) { .h {color: aqua; } }/* y */ + + @media all and (device-height: 3in) { .i { color: aqua; } } /* y */ + + + /* negative cases */ + @media all and (device-height: 4in) { .j { color: aqua; } } /* n */ + + @media (device-height: 130mm) { .k { color: aqua; } } /* n */ + @media (device-height: 4in) { .l { color: aqua; } } /* n */ + @media (device-height: 400pt) { .m { color: aqua; } } /* n */ + + @media screen and (device-height: 3in) { .n {color: aqua; } } /* n */ + @media screen and (device-height: 216pt) { .o {color: aqua; } } /* n */ + @media screen and (device-height: 76.2mm) { .p {color: aqua; } } /* n */ + + ]]></style> +</head> + +<body> + <p class="a">a</p> + <p class="b">b</p> + <p class="c">c</p> + <p class="d">d</p> + <p class="e">e</p> + <p class="f">f</p> + <p class="g">g</p> + <p class="h">h</p> + <p class="i">i</p> + <p class="j">j</p> + <p class="k">k</p> + <p class="l">l</p> + <p class="m">m</p> + <p class="n">n</p> + <p class="o">o</p> + <p class="p">p</p> +</body> +</html> diff --git a/layout/reftests/css-mediaqueries/mq_print_devicewidth.xhtml b/layout/reftests/css-mediaqueries/mq_print_devicewidth.xhtml new file mode 100644 index 0000000000..4695bb11df --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_print_devicewidth.xhtml @@ -0,0 +1,55 @@ +<?xml version="1.0" encoding="iso-8859-1" ?> +<!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" class="reftest-paged"> +<head> + <title>Media Query - Print mode test - device-width</title> + <style type="text/css"><![CDATA[ + p {height: 10px; width: 100px; color: yellow; } + @media print { .a { color: aqua; } } + @media screen { .b { color: aqua; } } + + /* we set the width to 5 inches/360pt/127mm in the reftest-paged class*/ + @media (device-width: 5in) { .c { color: aqua; } } /* y */ + @media (device-width: 360pt) { .d { color: aqua; } } /* y */ + @media (device-width: 127mm) { .e { color: aqua; } } /* y */ + + @media print and (device-width: 5in) { .f {color: aqua; } } /* y */ + @media print and (device-width: 360pt) { .g {color: aqua; } }/* y */ + @media print and (device-width: 127mm) { .h {color: aqua; } }/* y */ + + @media all and (device-width: 5in) { .i { color: aqua; } } /* y */ + + + /* negative cases */ + @media all and (device-width: 6in) { .j { color: aqua; } } /* n */ + + @media (device-width: 130mm) { .k { color: aqua; } } /* n */ + @media (device-width: 6in) { .l { color: aqua; } } /* n */ + @media (device-width: 400pt) { .m { color: aqua; } } /* n */ + + @media screen and (device-width: 5in) { .n {color: aqua; } } /* n */ + @media screen and (device-width: 360pt) { .o {color: aqua; } } /* n */ + @media screen and (device-width: 127mm) { .p {color: aqua; } } /* n */ + + ]]></style> +</head> + +<body> + <p class="a">a</p> + <p class="b">b</p> + <p class="c">c</p> + <p class="d">d</p> + <p class="e">e</p> + <p class="f">f</p> + <p class="g">g</p> + <p class="h">h</p> + <p class="i">i</p> + <p class="j">j</p> + <p class="k">k</p> + <p class="l">l</p> + <p class="m">m</p> + <p class="n">n</p> + <p class="o">o</p> + <p class="p">p</p> +</body> +</html> diff --git a/layout/reftests/css-mediaqueries/mq_print_height.xhtml b/layout/reftests/css-mediaqueries/mq_print_height.xhtml new file mode 100644 index 0000000000..6f4112bd99 --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_print_height.xhtml @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="iso-8859-1" ?> +<!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" class="reftest-paged"> +<head> + <title>Media Query - Print mode test - height</title> + <style type="text/css"><![CDATA[ + p {height: 10px; width: 100px; color: yellow; } + @media print { .a { color: aqua; } } + @media screen { .b { color: aqua; } } + + /* we set the height to 3 inches/216pt/76mm in the reftest-paged class. -0.5 inches + for each margin, that makes 2 inches/144pt/50.8mm*/ + @media (height: 2in) { .c { color: aqua; } } /* y */ + @media (height: 144pt) { .d { color: aqua; } } /* y */ + @media (height: 50.8mm) { .e { color: aqua; } } /* y */ + + @media print and (height: 2in) { .f {color: aqua; } } /* y */ + @media print and (height: 144pt) { .g {color: aqua; } }/* y */ + @media print and (height: 50.8mm) { .h {color: aqua; } }/* y */ + + @media all and (height: 2in) { .i { color: aqua; } } /* y */ + + + /* negative cases */ + @media all and (height: 4in) { .j { color: aqua; } } /* n */ + + @media (height: 130mm) { .k { color: aqua; } } /* n */ + @media (height: 4in) { .l { color: aqua; } } /* n */ + @media (height: 400pt) { .m { color: aqua; } } /* n */ + + @media screen and (height: 2in) { .n {color: aqua; } } /* n */ + @media screen and (height: 144pt) { .o {color: aqua; } } /* n */ + @media screen and (height: 50.8mm) { .p {color: aqua; } } /* n */ + + ]]></style> +</head> + +<body> + <p class="a">a</p> + <p class="b">b</p> + <p class="c">c</p> + <p class="d">d</p> + <p class="e">e</p> + <p class="f">f</p> + <p class="g">g</p> + <p class="h">h</p> + <p class="i">i</p> + <p class="j">j</p> + <p class="k">k</p> + <p class="l">l</p> + <p class="m">m</p> + <p class="n">n</p> + <p class="o">o</p> + <p class="p">p</p> +</body> +</html> diff --git a/layout/reftests/css-mediaqueries/mq_print_maxheight.xhtml b/layout/reftests/css-mediaqueries/mq_print_maxheight.xhtml new file mode 100644 index 0000000000..f2a7dbf0c6 --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_print_maxheight.xhtml @@ -0,0 +1,57 @@ +<?xml version="1.0" encoding="iso-8859-1" ?> +<!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" class="reftest-paged"> +<head> + <title>Media Query - Print mode test - max-height</title> + <style type="text/css"><![CDATA[ + p {height: 10px; width: 100px; color: yellow; } + @media print { .a { color: aqua; } } + @media screen { .b { color: aqua; } } + + /* we set the height to 3 inches/216pt/76mm in the reftest-paged class. -0.5 inches + for each margin, that makes 2 inches/144pt/50.8mm*/ + @media (max-height: 2in) { .c { color: aqua; } } /* y */ + @media (max-height: 144pt) { .d { color: aqua; } } /* y */ + @media (max-height: 50.8mm) { .e { color: aqua; } } /* y */ + + @media print and (max-height: 2in) { .f {color: aqua; } } /* y */ + @media print and (max-height: 144pt) { .g {color: aqua; } }/* y */ + @media print and (max-height: 50.8mm) { .h {color: aqua; } }/* y */ + + @media all and (max-height: 2in) { .i { color: aqua; } } /* y */ + + /* negative cases - values < set values */ + @media all and (max-height: 1.5in) { .j { color: aqua; } } /* n */ + + @media (max-height: 50mm) { .k { color: aqua; } } /* n */ + @media (max-height: 1.57in) { .l { color: aqua; } } /* n */ + @media (max-height: 127pt) { .m { color: aqua; } } /* n */ + + @media screen and (max-height: 2in) { .n {color: aqua; } } /* n */ + @media screen and (max-height: 144pt) { .o {color: aqua; } } /* n */ + @media screen and (max-height: 50.8mm) { .p {color: aqua; } } /* n */ + + ]]></style> +</head> + +<body> + <p class="a">a</p> + <p class="b">b</p> + + <p class="c">c</p> + <p class="d">d</p> + <p class="e">e</p> + <p class="f">f</p> + <p class="g">g</p> + <p class="h">h</p> + <p class="i">i</p> + + <p class="j">j</p> + <p class="k">k</p> + <p class="l">l</p> + <p class="m">m</p> + <p class="n">n</p> + <p class="o">o</p> + <p class="p">p</p> +</body> +</html> diff --git a/layout/reftests/css-mediaqueries/mq_print_maxheight_updown.xhtml b/layout/reftests/css-mediaqueries/mq_print_maxheight_updown.xhtml new file mode 100644 index 0000000000..3e95c2638e --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_print_maxheight_updown.xhtml @@ -0,0 +1,60 @@ +<?xml version="1.0" encoding="iso-8859-1" ?> +<!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" class="reftest-paged"> +<head> + <title>Media Query - Print mode test - max-height</title> + <style type="text/css"><![CDATA[ + p {height: 10px; width: 100px; color: yellow; } + @media print { .a { color: aqua; } } + @media screen { .b { color: aqua; } } + + /* we set the height to 3 inches/216pt/76mm in the reftest-paged class*/ + /* test values greater than */ + @media (max-height: 11in) { .c { color: aqua; } } /* y */ + @media (max-height: 1100pt) { .d { color: aqua; } } /* y */ + @media (max-height: 110mm) { .e { color: aqua; } } /* y */ + + @media print and (max-height: 11in) { .f {color: aqua; } } /* y */ + @media print and (max-height: 1100pt) { .g {color: aqua; } }/* y */ + @media print and (max-height: 110mm) { .h {color: aqua; } }/* y */ + + @media all and (max-height: 11in) { .i { color: aqua; } } /* y */ + + + /* test values less than */ + @media (max-height: 1in) { .j { color: aqua; } } /* n */ + @media (max-height: 100pt) { .k { color: aqua; } } /* n */ + @media (max-height: 10mm) { .l { color: aqua; } } /* n */ + + @media print and (max-height: 1in) { .m {color: aqua; } } /* n */ + @media print and (max-height: 100pt) { .n {color: aqua; } }/* n */ + @media print and (max-height: 10mm) { .o {color: aqua; } }/* n */ + + @media all and (max-height: 1in) { .p { color: aqua; } } /* n */ + + + + ]]></style> +</head> + +<body> + <p class="a">a</p> + <p class="b">b</p> + + <p class="c">c</p> + <p class="d">d</p> + <p class="e">e</p> + <p class="f">f</p> + <p class="g">g</p> + <p class="h">h</p> + <p class="i">i</p> + + <p class="j">j</p> + <p class="k">k</p> + <p class="l">l</p> + <p class="m">m</p> + <p class="n">n</p> + <p class="o">o</p> + <p class="p">p</p> +</body> +</html> diff --git a/layout/reftests/css-mediaqueries/mq_print_maxwidth.xhtml b/layout/reftests/css-mediaqueries/mq_print_maxwidth.xhtml new file mode 100644 index 0000000000..e72df88c6a --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_print_maxwidth.xhtml @@ -0,0 +1,59 @@ +<?xml version="1.0" encoding="iso-8859-1" ?> +<!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" class="reftest-paged"> +<head> + <title>Media Query - Print mode test - max-width</title> + <style type="text/css"><![CDATA[ + p {height: 10px; width: 100px; color: yellow; } + @media print { .a { color: aqua; } } + @media screen { .b { color: aqua; } } + + /* we set the width to 5 inches/360pt/127mm in the reftest-paged class, -0.5 inches + for each margin, that makes 4 inches / 288pt / 101.6mm */ + + @media (max-width: 4in) { .c { color: aqua; } } /* y */ + @media (max-width: 288pt) { .d { color: aqua; } } /* y */ + @media (max-width: 101.6mm) { .e { color: aqua; } } /* y */ + + @media print and (max-width: 4in) { .f {color: aqua; } } /* y */ + @media print and (max-width: 288pt) { .g {color: aqua; } }/* y */ + @media print and (max-width: 101.6mm) { .h {color: aqua; } }/* y */ + + @media all and (max-width: 4in) { .i { color: aqua; } } /* y */ + + + /* negative cases - values < set values */ + @media all and (max-width: 3in) { .j { color: aqua; } } /* n */ + + @media (max-width: 31mm) { .k { color: aqua; } } /* n */ + @media (max-width: 3.14in) { .l { color: aqua; } } /* n */ + @media (max-width: 280pt) { .m { color: aqua; } } /* n */ + + @media screen and (max-width: 4in) { .n {color: aqua; } } /* n */ + @media screen and (max-width: 288pt) { .o {color: aqua; } } /* n */ + @media screen and (max-width: 101.6mm) { .p {color: aqua; } } /* n */ + + ]]></style> +</head> + +<body> + <p class="a">a</p> + <p class="b">b</p> + + <p class="c">c</p> + <p class="d">d</p> + <p class="e">e</p> + <p class="f">f</p> + <p class="g">g</p> + <p class="h">h</p> + <p class="i">i</p> + + <p class="j">j</p> + <p class="k">k</p> + <p class="l">l</p> + <p class="m">m</p> + <p class="n">n</p> + <p class="o">o</p> + <p class="p">p</p> +</body> +</html> diff --git a/layout/reftests/css-mediaqueries/mq_print_maxwidth_updown.xhtml b/layout/reftests/css-mediaqueries/mq_print_maxwidth_updown.xhtml new file mode 100644 index 0000000000..ebc99dcf57 --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_print_maxwidth_updown.xhtml @@ -0,0 +1,58 @@ +<?xml version="1.0" encoding="iso-8859-1" ?> +<!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" class="reftest-paged"> +<head> + <title>Media Query - Print mode test - max-width</title> + <style type="text/css"><![CDATA[ + p {height: 10px; width: 100px; color: yellow; } + @media print { .a { color: aqua; } } + @media screen { .b { color: aqua; } } + + /* we set the width to 5 inches/360pt/127mm in the reftest-paged class*/ + /* test values great than */ + @media (max-width: 31in) { .c { color: aqua; } } /* y */ + @media (max-width: 3141pt) { .d { color: aqua; } } /* y */ + @media (max-width: 314mm) { .e { color: aqua; } } /* y */ + + @media print and (max-width: 31in) { .f {color: aqua; } } /* y */ + @media print and (max-width: 3141pt) { .g {color: aqua; } }/* y */ + @media print and (max-width: 314mm) { .h {color: aqua; } }/* y */ + + @media all and (max-width: 31in) { .i { color: aqua; } } /* y */ + + + /* test values less than */ + @media (max-width: 1in) { .j { color: aqua; } } /* n */ + @media (max-width: 141pt) { .k { color: aqua; } } /* n */ + @media (max-width: 14mm) { .l { color: aqua; } } /* n */ + + @media print and (max-width: 1in) { .m {color: aqua; } } /* n */ + @media print and (max-width: 141pt) { .n {color: aqua; } }/* n */ + @media print and (max-width: 14mm) { .o {color: aqua; } }/* n */ + + @media all and (max-width: 1in) { .p { color: aqua; } } /* n */ + + ]]></style> +</head> + +<body> + <p class="a">a</p> + <p class="b">b</p> + + <p class="c">c</p> + <p class="d">d</p> + <p class="e">e</p> + <p class="f">f</p> + <p class="g">g</p> + <p class="h">h</p> + <p class="i">i</p> + + <p class="j">j</p> + <p class="k">k</p> + <p class="l">l</p> + <p class="m">m</p> + <p class="n">n</p> + <p class="o">o</p> + <p class="p">p</p> +</body> +</html> diff --git a/layout/reftests/css-mediaqueries/mq_print_minheight.xhtml b/layout/reftests/css-mediaqueries/mq_print_minheight.xhtml new file mode 100644 index 0000000000..9e88e658aa --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_print_minheight.xhtml @@ -0,0 +1,58 @@ +<?xml version="1.0" encoding="iso-8859-1" ?> +<!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" class="reftest-paged"> +<head> + <title>Media Query - Print mode test - min-height</title> + <style type="text/css"><![CDATA[ + p {height: 10px; width: 100px; color: yellow; } + @media print { .a { color: aqua; } } + @media screen { .b { color: aqua; } } + + /* we set the height to 3 inches/216pt/76mm in the reftest-paged class. -0.5 inches + for each margin, that makes 2 inches/144pt/50.8mm*/ + @media (min-height: 2in) { .c { color: aqua; } } /* y */ + @media (min-height: 144pt) { .d { color: aqua; } } /* y */ + @media (min-height: 50.8mm) { .e { color: aqua; } } /* y */ + + @media print and (min-height: 2in) { .f {color: aqua; } } /* y */ + @media print and (min-height: 144pt) { .g {color: aqua; } }/* y */ + @media print and (min-height: 50.8mm) { .h {color: aqua; } }/* y */ + + @media all and (min-height: 2in) { .i { color: aqua; } } /* y */ + + + /* negative cases */ + @media all and (min-height: 4in) { .j { color: aqua; } } /* n */ + + @media (min-height: 130mm) { .k { color: aqua; } } /* n */ + @media (min-height: 4in) { .l { color: aqua; } } /* n */ + @media (min-height: 400pt) { .m { color: aqua; } } /* n */ + + @media screen and (min-height: 2in) { .n {color: aqua; } } /* n */ + @media screen and (min-height: 144pt) { .o {color: aqua; } } /* n */ + @media screen and (min-height: 50.8mm) { .p {color: aqua; } } /* n */ + + ]]></style> +</head> + +<body> + <p class="a">a</p> + <p class="b">b</p> + + <p class="c">c</p> + <p class="d">d</p> + <p class="e">e</p> + <p class="f">f</p> + <p class="g">g</p> + <p class="h">h</p> + <p class="i">i</p> + + <p class="j">j</p> + <p class="k">k</p> + <p class="l">l</p> + <p class="m">m</p> + <p class="n">n</p> + <p class="o">o</p> + <p class="p">p</p> +</body> +</html> diff --git a/layout/reftests/css-mediaqueries/mq_print_minheight_updown.xhtml b/layout/reftests/css-mediaqueries/mq_print_minheight_updown.xhtml new file mode 100644 index 0000000000..50b40cde32 --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_print_minheight_updown.xhtml @@ -0,0 +1,60 @@ +<?xml version="1.0" encoding="iso-8859-1" ?> +<!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" class="reftest-paged"> +<head> + <title>Media Query - Print mode test - min-height</title> + <style type="text/css"><![CDATA[ + p {height: 10px; width: 100px; color: yellow; } + @media print { .a { color: aqua; } } + @media screen { .b { color: aqua; } } + + /* we set the height to 3 inches/216pt/76mm in the reftest-paged class. -0.5 inches + for each margin, that makes 2 inches/144pt/50.8mm*/ + + /* test less than set value */ + @media (min-height: 1.57in) { .c { color: aqua; } } /* y */ + @media (min-height: 140pt) { .d { color: aqua; } } /* y */ + @media (min-height: 31.4mm) { .e { color: aqua; } } /* y */ + + @media print and (min-height: 1.57in) { .f {color: aqua; } } /* y */ + @media print and (min-height: 140pt) { .g {color: aqua; } }/* y */ + @media print and (min-height: 31.4mm) { .h {color: aqua; } }/* y */ + + @media all and (min-height: 1.57in) { .i { color: aqua; } } /* y */ + + + /* test greater than set value */ + @media (min-height: 15.7in) { .j { color: aqua; } } /* n */ + @media (min-height: 3141pt) { .k { color: aqua; } } /* n */ + @media (min-height: 3141mm) { .l { color: aqua; } } /* n */ + + @media print and (min-height: 15.7in) { .m {color: aqua; } } /* n */ + @media print and (min-height: 3141pt) { .n {color: aqua; } }/* n */ + @media print and (min-height: 3141mm) { .o {color: aqua; } }/* n */ + + @media all and (min-height: 15.7in) { .p { color: aqua; } } /* n */ + + ]]></style> +</head> + +<body> + <p class="a">a</p> + <p class="b">b</p> + + <p class="c">c</p> + <p class="d">d</p> + <p class="e">e</p> + <p class="f">f</p> + <p class="g">g</p> + <p class="h">h</p> + <p class="i">i</p> + + <p class="j">j</p> + <p class="k">k</p> + <p class="l">l</p> + <p class="m">m</p> + <p class="n">n</p> + <p class="o">o</p> + <p class="p">p</p> +</body> +</html> diff --git a/layout/reftests/css-mediaqueries/mq_print_minwidth.xhtml b/layout/reftests/css-mediaqueries/mq_print_minwidth.xhtml new file mode 100644 index 0000000000..778fda4545 --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_print_minwidth.xhtml @@ -0,0 +1,59 @@ +<?xml version="1.0" encoding="iso-8859-1" ?> +<!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" class="reftest-paged"> +<head> + <title>Media Query - Print mode test - min-width</title> + <style type="text/css"><![CDATA[ + p {height: 10px; width: 100px; color: yellow; } + @media print { .a { color: aqua; } } + @media screen { .b { color: aqua; } } + + /* we set the width to 5 inches/360pt/127mm in the reftest-paged class, -0.5 inches + for each margin, that makes 4 inches / 288pt / 101.6mm */ + + @media (min-width: 4in) { .c { color: aqua; } } /* y */ + @media (min-width: 288pt) { .d { color: aqua; } } /* y */ + @media (min-width: 101.6mm) { .e { color: aqua; } } /* y */ + + @media print and (min-width: 4in) { .f {color: aqua; } } /* y */ + @media print and (min-width: 288pt) { .g {color: aqua; } }/* y */ + @media print and (min-width: 101.6mm) { .h {color: aqua; } }/* y */ + + @media all and (min-width: 4in) { .i { color: aqua; } } /* y */ + + + /* negative cases */ + @media all and (min-width: 6in) { .j { color: aqua; } } /* n */ + + @media (min-width: 130mm) { .k { color: aqua; } } /* n */ + @media (min-width: 6in) { .l { color: aqua; } } /* n */ + @media (min-width: 400pt) { .m { color: aqua; } } /* n */ + + @media screen and (min-width: 4in) { .n {color: aqua; } } /* n */ + @media screen and (min-width: 288pt) { .o {color: aqua; } } /* n */ + @media screen and (min-width: 101.6mm) { .p {color: aqua; } } /* n */ + + ]]></style> +</head> + +<body> + <p class="a">a</p> + <p class="b">b</p> + + <p class="c">c</p> + <p class="d">d</p> + <p class="e">e</p> + <p class="f">f</p> + <p class="g">g</p> + <p class="h">h</p> + <p class="i">i</p> + + <p class="j">j</p> + <p class="k">k</p> + <p class="l">l</p> + <p class="m">m</p> + <p class="n">n</p> + <p class="o">o</p> + <p class="p">p</p> +</body> +</html> diff --git a/layout/reftests/css-mediaqueries/mq_print_minwidth_updown.xhtml b/layout/reftests/css-mediaqueries/mq_print_minwidth_updown.xhtml new file mode 100644 index 0000000000..dda7b09333 --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_print_minwidth_updown.xhtml @@ -0,0 +1,60 @@ +<?xml version="1.0" encoding="iso-8859-1" ?> +<!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" class="reftest-paged"> +<head> + <title>Media Query - Print mode test - min-width</title> + <style type="text/css"><![CDATA[ + p {height: 10px; width: 100px; color: yellow; } + @media print { .a { color: aqua; } } + @media screen { .b { color: aqua; } } + + /* we set the width to 5 inches/360pt/127mm in the reftest-paged class, -0.5 inches + for each margin, that makes 4 inches / 288pt / 101.6mm */ + + /* test values less than set */ + @media (min-width: 3.14in) { .c { color: aqua; } } /* y */ + @media (min-width: 284pt) { .d { color: aqua; } } /* y */ + @media (min-width: 31.4mm) { .e { color: aqua; } } /* y */ + + @media print and (min-width: 3.14in) { .f {color: aqua; } } /* y */ + @media print and (min-width: 284pt) { .g {color: aqua; } }/* y */ + @media print and (min-width: 31.4mm) { .h {color: aqua; } }/* y */ + + @media all and (min-width: 3.14in) { .i { color: aqua; } } /* y */ + + + /* test values greater than set */ + @media (min-width: 31.4in) { .j { color: aqua; } } /* n */ + @media (min-width: 3141pt) { .k { color: aqua; } } /* n */ + @media (min-width: 314mm) { .l { color: aqua; } } /* n */ + + @media print and (min-width: 31.4in) { .m {color: aqua; } } /* n */ + @media print and (min-width: 3141pt) { .n {color: aqua; } }/* n */ + @media print and (min-width: 314mm) { .o {color: aqua; } }/* n */ + + @media all and (min-width: 31.4in) { .p { color: aqua; } } /* n */ + + ]]></style> +</head> + +<body> + <p class="a">a</p> + <p class="b">b</p> + + <p class="c">c</p> + <p class="d">d</p> + <p class="e">e</p> + <p class="f">f</p> + <p class="g">g</p> + <p class="h">h</p> + <p class="i">i</p> + + <p class="j">j</p> + <p class="k">k</p> + <p class="l">l</p> + <p class="m">m</p> + <p class="n">n</p> + <p class="o">o</p> + <p class="p">p</p> +</body> +</html> diff --git a/layout/reftests/css-mediaqueries/mq_print_orientation-ref.xhtml b/layout/reftests/css-mediaqueries/mq_print_orientation-ref.xhtml new file mode 100644 index 0000000000..2bfab6d444 --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_print_orientation-ref.xhtml @@ -0,0 +1,27 @@ +<?xml version="1.0" encoding="iso-8859-1" ?> +<!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" class="reftest-paged"> +<head> + <title>Media Query - print mode test - orientation</title> + <style><![CDATA[ + p {height: 10px; width: 100px; color: yellow; } + p.y { color: aqua; } + p.n { color: yellow; } + ]]></style> +</head> + +<body> + <p class="y">a</p> + <p class="n">b</p> + <p class="y">c</p> + <p class="y">d</p> + <p class="y">e</p> + <p class="n">f</p> + <p class="n">g</p> + <p class="n">h</p> + <p class="n">i</p> + <p class="n">j</p> +</body> +</html> diff --git a/layout/reftests/css-mediaqueries/mq_print_orientation.xhtml b/layout/reftests/css-mediaqueries/mq_print_orientation.xhtml new file mode 100644 index 0000000000..bb3ecb3940 --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_print_orientation.xhtml @@ -0,0 +1,41 @@ +<?xml version="1.0" encoding="iso-8859-1" ?> +<!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" class="reftest-paged"> +<head> + <title>Media Query - Print mode test - orientation</title> + <style type="text/css"><![CDATA[ + p {height: 10px; width: 100px; color: yellow; } + @media print { .a { color: aqua; } } + @media screen { .b { color: aqua; } } + + /* Print reftests are 5/3, which is landscape. */ + @media (orientation: landscape) { .c { color: aqua; } } /* y */ + @media print and (orientation: landscape) { .d {color: aqua; } } /* y */ + @media all and (orientation: landscape) { .e { color: aqua; } } /* y */ + + + /* negative cases */ + @media all and (orientation: portrait) { .f { color: aqua; } } /* n */ + + @media (orientation: portrait) { .g { color: aqua; } } /* n */ + @media print and (orientation: portrait) { .h { color: aqua; } } /* n */ + + @media screen and (orientation: landscape) { .i {color: aqua; } } /* n */ + @media screen and (orientation: portrait) { .j {color: aqua; } } /* n */ + + ]]></style> +</head> + +<body> + <p class="a">a</p> + <p class="b">b</p> + <p class="c">c</p> + <p class="d">d</p> + <p class="e">e</p> + <p class="f">f</p> + <p class="g">g</p> + <p class="h">h</p> + <p class="i">i</p> + <p class="j">j</p> +</body> +</html> diff --git a/layout/reftests/css-mediaqueries/mq_print_overflow-block-ref.html b/layout/reftests/css-mediaqueries/mq_print_overflow-block-ref.html new file mode 100644 index 0000000000..9f7d1c3379 --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_print_overflow-block-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html class=reftest-paged> + <style>html{font-size:12pt}</style> + <span>A</span> + <span>B</span> + <span>D</span> diff --git a/layout/reftests/css-mediaqueries/mq_print_overflow-block.html b/layout/reftests/css-mediaqueries/mq_print_overflow-block.html new file mode 100644 index 0000000000..4dd3183754 --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_print_overflow-block.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html class=reftest-paged> + <style> + html{font-size:12pt} + @media (overflow-block: none) { + .a { display: none } + } + @media (overflow-block: scroll) { + .b { display: none } + } + @media (overflow-block: paged) { + .c { display: none } + } + @media (overflow-block: something-new-and-unknown) { + .d { display: none } + } + @media (overflow-block) { + .e { display: none } + } + </style> + <span class=a>A</span> + <span class=b>B</span> + <span class=c>C</span> + <span class=d>D</span> + <span class=e>E</span> diff --git a/layout/reftests/css-mediaqueries/mq_print_overflow-inline-ref.html b/layout/reftests/css-mediaqueries/mq_print_overflow-inline-ref.html new file mode 100644 index 0000000000..d9a763ff13 --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_print_overflow-inline-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<html class=reftest-paged> + <span>B</span> + <span>C</span> + <span>D</span> diff --git a/layout/reftests/css-mediaqueries/mq_print_overflow-inline.html b/layout/reftests/css-mediaqueries/mq_print_overflow-inline.html new file mode 100644 index 0000000000..15d8fa10b5 --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_print_overflow-inline.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html class=reftest-paged> + <style> + @media (overflow-inline: none) { + .a { display: none } + } + @media (overflow-inline: scroll) { + .b { display: none } + } + @media (overflow-inline) { + .c { display: none } + } + @media (overflow-inline: something-new-and-unknown) { + .d { display: none } + } + </style> + <span class=a>A</span> + <span class=b>B</span> + <span class=c>C</span> + <span class=d>D</span> diff --git a/layout/reftests/css-mediaqueries/mq_print_update-ref.html b/layout/reftests/css-mediaqueries/mq_print_update-ref.html new file mode 100644 index 0000000000..0080a98de3 --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_print_update-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html class=reftest-paged> + <style>html{font-size:12pt}</style> + <span>B</span> + <span>C</span> + <span>D</span> + <span>E</span> diff --git a/layout/reftests/css-mediaqueries/mq_print_update.html b/layout/reftests/css-mediaqueries/mq_print_update.html new file mode 100644 index 0000000000..719be06f38 --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_print_update.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html class=reftest-paged> + <style> + html{font-size:12pt} + @media (update: none) { + .a { display: none } + } + @media (update: slow) { + .b { display: none } + } + @media (update: fast) { + .c { display: none } + } + @media (update: something-new-and-unknown) { + .d { display: none } + } + @media (update) { + .e { display: none } + } + </style> + <span class=a>A</span> + <span class=b>B</span> + <span class=c>C</span> + <span class=d>D</span> + <span class=e>E</span> diff --git a/layout/reftests/css-mediaqueries/mq_print_width.xhtml b/layout/reftests/css-mediaqueries/mq_print_width.xhtml new file mode 100644 index 0000000000..f93d16296d --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_print_width.xhtml @@ -0,0 +1,57 @@ +<?xml version="1.0" encoding="iso-8859-1" ?> +<!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" class="reftest-paged"> +<head> + <title>Media Query - Print mode test - Width</title> + <style type="text/css"><![CDATA[ + p {height: 10px; width: 100px; color: yellow; } + @media print { .a { color: aqua; } } + @media screen { .b { color: aqua; } } + + /* we set the width to 5 inches/360pt/127mm in the reftest-paged class, -0.5 inches + for each margin, that makes 4 inches / 288pt / 101.6mm */ + + @media (width: 4in) { .c { color: aqua; } } /* y */ + @media (width: 288pt) { .d { color: aqua; } } /* y */ + @media (width: 101.6mm) { .e { color: aqua; } } /* y */ + + @media print and (width: 4in) { .f {color: aqua; } } /* y */ + @media print and (width: 288pt) { .g {color: aqua; } }/* y */ + @media print and (width: 101.6mm) { .h {color: aqua; } }/* y */ + + @media all and (width: 4in) { .i { color: aqua; } } /* y */ + + + /* negative cases */ + @media all and (width: 5in) { .j { color: aqua; } } /* n */ + + @media (width: 130mm) { .k { color: aqua; } } /* n */ + @media (width: 6in) { .l { color: aqua; } } /* n */ + @media (width: 400pt) { .m { color: aqua; } } /* n */ + + @media screen and (width: 4in) { .n {color: aqua; } } /* n */ + @media screen and (width: 288pt) { .o {color: aqua; } } /* n */ + @media screen and (width: 101.6mm) { .p {color: aqua; } } /* n */ + + ]]></style> +</head> + +<body> + <p class="a">a</p> + <p class="b">b</p> + <p class="c">c</p> + <p class="d">d</p> + <p class="e">e</p> + <p class="f">f</p> + <p class="g">g</p> + <p class="h">h</p> + <p class="i">i</p> + <p class="j">j</p> + <p class="k">k</p> + <p class="l">l</p> + <p class="m">m</p> + <p class="n">n</p> + <p class="o">o</p> + <p class="p">p</p> +</body> +</html> diff --git a/layout/reftests/css-mediaqueries/mq_update-ref.html b/layout/reftests/css-mediaqueries/mq_update-ref.html new file mode 100644 index 0000000000..faae3a084b --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_update-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<html> + <span>A</span> + <span>B</span> + <span>D</span> diff --git a/layout/reftests/css-mediaqueries/mq_update-ref.svg b/layout/reftests/css-mediaqueries/mq_update-ref.svg new file mode 100644 index 0000000000..7f1bcd2848 --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_update-ref.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + circle { fill: red } + .c { fill: green } + .e { fill: green } + </style> + <circle cx="5" cy="10" r="5" class="a">A</circle> + <circle cx="15" cy="10" r="5" class="b">B</circle> + <circle cx="25" cy="10" r="5" class="c">C</circle> + <circle cx="35" cy="10" r="5" class="d">D</circle> + <circle cx="45" cy="10" r="5" class="e">E</circle> +</svg> diff --git a/layout/reftests/css-mediaqueries/mq_update.html b/layout/reftests/css-mediaqueries/mq_update.html new file mode 100644 index 0000000000..aefd2c399f --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_update.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <style> + @media (update: none) { + .a { display: none } + } + @media (update: slow) { + .b { display: none } + } + @media (update: fast) { + .c { display: none } + } + @media (update: something-new-and-unknown) { + .d { display: none } + } + @media (update) { + .e { display: none } + } + </style> + <span class=a>A</span> + <span class=b>B</span> + <span class=c>C</span> + <span class=d>D</span> + <span class=e>E</span> diff --git a/layout/reftests/css-mediaqueries/mq_update.svg b/layout/reftests/css-mediaqueries/mq_update.svg new file mode 100644 index 0000000000..9117feae1d --- /dev/null +++ b/layout/reftests/css-mediaqueries/mq_update.svg @@ -0,0 +1,25 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + circle { fill: red } + @media (update: none) { + .a { fill: green } + } + @media (update: slow) { + .b { fill: green } + } + @media (update: fast) { + .c { fill: green } + } + @media (update: something-new-and-unknown) { + .d { fill: green } + } + @media (update) { + .e { fill: green } + } + </style> + <circle cx="5" cy="10" r="5" class="a">A</circle> + <circle cx="15" cy="10" r="5" class="b">B</circle> + <circle cx="25" cy="10" r="5" class="c">C</circle> + <circle cx="35" cy="10" r="5" class="d">D</circle> + <circle cx="45" cy="10" r="5" class="e">E</circle> +</svg> diff --git a/layout/reftests/css-mediaqueries/reftest.list b/layout/reftests/css-mediaqueries/reftest.list new file mode 100644 index 0000000000..64c39ce93f --- /dev/null +++ b/layout/reftests/css-mediaqueries/reftest.list @@ -0,0 +1,37 @@ +fuzzy-if(Android,0-8,0-454) == mq_print_height.xhtml mq_print-ref.xhtml # bug 1178697 +== mq_print_deviceheight.xhtml mq_print-ref.xhtml +== mq_print_width.xhtml mq_print-ref.xhtml +== mq_print_minwidth.xhtml mq_print-ref.xhtml +== mq_print_minheight.xhtml mq_print-ref.xhtml +== mq_print_aspectratio.xhtml mq_print-ref.xhtml +== mq_print_deviceaspectratio.xhtml mq_print-ref.xhtml +== mq_print_devicewidth.xhtml mq_print-ref.xhtml +fuzzy-if(Android,0-8,0-454) == mq_print_orientation.xhtml mq_print_orientation-ref.xhtml +fuzzy-if(Android,0-8,0-454) == mq_print_maxheight.xhtml mq_print-ref.xhtml +== mq_print_maxwidth.xhtml mq_print-ref.xhtml +== mq_overflow-block.html mq_overflow-block-ref.html +== mq_print_overflow-block.html mq_print_overflow-block-ref.html +== mq_overflow-block.svg mq_overflow-block-ref.svg +== mq_overflow-inline.html mq_overflow-inline-ref.html +== mq_print_overflow-inline.html mq_print_overflow-inline-ref.html +== mq_update.html mq_update-ref.html +== mq_print_update.html mq_print_update-ref.html +== mq_update.svg mq_update-ref.svg + +== mq_print_maxwidth_updown.xhtml mq_print-ref.xhtml +== mq_print_maxheight_updown.xhtml mq_print-ref.xhtml +== mq_print_minheight_updown.xhtml mq_print-ref.xhtml +== mq_print_minwidth_updown.xhtml mq_print-ref.xhtml +test-pref(ui.prefersReducedMotion,0) == mq_prefers_reduced_motion.html about:blank +test-pref(ui.prefersReducedMotion,1) == mq_prefers_reduced_motion.html greenbox.html +test-pref(ui.prefersReducedMotion,0) == mq_prefers_reduced_motion_no_preference.html greenbox.html +test-pref(ui.prefersReducedMotion,1) == mq_prefers_reduced_motion_no_preference.html about:blank +test-pref(ui.prefersReducedMotion,0) == mq_prefers_reduced_motion_reduce.html about:blank +test-pref(ui.prefersReducedMotion,1) == mq_prefers_reduced_motion_reduce.html greenbox.html +test-pref(privacy.resistFingerprinting,true) test-pref(ui.prefersReducedMotion,1) == mq_prefers_reduced_motion_reduce.html about:blank +test-pref(privacy.resistFingerprinting,true) == mq_prefers_reduced_motion_both.html greenbox.html +test-pref(layout.css.prefers-color-scheme.content-override,0) == mq_prefers_color_scheme.html greenbox.html +test-pref(privacy.resistFingerprinting,true) == mq_prefers_color_scheme_light.html greenbox.html +== mq_prefers_color_scheme_print.html greenbox-print.html +test-pref(layout.css.prefers-color-scheme.content-override,1) == mq_prefers_color_scheme_light.html greenbox.html +test-pref(layout.css.prefers-color-scheme.content-override,0) == mq_prefers_color_scheme_dark.html greenbox.html |
