summaryrefslogtreecommitdiffstats
path: root/layout/reftests/css-mediaqueries
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/css-mediaqueries')
-rw-r--r--layout/reftests/css-mediaqueries/greenbox-print.html13
-rw-r--r--layout/reftests/css-mediaqueries/greenbox.html13
-rw-r--r--layout/reftests/css-mediaqueries/mq_overflow-block-ref.html5
-rw-r--r--layout/reftests/css-mediaqueries/mq_overflow-block-ref.svg12
-rw-r--r--layout/reftests/css-mediaqueries/mq_overflow-block.html24
-rw-r--r--layout/reftests/css-mediaqueries/mq_overflow-block.svg25
-rw-r--r--layout/reftests/css-mediaqueries/mq_overflow-inline-ref.html4
-rw-r--r--layout/reftests/css-mediaqueries/mq_overflow-inline.html20
-rw-r--r--layout/reftests/css-mediaqueries/mq_prefers_color_scheme.html16
-rw-r--r--layout/reftests/css-mediaqueries/mq_prefers_color_scheme_dark.html19
-rw-r--r--layout/reftests/css-mediaqueries/mq_prefers_color_scheme_light.html19
-rw-r--r--layout/reftests/css-mediaqueries/mq_prefers_color_scheme_print.html19
-rw-r--r--layout/reftests/css-mediaqueries/mq_prefers_reduced_motion.html16
-rw-r--r--layout/reftests/css-mediaqueries/mq_prefers_reduced_motion_both.html19
-rw-r--r--layout/reftests/css-mediaqueries/mq_prefers_reduced_motion_no_preference.html16
-rw-r--r--layout/reftests/css-mediaqueries/mq_prefers_reduced_motion_reduce.html16
-rw-r--r--layout/reftests/css-mediaqueries/mq_print-ref.xhtml33
-rw-r--r--layout/reftests/css-mediaqueries/mq_print_aspectratio.xhtml55
-rw-r--r--layout/reftests/css-mediaqueries/mq_print_deviceaspectratio.xhtml55
-rw-r--r--layout/reftests/css-mediaqueries/mq_print_deviceheight.xhtml55
-rw-r--r--layout/reftests/css-mediaqueries/mq_print_devicewidth.xhtml55
-rw-r--r--layout/reftests/css-mediaqueries/mq_print_height.xhtml56
-rw-r--r--layout/reftests/css-mediaqueries/mq_print_maxheight.xhtml57
-rw-r--r--layout/reftests/css-mediaqueries/mq_print_maxheight_updown.xhtml60
-rw-r--r--layout/reftests/css-mediaqueries/mq_print_maxwidth.xhtml59
-rw-r--r--layout/reftests/css-mediaqueries/mq_print_maxwidth_updown.xhtml58
-rw-r--r--layout/reftests/css-mediaqueries/mq_print_minheight.xhtml58
-rw-r--r--layout/reftests/css-mediaqueries/mq_print_minheight_updown.xhtml60
-rw-r--r--layout/reftests/css-mediaqueries/mq_print_minwidth.xhtml59
-rw-r--r--layout/reftests/css-mediaqueries/mq_print_minwidth_updown.xhtml60
-rw-r--r--layout/reftests/css-mediaqueries/mq_print_orientation-ref.xhtml27
-rw-r--r--layout/reftests/css-mediaqueries/mq_print_orientation.xhtml41
-rw-r--r--layout/reftests/css-mediaqueries/mq_print_overflow-block-ref.html6
-rw-r--r--layout/reftests/css-mediaqueries/mq_print_overflow-block.html25
-rw-r--r--layout/reftests/css-mediaqueries/mq_print_overflow-inline-ref.html5
-rw-r--r--layout/reftests/css-mediaqueries/mq_print_overflow-inline.html20
-rw-r--r--layout/reftests/css-mediaqueries/mq_print_update-ref.html7
-rw-r--r--layout/reftests/css-mediaqueries/mq_print_update.html25
-rw-r--r--layout/reftests/css-mediaqueries/mq_print_width.xhtml57
-rw-r--r--layout/reftests/css-mediaqueries/mq_update-ref.html5
-rw-r--r--layout/reftests/css-mediaqueries/mq_update-ref.svg12
-rw-r--r--layout/reftests/css-mediaqueries/mq_update.html24
-rw-r--r--layout/reftests/css-mediaqueries/mq_update.svg25
-rw-r--r--layout/reftests/css-mediaqueries/reftest.list37
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