Add m-esr52 at 52.6.0

author: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
committer: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
commit: 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree: 10027f336435511475e392454359edea8e25895d /layout/reftests/css-mediaqueries
parent: 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download: UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
24 files changed, 1022 insertions, 0 deletions
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 000000000..681fa39ac
--- /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 000000000..bcd0ad817
--- /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 000000000..5fd48ce91
--- /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 000000000..95a6e965a
--- /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 000000000..82b54ef36
--- /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 000000000..98ed475d3
--- /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 000000000..c0dd2a041
--- /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 000000000..91e09f062
--- /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 000000000..3c6e3d228
--- /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 000000000..81f559055
--- /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 000000000..56108b0ba
--- /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 000000000..c26269bfc
--- /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 000000000..d7a49ca8d
--- /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 000000000..aff60f7b8
--- /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 000000000..a7eb6a541
--- /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 000000000..151686e72
--- /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; } }
+
+    /* 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_width.xhtml b/layout/reftests/css-mediaqueries/mq_print_width.xhtml
new file mode 100644
index 000000000..5474b8f1a
--- /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-stylo.list b/layout/reftests/css-mediaqueries/reftest-stylo.list
new file mode 100644
index 000000000..e1bc51cd4
--- /dev/null
+++ b/layout/reftests/css-mediaqueries/reftest-stylo.list
@@ -0,0 +1,50 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+fuzzy-if(Android,8,454) skip-if(B2G||Mulet) == mq_print_height.xhtml mq_print_height.xhtml
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop, bug 1178697
+skip-if(B2G||Mulet) == mq_print_deviceheight.xhtml mq_print_deviceheight.xhtml
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == mq_print_width.xhtml mq_print_width.xhtml
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == mq_print_minwidth.xhtml mq_print_minwidth.xhtml
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == mq_print_minheight.xhtml mq_print_minheight.xhtml
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == mq_print_aspectratio.xhtml mq_print_aspectratio.xhtml
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == mq_print_deviceaspectratio.xhtml mq_print_deviceaspectratio.xhtml
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == mq_print_devicewidth.xhtml mq_print_devicewidth.xhtml
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+fuzzy-if(Android,8,454) skip-if(B2G||Mulet) == mq_print_orientation.xhtml mq_print_orientation.xhtml
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+fuzzy-if(Android,8,454) skip-if(B2G||Mulet) == mq_print_maxheight.xhtml mq_print_maxheight.xhtml
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == mq_print_maxwidth.xhtml mq_print_maxwidth.xhtml
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+skip-if(B2G||Mulet) == mq_print_maxwidth_updown.xhtml mq_print_maxwidth_updown.xhtml
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == mq_print_maxheight_updown.xhtml mq_print_maxheight_updown.xhtml
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == mq_print_minheight_updown.xhtml mq_print_minheight_updown.xhtml
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == mq_print_minwidth_updown.xhtml mq_print_minwidth_updown.xhtml
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+skip == scoped-mq-update.html scoped-mq-update.html
+== system-metrics-1.html system-metrics-1.html
diff --git a/layout/reftests/css-mediaqueries/reftest.list b/layout/reftests/css-mediaqueries/reftest.list
new file mode 100644
index 000000000..4e4e28683
--- /dev/null
+++ b/layout/reftests/css-mediaqueries/reftest.list
@@ -0,0 +1,19 @@
+fuzzy-if(Android,8,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,8,454) == mq_print_orientation.xhtml mq_print_orientation-ref.xhtml
+fuzzy-if(Android,8,454) == 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
+
+== scoped-mq-update.html scoped-mq-update-ref.html
+== system-metrics-1.html system-metrics-1-ref.html
diff --git a/layout/reftests/css-mediaqueries/scoped-mq-update-helper.html b/layout/reftests/css-mediaqueries/scoped-mq-update-helper.html
new file mode 100644
index 000000000..f374a8f13
--- /dev/null
+++ b/layout/reftests/css-mediaqueries/scoped-mq-update-helper.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<body>
+<style>
+body { width: 100%; height: 100%; background-color: red; }
+</style>
+<style scoped>
+@media (max-width: 200px) {
+  body { background-color: green; }
+}
+</style>
diff --git a/layout/reftests/css-mediaqueries/scoped-mq-update-ref.html b/layout/reftests/css-mediaqueries/scoped-mq-update-ref.html
new file mode 100644
index 000000000..36c12f0ba
--- /dev/null
+++ b/layout/reftests/css-mediaqueries/scoped-mq-update-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<iframe src="scoped-mq-update-helper.html" width="100" height="100" style="border: none"></iframe>
diff --git a/layout/reftests/css-mediaqueries/scoped-mq-update.html b/layout/reftests/css-mediaqueries/scoped-mq-update.html
new file mode 100644
index 000000000..f46a56708
--- /dev/null
+++ b/layout/reftests/css-mediaqueries/scoped-mq-update.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<iframe src="scoped-mq-update-helper.html" width="300" height="100" style="border: none"></iframe>
+<script>
+function test() {
+  document.querySelector("iframe").width = "100";
+  document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", test, false);
+</script>
diff --git a/layout/reftests/css-mediaqueries/system-metrics-1-ref.html b/layout/reftests/css-mediaqueries/system-metrics-1-ref.html
new file mode 100644
index 000000000..4a5ca7f59
--- /dev/null
+++ b/layout/reftests/css-mediaqueries/system-metrics-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<title>test for system metric media queries (reference)</title>
+<style>
+
+p { color: green; }
+
+</style>
+<p>This text should be green.</p>
diff --git a/layout/reftests/css-mediaqueries/system-metrics-1.html b/layout/reftests/css-mediaqueries/system-metrics-1.html
new file mode 100644
index 000000000..b36851a39
--- /dev/null
+++ b/layout/reftests/css-mediaqueries/system-metrics-1.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<title>test for system metric media queries</title>
+<style>
+
+p { color: red; }
+
+/* Exactly one of the next two should apply */
+
+@media all and (-moz-scrollbar-end-backward) {
+  p:-moz-system-metric(scrollbar-end-backward) { color: green; }
+}
+
+@media not all and (-moz-scrollbar-end-backward) {
+  p:not(:-moz-system-metric(scrollbar-end-backward)) { color: green; }
+}
+
+/* Neither of these should apply */
+
+@media not all and (-moz-scrollbar-end-backward) {
+  p:-moz-system-metric(scrollbar-end-backward) { color: red; }
+}
+
+@media all and (-moz-scrollbar-end-backward) {
+  p:not(:-moz-system-metric(scrollbar-end-backward)) { color: red; }
+}
+
+</style>
+<p>This text should be green.</p>
author	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
committer	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
commit	5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree	10027f336435511475e392454359edea8e25895d /layout/reftests/css-mediaqueries
parent	49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download	UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip