зеркало из https://github.com/mozilla/pjs.git
Add tests for media queries in print media. (Bug 466171) r=dbaron
This commit is contained in:
Joel Maher
Родитель
41901c7c26
Коммит
1055647be1
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче