mirror of
https://github.com/servo/servo.git
synced 2025-08-10 16:05:43 +01:00
Update CSS tests to revision 465c03e3d8d42ce98b9dfa0c8d8e7b4b8d48ebd7
This commit is contained in:
Ms2ger
parent
ea000471d3
commit
6a4ad433a2
432 changed files with 6691 additions and 83 deletions
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Media Queries Test: min-aspect-ratio - 59/79 ('aspect-ratio' property with prefix 'min')</title>
|
||||
<link href="http://www.intel.com/" rel="author" title="Intel">
|
||||
<link href="mailto:xinx.liu@intel.com" name="author" title="Xin Liu">
|
||||
<link href="http://www.w3.org/TR/css3-mediaqueries/#aspect-ratio" rel="help" title="4.6. aspect-ratio">
|
||||
<link href="reference/ref-filled-green-100px-square.xht" name="match">
|
||||
<meta content="" name="flags">
|
||||
<meta content="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." name="assert">
|
||||
<style>
|
||||
div {
|
||||
background-color: red;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
@media screen and (min-aspect-ratio: 59/79) {
|
||||
div {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Media Queries Test: min-aspect-ratio - 0/0 ('aspect-ratio' property with prefix 'min')</title>
|
||||
<link href="http://www.intel.com/" rel="author" title="Intel">
|
||||
<link href="mailto:xinx.liu@intel.com" name="author" title="Xin Liu">
|
||||
<link href="http://www.w3.org/TR/css3-mediaqueries/#aspect-ratio" rel="help" title="4.6. aspect-ratio">
|
||||
<link href="reference/ref-filled-green-100px-square.xht" name="match">
|
||||
<meta content="" name="flags">
|
||||
<meta content="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." name="assert">
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
@media screen and (min-aspect-ratio: 0/0) {
|
||||
div {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Media Queries Test: max-aspect-ratio - 1280/720 ('aspect-ratio' property with prefix 'max')</title>
|
||||
<link href="http://www.intel.com/" rel="author" title="Intel">
|
||||
<link href="mailto:xinx.liu@intel.com" name="author" title="Xin Liu">
|
||||
<link href="http://www.w3.org/TR/css3-mediaqueries/#aspect-ratio" rel="help" title="4.6. aspect-ratio">
|
||||
<link href="reference/ref-filled-green-100px-square.xht" name="match">
|
||||
<meta content="" name="flags">
|
||||
<meta content="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." name="assert">
|
||||
<style>
|
||||
div {
|
||||
background-color: red;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
@media screen and (max-aspect-ratio: 1280/720) {
|
||||
div {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Media Queries Test: max-aspect-ratio - 0/0 ('aspect-ratio' property with prefix 'max')</title>
|
||||
<link href="http://www.intel.com/" rel="author" title="Intel">
|
||||
<link href="mailto:xinx.liu@intel.com" name="author" title="Xin Liu">
|
||||
<link href="http://www.w3.org/TR/css3-mediaqueries/#aspect-ratio" rel="help" title="4.6. aspect-ratio">
|
||||
<link href="reference/ref-filled-green-100px-square.xht" name="match">
|
||||
<meta content="" name="flags">
|
||||
<meta content="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." name="assert">
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
@media screen and (max-aspect-ratio: 0/0) {
|
||||
div {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
|
||||
<title>
|
||||
CSS Values and Units and Media Queries Test:
|
||||
Calc function inside media queries
|
||||
</title>
|
||||
<meta content="
|
||||
The calc() expression is supported in the min-width media query.
|
||||
" name="assert">
|
||||
|
||||
<link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY">
|
||||
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-mediaqueries/#width" rel="help">
|
||||
|
||||
<link href="reference/all-green.htm" rel="match">
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html { background: red; }
|
||||
@media (min-width: calc(100px)) {
|
||||
html { background: green; }
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target"></div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
|
||||
<title>
|
||||
CSS Values and Units and Media Queries Test:
|
||||
Calc function inside media queries
|
||||
</title>
|
||||
<meta content="
|
||||
The calc() expression is supported in the min-width media query properly (=with range clamping).
|
||||
" name="assert">
|
||||
|
||||
<link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY">
|
||||
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-mediaqueries/#width" rel="help">
|
||||
|
||||
<link href="reference/all-green.htm" rel="match">
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html { background: red; }
|
||||
@media (min-width: calc(-100px)) { /* should clamp to 0px */
|
||||
html { background: green; }
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target"></div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
39
tests/wpt/css-tests/mediaqueries-3_dev/html/chapter-1.htm
Normal file
39
tests/wpt/css-tests/mediaqueries-3_dev/html/chapter-1.htm
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Background - 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>Background (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-mediaqueries/#background">1 Background</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
45
tests/wpt/css-tests/mediaqueries-3_dev/html/chapter-2.htm
Normal file
45
tests/wpt/css-tests/mediaqueries-3_dev/html/chapter-2.htm
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Media Queries - 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 Queries (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-mediaqueries/#media0">2 Media Queries</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.#expressions">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.#media-features">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
45
tests/wpt/css-tests/mediaqueries-3_dev/html/chapter-3.htm
Normal file
45
tests/wpt/css-tests/mediaqueries-3_dev/html/chapter-3.htm
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Syntax - 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>Syntax (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-mediaqueries/#syntax">3 Syntax</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-mediaqueries/#error-handling">3.1 Error Handling</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
271
tests/wpt/css-tests/mediaqueries-3_dev/html/chapter-4.htm
Normal file
271
tests/wpt/css-tests/mediaqueries-3_dev/html/chapter-4.htm
Normal file
|
|
@ -0,0 +1,271 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<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 (14 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<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="http://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="http://www.w3.org/TR/css3-mediaqueries/#width">4.1 width</a></th></tr>
|
||||
<!-- 4 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>
|
||||
<td><a href="reference/all-green.htm">=</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.htm">calc-in-media-queries-002</a></td>
|
||||
<td><a href="reference/all-green.htm">=</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="min-width-001-4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="min-width-001.htm">min-width-001</a></strong></td>
|
||||
<td><a href="ref.htm">=</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.htm">min-width-tables-001</a></td>
|
||||
<td><a href="ref.htm">=</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="http://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="http://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="http://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="http://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="http://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="primary">
|
||||
<td><strong>
|
||||
<a href="aspect-ratio-001.htm">aspect-ratio-001</a></strong></td>
|
||||
<td></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="primary">
|
||||
<td><strong>
|
||||
<a href="aspect-ratio-002.htm">aspect-ratio-002</a></strong></td>
|
||||
<td></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="primary">
|
||||
<td><strong>
|
||||
<a href="aspect-ratio-003.htm">aspect-ratio-003</a></strong></td>
|
||||
<td></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="primary">
|
||||
<td><strong>
|
||||
<a href="aspect-ratio-004.htm">aspect-ratio-004</a></strong></td>
|
||||
<td></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="http://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="primary">
|
||||
<td><strong>
|
||||
<a href="device-aspect-ratio-001.htm">device-aspect-ratio-001</a></strong></td>
|
||||
<td></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="primary">
|
||||
<td><strong>
|
||||
<a href="device-aspect-ratio-002.htm">device-aspect-ratio-002</a></strong></td>
|
||||
<td></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="primary">
|
||||
<td><strong>
|
||||
<a href="device-aspect-ratio-003.htm">device-aspect-ratio-003</a></strong></td>
|
||||
<td></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="primary">
|
||||
<td><strong>
|
||||
<a href="device-aspect-ratio-004.htm">device-aspect-ratio-004</a></strong></td>
|
||||
<td></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="primary">
|
||||
<td><strong>
|
||||
<a href="device-aspect-ratio-005.htm">device-aspect-ratio-005</a></strong></td>
|
||||
<td></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="primary">
|
||||
<td><strong>
|
||||
<a href="device-aspect-ratio-006.htm">device-aspect-ratio-006</a></strong></td>
|
||||
<td></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="http://www.w3.org/TR/css3-mediaqueries/#color">4.8 color</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.9">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.9">+</a>
|
||||
<a href="http://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="http://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="http://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="http://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="http://www.w3.org/TR/css3-mediaqueries/#grid">4.13 grid</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
39
tests/wpt/css-tests/mediaqueries-3_dev/html/chapter-5.htm
Normal file
39
tests/wpt/css-tests/mediaqueries-3_dev/html/chapter-5.htm
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Values - 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>Values (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s5">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s5">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-mediaqueries/#values">5 Values</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
134
tests/wpt/css-tests/mediaqueries-3_dev/html/chapter-6.htm
Normal file
134
tests/wpt/css-tests/mediaqueries-3_dev/html/chapter-6.htm
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Units - 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>Units (4 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s6">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-mediaqueries/#units">6 Units</a></th></tr>
|
||||
<!-- 4 tests -->
|
||||
<tr id="mq-calc-002-6" class="">
|
||||
<td>
|
||||
<a href="mq-calc-002.htm">mq-calc-002</a></td>
|
||||
<td><a href="reference/mq-calc-001-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>evaluation of em in calc in Media Queries
|
||||
<ul class="assert">
|
||||
<li>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.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mq-calc-003-6" class="">
|
||||
<td>
|
||||
<a href="mq-calc-003.htm">mq-calc-003</a></td>
|
||||
<td><a href="reference/mq-calc-001-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>evaluation of ex in calc in Media Queries
|
||||
<ul class="assert">
|
||||
<li>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.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mq-calc-004-6" class="">
|
||||
<td>
|
||||
<a href="mq-calc-004.htm">mq-calc-004</a></td>
|
||||
<td><a href="reference/mq-calc-001-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>evaluation of ch in calc in Media Queries
|
||||
<ul class="assert">
|
||||
<li>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.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mq-calc-005-6" class="">
|
||||
<td>
|
||||
<a href="mq-calc-005.htm">mq-calc-005</a></td>
|
||||
<td><a href="reference/mq-calc-001-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>evaluation of rem in calc in Media Queries
|
||||
<ul class="assert">
|
||||
<li>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.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s6.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-mediaqueries/#resolution0">6.1 Resolution</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#CSS21">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#HTML401">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#HTML5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#RFC2531">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#XMLSTYLE">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#abstract">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#acknowledgments">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#changes">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#contents">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#media-queries">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#normative-references">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#other-references">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#references">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#status">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#w3c-working">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Media Queries Test: max-device-aspect-ratio - 1281/1024 ('device-aspect-ratio' property with prefix 'max')</title>
|
||||
<link href="http://www.intel.com/" rel="author" title="Intel">
|
||||
<link href="mailto:xinx.liu@intel.com" rel="author" title="Xin Liu">
|
||||
<link href="http://www.w3.org/TR/css3-mediaqueries/#device-aspect-ratio" rel="help" title="4.7. device-aspect-ratio">
|
||||
<link href="reference/ref-filled-green-100px-square.xht" name="match">
|
||||
<meta content="" name="flags">
|
||||
<meta content="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." name="assert">
|
||||
<style>
|
||||
div {
|
||||
background-color: red;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
@media screen and (max-device-aspect-ratio: 1281/1024) {
|
||||
div {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Media Queries Test: max-device-aspect-ratio - 0/0 ('device-aspect-ratio' property with prefix 'max')</title>
|
||||
<link href="http://www.intel.com/" rel="author" title="Intel">
|
||||
<link href="mailto:xinx.liu@intel.com" rel="author" title="Xin Liu">
|
||||
<link href="http://www.w3.org/TR/css3-mediaqueries/#device-aspect-ratio" rel="help" title="4.7. device-aspect-ratio">
|
||||
<link href="reference/ref-filled-green-100px-square.xht" name="match">
|
||||
<meta content="" name="flags">
|
||||
<meta content="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." name="assert">
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
@media screen and (max-device-aspect-ratio: 0/0) {
|
||||
div {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Media Queries Test: min-device-aspect-ratio - 1279/1024 ('device-aspect-ratio' property with prefix 'min')</title>
|
||||
<link href="http://www.intel.com/" rel="author" title="Intel">
|
||||
<link href="mailto:xinx.liu@intel.com" rel="author" title="Xin Liu">
|
||||
<link href="http://www.w3.org/TR/css3-mediaqueries/#device-aspect-ratio" rel="help" title="4.7. device-aspect-ratio">
|
||||
<link href="reference/ref-filled-green-100px-square.xht" name="match">
|
||||
<meta content="" name="flags">
|
||||
<meta content="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." name="assert">
|
||||
<style>
|
||||
div {
|
||||
background-color: red;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
@media screen and (min-device-aspect-ratio: 1279/1024) {
|
||||
div {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Media Queries Test: min-device-aspect-ratio - 0/0 ('device-aspect-ratio' property with prefix 'min')</title>
|
||||
<link href="http://www.intel.com/" rel="author" title="Intel">
|
||||
<link href="mailto:xinx.liu@intel.com" rel="author" title="Xin Liu">
|
||||
<link href="http://www.w3.org/TR/css3-mediaqueries/#device-aspect-ratio" rel="help" title="4.7. device-aspect-ratio">
|
||||
<link href="reference/ref-filled-green-100px-square.xht" name="match">
|
||||
<meta content="" name="flags">
|
||||
<meta content="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." name="assert">
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
@media screen and (min-device-aspect-ratio: 0/0) {
|
||||
div {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Media Queries Test: device-aspect-ratio - 1280/1024 (basic)</title>
|
||||
<link href="http://www.intel.com/" rel="author" title="Intel">
|
||||
<link href="mailto:xinx.liu@intel.com" rel="author" title="Xin Liu">
|
||||
<link href="http://www.w3.org/TR/css3-mediaqueries/#device-aspect-ratio" rel="help" title="4.7. device-aspect-ratio">
|
||||
<link href="reference/ref-filled-green-100px-square.xht" name="match">
|
||||
<meta content="" name="flags">
|
||||
<meta content="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." name="assert">
|
||||
<style>
|
||||
div {
|
||||
background-color: red;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
@media screen and (device-aspect-ratio: 1280/1024) {
|
||||
div {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Media Queries Test: device-aspect-ratio - 0/0 (invalid)</title>
|
||||
<link href="http://www.intel.com/" rel="author" title="Intel">
|
||||
<link href="mailto:xinx.liu@intel.com" rel="author" title="Xin Liu">
|
||||
<link href="http://www.w3.org/TR/css3-mediaqueries/#device-aspect-ratio" rel="help" title="4.7. device-aspect-ratio">
|
||||
<link href="reference/ref-filled-green-100px-square.xht" name="match">
|
||||
<meta content="" name="flags">
|
||||
<meta content="The 'device-aspect-ratio' property set '0/0' is invalid that means the style sheet specified by 'device-aspect-ratio' will not be applied." name="assert">
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
@media screen and (device-aspect-ratio: 0/0) {
|
||||
div {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html SYSTEM "about:legacy-compat">
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Media Queries Test: min-width length value approximation</title>
|
||||
<link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-mediaqueries/#width">
|
||||
<link rel="help" href="http://www.w3.org/TR/mediaqueries-4/#width">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-values/#length-value">
|
||||
<link rel="match" href="ref.htm">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="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.">
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
@media (min-width: 9999999999px) {
|
||||
div {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait"><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Table Layout and Viewport Resizing</title>
|
||||
<link href="http://chrisrebert.com" rel="author" title="Chris Rebert">
|
||||
<link href="https://drafts.csswg.org/css2/tables.html#auto-table-layout" rel="help">
|
||||
<link href="https://drafts.csswg.org/mediaqueries-3/#width" rel="help">
|
||||
<link href="https://drafts.csswg.org/mediaqueries-4/#width" rel="help">
|
||||
<link href="ref.htm" rel="match">
|
||||
<meta content="dom" name="flags">
|
||||
<meta content="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." name="assert">
|
||||
<style>
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<iframe src="support/min-width-tables-001-iframe.html" height="300" id="toy" width="100"></iframe>
|
||||
<!-- See min-width-tables-001-iframe.html for the derivation of the 100px value -->
|
||||
<!-- We use 300px height so the incorrect stacking is visible in failure cases -->
|
||||
<!-- This test is not about iframes specifically. It's just that resizing an iframe is more reliable than resizing the window, given browser security restrictions. -->
|
||||
<script>
|
||||
window.addEventListener('load', function () {
|
||||
var PAINT_MS = 250;/* Assume the browser takes about this long to layout/paint this whole page */
|
||||
var iframe = document.getElementById('toy');
|
||||
window.setTimeout(function () {
|
||||
iframe.width = 64;/* <100px ; toggle media query off */
|
||||
window.setTimeout(function () {
|
||||
iframe.width = 100;/* >=100px ; toggle media query on; back to initial width */
|
||||
// Take the reftest screenshot after the last relayout/repaint finishes
|
||||
window.setTimeout(function () {
|
||||
document.documentElement.className = '';
|
||||
}, PAINT_MS);
|
||||
}, PAINT_MS);
|
||||
}, PAINT_MS);
|
||||
}, false);
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
29
tests/wpt/css-tests/mediaqueries-3_dev/html/mq-calc-002.htm
Normal file
29
tests/wpt/css-tests/mediaqueries-3_dev/html/mq-calc-002.htm
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>Test: evaluation of em in calc in Media Queries</title>
|
||||
<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-mediaqueries/#units" rel="help">
|
||||
<link href="reference/mq-calc-001-ref.htm" rel="match">
|
||||
<meta content="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." name="assert">
|
||||
<meta content="" name="flags">
|
||||
<style>
|
||||
:root { font-size: 30000px; }
|
||||
p { font-size: 16px; }
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
@media (min-width: calc(1em)){
|
||||
div { background-color: green; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
29
tests/wpt/css-tests/mediaqueries-3_dev/html/mq-calc-003.htm
Normal file
29
tests/wpt/css-tests/mediaqueries-3_dev/html/mq-calc-003.htm
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>Test: evaluation of ex in calc in Media Queries</title>
|
||||
<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-mediaqueries/#units" rel="help">
|
||||
<link href="reference/mq-calc-001-ref.htm" rel="match">
|
||||
<meta content="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." name="assert">
|
||||
<meta content="" name="flags">
|
||||
<style>
|
||||
:root { font-size: 30000px; }
|
||||
p { font-size: 16px; }
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
@media (min-width: calc(1ex)){
|
||||
div { background-color: green; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
29
tests/wpt/css-tests/mediaqueries-3_dev/html/mq-calc-004.htm
Normal file
29
tests/wpt/css-tests/mediaqueries-3_dev/html/mq-calc-004.htm
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>Test: evaluation of ch in calc in Media Queries</title>
|
||||
<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-mediaqueries/#units" rel="help">
|
||||
<link href="reference/mq-calc-001-ref.htm" rel="match">
|
||||
<meta content="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." name="assert">
|
||||
<meta content="" name="flags">
|
||||
<style>
|
||||
:root { font-size: 30000px; }
|
||||
p { font-size: 16px; }
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
@media (min-width: calc(1ch)){
|
||||
div { background-color: green; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
29
tests/wpt/css-tests/mediaqueries-3_dev/html/mq-calc-005.htm
Normal file
29
tests/wpt/css-tests/mediaqueries-3_dev/html/mq-calc-005.htm
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>Test: evaluation of rem in calc in Media Queries</title>
|
||||
<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
|
||||
<link href="http://www.w3.org/TR/css3-values/#calc" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-mediaqueries/#units" rel="help">
|
||||
<link href="reference/mq-calc-001-ref.htm" rel="match">
|
||||
<meta content="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." name="assert">
|
||||
<meta content="" name="flags">
|
||||
<style>
|
||||
:root { font-size: 30000px; }
|
||||
p { font-size: 16px; }
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
}
|
||||
@media (min-width: calc(1rem)){
|
||||
div { background-color: green; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
18
tests/wpt/css-tests/mediaqueries-3_dev/html/ref.htm
Normal file
18
tests/wpt/css-tests/mediaqueries-3_dev/html/ref.htm
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
|
||||
<style>
|
||||
div {
|
||||
background-color:green;
|
||||
height:100px;
|
||||
width:100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
<!DOCTYPE html>
|
||||
<html style="background: green"><head></head><body></body></html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
|
||||
<style>
|
||||
div {
|
||||
background-color:green;
|
||||
height:100px;
|
||||
width:100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 224 B |
Binary file not shown.
|
After Width: | Height: | Size: 218 B |
Binary file not shown.
|
After Width: | Height: | Size: 217 B |
|
|
@ -0,0 +1,29 @@
|
|||
CSS Global Support Directory
|
||||
============================
|
||||
|
||||
This directory contains common support files (such as images and external
|
||||
style sheets). These are sync'ed into the support directories of all our
|
||||
test suites. If you have test-suite-specific support files, please add
|
||||
them to the appropriate test-suite-specific support/ directory.
|
||||
|
||||
If you add to a support/ directory, please run the tools/supportprop.py
|
||||
script from the top of the repository to cascade support files into the
|
||||
lower-level support directories.
|
||||
|
||||
Description of the Common Support File Collection
|
||||
-------------------------------------------------
|
||||
|
||||
The 1x1-* images are all exactly one pixel.
|
||||
|
||||
The swatch-* images all use 15x15 cells.
|
||||
|
||||
The square-* images all use 15x15 cells with one pixel borders.
|
||||
|
||||
The pattern-* images use cells of various sizes:
|
||||
|
||||
pattern-gg-gr.png 20x20
|
||||
pattern-grg-rgr-grg.png 20x20
|
||||
pattern-rgr-grg-rgr.png 20x20
|
||||
pattern-tr.png 15x15
|
||||
pattern-grg-rrg-rgg.png 15x15
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
.a { color: green; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
.b { color: green; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
.c { color: red; }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1 @@
|
|||
.import { color: green; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
.import { color: red; }
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>iframe containing the meat of the test</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* green div that should cover the red divs */
|
||||
#green {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: green;
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
}
|
||||
.spacer {
|
||||
height: 98px;
|
||||
width: 20px;
|
||||
}
|
||||
.item {
|
||||
background-color: red;
|
||||
display: block;/* property under test */
|
||||
/* border to aid understanding of boundaries between items */
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: red;/* Note: if you're trying to debug this, use a different color here */
|
||||
}
|
||||
/* 100px = 10*(1 + 8 + 1) */
|
||||
@media (min-width: 100px) {
|
||||
#green {
|
||||
width: 100px;
|
||||
height: 100px;/* = 1 + 98 + 1 */
|
||||
}
|
||||
.item {
|
||||
display: table-cell;/* property and value under test */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<div class="item"><div class="spacer"></div></div>
|
||||
<div class="item"><div class="spacer"></div></div>
|
||||
<div class="item"><div class="spacer"></div></div>
|
||||
<div class="item"><div class="spacer"></div></div>
|
||||
<div class="item"><div class="spacer"></div></div>
|
||||
<div class="item"><div class="spacer"></div></div>
|
||||
<div class="item"><div class="spacer"></div></div>
|
||||
<div class="item"><div class="spacer"></div></div>
|
||||
<div class="item"><div class="spacer"></div></div>
|
||||
<div class="item"><div class="spacer"></div></div>
|
||||
</div>
|
||||
<div id="green"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 148 B |
Binary file not shown.
|
After Width: | Height: | Size: 222 B |
Binary file not shown.
|
After Width: | Height: | Size: 231 B |
Binary file not shown.
|
After Width: | Height: | Size: 223 B |
Binary file not shown.
|
After Width: | Height: | Size: 137 B |
Binary file not shown.
|
After Width: | Height: | Size: 691 B |
Binary file not shown.
|
After Width: | Height: | Size: 671 B |
Binary file not shown.
|
After Width: | Height: | Size: 760 B |
Binary file not shown.
|
After Width: | Height: | Size: 757 B |
Binary file not shown.
|
After Width: | Height: | Size: 92 B |
Binary file not shown.
|
After Width: | Height: | Size: 92 B |
Binary file not shown.
|
After Width: | Height: | Size: 78 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
Binary file not shown.
|
After Width: | Height: | Size: 156 B |
Binary file not shown.
|
After Width: | Height: | Size: 85 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 180 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
94
tests/wpt/css-tests/mediaqueries-3_dev/html/reftest-toc.htm
Normal file
94
tests/wpt/css-tests/mediaqueries-3_dev/html/reftest-toc.htm
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Media Queries Level 3 Conformance Test Suite Reftest Index</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 Reftest Index</h1>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="ref-column">
|
||||
<col id="flags-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th>Reference</th>
|
||||
<th>Flags</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="calc-in-media-queries-001" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="Calc function inside media queries">
|
||||
<a href="calc-in-media-queries-001.htm">calc-in-media-queries-001</a></td>
|
||||
<td><a href="reference/all-green.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="calc-in-media-queries-002" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="Calc function inside media queries">
|
||||
<a href="calc-in-media-queries-002.htm">calc-in-media-queries-002</a></td>
|
||||
<td><a href="reference/all-green.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="min-width-001" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="min-width length value approximation">
|
||||
<a href="min-width-001.htm">min-width-001</a></td>
|
||||
<td><a href="ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="min-width-tables-001" class="dom">
|
||||
<tr>
|
||||
<td rowspan="1" title="Table Layout and Viewport Resizing">
|
||||
<a href="min-width-tables-001.htm">min-width-tables-001</a></td>
|
||||
<td><a href="ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mq-calc-002" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="evaluation of em in calc in Media Queries">
|
||||
<a href="mq-calc-002.htm">mq-calc-002</a></td>
|
||||
<td><a href="reference/mq-calc-001-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mq-calc-003" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="evaluation of ex in calc in Media Queries">
|
||||
<a href="mq-calc-003.htm">mq-calc-003</a></td>
|
||||
<td><a href="reference/mq-calc-001-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mq-calc-004" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="evaluation of ch in calc in Media Queries">
|
||||
<a href="mq-calc-004.htm">mq-calc-004</a></td>
|
||||
<td><a href="reference/mq-calc-001-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mq-calc-005" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="evaluation of rem in calc in Media Queries">
|
||||
<a href="mq-calc-005.htm">mq-calc-005</a></td>
|
||||
<td><a href="reference/mq-calc-001-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
9
tests/wpt/css-tests/mediaqueries-3_dev/html/reftest.list
Normal file
9
tests/wpt/css-tests/mediaqueries-3_dev/html/reftest.list
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
|
||||
calc-in-media-queries-001.htm == reference/all-green.htm
|
||||
calc-in-media-queries-002.htm == reference/all-green.htm
|
||||
min-width-001.htm == ref.htm
|
||||
min-width-tables-001.htm == ref.htm
|
||||
mq-calc-002.htm == reference/mq-calc-001-ref.htm
|
||||
mq-calc-003.htm == reference/mq-calc-001-ref.htm
|
||||
mq-calc-004.htm == reference/mq-calc-001-ref.htm
|
||||
mq-calc-005.htm == reference/mq-calc-001-ref.htm
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
BIN
tests/wpt/css-tests/mediaqueries-3_dev/html/support/1x1-lime.png
Normal file
BIN
tests/wpt/css-tests/mediaqueries-3_dev/html/support/1x1-lime.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
BIN
tests/wpt/css-tests/mediaqueries-3_dev/html/support/1x1-navy.png
Normal file
BIN
tests/wpt/css-tests/mediaqueries-3_dev/html/support/1x1-navy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
BIN
tests/wpt/css-tests/mediaqueries-3_dev/html/support/1x1-red.png
Normal file
BIN
tests/wpt/css-tests/mediaqueries-3_dev/html/support/1x1-red.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 224 B |
Binary file not shown.
|
After Width: | Height: | Size: 218 B |
Binary file not shown.
|
After Width: | Height: | Size: 217 B |
29
tests/wpt/css-tests/mediaqueries-3_dev/html/support/README
Normal file
29
tests/wpt/css-tests/mediaqueries-3_dev/html/support/README
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
CSS Global Support Directory
|
||||
============================
|
||||
|
||||
This directory contains common support files (such as images and external
|
||||
style sheets). These are sync'ed into the support directories of all our
|
||||
test suites. If you have test-suite-specific support files, please add
|
||||
them to the appropriate test-suite-specific support/ directory.
|
||||
|
||||
If you add to a support/ directory, please run the tools/supportprop.py
|
||||
script from the top of the repository to cascade support files into the
|
||||
lower-level support directories.
|
||||
|
||||
Description of the Common Support File Collection
|
||||
-------------------------------------------------
|
||||
|
||||
The 1x1-* images are all exactly one pixel.
|
||||
|
||||
The swatch-* images all use 15x15 cells.
|
||||
|
||||
The square-* images all use 15x15 cells with one pixel borders.
|
||||
|
||||
The pattern-* images use cells of various sizes:
|
||||
|
||||
pattern-gg-gr.png 20x20
|
||||
pattern-grg-rgr-grg.png 20x20
|
||||
pattern-rgr-grg-rgr.png 20x20
|
||||
pattern-tr.png 15x15
|
||||
pattern-grg-rrg-rgg.png 15x15
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
.a { color: green; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
.b { color: green; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
.c { color: red; }
|
||||
BIN
tests/wpt/css-tests/mediaqueries-3_dev/html/support/cat.png
Normal file
BIN
tests/wpt/css-tests/mediaqueries-3_dev/html/support/cat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1 @@
|
|||
.import { color: green; }
|
||||
|
|
@ -0,0 +1 @@
|
|||
.import { color: red; }
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>iframe containing the meat of the test</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* green div that should cover the red divs */
|
||||
#green {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: green;
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
}
|
||||
.spacer {
|
||||
height: 98px;
|
||||
width: 20px;
|
||||
}
|
||||
.item {
|
||||
background-color: red;
|
||||
display: block;/* property under test */
|
||||
/* border to aid understanding of boundaries between items */
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: red;/* Note: if you're trying to debug this, use a different color here */
|
||||
}
|
||||
/* 100px = 10*(1 + 8 + 1) */
|
||||
@media (min-width: 100px) {
|
||||
#green {
|
||||
width: 100px;
|
||||
height: 100px;/* = 1 + 98 + 1 */
|
||||
}
|
||||
.item {
|
||||
display: table-cell;/* property and value under test */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<div class="item"><div class="spacer"></div></div>
|
||||
<div class="item"><div class="spacer"></div></div>
|
||||
<div class="item"><div class="spacer"></div></div>
|
||||
<div class="item"><div class="spacer"></div></div>
|
||||
<div class="item"><div class="spacer"></div></div>
|
||||
<div class="item"><div class="spacer"></div></div>
|
||||
<div class="item"><div class="spacer"></div></div>
|
||||
<div class="item"><div class="spacer"></div></div>
|
||||
<div class="item"><div class="spacer"></div></div>
|
||||
<div class="item"><div class="spacer"></div></div>
|
||||
</div>
|
||||
<div id="green"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 148 B |
Binary file not shown.
|
After Width: | Height: | Size: 222 B |
Binary file not shown.
|
After Width: | Height: | Size: 231 B |
Binary file not shown.
|
After Width: | Height: | Size: 223 B |
Binary file not shown.
|
After Width: | Height: | Size: 137 B |
Binary file not shown.
|
After Width: | Height: | Size: 691 B |
Binary file not shown.
|
After Width: | Height: | Size: 671 B |
Binary file not shown.
|
After Width: | Height: | Size: 760 B |
Binary file not shown.
|
After Width: | Height: | Size: 757 B |
Binary file not shown.
|
After Width: | Height: | Size: 92 B |
Binary file not shown.
|
After Width: | Height: | Size: 92 B |
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue