mirror of
https://github.com/servo/servo.git
synced 2025-06-23 08:34:42 +01:00
296fa2512b
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180. - Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
287 lines
No EOL
13 KiB
HTML
287 lines
No EOL
13 KiB
HTML
|
|
|
|
<!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">
|
|
<head>
|
|
<title>Media features - Media Queries Level 3 Conformance Test Suite</title>
|
|
<style type="text/css">
|
|
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
|
@import "../indices.css";
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h1>Media Queries Level 3 Conformance Test Suite</h1>
|
|
<h2>Media features (16 tests)</h2>
|
|
<table width="100%">
|
|
<col id="test-column"></col>
|
|
<col id="refs-column"></col>
|
|
<col id="flags-column"></col>
|
|
<col id="info-column"></col>
|
|
<thead>
|
|
<tr>
|
|
<th>Test</th>
|
|
<th><abbr title="Rendering References">Refs</abbr></th>
|
|
<th>Flags</th>
|
|
<th>Info</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="s4">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4">+</a>
|
|
<a href="https://www.w3.org/TR/css3-mediaqueries/#media1">4 Media features</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.1">
|
|
<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>
|
|
<!-- 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>
|
|
<td><a href="reference/all-green.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Calc function inside media queries
|
|
<ul class="assert">
|
|
<li>The calc() expression is supported in the min-width media query.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="calc-in-media-queries-002-4.1" class="">
|
|
<td>
|
|
<a href="calc-in-media-queries-002.xht">calc-in-media-queries-002</a></td>
|
|
<td><a href="reference/all-green.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Calc function inside media queries
|
|
<ul class="assert">
|
|
<li>The calc() expression is supported in the min-width media query properly (=with range clamping).</li>
|
|
</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>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
|
<td></td>
|
|
<td>min-width length value approximation
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="min-width-tables-001-4.1" class="dom">
|
|
<td>
|
|
<a href="min-width-tables-001.xht">min-width-tables-001</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>Table Layout and Viewport Resizing
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s4.2">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.2">+</a>
|
|
<a href="https://www.w3.org/TR/css3-mediaqueries/#height">4.2 height</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.3">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.3">+</a>
|
|
<a href="https://www.w3.org/TR/css3-mediaqueries/#device-width">4.3 device-width</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.4">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.4">+</a>
|
|
<a href="https://www.w3.org/TR/css3-mediaqueries/#device-height">4.4 device-height</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.5">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.5">+</a>
|
|
<a href="https://www.w3.org/TR/css3-mediaqueries/#orientation">4.5 orientation</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.6">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.6">+</a>
|
|
<a href="https://www.w3.org/TR/css3-mediaqueries/#aspect-ratio">4.6 aspect-ratio</a></th></tr>
|
|
<!-- 4 tests -->
|
|
<tr id="aspect-ratio-001-4.6" class="">
|
|
<td>
|
|
<a href="aspect-ratio-001.xht">aspect-ratio-001</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
|
<td></td>
|
|
<td>min-aspect-ratio - 59/79 ('aspect-ratio' property with prefix 'min')
|
|
<ul class="assert">
|
|
<li>The 'aspect-ratio' property with prefix 'min' set '59/79' means that the minimum of ratio is '59/79', only and only if the value of the 'width' to the value of the 'height' is greater than value of 'min-aspect-ratio', the style sheet will be applied.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="aspect-ratio-002-4.6" class="">
|
|
<td>
|
|
<a href="aspect-ratio-002.xht">aspect-ratio-002</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
|
<td></td>
|
|
<td>min-aspect-ratio - 0/0 ('aspect-ratio' property with prefix 'min')
|
|
<ul class="assert">
|
|
<li>The 'aspect-ratio' property with prefix 'min' set '0/0' is invalid that means the style sheet specified by 'min-aspect-ratio' will not be applied.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="aspect-ratio-003-4.6" class="">
|
|
<td>
|
|
<a href="aspect-ratio-003.xht">aspect-ratio-003</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
|
<td></td>
|
|
<td>max-aspect-ratio - 1280/720 ('aspect-ratio' property with prefix 'max')
|
|
<ul class="assert">
|
|
<li>The 'aspect-ratio' property with prefix 'max' set '1280/720' means that the maximum of ratio is '1280/720', only and only if the value of the 'width' to the value of the 'height' is lower than value of 'max-aspect-ratio', the style sheet will be applied.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="aspect-ratio-004-4.6" class="">
|
|
<td>
|
|
<a href="aspect-ratio-004.xht">aspect-ratio-004</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
|
<td></td>
|
|
<td>max-aspect-ratio - 0/0 ('aspect-ratio' property with prefix 'max')
|
|
<ul class="assert">
|
|
<li>The 'aspect-ratio' property with prefix 'max' set '0/0' is invalid that means the style sheet specified by 'max-aspect-ratio' will not be applied.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s4.7">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.7">+</a>
|
|
<a href="https://www.w3.org/TR/css3-mediaqueries/#device-aspect-ratio">4.7 device-aspect-ratio</a></th></tr>
|
|
<!-- 6 tests -->
|
|
<tr id="device-aspect-ratio-001-4.7" class="">
|
|
<td>
|
|
<a href="device-aspect-ratio-001.xht">device-aspect-ratio-001</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
|
<td></td>
|
|
<td>max-device-aspect-ratio - 1281/1024 ('device-aspect-ratio' property with prefix 'max')
|
|
<ul class="assert">
|
|
<li>The 'device-aspect-ratio' property with prefix 'max' set '1281/1024' means that the maximum of ratio is '1281/1024', only and only if the device value of 'width' to value of 'height' is lower than value of 'max-device-aspect-ratio', the style sheet will be applied.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="device-aspect-ratio-002-4.7" class="">
|
|
<td>
|
|
<a href="device-aspect-ratio-002.xht">device-aspect-ratio-002</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
|
<td></td>
|
|
<td>max-device-aspect-ratio - 0/0 ('device-aspect-ratio' property with prefix 'max')
|
|
<ul class="assert">
|
|
<li>The 'device-aspect-ratio' property with prefix 'max' set '0/0' is invalid that means the style sheet specified by 'max-device-aspect-ratio' will not be applied.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="device-aspect-ratio-003-4.7" class="">
|
|
<td>
|
|
<a href="device-aspect-ratio-003.xht">device-aspect-ratio-003</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
|
<td></td>
|
|
<td>min-device-aspect-ratio - 1279/1024 ('device-aspect-ratio' property with prefix 'min')
|
|
<ul class="assert">
|
|
<li>The 'device-aspect-ratio' property with prefix 'min' set '1279/1024' means that the minimum of ratio is '1279/1024', only and only if the device value of 'width' to value of 'height' is greater than value of 'min-device-aspect-ratio', the style sheet will be applied.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="device-aspect-ratio-004-4.7" class="">
|
|
<td>
|
|
<a href="device-aspect-ratio-004.xht">device-aspect-ratio-004</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
|
<td></td>
|
|
<td>min-device-aspect-ratio - 0/0 ('device-aspect-ratio' property with prefix 'min')
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="device-aspect-ratio-005-4.7" class="">
|
|
<td>
|
|
<a href="device-aspect-ratio-005.xht">device-aspect-ratio-005</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
|
<td></td>
|
|
<td>device-aspect-ratio - 1280/1024 (basic)
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="device-aspect-ratio-006-4.7" class="">
|
|
<td>
|
|
<a href="device-aspect-ratio-006.xht">device-aspect-ratio-006</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
|
<td></td>
|
|
<td>device-aspect-ratio - 0/0 (invalid)
|
|
<ul class="assert">
|
|
<li>The 'device-aspect-ratio' property set '0/0' is invalid that means the style sheet specified by 'device-aspect-ratio' will not be applied.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s4.8">
|
|
<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>
|
|
<!-- 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">
|
|
<a href="#s4.9">+</a>
|
|
<a href="https://www.w3.org/TR/css3-mediaqueries/#color-index">4.9 color-index</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.10">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.10">+</a>
|
|
<a href="https://www.w3.org/TR/css3-mediaqueries/#monochrome">4.10 monochrome</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.11">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.11">+</a>
|
|
<a href="https://www.w3.org/TR/css3-mediaqueries/#resolution">4.11 resolution</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.12">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.12">+</a>
|
|
<a href="https://www.w3.org/TR/css3-mediaqueries/#scan">4.12 scan</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.13">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.13">+</a>
|
|
<a href="https://www.w3.org/TR/css3-mediaqueries/#grid">4.13 grid</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
</table>
|
|
|
|
</body>
|
|
</html> |