diff options
Diffstat (limited to 'layout/reftests/css-mediaqueries')
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> |