Update web-platform-tests and CSS tests.

- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180.
- Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
This commit is contained in:
Ms2ger 2017-02-06 11:06:12 +01:00
parent fb4f421c8b
commit 296fa2512b
21852 changed files with 2080936 additions and 892894 deletions

View file

@ -13,7 +13,7 @@
<body>
<h1>Media Queries Level 3 Conformance Test Suite</h1>
<h2>Media Queries (0 tests)</h2>
<h2>Media Queries (1 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
@ -31,7 +31,15 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s2">+</a>
<a href="https://www.w3.org/TR/css3-mediaqueries/#media0">2 Media Queries</a></th></tr>
<!-- 0 tests -->
<!-- 1 tests -->
<tr id="media-queries-001-2" class="primary">
<td><strong>
<a href="media-queries-001.htm">media-queries-001</a></strong></td>
<td></td>
<td></td>
<td>Basic media queries test
</td>
</tr>
</tbody>
<tbody id="s2.#expressions">
<!-- 0 tests -->

View file

@ -13,7 +13,7 @@
<body>
<h1>Media Queries Level 3 Conformance Test Suite</h1>
<h2>Media features (14 tests)</h2>
<h2>Media features (16 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
@ -37,7 +37,7 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.1">+</a>
<a href="https://www.w3.org/TR/css3-mediaqueries/#width">4.1 width</a></th></tr>
<!-- 4 tests -->
<!-- 5 tests -->
<tr id="calc-in-media-queries-001-4.1" class="">
<td>
<a href="calc-in-media-queries-001.htm">calc-in-media-queries-001</a></td>
@ -60,6 +60,14 @@
</ul>
</td>
</tr>
<tr id="media-queries-002-4.1" class="primary">
<td><strong>
<a href="media-queries-002.htm">media-queries-002</a></strong></td>
<td></td>
<td></td>
<td>The 'width' media feature (for visual devices with desktop viewport widths)
</td>
</tr>
<tr id="min-width-001-4.1" class="">
<td>
<a href="min-width-001.htm">min-width-001</a></td>
@ -233,7 +241,15 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.8">+</a>
<a href="https://www.w3.org/TR/css3-mediaqueries/#color">4.8 color</a></th></tr>
<!-- 0 tests -->
<!-- 1 tests -->
<tr id="media-queries-003-4.8" class="primary">
<td><strong>
<a href="media-queries-003.htm">media-queries-003</a></strong></td>
<td></td>
<td></td>
<td>The 'color' media feature (for color devices with bit depth less than 4096 bits per pixel)
</td>
</tr>
</tbody>
<tbody id="s4.9">
<tr><th colspan="4" scope="rowgroup">

View file

@ -13,7 +13,7 @@
<body>
<h1>Media Queries Level 3 Conformance Test Suite</h1>
<h2>Units (4 tests)</h2>
<h2>Units (8 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
@ -31,7 +31,7 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s6">+</a>
<a href="https://www.w3.org/TR/css3-mediaqueries/#units">6 Units</a></th></tr>
<!-- 4 tests -->
<!-- 8 tests -->
<tr id="mq-calc-002-6" class="">
<td>
<a href="mq-calc-002.htm">mq-calc-002</a></td>
@ -76,6 +76,50 @@
</ul>
</td>
</tr>
<tr id="relative-units-001-6" class="primary">
<td><strong>
<a href="relative-units-001.htm">relative-units-001</a></strong></td>
<td><a href="reference/ref-green-body.htm">=</a> </td>
<td></td>
<td>Font-relative length units (rem) in width media queries
<ul class="assert">
<li>Font-relative length units (such as 'rem') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }</li>
</ul>
</td>
</tr>
<tr id="relative-units-002-6" class="primary">
<td><strong>
<a href="relative-units-002.htm">relative-units-002</a></strong></td>
<td><a href="reference/ref-green-body.htm">=</a> </td>
<td></td>
<td>Font-relative length units (em) in width media queries
<ul class="assert">
<li>Font-relative length units (such as 'em') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }</li>
</ul>
</td>
</tr>
<tr id="relative-units-003-6" class="primary">
<td><strong>
<a href="relative-units-003.htm">relative-units-003</a></strong></td>
<td><a href="reference/ref-green-body.htm">=</a> </td>
<td></td>
<td>Font-relative length units (ex) in width media queries
<ul class="assert">
<li>Font-relative length units (such as 'ex') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }</li>
</ul>
</td>
</tr>
<tr id="relative-units-004-6" class="primary">
<td><strong>
<a href="relative-units-004.htm">relative-units-004</a></strong></td>
<td><a href="reference/ref-green-body.htm">=</a> </td>
<td></td>
<td>Font-relative length units (ch) in width media queries
<ul class="assert">
<li>Font-relative length units (such as 'ch') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s6.1">
<tr><th colspan="4" scope="rowgroup">

View file

@ -0,0 +1,21 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Basic media queries test</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/media/queries/001.html">
<link rel="help" href="https://www.w3.org/TR/css3-mediaqueries/#media0">
<style type="text/css">
@media only screen {
.a, .b { color: green; }
}
@media not only screen {
.b { color: red; }
}
</style>
</head>
<body>
<p class="a"> This line should be green. </p>
<p class="b"> This line should be green. </p>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>The 'width' media feature (for visual devices with desktop viewport widths)</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/media/queries/002.html">
<link rel="help" href="https://www.w3.org/TR/css3-mediaqueries/#width">
<style type="text/css">
@media screen and (width) { .a { color: green; } }
@media screen and (min-width: 1em) { .b { color: green; } }
@media screen and (max-width: 1000000em) { .c { color: green; } }
</style>
</head>
<body>
<p class="a"> This line should be green. </p>
<p class="b"> This line should be green. </p>
<p class="c"> This line should be green. </p>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>The 'color' media feature (for color devices with bit depth less than 4096 bits per pixel)</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/media/queries/003.html">
<link rel="help" href="https://www.w3.org/TR/css3-mediaqueries/#color">
<style type="text/css">
@media screen and (color) { .a { color: green; } }
@media screen and (min-color: 1) { .b { color: green; } }
@media screen and (max-color: 4096) { .c { color: green; } }
</style>
</head>
<body>
<p class="a"> This line should be green. </p>
<p class="b"> This line should be green. </p>
<p class="c"> This line should be green. </p>
</body>
</html>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
<style type="text/css">
body {
background: green;
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
</body>
</html>

View file

@ -2,7 +2,7 @@
<html lang="en-US"><head>
<title>Media Queries Test inner frame</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
<meta content="text/css" http-equiv="Content-Style-Type">
<style media="all" type="text/css" id="style">
body { text-decoration: underline; }

View file

@ -168,6 +168,38 @@
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="relative-units-001" class="">
<tr>
<td rowspan="1" title="Font-relative length units (rem) in width media queries">
<a href="relative-units-001.htm">relative-units-001</a></td>
<td><a href="reference/ref-green-body.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="relative-units-002" class="">
<tr>
<td rowspan="1" title="Font-relative length units (em) in width media queries">
<a href="relative-units-002.htm">relative-units-002</a></td>
<td><a href="reference/ref-green-body.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="relative-units-003" class="">
<tr>
<td rowspan="1" title="Font-relative length units (ex) in width media queries">
<a href="relative-units-003.htm">relative-units-003</a></td>
<td><a href="reference/ref-green-body.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="relative-units-004" class="">
<tr>
<td rowspan="1" title="Font-relative length units (ch) in width media queries">
<a href="relative-units-004.htm">relative-units-004</a></td>
<td><a href="reference/ref-green-body.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
</table>
</body>

View file

@ -17,3 +17,7 @@ mq-calc-002.htm == reference/ref-filled-green-100px-square.htm
mq-calc-003.htm == reference/ref-filled-green-100px-square.htm
mq-calc-004.htm == reference/ref-filled-green-100px-square.htm
mq-calc-005.htm == reference/ref-filled-green-100px-square.htm
relative-units-001.htm == reference/ref-green-body.htm
relative-units-002.htm == reference/ref-green-body.htm
relative-units-003.htm == reference/ref-green-body.htm
relative-units-004.htm == reference/ref-green-body.htm

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Test: Font-relative length units (rem) in width media queries</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert">
<link href="https://www.w3.org/TR/css3-mediaqueries/#units" rel="help">
<link href="https://www.w3.org/TR/mediaqueries-4/#units" rel="help">
<link href="reference/ref-green-body.htm" rel="match">
<meta content="" name="flags">
<meta content="Font-relative length units (such as 'rem') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }" name="assert">
<style>
:root {
font-size: 100000px;/* ~87ft */
}
body {
background: red;
}
@media (min-width: 1rem) {
body {
background: green;
}
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
</body></html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Test: Font-relative length units (em) in width media queries</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert">
<link href="https://www.w3.org/TR/css3-mediaqueries/#units" rel="help">
<link href="https://www.w3.org/TR/mediaqueries-4/#units" rel="help">
<link href="reference/ref-green-body.htm" rel="match">
<meta content="" name="flags">
<meta content="Font-relative length units (such as 'em') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }" name="assert">
<style>
:root {
font-size: 100000px;/* ~87ft */
}
body {
background: red;
}
@media (min-width: 1em) {
body {
background: green;
}
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
</body></html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Test: Font-relative length units (ex) in width media queries</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert">
<link href="https://www.w3.org/TR/css3-mediaqueries/#units" rel="help">
<link href="https://www.w3.org/TR/mediaqueries-4/#units" rel="help">
<link href="reference/ref-green-body.htm" rel="match">
<meta content="" name="flags">
<meta content="Font-relative length units (such as 'ex') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }" name="assert">
<style>
:root {
font-size: 100000px;/* ~87ft */
}
body {
background: red;
}
@media (min-width: 1ex) {
body {
background: green;
}
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
</body></html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Test: Font-relative length units (ch) in width media queries</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert">
<link href="https://www.w3.org/TR/css3-mediaqueries/#units" rel="help">
<link href="https://www.w3.org/TR/mediaqueries-4/#units" rel="help">
<link href="reference/ref-green-body.htm" rel="match">
<meta content="" name="flags">
<meta content="Font-relative length units (such as 'ch') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }" name="assert">
<style>
:root {
font-size: 100000px;/* ~87ft */
}
body {
background: red;
}
@media (min-width: 1ch) {
body {
background: green;
}
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
</body></html>

View file

@ -2,7 +2,7 @@
<html lang="en-US"><head>
<title>Media Queries Test inner frame</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
<meta content="text/css" http-equiv="Content-Style-Type">
<style media="all" type="text/css" id="style">
body { text-decoration: underline; }

View file

@ -27,7 +27,7 @@
<tbody id="s2">
<tr><th><a href="chapter-2.htm">Chapter 2 -
Media Queries</a></th>
<td>(0 Tests)</td></tr>
<td>(1 Tests)</td></tr>
</tbody>
<tbody id="s3">
<tr><th><a href="chapter-3.htm">Chapter 3 -
@ -37,7 +37,7 @@
<tbody id="s4">
<tr><th><a href="chapter-4.htm">Chapter 4 -
Media features</a></th>
<td>(14 Tests)</td></tr>
<td>(16 Tests)</td></tr>
</tbody>
<tbody id="s5">
<tr><th><a href="chapter-5.htm">Chapter 5 -
@ -47,7 +47,7 @@
<tbody id="s6">
<tr><th><a href="chapter-6.htm">Chapter 6 -
Units</a></th>
<td>(4 Tests)</td></tr>
<td>(8 Tests)</td></tr>
</tbody>
</table>
</body>

View file

@ -27,6 +27,12 @@ html/device-aspect-ratio-005.htm 0ac49f1fea8b7e25286c3d7fb22d32ca79a70d01 ?
xhtml1/device-aspect-ratio-005.xht 0ac49f1fea8b7e25286c3d7fb22d32ca79a70d01 ?
html/device-aspect-ratio-006.htm 820c0a75a20669a129af1c5eaade249c9692a7b6 ?
xhtml1/device-aspect-ratio-006.xht 820c0a75a20669a129af1c5eaade249c9692a7b6 ?
html/media-queries-001.htm fb89345feeddf62a2b7fd9bc7b9338bd0c253a24 ?
xhtml1/media-queries-001.xht fb89345feeddf62a2b7fd9bc7b9338bd0c253a24 ?
html/media-queries-002.htm 8851ac866cffe4d0b3d5a54e0e7240ebb64b0d26 ?
xhtml1/media-queries-002.xht 8851ac866cffe4d0b3d5a54e0e7240ebb64b0d26 ?
html/media-queries-003.htm 7ab95ca0874ac97c4261490f1c775d0dd5aa211f ?
xhtml1/media-queries-003.xht 7ab95ca0874ac97c4261490f1c775d0dd5aa211f ?
html/min-width-001.htm 097fd2e09118aa15f050793212989bddbb0ad8aa ?
xhtml1/min-width-001.xht 097fd2e09118aa15f050793212989bddbb0ad8aa ?
html/min-width-tables-001.htm e63eaf57baa48408b03756b911cc11dd20e4b850 ?
@ -39,3 +45,11 @@ html/mq-calc-004.htm e590e4240513b88a1664c3c0f58fb2c8ef8c88d3 ?
xhtml1/mq-calc-004.xht e590e4240513b88a1664c3c0f58fb2c8ef8c88d3 ?
html/mq-calc-005.htm 1f10f735a2dc2b8dfa6f794e23c73ae94d824a83 ?
xhtml1/mq-calc-005.xht 1f10f735a2dc2b8dfa6f794e23c73ae94d824a83 ?
html/relative-units-001.htm 657a8148b3df5b07b809c441642176994fe91285 ?
xhtml1/relative-units-001.xht 657a8148b3df5b07b809c441642176994fe91285 ?
html/relative-units-002.htm 70bed8bc1264cedd4beae6813c1044c9a997e6c9 ?
xhtml1/relative-units-002.xht 70bed8bc1264cedd4beae6813c1044c9a997e6c9 ?
html/relative-units-003.htm f323ece075cd85be438348a13b3cf096eb2e9290 ?
xhtml1/relative-units-003.xht f323ece075cd85be438348a13b3cf096eb2e9290 ?
html/relative-units-004.htm f6a159e514e4fa80dbc9729492a56def458e3ccd ?
xhtml1/relative-units-004.xht f6a159e514e4fa80dbc9729492a56def458e3ccd ?

View file

@ -134,6 +134,7 @@
<li>Chris Rebert</li>
<li>Florian Rivoal</li>
<li>Fran&ccedil;ois REMY</li>
<li>Ian Hickson</li>
<li>Intel</li>
<li>Xin Liu</li>
</ul>

View file

@ -134,6 +134,7 @@
<li>Chris Rebert</li>
<li>Florian Rivoal</li>
<li>Fran&ccedil;ois REMY</li>
<li>Ian Hickson</li>
<li>Intel</li>
<li>Xin Liu</li>
</ul>

View file

@ -11,9 +11,16 @@ device-aspect-ratio-003 reference/ref-filled-green-100px-square min-device-aspec
device-aspect-ratio-004 reference/ref-filled-green-100px-square min-device-aspect-ratio - 0/0 ('device-aspect-ratio' property with prefix 'min') http://www.w3.org/TR/css3-mediaqueries/#device-aspect-ratio c3f669622b3762aa625c836b2d61c6c8fd6e9329 `Intel`<http://www.intel.com/>,`Xin Liu`<mailto:xinx.liu@intel.com> The 'device-aspect-ratio' property with prefix 'min' set '0/0' is invalid that means the style sheet specified by 'min-device-aspect-ratio' will not be applied.
device-aspect-ratio-005 reference/ref-filled-green-100px-square device-aspect-ratio - 1280/1024 (basic) http://www.w3.org/TR/css3-mediaqueries/#device-aspect-ratio 0ac49f1fea8b7e25286c3d7fb22d32ca79a70d01 `Intel`<http://www.intel.com/>,`Xin Liu`<mailto:xinx.liu@intel.com> The 'device-aspect-ratio' property set '1280/1024' means that the ratio is '1280/1024', only and only if the device value of 'width' to value of 'height' is equals with value of 'device-aspect-ratio', the style sheet will be applied.
device-aspect-ratio-006 reference/ref-filled-green-100px-square device-aspect-ratio - 0/0 (invalid) http://www.w3.org/TR/css3-mediaqueries/#device-aspect-ratio 820c0a75a20669a129af1c5eaade249c9692a7b6 `Intel`<http://www.intel.com/>,`Xin Liu`<mailto:xinx.liu@intel.com> The 'device-aspect-ratio' property set '0/0' is invalid that means the style sheet specified by 'device-aspect-ratio' will not be applied.
media-queries-001 Basic media queries test https://www.w3.org/TR/css3-mediaqueries/#media0 fb89345feeddf62a2b7fd9bc7b9338bd0c253a24 `Ian Hickson`<mailto:ian@hixie.ch>
media-queries-002 The 'width' media feature (for visual devices with desktop viewport widths) https://www.w3.org/TR/css3-mediaqueries/#width 8851ac866cffe4d0b3d5a54e0e7240ebb64b0d26 `Ian Hickson`<mailto:ian@hixie.ch>
media-queries-003 The 'color' media feature (for color devices with bit depth less than 4096 bits per pixel) https://www.w3.org/TR/css3-mediaqueries/#color 7ab95ca0874ac97c4261490f1c775d0dd5aa211f `Ian Hickson`<mailto:ian@hixie.ch>
min-width-001 reference/ref-filled-green-100px-square min-width length value approximation http://www.w3.org/TR/css3-mediaqueries/#width,http://www.w3.org/TR/mediaqueries-4/#width,http://www.w3.org/TR/css3-values/#length-value 097fd2e09118aa15f050793212989bddbb0ad8aa `Chris Rebert`<http://chrisrebert.com> min-width length values that are too large to be supported must be clamped, rounded to infinity, or approximated, but not overflowed to a small or negative value.
min-width-tables-001 reference/ref-filled-green-100px-square Table Layout and Viewport Resizing dom https://drafts.csswg.org/css2/tables.html#auto-table-layout,https://drafts.csswg.org/mediaqueries-3/#width,https://drafts.csswg.org/mediaqueries-4/#width e63eaf57baa48408b03756b911cc11dd20e4b850 `Chris Rebert`<http://chrisrebert.com> Resizing a page which toggles the `display` of elements between `block` and `table-cell` based on the viewport width should not cause unnecessary wrapping of the table.
mq-calc-002 reference/ref-filled-green-100px-square evaluation of em in calc in Media Queries http://www.w3.org/TR/css3-values/#calc-notation,http://www.w3.org/TR/css3-mediaqueries/#units 9cc618bb7a17417fd66f4e893b9f178e6a621b40 `Florian Rivoal`<http://florian.rivoal.net/> The size in pixels of the 'em' unit used in calc inside a media query does not depend on declarations and use the initial value.
mq-calc-003 reference/ref-filled-green-100px-square evaluation of ex in calc in Media Queries http://www.w3.org/TR/css3-values/#calc-notation,http://www.w3.org/TR/css3-mediaqueries/#units 7beca4bff3fa5b51966cbed6dcbb827644c01097 `Florian Rivoal`<http://florian.rivoal.net/> The size in pixels of the 'ex' unit used in calc inside a media query does not depend on declarations and use the initial value.
mq-calc-004 reference/ref-filled-green-100px-square evaluation of ch in calc in Media Queries http://www.w3.org/TR/css3-values/#calc-notation,http://www.w3.org/TR/css3-mediaqueries/#units e590e4240513b88a1664c3c0f58fb2c8ef8c88d3 `Florian Rivoal`<http://florian.rivoal.net/> The size in pixels of the 'ch' unit used in calc inside a media query does not depend on declarations and use the initial value.
mq-calc-005 reference/ref-filled-green-100px-square evaluation of rem in calc in Media Queries http://www.w3.org/TR/css3-values/#calc-notation,http://www.w3.org/TR/css3-mediaqueries/#units 1f10f735a2dc2b8dfa6f794e23c73ae94d824a83 `Florian Rivoal`<http://florian.rivoal.net/> The size in pixels of the 'rem' unit used in calc inside a media query does not depend on declarations and use the initial value.
relative-units-001 reference/ref-green-body Font-relative length units (rem) in width media queries https://www.w3.org/TR/css3-mediaqueries/#units,https://www.w3.org/TR/mediaqueries-4/#units 657a8148b3df5b07b809c441642176994fe91285 `Chris Rebert`<http://chrisrebert.com> Font-relative length units (such as 'rem') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }
relative-units-002 reference/ref-green-body Font-relative length units (em) in width media queries https://www.w3.org/TR/css3-mediaqueries/#units,https://www.w3.org/TR/mediaqueries-4/#units 70bed8bc1264cedd4beae6813c1044c9a997e6c9 `Chris Rebert`<http://chrisrebert.com> Font-relative length units (such as 'em') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }
relative-units-003 reference/ref-green-body Font-relative length units (ex) in width media queries https://www.w3.org/TR/css3-mediaqueries/#units,https://www.w3.org/TR/mediaqueries-4/#units f323ece075cd85be438348a13b3cf096eb2e9290 `Chris Rebert`<http://chrisrebert.com> Font-relative length units (such as 'ex') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }
relative-units-004 reference/ref-green-body Font-relative length units (ch) in width media queries https://www.w3.org/TR/css3-mediaqueries/#units,https://www.w3.org/TR/mediaqueries-4/#units f6a159e514e4fa80dbc9729492a56def458e3ccd `Chris Rebert`<http://chrisrebert.com> Font-relative length units (such as 'ch') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }

View file

@ -13,7 +13,7 @@
<body>
<h1>Media Queries Level 3 Conformance Test Suite</h1>
<h2>Media Queries (0 tests)</h2>
<h2>Media Queries (1 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
@ -31,7 +31,15 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s2">+</a>
<a href="https://www.w3.org/TR/css3-mediaqueries/#media0">2 Media Queries</a></th></tr>
<!-- 0 tests -->
<!-- 1 tests -->
<tr id="media-queries-001-2" class="primary">
<td><strong>
<a href="media-queries-001.xht">media-queries-001</a></strong></td>
<td></td>
<td></td>
<td>Basic media queries test
</td>
</tr>
</tbody>
<tbody id="s2.#expressions">
<!-- 0 tests -->

View file

@ -13,7 +13,7 @@
<body>
<h1>Media Queries Level 3 Conformance Test Suite</h1>
<h2>Media features (14 tests)</h2>
<h2>Media features (16 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
@ -37,7 +37,7 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.1">+</a>
<a href="https://www.w3.org/TR/css3-mediaqueries/#width">4.1 width</a></th></tr>
<!-- 4 tests -->
<!-- 5 tests -->
<tr id="calc-in-media-queries-001-4.1" class="">
<td>
<a href="calc-in-media-queries-001.xht">calc-in-media-queries-001</a></td>
@ -60,6 +60,14 @@
</ul>
</td>
</tr>
<tr id="media-queries-002-4.1" class="primary">
<td><strong>
<a href="media-queries-002.xht">media-queries-002</a></strong></td>
<td></td>
<td></td>
<td>The 'width' media feature (for visual devices with desktop viewport widths)
</td>
</tr>
<tr id="min-width-001-4.1" class="">
<td>
<a href="min-width-001.xht">min-width-001</a></td>
@ -233,7 +241,15 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.8">+</a>
<a href="https://www.w3.org/TR/css3-mediaqueries/#color">4.8 color</a></th></tr>
<!-- 0 tests -->
<!-- 1 tests -->
<tr id="media-queries-003-4.8" class="primary">
<td><strong>
<a href="media-queries-003.xht">media-queries-003</a></strong></td>
<td></td>
<td></td>
<td>The 'color' media feature (for color devices with bit depth less than 4096 bits per pixel)
</td>
</tr>
</tbody>
<tbody id="s4.9">
<tr><th colspan="4" scope="rowgroup">

View file

@ -13,7 +13,7 @@
<body>
<h1>Media Queries Level 3 Conformance Test Suite</h1>
<h2>Units (4 tests)</h2>
<h2>Units (8 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
@ -31,7 +31,7 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s6">+</a>
<a href="https://www.w3.org/TR/css3-mediaqueries/#units">6 Units</a></th></tr>
<!-- 4 tests -->
<!-- 8 tests -->
<tr id="mq-calc-002-6" class="">
<td>
<a href="mq-calc-002.xht">mq-calc-002</a></td>
@ -76,6 +76,50 @@
</ul>
</td>
</tr>
<tr id="relative-units-001-6" class="primary">
<td><strong>
<a href="relative-units-001.xht">relative-units-001</a></strong></td>
<td><a href="reference/ref-green-body.xht">=</a> </td>
<td></td>
<td>Font-relative length units (rem) in width media queries
<ul class="assert">
<li>Font-relative length units (such as 'rem') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }</li>
</ul>
</td>
</tr>
<tr id="relative-units-002-6" class="primary">
<td><strong>
<a href="relative-units-002.xht">relative-units-002</a></strong></td>
<td><a href="reference/ref-green-body.xht">=</a> </td>
<td></td>
<td>Font-relative length units (em) in width media queries
<ul class="assert">
<li>Font-relative length units (such as 'em') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }</li>
</ul>
</td>
</tr>
<tr id="relative-units-003-6" class="primary">
<td><strong>
<a href="relative-units-003.xht">relative-units-003</a></strong></td>
<td><a href="reference/ref-green-body.xht">=</a> </td>
<td></td>
<td>Font-relative length units (ex) in width media queries
<ul class="assert">
<li>Font-relative length units (such as 'ex') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }</li>
</ul>
</td>
</tr>
<tr id="relative-units-004-6" class="primary">
<td><strong>
<a href="relative-units-004.xht">relative-units-004</a></strong></td>
<td><a href="reference/ref-green-body.xht">=</a> </td>
<td></td>
<td>Font-relative length units (ch) in width media queries
<ul class="assert">
<li>Font-relative length units (such as 'ch') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s6.1">
<tr><th colspan="4" scope="rowgroup">

View file

@ -0,0 +1,21 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Basic media queries test</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch" />
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/media/queries/001.html" />
<link rel="help" href="https://www.w3.org/TR/css3-mediaqueries/#media0" />
<style type="text/css"><![CDATA[
@media only screen {
.a, .b { color: green; }
}
@media not only screen {
.b { color: red; }
}
]]></style>
</head>
<body>
<p class="a"> This line should be green. </p>
<p class="b"> This line should be green. </p>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The 'width' media feature (for visual devices with desktop viewport widths)</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch" />
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/media/queries/002.html" />
<link rel="help" href="https://www.w3.org/TR/css3-mediaqueries/#width" />
<style type="text/css"><![CDATA[
@media screen and (width) { .a { color: green; } }
@media screen and (min-width: 1em) { .b { color: green; } }
@media screen and (max-width: 1000000em) { .c { color: green; } }
]]></style>
</head>
<body>
<p class="a"> This line should be green. </p>
<p class="b"> This line should be green. </p>
<p class="c"> This line should be green. </p>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The 'color' media feature (for color devices with bit depth less than 4096 bits per pixel)</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch" />
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/media/queries/003.html" />
<link rel="help" href="https://www.w3.org/TR/css3-mediaqueries/#color" />
<style type="text/css"><![CDATA[
@media screen and (color) { .a { color: green; } }
@media screen and (min-color: 1) { .b { color: green; } }
@media screen and (max-color: 4096) { .c { color: green; } }
]]></style>
</head>
<body>
<p class="a"> This line should be green. </p>
<p class="b"> This line should be green. </p>
<p class="c"> This line should be green. </p>
</body>
</html>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Reftest Reference</title>
<link rel="author" title="Chris Rebert" href="http://chrisrebert.com" />
<style type="text/css">
body {
background: green;
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
</body>
</html>

View file

@ -2,7 +2,7 @@
<html lang="en-US"><head>
<title>Media Queries Test inner frame</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
<meta content="text/css" http-equiv="Content-Style-Type">
<style media="all" type="text/css" id="style">
body { text-decoration: underline; }

View file

@ -168,6 +168,38 @@
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="relative-units-001" class="">
<tr>
<td rowspan="1" title="Font-relative length units (rem) in width media queries">
<a href="relative-units-001.xht">relative-units-001</a></td>
<td><a href="reference/ref-green-body.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="relative-units-002" class="">
<tr>
<td rowspan="1" title="Font-relative length units (em) in width media queries">
<a href="relative-units-002.xht">relative-units-002</a></td>
<td><a href="reference/ref-green-body.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="relative-units-003" class="">
<tr>
<td rowspan="1" title="Font-relative length units (ex) in width media queries">
<a href="relative-units-003.xht">relative-units-003</a></td>
<td><a href="reference/ref-green-body.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="relative-units-004" class="">
<tr>
<td rowspan="1" title="Font-relative length units (ch) in width media queries">
<a href="relative-units-004.xht">relative-units-004</a></td>
<td><a href="reference/ref-green-body.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
</table>
</body>

View file

@ -17,3 +17,7 @@ mq-calc-002.xht == reference/ref-filled-green-100px-square.xht
mq-calc-003.xht == reference/ref-filled-green-100px-square.xht
mq-calc-004.xht == reference/ref-filled-green-100px-square.xht
mq-calc-005.xht == reference/ref-filled-green-100px-square.xht
relative-units-001.xht == reference/ref-green-body.xht
relative-units-002.xht == reference/ref-green-body.xht
relative-units-003.xht == reference/ref-green-body.xht
relative-units-004.xht == reference/ref-green-body.xht

View file

@ -0,0 +1,32 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Test: Font-relative length units (rem) in width media queries</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert" />
<link href="https://www.w3.org/TR/css3-mediaqueries/#units" rel="help" />
<link href="https://www.w3.org/TR/mediaqueries-4/#units" rel="help" />
<link href="reference/ref-green-body.xht" rel="match" />
<meta content="" name="flags" />
<meta content="Font-relative length units (such as 'rem') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }" name="assert" />
<style>
:root {
font-size: 100000px;/* ~87ft */
}
body {
background: red;
}
@media (min-width: 1rem) {
body {
background: green;
}
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
</body></html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Test: Font-relative length units (em) in width media queries</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert" />
<link href="https://www.w3.org/TR/css3-mediaqueries/#units" rel="help" />
<link href="https://www.w3.org/TR/mediaqueries-4/#units" rel="help" />
<link href="reference/ref-green-body.xht" rel="match" />
<meta content="" name="flags" />
<meta content="Font-relative length units (such as 'em') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }" name="assert" />
<style>
:root {
font-size: 100000px;/* ~87ft */
}
body {
background: red;
}
@media (min-width: 1em) {
body {
background: green;
}
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
</body></html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Test: Font-relative length units (ex) in width media queries</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert" />
<link href="https://www.w3.org/TR/css3-mediaqueries/#units" rel="help" />
<link href="https://www.w3.org/TR/mediaqueries-4/#units" rel="help" />
<link href="reference/ref-green-body.xht" rel="match" />
<meta content="" name="flags" />
<meta content="Font-relative length units (such as 'ex') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }" name="assert" />
<style>
:root {
font-size: 100000px;/* ~87ft */
}
body {
background: red;
}
@media (min-width: 1ex) {
body {
background: green;
}
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
</body></html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Test: Font-relative length units (ch) in width media queries</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert" />
<link href="https://www.w3.org/TR/css3-mediaqueries/#units" rel="help" />
<link href="https://www.w3.org/TR/mediaqueries-4/#units" rel="help" />
<link href="reference/ref-green-body.xht" rel="match" />
<meta content="" name="flags" />
<meta content="Font-relative length units (such as 'ch') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }" name="assert" />
<style>
:root {
font-size: 100000px;/* ~87ft */
}
body {
background: red;
}
@media (min-width: 1ch) {
body {
background: green;
}
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
</body></html>

View file

@ -2,7 +2,7 @@
<html lang="en-US"><head>
<title>Media Queries Test inner frame</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
<meta content="text/css" http-equiv="Content-Style-Type">
<style media="all" type="text/css" id="style">
body { text-decoration: underline; }

View file

@ -27,7 +27,7 @@
<tbody id="s2">
<tr><th><a href="chapter-2.xht">Chapter 2 -
Media Queries</a></th>
<td>(0 Tests)</td></tr>
<td>(1 Tests)</td></tr>
</tbody>
<tbody id="s3">
<tr><th><a href="chapter-3.xht">Chapter 3 -
@ -37,7 +37,7 @@
<tbody id="s4">
<tr><th><a href="chapter-4.xht">Chapter 4 -
Media features</a></th>
<td>(14 Tests)</td></tr>
<td>(16 Tests)</td></tr>
</tbody>
<tbody id="s5">
<tr><th><a href="chapter-5.xht">Chapter 5 -
@ -47,7 +47,7 @@
<tbody id="s6">
<tr><th><a href="chapter-6.xht">Chapter 6 -
Units</a></th>
<td>(4 Tests)</td></tr>
<td>(8 Tests)</td></tr>
</tbody>
</table>
</body>

View file

@ -13,7 +13,7 @@
<body>
<h1>Media Queries Level 3 Conformance Test Suite</h1>
<h2>Media Queries (0 tests)</h2>
<h2>Media Queries (1 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
@ -31,7 +31,15 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s2">+</a>
<a href="https://www.w3.org/TR/css3-mediaqueries/#media0">2 Media Queries</a></th></tr>
<!-- 0 tests -->
<!-- 1 tests -->
<tr id="media-queries-001-2" class="primary">
<td><strong>
<a href="media-queries-001.xht">media-queries-001</a></strong></td>
<td></td>
<td></td>
<td>Basic media queries test
</td>
</tr>
</tbody>
<tbody id="s2.#expressions">
<!-- 0 tests -->

View file

@ -13,7 +13,7 @@
<body>
<h1>Media Queries Level 3 Conformance Test Suite</h1>
<h2>Media features (14 tests)</h2>
<h2>Media features (16 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
@ -37,7 +37,7 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.1">+</a>
<a href="https://www.w3.org/TR/css3-mediaqueries/#width">4.1 width</a></th></tr>
<!-- 4 tests -->
<!-- 5 tests -->
<tr id="calc-in-media-queries-001-4.1" class="">
<td>
<a href="calc-in-media-queries-001.xht">calc-in-media-queries-001</a></td>
@ -60,6 +60,14 @@
</ul>
</td>
</tr>
<tr id="media-queries-002-4.1" class="primary">
<td><strong>
<a href="media-queries-002.xht">media-queries-002</a></strong></td>
<td></td>
<td></td>
<td>The 'width' media feature (for visual devices with desktop viewport widths)
</td>
</tr>
<tr id="min-width-001-4.1" class="">
<td>
<a href="min-width-001.xht">min-width-001</a></td>
@ -233,7 +241,15 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.8">+</a>
<a href="https://www.w3.org/TR/css3-mediaqueries/#color">4.8 color</a></th></tr>
<!-- 0 tests -->
<!-- 1 tests -->
<tr id="media-queries-003-4.8" class="primary">
<td><strong>
<a href="media-queries-003.xht">media-queries-003</a></strong></td>
<td></td>
<td></td>
<td>The 'color' media feature (for color devices with bit depth less than 4096 bits per pixel)
</td>
</tr>
</tbody>
<tbody id="s4.9">
<tr><th colspan="4" scope="rowgroup">

View file

@ -13,7 +13,7 @@
<body>
<h1>Media Queries Level 3 Conformance Test Suite</h1>
<h2>Units (4 tests)</h2>
<h2>Units (8 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
@ -31,7 +31,7 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s6">+</a>
<a href="https://www.w3.org/TR/css3-mediaqueries/#units">6 Units</a></th></tr>
<!-- 4 tests -->
<!-- 8 tests -->
<tr id="mq-calc-002-6" class="">
<td>
<a href="mq-calc-002.xht">mq-calc-002</a></td>
@ -76,6 +76,50 @@
</ul>
</td>
</tr>
<tr id="relative-units-001-6" class="primary">
<td><strong>
<a href="relative-units-001.xht">relative-units-001</a></strong></td>
<td><a href="reference/ref-green-body.xht">=</a> </td>
<td></td>
<td>Font-relative length units (rem) in width media queries
<ul class="assert">
<li>Font-relative length units (such as 'rem') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }</li>
</ul>
</td>
</tr>
<tr id="relative-units-002-6" class="primary">
<td><strong>
<a href="relative-units-002.xht">relative-units-002</a></strong></td>
<td><a href="reference/ref-green-body.xht">=</a> </td>
<td></td>
<td>Font-relative length units (em) in width media queries
<ul class="assert">
<li>Font-relative length units (such as 'em') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }</li>
</ul>
</td>
</tr>
<tr id="relative-units-003-6" class="primary">
<td><strong>
<a href="relative-units-003.xht">relative-units-003</a></strong></td>
<td><a href="reference/ref-green-body.xht">=</a> </td>
<td></td>
<td>Font-relative length units (ex) in width media queries
<ul class="assert">
<li>Font-relative length units (such as 'ex') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }</li>
</ul>
</td>
</tr>
<tr id="relative-units-004-6" class="primary">
<td><strong>
<a href="relative-units-004.xht">relative-units-004</a></strong></td>
<td><a href="reference/ref-green-body.xht">=</a> </td>
<td></td>
<td>Font-relative length units (ch) in width media queries
<ul class="assert">
<li>Font-relative length units (such as 'ch') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s6.1">
<tr><th colspan="4" scope="rowgroup">

View file

@ -0,0 +1,30 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Basic media queries test</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "Media Queries Level 3 Conformance Test Suite"; }
@top-right { content: "Test media-queries-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch" />
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/media/queries/001.html" />
<link rel="help" href="https://www.w3.org/TR/css3-mediaqueries/#media0" />
<style type="text/css"><![CDATA[
@media only screen {
.a, .b { color: green; }
}
@media not only screen {
.b { color: red; }
}
]]></style>
</head>
<body>
<p class="a"> This line should be green. </p>
<p class="b"> This line should be green. </p>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The 'width' media feature (for visual devices with desktop viewport widths)</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "Media Queries Level 3 Conformance Test Suite"; }
@top-right { content: "Test media-queries-002"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch" />
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/media/queries/002.html" />
<link rel="help" href="https://www.w3.org/TR/css3-mediaqueries/#width" />
<style type="text/css"><![CDATA[
@media screen and (width) { .a { color: green; } }
@media screen and (min-width: 1em) { .b { color: green; } }
@media screen and (max-width: 1000000em) { .c { color: green; } }
]]></style>
</head>
<body>
<p class="a"> This line should be green. </p>
<p class="b"> This line should be green. </p>
<p class="c"> This line should be green. </p>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The 'color' media feature (for color devices with bit depth less than 4096 bits per pixel)</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "Media Queries Level 3 Conformance Test Suite"; }
@top-right { content: "Test media-queries-003"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch" />
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/media/queries/003.html" />
<link rel="help" href="https://www.w3.org/TR/css3-mediaqueries/#color" />
<style type="text/css"><![CDATA[
@media screen and (color) { .a { color: green; } }
@media screen and (min-color: 1) { .b { color: green; } }
@media screen and (max-color: 4096) { .c { color: green; } }
]]></style>
</head>
<body>
<p class="a"> This line should be green. </p>
<p class="b"> This line should be green. </p>
<p class="c"> This line should be green. </p>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Reftest Reference</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "Media Queries Level 3 Conformance Test Suite"; }
@top-right { content: "Test ref-green-body"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Chris Rebert" href="http://chrisrebert.com" />
<style type="text/css">
body {
background: green;
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
</body>
</html>

View file

@ -2,7 +2,7 @@
<html lang="en-US"><head>
<title>Media Queries Test inner frame</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
<meta content="text/css" http-equiv="Content-Style-Type">
<style media="all" type="text/css" id="style">
body { text-decoration: underline; }

View file

@ -168,6 +168,38 @@
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="relative-units-001" class="">
<tr>
<td rowspan="1" title="Font-relative length units (rem) in width media queries">
<a href="relative-units-001.xht">relative-units-001</a></td>
<td><a href="reference/ref-green-body.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="relative-units-002" class="">
<tr>
<td rowspan="1" title="Font-relative length units (em) in width media queries">
<a href="relative-units-002.xht">relative-units-002</a></td>
<td><a href="reference/ref-green-body.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="relative-units-003" class="">
<tr>
<td rowspan="1" title="Font-relative length units (ex) in width media queries">
<a href="relative-units-003.xht">relative-units-003</a></td>
<td><a href="reference/ref-green-body.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="relative-units-004" class="">
<tr>
<td rowspan="1" title="Font-relative length units (ch) in width media queries">
<a href="relative-units-004.xht">relative-units-004</a></td>
<td><a href="reference/ref-green-body.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
</table>
</body>

View file

@ -17,3 +17,7 @@ mq-calc-002.xht == reference/ref-filled-green-100px-square.xht
mq-calc-003.xht == reference/ref-filled-green-100px-square.xht
mq-calc-004.xht == reference/ref-filled-green-100px-square.xht
mq-calc-005.xht == reference/ref-filled-green-100px-square.xht
relative-units-001.xht == reference/ref-green-body.xht
relative-units-002.xht == reference/ref-green-body.xht
relative-units-003.xht == reference/ref-green-body.xht
relative-units-004.xht == reference/ref-green-body.xht

View file

@ -0,0 +1,32 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Test: Font-relative length units (rem) in width media queries</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert" />
<link href="https://www.w3.org/TR/css3-mediaqueries/#units" rel="help" />
<link href="https://www.w3.org/TR/mediaqueries-4/#units" rel="help" />
<link href="reference/ref-green-body.xht" rel="match" />
<meta content="" name="flags" />
<meta content="Font-relative length units (such as 'rem') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }" name="assert" />
<style>
:root {
font-size: 100000px;/* ~87ft */
}
body {
background: red;
}
@media (min-width: 1rem) {
body {
background: green;
}
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
</body></html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Test: Font-relative length units (em) in width media queries</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert" />
<link href="https://www.w3.org/TR/css3-mediaqueries/#units" rel="help" />
<link href="https://www.w3.org/TR/mediaqueries-4/#units" rel="help" />
<link href="reference/ref-green-body.xht" rel="match" />
<meta content="" name="flags" />
<meta content="Font-relative length units (such as 'em') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }" name="assert" />
<style>
:root {
font-size: 100000px;/* ~87ft */
}
body {
background: red;
}
@media (min-width: 1em) {
body {
background: green;
}
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
</body></html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Test: Font-relative length units (ex) in width media queries</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert" />
<link href="https://www.w3.org/TR/css3-mediaqueries/#units" rel="help" />
<link href="https://www.w3.org/TR/mediaqueries-4/#units" rel="help" />
<link href="reference/ref-green-body.xht" rel="match" />
<meta content="" name="flags" />
<meta content="Font-relative length units (such as 'ex') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }" name="assert" />
<style>
:root {
font-size: 100000px;/* ~87ft */
}
body {
background: red;
}
@media (min-width: 1ex) {
body {
background: green;
}
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
</body></html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>CSS Test: Font-relative length units (ch) in width media queries</title>
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert" />
<link href="https://www.w3.org/TR/css3-mediaqueries/#units" rel="help" />
<link href="https://www.w3.org/TR/mediaqueries-4/#units" rel="help" />
<link href="reference/ref-green-body.xht" rel="match" />
<meta content="" name="flags" />
<meta content="Font-relative length units (such as 'ch') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }" name="assert" />
<style>
:root {
font-size: 100000px;/* ~87ft */
}
body {
background: red;
}
@media (min-width: 1ch) {
body {
background: green;
}
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
</body></html>

View file

@ -2,7 +2,7 @@
<html lang="en-US"><head>
<title>Media Queries Test inner frame</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
<meta content="text/css" http-equiv="Content-Style-Type">
<style media="all" type="text/css" id="style">
body { text-decoration: underline; }

View file

@ -27,7 +27,7 @@
<tbody id="s2">
<tr><th><a href="chapter-2.xht">Chapter 2 -
Media Queries</a></th>
<td>(0 Tests)</td></tr>
<td>(1 Tests)</td></tr>
</tbody>
<tbody id="s3">
<tr><th><a href="chapter-3.xht">Chapter 3 -
@ -37,7 +37,7 @@
<tbody id="s4">
<tr><th><a href="chapter-4.xht">Chapter 4 -
Media features</a></th>
<td>(14 Tests)</td></tr>
<td>(16 Tests)</td></tr>
</tbody>
<tbody id="s5">
<tr><th><a href="chapter-5.xht">Chapter 5 -
@ -47,7 +47,7 @@
<tbody id="s6">
<tr><th><a href="chapter-6.xht">Chapter 6 -
Units</a></th>
<td>(4 Tests)</td></tr>
<td>(8 Tests)</td></tr>
</tbody>
</table>
</body>