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 000000000000..681fa39ac50d
--- /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-print">
+<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 000000000000..bcd0ad817242
--- /dev/null
+++ b/layout/reftests/css-mediaqueries/mq_print_aspectratio.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-print">
+<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; } }
+
+    /* not sure if the 3/5 will work as aspect ratio is width/height */
+    @media (aspect-ratio: 5/3) { .c { color: aqua; } }    /* y */
+    @media (aspect-ratio: 10/6) { .d { color: aqua; } }  /* y */
+    @media (aspect-ratio: 15/9) { .e { color: aqua; } }  /* y */
+
+    @media print and (aspect-ratio: 5/3) { .f {color: aqua; } }  /* y */
+    @media print and (aspect-ratio: 10/6) { .g {color: aqua; } }/* y */
+    @media print and (aspect-ratio: 15/9) { .h {color: aqua; } }/* y */
+
+    @media all and (aspect-ratio: 5/3) { .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: 5/3) { .n {color: aqua; } }   /* n */
+    @media screen and (aspect-ratio: 10/6) { .o {color: aqua; } } /* n */
+    @media screen and (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_deviceaspectratio.xhtml b/layout/reftests/css-mediaqueries/mq_print_deviceaspectratio.xhtml
new file mode 100644
index 000000000000..5fd48ce91992
--- /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-print">
+<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 000000000000..95a6e965a9c8
--- /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-print">
+<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-print 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 000000000000..82b54ef36f02
--- /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-print">
+<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-print 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 000000000000..98ed475d3631
--- /dev/null
+++ b/layout/reftests/css-mediaqueries/mq_print_height.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-print">
+<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-print class*/
+    @media (height: 3in) { .c { color: aqua; } }    /* y */
+    @media (height: 216pt) { .d { color: aqua; } }  /* y */
+    @media (height: 76.2mm) { .e { color: aqua; } }  /* y */
+
+    @media print and (height: 3in) { .f {color: aqua; } }  /* y */
+    @media print and (height: 216pt) { .g {color: aqua; } }/* y */
+    @media print and (height: 76.2mm) { .h {color: aqua; } }/* y */
+
+    @media all and (height: 3in) { .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: 3in) { .n {color: aqua; } }   /* n */
+    @media screen and (height: 216pt) { .o {color: aqua; } } /* n */
+    @media screen and (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_maxheight.xhtml b/layout/reftests/css-mediaqueries/mq_print_maxheight.xhtml
new file mode 100644
index 000000000000..c0dd2a041df1
--- /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-print">
+<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-print class*/
+    @media (max-height: 3in) { .c { color: aqua; } }    /* y */
+    @media (max-height: 216pt) { .d { color: aqua; } }  /* y */ 
+    @media (max-height: 76.2mm) { .e { color: aqua; } }  /* y */
+
+    @media print and (max-height: 3in) { .f {color: aqua; } }  /* y */ 
+    @media print and (max-height: 216pt) { .g {color: aqua; } }/* y */
+    @media print and (max-height: 76.2mm) { .h {color: aqua; } }/* y */
+
+    @media all and (max-height: 3in) { .i { color: aqua; } } /* y */
+
+
+    /* negative cases - values < set values */
+    @media all and (max-height: 2in) { .j { color: aqua; } } /* n */
+
+    @media (max-height: 50mm) { .k { color: aqua; } } /* n */ 
+    @media (max-height: 1.57in) { .l { color: aqua; } }  /* n */
+    @media (max-height: 157pt) { .m { color: aqua; } } /* n */
+
+    @media screen and (max-height: 3in) { .n {color: aqua; } }   /* n */ 
+    @media screen and (max-height: 216pt) { .o {color: aqua; } } /* n */
+    @media screen and (max-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_maxheight_updown.xhtml b/layout/reftests/css-mediaqueries/mq_print_maxheight_updown.xhtml
new file mode 100644
index 000000000000..91e09f062e3f
--- /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-print">
+<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-print 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 000000000000..3c6e3d2288d1
--- /dev/null
+++ b/layout/reftests/css-mediaqueries/mq_print_maxwidth.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-print">
+<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-print class*/
+    @media (max-width: 5in) { .c { color: aqua; } }    /* y */
+    @media (max-width: 360pt) { .d { color: aqua; } }  /* y */ 
+    @media (max-width: 127mm) { .e { color: aqua; } }  /* y */
+
+    @media print and (max-width: 5in) { .f {color: aqua; } }  /* y */ 
+    @media print and (max-width: 360pt) { .g {color: aqua; } }/* y */
+    @media print and (max-width: 127mm) { .h {color: aqua; } }/* y */
+
+    @media all and (max-width: 5in) { .i { color: aqua; } } /* y */
+
+
+    /* negative cases - values < set values */
+    @media all and (max-width: 4in) { .j { color: aqua; } } /* n */
+
+    @media (max-width: 31mm) { .k { color: aqua; } } /* n */ 
+    @media (max-width: 3.14in) { .l { color: aqua; } }  /* n */
+    @media (max-width: 314pt) { .m { color: aqua; } } /* n */
+
+    @media screen and (max-width: 5in) { .n {color: aqua; } }   /* n */ 
+    @media screen and (max-width: 360pt) { .o {color: aqua; } } /* n */
+    @media screen and (max-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_maxwidth_updown.xhtml b/layout/reftests/css-mediaqueries/mq_print_maxwidth_updown.xhtml
new file mode 100644
index 000000000000..81f559055230
--- /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-print">
+<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-print 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 000000000000..56108b0ba14c
--- /dev/null
+++ b/layout/reftests/css-mediaqueries/mq_print_minheight.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-print">
+<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/76.2mm in the reftest-print class*/
+    @media (min-height: 3in) { .c { color: aqua; } }    /* y */
+    @media (min-height: 216pt) { .d { color: aqua; } }  /* y */ 
+    @media (min-height: 76.2mm) { .e { color: aqua; } }  /* y */
+
+    @media print and (min-height: 3in) { .f {color: aqua; } }  /* y */ 
+    @media print and (min-height: 216pt) { .g {color: aqua; } }/* y */
+    @media print and (min-height: 76.2mm) { .h {color: aqua; } }/* y */
+
+    @media all and (min-height: 3in) { .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: 3in) { .n {color: aqua; } }   /* n */ 
+    @media screen and (min-height: 216pt) { .o {color: aqua; } } /* n */
+    @media screen and (min-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_minheight_updown.xhtml b/layout/reftests/css-mediaqueries/mq_print_minheight_updown.xhtml
new file mode 100644
index 000000000000..c26269bfc890
--- /dev/null
+++ b/layout/reftests/css-mediaqueries/mq_print_minheight_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-print">
+<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/76.2mm in the reftest-print class*/
+    /* test less than set value */
+    @media (min-height: 1.57in) { .c { color: aqua; } }    /* y */
+    @media (min-height: 157pt) { .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: 157pt) { .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 000000000000..d7a49ca8dba3
--- /dev/null
+++ b/layout/reftests/css-mediaqueries/mq_print_minwidth.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-print">
+<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-print class*/
+    @media (min-width: 5in) { .c { color: aqua; } }    /* y */
+    @media (min-width: 360pt) { .d { color: aqua; } }  /* y */ 
+    @media (min-width: 127mm) { .e { color: aqua; } }  /* y */
+
+    @media print and (min-width: 5in) { .f {color: aqua; } }  /* y */ 
+    @media print and (min-width: 360pt) { .g {color: aqua; } }/* y */
+    @media print and (min-width: 127mm) { .h {color: aqua; } }/* y */
+
+    @media all and (min-width: 5in) { .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: 5in) { .n {color: aqua; } }   /* n */ 
+    @media screen and (min-width: 360pt) { .o {color: aqua; } } /* n */
+    @media screen and (min-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_minwidth_updown.xhtml b/layout/reftests/css-mediaqueries/mq_print_minwidth_updown.xhtml
new file mode 100644
index 000000000000..aff60f7b8ae1
--- /dev/null
+++ b/layout/reftests/css-mediaqueries/mq_print_minwidth_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-print">
+<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-print class*/
+    /* test values less than set */
+    @media (min-width: 3.14in) { .c { color: aqua; } }    /* y */
+    @media (min-width: 314pt) { .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: 314pt) { .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 000000000000..a7eb6a54141a
--- /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-print">
+<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 000000000000..354f3a19d13e
--- /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-print">
+<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; } }
+
+    /* using orientation portrait works.  we are a 5/3 which is landscape though */
+    @media (orientation: portrait) { .c { color: aqua; } }    /* y */
+    @media print and (orientation: portrait) { .d {color: aqua; } }  /* y */
+    @media all and (orientation: portrait) { .e { color: aqua; } } /* y */
+
+
+    /* negative cases */
+    @media all and (orientation: landscape) { .f { color: aqua; } } /* n */
+
+    @media (orientation: landscape) { .g { color: aqua; } } /* n */
+    @media print and (orientation: landscape) { .h { color: aqua; } }  /* n */
+
+    @media screen and (orientation: portrait) { .i {color: aqua; } }   /* n */
+    @media screen and (orientation: landscape) { .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_width.xhtml b/layout/reftests/css-mediaqueries/mq_print_width.xhtml
new file mode 100644
index 000000000000..5474b8f1ac22
--- /dev/null
+++ b/layout/reftests/css-mediaqueries/mq_print_width.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-print">
+<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-print class*/
+    @media (width: 5in) { .c { color: aqua; } }    /* y */
+    @media (width: 360pt) { .d { color: aqua; } }  /* y */
+    @media (width: 127mm) { .e { color: aqua; } }  /* y */
+
+    @media print and (width: 5in) { .f {color: aqua; } }  /* y */
+    @media print and (width: 360pt) { .g {color: aqua; } }/* y */
+    @media print and (width: 127mm) { .h {color: aqua; } }/* y */
+
+    @media all and (width: 5in) { .i { color: aqua; } } /* y */
+
+
+    /* negative cases */
+    @media all and (width: 6in) { .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: 5in) { .n {color: aqua; } }   /* n */
+    @media screen and (width: 360pt) { .o {color: aqua; } } /* n */
+    @media screen and (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/reftest.list b/layout/reftests/css-mediaqueries/reftest.list
new file mode 100644
index 000000000000..2a4bd539de20
--- /dev/null
+++ b/layout/reftests/css-mediaqueries/reftest.list
@@ -0,0 +1,16 @@
+== mq_print_height.xhtml mq_print-ref.xhtml
+== 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
+== mq_print_orientation.xhtml mq_print_orientation-ref.xhtml
+== mq_print_maxheight.xhtml mq_print-ref.xhtml
+== mq_print_maxwidth.xhtml mq_print-ref.xhtml
+
+== 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
diff --git a/layout/reftests/reftest.list b/layout/reftests/reftest.list
index 1ce641ac7bfd..7c4c31bc5795 100644
--- a/layout/reftests/reftest.list
+++ b/layout/reftests/reftest.list
@@ -38,6 +38,9 @@ include css-import/reftest.list
 # css character encoding tests
 include css-charset/reftest.list
 
+# css media queries (tests for print mode)
+include css-mediaqueries/reftest.list
+
 # columns/
 include columns/reftest.list
 
