This test suite comes from
https://github.com/w3c/csswg-test
-without any modification except necessary adjustment on reference path to test harness
+with modification:
+ Using tool transfer .xht file to .htm file.
+ The tool comes from https://github.com/w3c/csswg-test/tree/master/tools.
These tests are copyright by W3C and/or the author listed in the test
file. The tests are dual-licensed under the W3C Test Suite License:
-tests_SCRIPTS = *.xht
+tests_SCRIPTS = *
testsdir = /opt/tct-colors-css3-tests/colors/csswg
EXTRA_DIST = $(tests_SCRIPTS)
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+ <head>
+ <title>CSS Test: opacity</title>
+ <link title="L. David Baron" rel="author" href="http://dbaron.org/">
+ <link title="Mozilla Corporation" rel="author" href="http://mozilla.com/">
+ <link rel="help" href="http://www.w3.org/TR/css3-color/#transparency">
+ <meta content="" name="flags">
+ <meta content="Opacity is group opacity over elements (not boxes)." name="assert">
+ <style type="text/css">
+
+ body { background: white; }
+
+ div.test { margin: 1em; line-height: 0.5em; font-family: monospace; }
+ div.test span { opacity: 0.4; background: blue; color: blue; }
+
+ div.ref { height: 1em; width: 5em; background: rgb(153, 153, 255); }
+
+ </style>
+ </head>
+ <body>
+
+ <p>The following two boxes should be the same color:</p>
+
+ <div class="test"><span>XXXXX<br>XXXXX</span></div>
+
+ <div class="ref"></div>
+
+ </body>
+</html>
\ No newline at end of file
+++ /dev/null
-<!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>CSS Test: opacity</title>
- <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
- <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
- <link rel="help" href="http://www.w3.org/TR/css3-color/#transparency" />
- <meta name="flags" content="" />
- <meta name="assert" content="Opacity is group opacity over elements (not boxes)." />
- <style type="text/css"><![CDATA[
-
- body { background: white; }
-
- div.test { margin: 1em; line-height: 0.5em; font-family: monospace; }
- div.test span { opacity: 0.4; background: blue; color: blue; }
-
- div.ref { height: 1em; width: 5em; background: rgb(153, 153, 255); }
-
- ]]></style>
- </head>
- <body>
-
- <p>The following two boxes should be the same color:</p>
-
- <div class="test"><span>XXXXX<br/>XXXXX</span></div>
-
- <div class="ref"></div>
-
- </body>
-</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+ <head>
+ <title>CSS Test: opacity</title>
+ <link title="L. David Baron" rel="author" href="http://dbaron.org/">
+ <link title="Mozilla Corporation" rel="author" href="http://mozilla.com/">
+ <link rel="help" href="http://www.w3.org/TR/css3-color/#transparency">
+ <meta content="" name="flags">
+ <meta content="Opacity is group opacity over elements (not boxes)." name="assert">
+ <style type="text/css">
+
+ body { background: white; }
+
+ div.test { margin: 1em; line-height: 0; font-family: monospace; }
+ div.test span { opacity: 0.4; }
+ div.test span a { background: blue; color: blue; }
+
+ div.ref { height: 1em; width: 5em; background: rgb(153, 153, 255); }
+
+ </style>
+ </head>
+ <body>
+
+ <p>The following two boxes should be the same color:</p>
+
+ <div class="test"><span><a>XXXXX<br>XXXXX</a></span></div>
+
+ <div class="ref"></div>
+
+ </body>
+</html>
\ No newline at end of file
+++ /dev/null
-<!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>CSS Test: opacity</title>
- <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
- <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
- <link rel="help" href="http://www.w3.org/TR/css3-color/#transparency" />
- <meta name="flags" content="" />
- <meta name="assert" content="Opacity is group opacity over elements (not boxes)." />
- <style type="text/css"><![CDATA[
-
- body { background: white; }
-
- div.test { margin: 1em; line-height: 0; font-family: monospace; }
- div.test span { opacity: 0.4; }
- div.test span a { background: blue; color: blue; }
-
- div.ref { height: 1em; width: 5em; background: rgb(153, 153, 255); }
-
- ]]></style>
- </head>
- <body>
-
- <p>The following two boxes should be the same color:</p>
-
- <div class="test"><span><a>XXXXX<br/>XXXXX</a></span></div>
-
- <div class="ref"></div>
-
- </body>
-</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+ <head>
+ <title>CSS Test: rgba() colors</title>
+ <link title="L. David Baron" rel="author" href="http://dbaron.org/">
+ <link title="Mozilla Corporation" rel="author" href="http://mozilla.com/">
+ <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color">
+ <meta content="" name="flags">
+ <meta content="Alpha components of rgba() colors less than 0 are clamped to 0." name="assert">
+ <style type="text/css">
+ html, body { background: white; }
+ #one { color: rgb(0, 0, 0); }
+ #two { color: rgba(0, 0, 0, -0.0); }
+ #three { color: rgba(0, 0, 0, -0.1); }
+ #four { color: rgba(0, 0, 0, -0.9); }
+ #five { color: rgba(0, 0, 0, -30); }
+ #six { color: rgba(0, 0, 0, -7439.79); }
+ </style>
+ </head>
+ <body>
+ <p id="one">This should be the only text visible on this page.</p>
+ <p id="two">This text should NOT be visible.</p>
+ <p id="three">This text should NOT be visible.</p>
+ <p id="four">This text should NOT be visible.</p>
+ <p id="five">This text should NOT be visible.</p>
+ <p id="six">This text should NOT be visible.</p>
+ </body>
+</html>
\ No newline at end of file
+++ /dev/null
-<!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>CSS Test: rgba() colors</title>
- <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
- <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
- <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color" />
- <meta name="flags" content="" />
- <meta name="assert" content="Alpha components of rgba() colors less than 0 are clamped to 0." />
- <style type="text/css"><![CDATA[
- html, body { background: white; }
- #one { color: rgb(0, 0, 0); }
- #two { color: rgba(0, 0, 0, -0.0); }
- #three { color: rgba(0, 0, 0, -0.1); }
- #four { color: rgba(0, 0, 0, -0.9); }
- #five { color: rgba(0, 0, 0, -30); }
- #six { color: rgba(0, 0, 0, -7439.79); }
- ]]></style>
- </head>
- <body>
- <p id="one">This should be the only text visible on this page.</p>
- <p id="two">This text should NOT be visible.</p>
- <p id="three">This text should NOT be visible.</p>
- <p id="four">This text should NOT be visible.</p>
- <p id="five">This text should NOT be visible.</p>
- <p id="six">This text should NOT be visible.</p>
- </body>
-</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+ <head>
+ <title>CSS Test: rgba() colors</title>
+ <link title="L. David Baron" rel="author" href="http://dbaron.org/">
+ <link title="Mozilla Corporation" rel="author" href="http://mozilla.com/">
+ <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color">
+ <meta content="" name="flags">
+ <meta content="Alpha components of rgba() colors greater than 1 are clamped to 1." name="assert">
+ <style type="text/css">
+ html, body { background: white; }
+ #two, #three, #four, #five, #six { color: rgba(0, 0, 0, 0); }
+
+ #two { color: rgba(0, 0, 0, 1.0); }
+ #three { color: rgba(0, 0, 0, 1.1); }
+ #four { color: rgba(0, 0, 0, 1.9); }
+ #five { color: rgba(0, 0, 0, 30); }
+ #six { color: rgba(0, 0, 0, 7439.79); }
+ </style>
+ </head>
+ <body>
+ <p id="one">There should be six lines of text on this page, all the same color. [1 of 6]</p>
+ <p id="two">There should be six lines of text on this page, all the same color. [2 of 6]</p>
+ <p id="three">There should be six lines of text on this page, all the same color. [3 of 6]</p>
+ <p id="four">There should be six lines of text on this page, all the same color. [4 of 6]</p>
+ <p id="five">There should be six lines of text on this page, all the same color. [5 of 6]</p>
+ <p id="six">There should be six lines of text on this page, all the same color. [6 of 6]</p>
+ </body>
+</html>
\ No newline at end of file
+++ /dev/null
-<!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>CSS Test: rgba() colors</title>
- <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
- <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
- <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color" />
- <meta name="flags" content="" />
- <meta name="assert" content="Alpha components of rgba() colors greater than 1 are clamped to 1." />
- <style type="text/css"><![CDATA[
- html, body { background: white; }
- #two, #three, #four, #five, #six { color: rgba(0, 0, 0, 0); }
-
- #two { color: rgba(0, 0, 0, 1.0); }
- #three { color: rgba(0, 0, 0, 1.1); }
- #four { color: rgba(0, 0, 0, 1.9); }
- #five { color: rgba(0, 0, 0, 30); }
- #six { color: rgba(0, 0, 0, 7439.79); }
- ]]></style>
- </head>
- <body>
- <p id="one">There should be six lines of text on this page, all the same color. [1 of 6]</p>
- <p id="two">There should be six lines of text on this page, all the same color. [2 of 6]</p>
- <p id="three">There should be six lines of text on this page, all the same color. [3 of 6]</p>
- <p id="four">There should be six lines of text on this page, all the same color. [4 of 6]</p>
- <p id="five">There should be six lines of text on this page, all the same color. [5 of 6]</p>
- <p id="six">There should be six lines of text on this page, all the same color. [6 of 6]</p>
- </body>
-</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+ <head>
+ <title>CSS Test: rgba() clipping outside device gamut</title>
+ <link title="L. David Baron" rel="author" href="http://dbaron.org/">
+ <link title="Mozilla Corporation" rel="author" href="http://mozilla.com/">
+ <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color">
+ <meta content="" name="flags">
+ <meta content="Test clipping of rgba() values outside the device gamut." name="assert">
+ <style type="text/css">
+
+ body { background: white; color: black; }
+ table { border-spacing: 0 2px; padding: 0; border: none; }
+ td { border: none; padding: 0; height: 1.2em; }
+
+ </style>
+ </head>
+ <body>
+
+ <p><strong>WARNING: This test assumes that the device gamut is sRGB
+ (as it will be for many CRT monitors).</strong></p>
+
+ <p>Every row in this table should have both columns the same color:</p>
+
+ <table>
+ <tr>
+ <th style="background:white; color: black">Column 1</th>
+ <th style="background:black; color: white">Column 2</th>
+ </tr>
+ <tr>
+ <td style="background: rgba(-30, 500, -1, 0.6)"> </td>
+ <td style="background: rgb(102, 255, 102)"> </td>
+ </tr>
+ <tr>
+ <td style="background: rgba(-260, -254, 300, 0.4)"> </td>
+ <td style="background: rgb(153, 153, 255)"> </td>
+ </tr>
+ <tr>
+ <td style="background: rgba(-254, 256, 0, 0.6)"> </td>
+ <td style="background: rgb(102, 255, 102)"> </td>
+ </tr>
+ <tr>
+ <td style="background: rgba(-10%, 200%, -1%, 0.4)"> </td>
+ <td style="background: rgb(153, 255, 153)"> </td>
+ </tr>
+ <tr>
+ <td style="background: rgba(-110%, 130%, -99%, 0.6)"> </td>
+ <td style="background: rgb(102, 255, 102)"> </td>
+ </tr>
+ <tr>
+ <td style="background: rgba(-99%, 101%, 0%, 0.4)"> </td>
+ <td style="background: rgb(153, 255, 153)"> </td>
+ </tr>
+ <tr>
+ <td style="background: rgba(50, -30, 255, 0.6)"> </td>
+ <td style="background: rgb(132, 102, 255)"> </td>
+ </tr>
+ <tr>
+ <td style="background: rgba(0, 50, 350, 0.4)"> </td>
+ <td style="background: rgb(153, 173, 255)"> </td>
+ </tr>
+ </table>
+
+ </body>
+</html>
\ No newline at end of file
+++ /dev/null
-<!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>CSS Test: rgba() clipping outside device gamut</title>
- <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
- <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
- <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color" />
- <meta name="flags" content="" />
- <meta name="assert" content="Test clipping of rgba() values outside the device gamut." />
- <style type="text/css"><![CDATA[
-
- body { background: white; color: black; }
- table { border-spacing: 0 2px; padding: 0; border: none; }
- td { border: none; padding: 0; height: 1.2em; }
-
- ]]></style>
- </head>
- <body>
-
- <p><strong>WARNING: This test assumes that the device gamut is sRGB
- (as it will be for many CRT monitors).</strong></p>
-
- <p>Every row in this table should have both columns the same color:</p>
-
- <table>
- <tr>
- <th style="background:white; color: black">Column 1</th>
- <th style="background:black; color: white">Column 2</th>
- </tr>
- <tr>
- <td style="background: rgba(-30, 500, -1, 0.6)"> </td>
- <td style="background: rgb(102, 255, 102)"> </td>
- </tr>
- <tr>
- <td style="background: rgba(-260, -254, 300, 0.4)"> </td>
- <td style="background: rgb(153, 153, 255)"> </td>
- </tr>
- <tr>
- <td style="background: rgba(-254, 256, 0, 0.6)"> </td>
- <td style="background: rgb(102, 255, 102)"> </td>
- </tr>
- <tr>
- <td style="background: rgba(-10%, 200%, -1%, 0.4)"> </td>
- <td style="background: rgb(153, 255, 153)"> </td>
- </tr>
- <tr>
- <td style="background: rgba(-110%, 130%, -99%, 0.6)"> </td>
- <td style="background: rgb(102, 255, 102)"> </td>
- </tr>
- <tr>
- <td style="background: rgba(-99%, 101%, 0%, 0.4)"> </td>
- <td style="background: rgb(153, 255, 153)"> </td>
- </tr>
- <tr>
- <td style="background: rgba(50, -30, 255, 0.6)"> </td>
- <td style="background: rgb(132, 102, 255)"> </td>
- </tr>
- <tr>
- <td style="background: rgba(0, 50, 350, 0.4)"> </td>
- <td style="background: rgb(153, 173, 255)"> </td>
- </tr>
- </table>
-
- </body>
-</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+ <head>
+ <title>CSS Test: rgba() colors</title>
+ <link title="L. David Baron" rel="author" href="http://dbaron.org/">
+ <link title="Mozilla Corporation" rel="author" href="http://mozilla.com/">
+ <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color">
+ <meta content="" name="flags">
+ <meta content="Test that rgba() values produce correct colors." name="assert">
+ <style type="text/css">
+ #one { color: rgba(0, 0, 0, 1.0); background: rgba(255, 255, 255, 1.0); }
+ #two { color: rgba(255, 255, 255, 1.0); background: rgba(0, 0, 0, 1.0); }
+ #three { color: rgba(255, 0, 0, 1.0); }
+ #four { color: rgba(0, 255, 0, 1.0); }
+ #five { color: rgba(0, 0, 255, 1.0); }
+ </style>
+ </head>
+ <body>
+ <p id="one">This should be black text on a white background.</p>
+ <p id="two">This should be white text on a black background.</p>
+ <p id="three">This text should be red.</p>
+ <p id="four">This text should be green.</p>
+ <p id="five">This text should be blue.</p>
+ </body>
+</html>
\ No newline at end of file
+++ /dev/null
-<!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>CSS Test: rgba() colors</title>
- <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
- <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
- <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color" />
- <meta name="flags" content="" />
- <meta name="assert" content="Test that rgba() values produce correct colors." />
- <style type="text/css"><![CDATA[
- #one { color: rgba(0, 0, 0, 1.0); background: rgba(255, 255, 255, 1.0); }
- #two { color: rgba(255, 255, 255, 1.0); background: rgba(0, 0, 0, 1.0); }
- #three { color: rgba(255, 0, 0, 1.0); }
- #four { color: rgba(0, 255, 0, 1.0); }
- #five { color: rgba(0, 0, 255, 1.0); }
- ]]></style>
- </head>
- <body>
- <p id="one">This should be black text on a white background.</p>
- <p id="two">This should be white text on a black background.</p>
- <p id="three">This text should be red.</p>
- <p id="four">This text should be green.</p>
- <p id="five">This text should be blue.</p>
- </body>
-</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+ <head>
+ <title>CSS Test: no mixed rgba() values</title>
+ <link title="L. David Baron" rel="author" href="http://dbaron.org/">
+ <link title="Mozilla Corporation" rel="author" href="http://mozilla.com/">
+ <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color">
+ <meta content="invalid" name="flags">
+ <meta content="Test that rgba() values are only accepted when all integers or all percentages." name="assert">
+ <style type="text/css">
+ p { color: green; }
+ p { color: rgba(255, 0, 0%, 1.0); }
+ p { color: rgba(100%, 0%, 0, 1.0); }
+ p { color: rgba(100%, 1, 0, 1.0); }
+ p { color: rgba(255, 1%, 0%, 1.0); }
+ p { color: rgba(99%, 0%, 0, 1.0); }
+ p { color: rgba(0%, 0, 0%, 1.0); }
+ p { color: rgba(0, 0%, 0%, 1.0); }
+ p { color: rgba(254, 255%, 0, 1.0); }
+ </style>
+ </head>
+ <body>
+ <p>This text should be green.</p>
+
+ <div>Note: the rules tested by this test may be changed in
+ future levels of the CSS Color Module.</div>
+ </body>
+</html>
\ No newline at end of file
+++ /dev/null
-<!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>CSS Test: no mixed rgba() values</title>
- <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
- <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
- <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color" />
- <meta name="flags" content="invalid" />
- <meta name="assert" content="Test that rgba() values are only accepted when all integers or all percentages." />
- <style type="text/css"><![CDATA[
- p { color: green; }
- p { color: rgba(255, 0, 0%, 1.0); }
- p { color: rgba(100%, 0%, 0, 1.0); }
- p { color: rgba(100%, 1, 0, 1.0); }
- p { color: rgba(255, 1%, 0%, 1.0); }
- p { color: rgba(99%, 0%, 0, 1.0); }
- p { color: rgba(0%, 0, 0%, 1.0); }
- p { color: rgba(0, 0%, 0%, 1.0); }
- p { color: rgba(254, 255%, 0, 1.0); }
- ]]></style>
- </head>
- <body>
- <p>This text should be green.</p>
-
- <div>Note: the rules tested by this test may be changed in
- future levels of the CSS Color Module.</div>
- </body>
-</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+ <head>
+ <title>CSS Test: whitespace in rgba() values</title>
+ <link title="L. David Baron" rel="author" href="http://dbaron.org/">
+ <link title="Mozilla Corporation" rel="author" href="http://mozilla.com/">
+ <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color">
+ <meta content="" name="flags">
+ <meta content="Test that whitespace is allowed within rgba() functions." name="assert">
+ <style type="text/css">
+ html, body { background: black; }
+ #one { color: rgba( 0,
+255 ,0 ,1.0 ); }
+ #two { color: rgba(0
+,255
+,0
+, 1.0); }
+ #three { color: rgba( 0 , 255 , 0 , 1.0); }
+
+ #four { color: rgba( 0%,
+100% ,0% ,1.0 ); }
+ #five { color: rgba(0%
+,100%
+,0%
+, 1.0); }
+ #six { color: rgba( 0% , 100% , 0% ,
+ 1.0); }
+ </style>
+ </head>
+ <body>
+ <p id="one">This text should be green.</p>
+ <p id="two">This text should be green.</p>
+ <p id="three">This text should be green.</p>
+ <p id="four">This text should be green.</p>
+ <p id="five">This text should be green.</p>
+ <p id="six">This text should be green.</p>
+ </body>
+</html>
\ No newline at end of file
+++ /dev/null
-<!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>CSS Test: whitespace in rgba() values</title>
- <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
- <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
- <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color" />
- <meta name="flags" content="" />
- <meta name="assert" content="Test that whitespace is allowed within rgba() functions." />
- <style type="text/css"><![CDATA[
- html, body { background: black; }
- #one { color: rgba( 0,
-255 ,0 ,1.0 ); }
- #two { color: rgba(0
-,255
-,0
-, 1.0); }
- #three { color: rgba( 0 , 255 , 0 , 1.0); }
-
- #four { color: rgba( 0%,
-100% ,0% ,1.0 ); }
- #five { color: rgba(0%
-,100%
-,0%
-, 1.0); }
- #six { color: rgba( 0% , 100% , 0% ,
- 1.0); }
- ]]></style>
- </head>
- <body>
- <p id="one">This text should be green.</p>
- <p id="two">This text should be green.</p>
- <p id="three">This text should be green.</p>
- <p id="four">This text should be green.</p>
- <p id="five">This text should be green.</p>
- <p id="six">This text should be green.</p>
- </body>
-</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+ <head>
+ <title>CSS Test: rgba() overpainting</title>
+ <link title="L. David Baron" rel="author" href="http://dbaron.org/">
+ <link title="Mozilla Corporation" rel="author" href="http://mozilla.com/">
+ <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color">
+ <meta content="" name="flags">
+ <meta content="Test that rgba() does not behave like opacity and draw in an offscreen buffer." name="assert">
+ <style type="text/css">
+ html, body { background: white; }
+ table { border-spacing: 0 2px; padding: 0; border: none; }
+ td { border: none; padding: 0; }
+
+ td, div { height: 1.2em; }
+ </style>
+ </head>
+ <body>
+
+ <p>Every row in this table should have both columns the same color:</p>
+
+ <table>
+ <tr>
+ <th style="background:white; color: black">Column 1</th>
+ <th style="background:black; color: white">Column 2</th>
+ </tr>
+ <tr>
+ <td style="background: rgba(0, 0, 255, 0.2)"> </td>
+ <td style="background: rgb(204, 204, 255)"> </td>
+ </tr>
+ <tr>
+ <td style="background: rgba(0, 0, 255, 0.2)"><div style="background: inherit"> </div></td>
+ <td style="background: rgb(163, 163, 255)"> </td>
+ </tr>
+ <tr>
+ <td style="background: rgba(0, 0, 255, 0.4)"> </td>
+ <td style="background: rgb(153, 153, 255)"> </td>
+ </tr>
+ <tr>
+ <td style="background: rgba(0, 0, 255, 0.4)"><div style="background: inherit"> </div></td>
+ <td style="background: rgb(92, 92, 255)"> </td>
+ </tr>
+ <tr>
+ <td style="background: rgba(0, 0, 255, 0.6)"> </td>
+ <td style="background: rgb(102, 102, 255)"> </td>
+ </tr>
+ <tr>
+ <td style="background: rgba(0, 0, 255, 0.6)"><div style="background: inherit"> </div></td>
+ <td style="background: rgb(41, 41, 255)"> </td>
+ </tr>
+ <tr>
+ <td style="background: rgba(0, 0, 255, 0.8)"> </td>
+ <td style="background: rgb(51, 51, 255)"> </td>
+ </tr>
+ <tr>
+ <td style="background: rgba(0, 0, 255, 0.8)"><div style="background: inherit"> </div></td>
+ <td style="background: rgb(10, 10, 255)"> </td>
+ </tr>
+ </table>
+
+ </body>
+</html>
\ No newline at end of file
+++ /dev/null
-<!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>CSS Test: rgba() overpainting</title>
- <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
- <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
- <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color" />
- <meta name="flags" content="" />
- <meta name="assert" content="Test that rgba() does not behave like opacity and draw in an offscreen buffer." />
- <style type="text/css"><![CDATA[
- html, body { background: white; }
- table { border-spacing: 0 2px; padding: 0; border: none; }
- td { border: none; padding: 0; }
-
- td, div { height: 1.2em; }
- ]]></style>
- </head>
- <body>
-
- <p>Every row in this table should have both columns the same color:</p>
-
- <table>
- <tr>
- <th style="background:white; color: black">Column 1</th>
- <th style="background:black; color: white">Column 2</th>
- </tr>
- <tr>
- <td style="background: rgba(0, 0, 255, 0.2)"> </td>
- <td style="background: rgb(204, 204, 255)"> </td>
- </tr>
- <tr>
- <td style="background: rgba(0, 0, 255, 0.2)"><div style="background: inherit"> </div></td>
- <td style="background: rgb(163, 163, 255)"> </td>
- </tr>
- <tr>
- <td style="background: rgba(0, 0, 255, 0.4)"> </td>
- <td style="background: rgb(153, 153, 255)"> </td>
- </tr>
- <tr>
- <td style="background: rgba(0, 0, 255, 0.4)"><div style="background: inherit"> </div></td>
- <td style="background: rgb(92, 92, 255)"> </td>
- </tr>
- <tr>
- <td style="background: rgba(0, 0, 255, 0.6)"> </td>
- <td style="background: rgb(102, 102, 255)"> </td>
- </tr>
- <tr>
- <td style="background: rgba(0, 0, 255, 0.6)"><div style="background: inherit"> </div></td>
- <td style="background: rgb(41, 41, 255)"> </td>
- </tr>
- <tr>
- <td style="background: rgba(0, 0, 255, 0.8)"> </td>
- <td style="background: rgb(51, 51, 255)"> </td>
- </tr>
- <tr>
- <td style="background: rgba(0, 0, 255, 0.8)"><div style="background: inherit"> </div></td>
- <td style="background: rgb(10, 10, 255)"> </td>
- </tr>
- </table>
-
- </body>
-</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+ <head>
+ <title>CSS Test: rgba() overpainting</title>
+ <link title="L. David Baron" rel="author" href="http://dbaron.org/">
+ <link title="Mozilla Corporation" rel="author" href="http://mozilla.com/">
+ <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color">
+ <meta content="" name="flags">
+ <meta content="Test that rgba() does not behave like opacity and draw in an offscreen buffer." name="assert">
+ <style type="text/css">
+
+ body { background: white; }
+
+ div.test { margin: 1em; line-height: 0; font-family: monospace; }
+ div.test span { background: rgba(0, 0, 255, 0.4); color: rgba(255, 0, 0, 0); }
+
+ div.ref { height: 1em; width: 5em; background: rgb(92, 92, 255); }
+
+ </style>
+ </head>
+ <body>
+
+ <p>These two rectangles should be the same color:</p>
+
+ <div class="test"><span>XXXXX<br>XXXXX</span></div>
+
+ <div class="ref"></div>
+
+ </body>
+</html>
\ No newline at end of file
+++ /dev/null
-<!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>CSS Test: rgba() overpainting</title>
- <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
- <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
- <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color" />
- <meta name="flags" content="" />
- <meta name="assert" content="Test that rgba() does not behave like opacity and draw in an offscreen buffer." />
- <style type="text/css"><![CDATA[
-
- body { background: white; }
-
- div.test { margin: 1em; line-height: 0; font-family: monospace; }
- div.test span { background: rgba(0, 0, 255, 0.4); color: rgba(255, 0, 0, 0); }
-
- div.ref { height: 1em; width: 5em; background: rgb(92, 92, 255); }
-
- ]]></style>
- </head>
- <body>
-
- <p>These two rectangles should be the same color:</p>
-
- <div class="test"><span>XXXXX<br/>XXXXX</span></div>
-
- <div class="ref"></div>
-
- </body>
-</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+ <head>
+ <title>CSS Test: transparent</title>
+ <link title="L. David Baron" rel="author" href="http://dbaron.org/">
+ <link title="Mozilla Corporation" rel="author" href="http://mozilla.com/">
+ <link rel="help" href="http://www.w3.org/TR/css3-color/#transparent">
+ <meta content="" name="flags">
+ <meta content="That the 'transparent' color keyword makes colors transparent." name="assert">
+ <style type="text/css">
+ html, body { background: white; }
+ p { color: black; }
+ #two { color: transparent; }
+ </style>
+ </head>
+ <body>
+ <p id="one">This should be the only text visible on this page.</p>
+ <p id="two">This text should NOT be visible.</p>
+ </body>
+</html>
\ No newline at end of file
+++ /dev/null
-<!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>CSS Test: transparent</title>
- <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
- <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
- <link rel="help" href="http://www.w3.org/TR/css3-color/#transparent" />
- <meta name="flags" content="" />
- <meta name="assert" content="That the 'transparent' color keyword makes colors transparent." />
- <style type="text/css"><![CDATA[
- html, body { background: white; }
- p { color: black; }
- #two { color: transparent; }
- ]]></style>
- </head>
- <body>
- <p id="one">This should be the only text visible on this page.</p>
- <p id="two">This text should NOT be visible.</p>
- </body>
-</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+ <head>
+ <title>CSS Test: transparent</title>
+ <link title="L. David Baron" rel="author" href="http://dbaron.org/">
+ <link title="Mozilla Corporation" rel="author" href="http://mozilla.com/">
+ <link rel="help" href="http://www.w3.org/TR/css3-color/#transparent">
+ <meta content="" name="flags">
+ <meta content="That the 'transparent' color keyword makes colors transparent." name="assert">
+ <style type="text/css">
+ html, body { background: black; }
+ p { color: white; }
+ #two { color: transparent; }
+ </style>
+ </head>
+ <body>
+ <p id="one">This should be the only text visible on this page.</p>
+ <p id="two">This text should NOT be visible.</p>
+ </body>
+</html>
\ No newline at end of file
+++ /dev/null
-<!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>CSS Test: transparent</title>
- <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
- <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
- <link rel="help" href="http://www.w3.org/TR/css3-color/#transparent" />
- <meta name="flags" content="" />
- <meta name="assert" content="That the 'transparent' color keyword makes colors transparent." />
- <style type="text/css"><![CDATA[
- html, body { background: black; }
- p { color: white; }
- #two { color: transparent; }
- ]]></style>
- </head>
- <body>
- <p id="one">This should be the only text visible on this page.</p>
- <p id="two">This text should NOT be visible.</p>
- </body>
-</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+ <head>
+ <title>CSS Test: hsl()</title>
+ <link title="L. David Baron" rel="author" href="http://dbaron.org/">
+ <link title="Mozilla Corporation" rel="author" href="http://mozilla.com/">
+ <link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color">
+ <meta content="" name="flags">
+ <meta content="Test basic functioning of hsl() colors." name="assert">
+ <style type="text/css">
+ html, body { background: white; }
+ p { color: hsl(120, 100%, 25%); }
+ </style>
+ </head>
+ <body>
+ <p>This text should be dark green.</p>
+ </body>
+</html>
\ No newline at end of file
+++ /dev/null
-<!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>CSS Test: hsl()</title>
- <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
- <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
- <link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" />
- <meta name="flags" content="" />
- <meta name="assert" content="Test basic functioning of hsl() colors." />
- <style type="text/css"><![CDATA[
- html, body { background: white; }
- p { color: hsl(120, 100%, 25%); }
- ]]></style>
- </head>
- <body>
- <p>This text should be dark green.</p>
- </body>
-</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+ <head>
+ <title>CSS Test: hsl() clipping outside device gamut</title>
+ <link title="L. David Baron" rel="author" href="http://dbaron.org/">
+ <link title="Mozilla Corporation" rel="author" href="http://mozilla.com/">
+ <link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color">
+ <meta content="" name="flags">
+ <meta content="Test clipping of hsl() values outside the device gamut." name="assert">
+ <style type="text/css">
+
+ table { border-spacing: 0 2px; padding: 0; border: none; }
+ td { border: none; padding: 0; height: 1.2em; }
+
+ </style>
+ </head>
+ <body>
+
+ <p><strong>WARNING: This test assumes that the device gamut is sRGB
+ (as it will be for many CRT monitors).</strong></p>
+
+ <p>Every row in this table should have both columns the same color:</p>
+
+ <table>
+ <tr>
+ <th style="background:white; color: black">Column 1</th>
+ <th style="background:black; color: white">Column 2</th>
+ </tr>
+ <tr>
+ <td style="background: hsl(240, 100%, -100%)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ <tr>
+ <td style="background: hsl(240, 75%, -20%)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ <tr>
+ <td style="background: hsl(240, 75%, 120%)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: hsl(240, 130%, 50%)"> </td>
+ <td style="background: rgb(0, 0, 255)"> </td>
+ </tr>
+ <tr>
+ <td style="background: hsl(264, 130%, 50%)"> </td>
+ <td style="background: rgb(102, 0, 255)"> </td>
+ </tr>
+ <tr>
+ <td style="background: hsl(0, -50%, 40%)"> </td>
+ <td style="background: rgb(102, 102, 102)"> </td>
+ </tr>
+ <tr>
+ <td style="background: hsl(30, -50%, 60%)"> </td>
+ <td style="background: rgb(153, 153, 153)"> </td>
+ </tr>
+ </table>
+
+ </body>
+</html>
\ No newline at end of file
+++ /dev/null
-<!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>CSS Test: hsl() clipping outside device gamut</title>
- <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
- <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
- <link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" />
- <meta name="flags" content="" />
- <meta name="assert" content="Test clipping of hsl() values outside the device gamut." />
- <style type="text/css"><![CDATA[
-
- table { border-spacing: 0 2px; padding: 0; border: none; }
- td { border: none; padding: 0; height: 1.2em; }
-
- ]]></style>
- </head>
- <body>
-
- <p><strong>WARNING: This test assumes that the device gamut is sRGB
- (as it will be for many CRT monitors).</strong></p>
-
- <p>Every row in this table should have both columns the same color:</p>
-
- <table>
- <tr>
- <th style="background:white; color: black">Column 1</th>
- <th style="background:black; color: white">Column 2</th>
- </tr>
- <tr>
- <td style="background: hsl(240, 100%, -100%)"> </td>
- <td style="background: black"> </td>
- </tr>
- <tr>
- <td style="background: hsl(240, 75%, -20%)"> </td>
- <td style="background: black"> </td>
- </tr>
- <tr>
- <td style="background: hsl(240, 75%, 120%)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: hsl(240, 130%, 50%)"> </td>
- <td style="background: rgb(0, 0, 255)"> </td>
- </tr>
- <tr>
- <td style="background: hsl(264, 130%, 50%)"> </td>
- <td style="background: rgb(102, 0, 255)"> </td>
- </tr>
- <tr>
- <td style="background: hsl(0, -50%, 40%)"> </td>
- <td style="background: rgb(102, 102, 102)"> </td>
- </tr>
- <tr>
- <td style="background: hsl(30, -50%, 60%)"> </td>
- <td style="background: rgb(153, 153, 153)"> </td>
- </tr>
- </table>
-
- </body>
-</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+ <head>
+ <title>CSS Test: modding of H values in hsl() colors</title>
+ <link title="L. David Baron" rel="author" href="http://dbaron.org/">
+ <link title="Mozilla Corporation" rel="author" href="http://mozilla.com/">
+ <link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color">
+ <meta content="" name="flags">
+ <meta content="H values in hsl() colors should be treated like angles, even when outside [0,360)" name="assert">
+ <style type="text/css">
+ table { border-spacing: 0; padding: 0; border: none; }
+ td { border: none; padding: 0; }
+ td { width: 1.2em; height: 1.2em; }
+ </style>
+ </head>
+ <body>
+ <p>Each column in the following table should have every cell the
+ same color, except for the checkerboard pattern at the right and
+ left used to indicate the row positions.</p>
+
+ <table>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: hsl(0, 100%, 50%)"> </td>
+ <td style="background: hsl(60, 100%, 50%)"> </td>
+ <td style="background: hsl(120, 100%, 50%)"> </td>
+ <td style="background: hsl(180, 100%, 50%)"> </td>
+ <td style="background: hsl(240, 100%, 50%)"> </td>
+ <td style="background: hsl(300, 100%, 50%)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsl(-360, 100%, 50%)"> </td>
+ <td style="background: hsl(-300, 100%, 50%)"> </td>
+ <td style="background: hsl(-240, 100%, 50%)"> </td>
+ <td style="background: hsl(-180, 100%, 50%)"> </td>
+ <td style="background: hsl(-120, 100%, 50%)"> </td>
+ <td style="background: hsl(-60, 100%, 50%)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: hsl(360, 100%, 50%)"> </td>
+ <td style="background: hsl(420, 100%, 50%)"> </td>
+ <td style="background: hsl(480, 100%, 50%)"> </td>
+ <td style="background: hsl(540, 100%, 50%)"> </td>
+ <td style="background: hsl(600, 100%, 50%)"> </td>
+ <td style="background: hsl(660, 100%, 50%)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsl(6120, 100%, 50%)"> </td>
+ <td style="background: hsl(-9660, 100%, 50%)"> </td>
+ <td style="background: hsl(99840, 100%, 50%)"> </td>
+ <td style="background: hsl(-900, 100%, 50%)"> </td>
+ <td style="background: hsl(-104880, 100%, 50%)"> </td>
+ <td style="background: hsl(2820, 100%, 50%)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ </table>
+
+ </body>
+</html>
\ No newline at end of file
+++ /dev/null
-<!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>CSS Test: modding of H values in hsl() colors</title>
- <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
- <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
- <link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" />
- <meta name="flags" content="" />
- <meta name="assert" content="H values in hsl() colors should be treated like angles, even when outside [0,360)" />
- <style type="text/css"><![CDATA[
- table { border-spacing: 0; padding: 0; border: none; }
- td { border: none; padding: 0; }
- td { width: 1.2em; height: 1.2em; }
- ]]></style>
- </head>
- <body>
- <p>Each column in the following table should have every cell the
- same color, except for the checkerboard pattern at the right and
- left used to indicate the row positions.</p>
-
- <table>
- <tr>
- <td style="background: white"> </td>
- <td style="background: hsl(0, 100%, 50%)"> </td>
- <td style="background: hsl(60, 100%, 50%)"> </td>
- <td style="background: hsl(120, 100%, 50%)"> </td>
- <td style="background: hsl(180, 100%, 50%)"> </td>
- <td style="background: hsl(240, 100%, 50%)"> </td>
- <td style="background: hsl(300, 100%, 50%)"> </td>
- <td style="background: black"> </td>
- </tr>
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsl(-360, 100%, 50%)"> </td>
- <td style="background: hsl(-300, 100%, 50%)"> </td>
- <td style="background: hsl(-240, 100%, 50%)"> </td>
- <td style="background: hsl(-180, 100%, 50%)"> </td>
- <td style="background: hsl(-120, 100%, 50%)"> </td>
- <td style="background: hsl(-60, 100%, 50%)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: hsl(360, 100%, 50%)"> </td>
- <td style="background: hsl(420, 100%, 50%)"> </td>
- <td style="background: hsl(480, 100%, 50%)"> </td>
- <td style="background: hsl(540, 100%, 50%)"> </td>
- <td style="background: hsl(600, 100%, 50%)"> </td>
- <td style="background: hsl(660, 100%, 50%)"> </td>
- <td style="background: black"> </td>
- </tr>
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsl(6120, 100%, 50%)"> </td>
- <td style="background: hsl(-9660, 100%, 50%)"> </td>
- <td style="background: hsl(99840, 100%, 50%)"> </td>
- <td style="background: hsl(-900, 100%, 50%)"> </td>
- <td style="background: hsl(-104880, 100%, 50%)"> </td>
- <td style="background: hsl(2820, 100%, 50%)"> </td>
- <td style="background: white"> </td>
- </tr>
- </table>
-
- </body>
-</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+ <head>
+ <title>CSS Test: hsl()</title>
+ <link title="L. David Baron" rel="author" href="http://dbaron.org/">
+ <link title="Mozilla Corporation" rel="author" href="http://mozilla.com/">
+ <link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color">
+ <meta content="invalid" name="flags">
+ <meta content="Test rules for parsing of hsl() colors." name="assert">
+ <style type="text/css">
+ html, body { background: white; }
+ p { color: hsl(120, 100%, 25%); }
+ p { color: hsl(0, 255, 128); }
+ p { color: hsl(0%, 100%, 50%); }
+ p { color: hsl(0, 100%, 50%, 1); }
+ p { color: hsl(0deg, 100%, 50%); }
+ p { color: hsl(0px, 100%, 50%); }
+ </style>
+ </head>
+ <body>
+ <p>This text should be dark green.</p>
+
+ <div>Note: the rules tested by this test may be changed in
+ future levels of the CSS Color Module.</div>
+ </body>
+</html>
\ No newline at end of file
+++ /dev/null
-<!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>CSS Test: hsl()</title>
- <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
- <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
- <link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" />
- <meta name="flags" content="invalid" />
- <meta name="assert" content="Test rules for parsing of hsl() colors." />
- <style type="text/css"><![CDATA[
- html, body { background: white; }
- p { color: hsl(120, 100%, 25%); }
- p { color: hsl(0, 255, 128); }
- p { color: hsl(0%, 100%, 50%); }
- p { color: hsl(0, 100%, 50%, 1); }
- p { color: hsl(0deg, 100%, 50%); }
- p { color: hsl(0px, 100%, 50%); }
- ]]></style>
- </head>
- <body>
- <p>This text should be dark green.</p>
-
- <div>Note: the rules tested by this test may be changed in
- future levels of the CSS Color Module.</div>
- </body>
-</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+ <head>
+ <title>CSS Test: hsl() values</title>
+ <link title="L. David Baron" rel="author" href="http://dbaron.org/">
+ <link title="Mozilla Corporation" rel="author" href="http://mozilla.com/">
+ <link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color">
+ <meta content="" name="flags">
+ <meta content="Implementation of algorithm for converting hsl() colors to rgb() colors." name="assert">
+ <style type="text/css">
+ table { border-spacing: 0; padding: 0; border: none; }
+ td { border: none; padding: 0; }
+ td { width: 1.2em; height: 1.2em; }
+ </style>
+ </head>
+ <body>
+
+ <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change gradually from red at the left to green at the right (through yellow in the middle).</p>
+
+ <table border="border">
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsl(0, 100%, 50%)"> </td>
+ <td style="background: hsl(12, 100%, 50%)"> </td>
+ <td style="background: hsl(24, 100%, 50%)"> </td>
+ <td style="background: hsl(36, 100%, 50%)"> </td>
+ <td style="background: hsl(48, 100%, 50%)"> </td>
+ <td style="background: hsl(60, 100%, 50%)"> </td>
+ <td style="background: hsl(72, 100%, 50%)"> </td>
+ <td style="background: hsl(84, 100%, 50%)"> </td>
+ <td style="background: hsl(96, 100%, 50%)"> </td>
+ <td style="background: hsl(108, 100%, 50%)"> </td>
+ <td style="background: hsl(120, 100%, 50%)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: rgb(255, 0, 0)"> </td>
+ <td style="background: rgb(255, 51, 0)"> </td>
+ <td style="background: rgb(255, 102, 0)"> </td>
+ <td style="background: rgb(255, 153, 0)"> </td>
+ <td style="background: rgb(255, 204, 0)"> </td>
+ <td style="background: rgb(255, 255, 0)"> </td>
+ <td style="background: rgb(204, 255, 0)"> </td>
+ <td style="background: rgb(153, 255, 0)"> </td>
+ <td style="background: rgb(102, 255, 0)"> </td>
+ <td style="background: rgb(51, 255, 0)"> </td>
+ <td style="background: rgb(0, 255, 0)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ </table>
+
+ <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change gradually from green at the left to blue at the right (through aqua in the middle).</p>
+
+ <table border="border">
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsl(120, 100%, 50%)"> </td>
+ <td style="background: hsl(132, 100%, 50%)"> </td>
+ <td style="background: hsl(144, 100%, 50%)"> </td>
+ <td style="background: hsl(156, 100%, 50%)"> </td>
+ <td style="background: hsl(168, 100%, 50%)"> </td>
+ <td style="background: hsl(180, 100%, 50%)"> </td>
+ <td style="background: hsl(192, 100%, 50%)"> </td>
+ <td style="background: hsl(204, 100%, 50%)"> </td>
+ <td style="background: hsl(216, 100%, 50%)"> </td>
+ <td style="background: hsl(228, 100%, 50%)"> </td>
+ <td style="background: hsl(240, 100%, 50%)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: rgb(0, 255, 0)"> </td>
+ <td style="background: rgb(0, 255, 51)"> </td>
+ <td style="background: rgb(0, 255, 102)"> </td>
+ <td style="background: rgb(0, 255, 153)"> </td>
+ <td style="background: rgb(0, 255, 204)"> </td>
+ <td style="background: rgb(0, 255, 255)"> </td>
+ <td style="background: rgb(0, 204, 255)"> </td>
+ <td style="background: rgb(0, 153, 255)"> </td>
+ <td style="background: rgb(0, 102, 255)"> </td>
+ <td style="background: rgb(0, 51, 255)"> </td>
+ <td style="background: rgb(0, 0, 255)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ </table>
+
+
+ <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change gradually from blue at the left to red at the right (through fuchsia in the middle).</p>
+
+ <table border="border">
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsl(240, 100%, 50%)"> </td>
+ <td style="background: hsl(252, 100%, 50%)"> </td>
+ <td style="background: hsl(264, 100%, 50%)"> </td>
+ <td style="background: hsl(276, 100%, 50%)"> </td>
+ <td style="background: hsl(288, 100%, 50%)"> </td>
+ <td style="background: hsl(300, 100%, 50%)"> </td>
+ <td style="background: hsl(312, 100%, 50%)"> </td>
+ <td style="background: hsl(324, 100%, 50%)"> </td>
+ <td style="background: hsl(336, 100%, 50%)"> </td>
+ <td style="background: hsl(348, 100%, 50%)"> </td>
+ <td style="background: hsl(360, 100%, 50%)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: rgb(0, 0, 255)"> </td>
+ <td style="background: rgb(51, 0, 255)"> </td>
+ <td style="background: rgb(102, 0, 255)"> </td>
+ <td style="background: rgb(153, 0, 255)"> </td>
+ <td style="background: rgb(204, 0, 255)"> </td>
+ <td style="background: rgb(255, 0, 255)"> </td>
+ <td style="background: rgb(255, 0, 204)"> </td>
+ <td style="background: rgb(255, 0, 153)"> </td>
+ <td style="background: rgb(255, 0, 102)"> </td>
+ <td style="background: rgb(255, 0, 51)"> </td>
+ <td style="background: rgb(255, 0, 0)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ </table>
+
+ <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in two steps from nearly gray at the left to red at the right.</p>
+
+ <table border="border">
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsl(0, 20%, 50%)"> </td>
+ <td style="background: hsl(0, 60%, 50%)"> </td>
+ <td style="background: hsl(0, 100%, 50%)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: rgb(153, 102, 102)"> </td>
+ <td style="background: rgb(204, 51, 51)"> </td>
+ <td style="background: rgb(255, 0, 0)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ </table>
+
+ <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in two steps from nearly gray at the left to yellow at the right.</p>
+
+ <table border="border">
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsl(60, 20%, 50%)"> </td>
+ <td style="background: hsl(60, 60%, 50%)"> </td>
+ <td style="background: hsl(60, 100%, 50%)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: rgb(153, 153, 102)"> </td>
+ <td style="background: rgb(204, 204, 51)"> </td>
+ <td style="background: rgb(255, 255, 0)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ </table>
+
+ <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in two steps from nearly gray at the left to green at the right.</p>
+
+ <table border="border">
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsl(120, 20%, 50%)"> </td>
+ <td style="background: hsl(120, 60%, 50%)"> </td>
+ <td style="background: hsl(120, 100%, 50%)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: rgb(102, 153, 102)"> </td>
+ <td style="background: rgb(51, 204, 51)"> </td>
+ <td style="background: rgb(0, 255, 0)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ </table>
+
+ <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in two steps from nearly gray at the left to aqua at the right.</p>
+
+ <table border="border">
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsl(180, 20%, 50%)"> </td>
+ <td style="background: hsl(180, 60%, 50%)"> </td>
+ <td style="background: hsl(180, 100%, 50%)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: rgb(102, 153, 153)"> </td>
+ <td style="background: rgb(51, 204, 204)"> </td>
+ <td style="background: rgb(0, 255, 255)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ </table>
+
+ <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in two steps from nearly gray at the left to blue at the right.</p>
+
+ <table border="border">
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsl(240, 20%, 50%)"> </td>
+ <td style="background: hsl(240, 60%, 50%)"> </td>
+ <td style="background: hsl(240, 100%, 50%)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: rgb(102, 102, 153)"> </td>
+ <td style="background: rgb(51, 51, 204)"> </td>
+ <td style="background: rgb(0, 0, 255)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ </table>
+
+ <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in two steps from nearly gray at the left to fuchsia at the right.</p>
+
+ <table border="border">
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsl(300, 20%, 50%)"> </td>
+ <td style="background: hsl(300, 60%, 50%)"> </td>
+ <td style="background: hsl(300, 100%, 50%)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: rgb(153, 102, 153)"> </td>
+ <td style="background: rgb(204, 51, 204)"> </td>
+ <td style="background: rgb(255, 0, 255)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ </table>
+
+ <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in ten steps from black at the left to white at the right with red at the middle.</p>
+
+ <table border="border">
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsl(0, 100%, 0%)"> </td>
+ <td style="background: hsl(0, 100%, 10%)"> </td>
+ <td style="background: hsl(0, 100%, 20%)"> </td>
+ <td style="background: hsl(0, 100%, 30%)"> </td>
+ <td style="background: hsl(0, 100%, 40%)"> </td>
+ <td style="background: hsl(0, 100%, 50%)"> </td>
+ <td style="background: hsl(0, 100%, 60%)"> </td>
+ <td style="background: hsl(0, 100%, 70%)"> </td>
+ <td style="background: hsl(0, 100%, 80%)"> </td>
+ <td style="background: hsl(0, 100%, 90%)"> </td>
+ <td style="background: hsl(0, 100%, 100%)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: rgb(0, 0, 0)"> </td>
+ <td style="background: rgb(51, 0, 0)"> </td>
+ <td style="background: rgb(102, 0, 0)"> </td>
+ <td style="background: rgb(153, 0, 0)"> </td>
+ <td style="background: rgb(204, 0, 0)"> </td>
+ <td style="background: rgb(255, 0, 0)"> </td>
+ <td style="background: rgb(255, 51, 51)"> </td>
+ <td style="background: rgb(255, 102, 102)"> </td>
+ <td style="background: rgb(255, 153, 153)"> </td>
+ <td style="background: rgb(255, 204, 204)"> </td>
+ <td style="background: rgb(255, 255, 255)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ </table>
+
+ <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in ten steps from black at the left to white at the right with yellow at the middle.</p>
+
+ <table border="border">
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsl(60, 100%, 0%)"> </td>
+ <td style="background: hsl(60, 100%, 10%)"> </td>
+ <td style="background: hsl(60, 100%, 20%)"> </td>
+ <td style="background: hsl(60, 100%, 30%)"> </td>
+ <td style="background: hsl(60, 100%, 40%)"> </td>
+ <td style="background: hsl(60, 100%, 50%)"> </td>
+ <td style="background: hsl(60, 100%, 60%)"> </td>
+ <td style="background: hsl(60, 100%, 70%)"> </td>
+ <td style="background: hsl(60, 100%, 80%)"> </td>
+ <td style="background: hsl(60, 100%, 90%)"> </td>
+ <td style="background: hsl(60, 100%, 100%)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: rgb(0, 0, 0)"> </td>
+ <td style="background: rgb(51, 51, 0)"> </td>
+ <td style="background: rgb(102, 102, 0)"> </td>
+ <td style="background: rgb(153, 153, 0)"> </td>
+ <td style="background: rgb(204, 204, 0)"> </td>
+ <td style="background: rgb(255, 255, 0)"> </td>
+ <td style="background: rgb(255, 255, 51)"> </td>
+ <td style="background: rgb(255, 255, 102)"> </td>
+ <td style="background: rgb(255, 255, 153)"> </td>
+ <td style="background: rgb(255, 255, 204)"> </td>
+ <td style="background: rgb(255, 255, 255)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ </table>
+
+ <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in ten steps from black at the left to white at the right with green at the middle.</p>
+
+ <table border="border">
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsl(120, 100%, 0%)"> </td>
+ <td style="background: hsl(120, 100%, 10%)"> </td>
+ <td style="background: hsl(120, 100%, 20%)"> </td>
+ <td style="background: hsl(120, 100%, 30%)"> </td>
+ <td style="background: hsl(120, 100%, 40%)"> </td>
+ <td style="background: hsl(120, 100%, 50%)"> </td>
+ <td style="background: hsl(120, 100%, 60%)"> </td>
+ <td style="background: hsl(120, 100%, 70%)"> </td>
+ <td style="background: hsl(120, 100%, 80%)"> </td>
+ <td style="background: hsl(120, 100%, 90%)"> </td>
+ <td style="background: hsl(120, 100%, 100%)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: rgb(0, 0, 0)"> </td>
+ <td style="background: rgb(0, 51, 0)"> </td>
+ <td style="background: rgb(0, 102, 0)"> </td>
+ <td style="background: rgb(0, 153, 0)"> </td>
+ <td style="background: rgb(0, 204, 0)"> </td>
+ <td style="background: rgb(0, 255, 0)"> </td>
+ <td style="background: rgb(51, 255, 51)"> </td>
+ <td style="background: rgb(102, 255, 102)"> </td>
+ <td style="background: rgb(153, 255, 153)"> </td>
+ <td style="background: rgb(204, 255, 204)"> </td>
+ <td style="background: rgb(255, 255, 255)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ </table>
+
+ <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in ten steps from black at the left to white at the right with aqua at the middle.</p>
+
+ <table border="border">
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsl(180, 100%, 0%)"> </td>
+ <td style="background: hsl(180, 100%, 10%)"> </td>
+ <td style="background: hsl(180, 100%, 20%)"> </td>
+ <td style="background: hsl(180, 100%, 30%)"> </td>
+ <td style="background: hsl(180, 100%, 40%)"> </td>
+ <td style="background: hsl(180, 100%, 50%)"> </td>
+ <td style="background: hsl(180, 100%, 60%)"> </td>
+ <td style="background: hsl(180, 100%, 70%)"> </td>
+ <td style="background: hsl(180, 100%, 80%)"> </td>
+ <td style="background: hsl(180, 100%, 90%)"> </td>
+ <td style="background: hsl(180, 100%, 100%)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: rgb(0, 0, 0)"> </td>
+ <td style="background: rgb(0, 51, 51)"> </td>
+ <td style="background: rgb(0, 102, 102)"> </td>
+ <td style="background: rgb(0, 153, 153)"> </td>
+ <td style="background: rgb(0, 204, 204)"> </td>
+ <td style="background: rgb(0, 255, 255)"> </td>
+ <td style="background: rgb(51, 255, 255)"> </td>
+ <td style="background: rgb(102, 255, 255)"> </td>
+ <td style="background: rgb(153, 255, 255)"> </td>
+ <td style="background: rgb(204, 255, 255)"> </td>
+ <td style="background: rgb(255, 255, 255)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ </table>
+
+ <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in ten steps from black at the left to white at the right with blue at the middle.</p>
+
+ <table border="border">
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsl(240, 100%, 0%)"> </td>
+ <td style="background: hsl(240, 100%, 10%)"> </td>
+ <td style="background: hsl(240, 100%, 20%)"> </td>
+ <td style="background: hsl(240, 100%, 30%)"> </td>
+ <td style="background: hsl(240, 100%, 40%)"> </td>
+ <td style="background: hsl(240, 100%, 50%)"> </td>
+ <td style="background: hsl(240, 100%, 60%)"> </td>
+ <td style="background: hsl(240, 100%, 70%)"> </td>
+ <td style="background: hsl(240, 100%, 80%)"> </td>
+ <td style="background: hsl(240, 100%, 90%)"> </td>
+ <td style="background: hsl(240, 100%, 100%)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: rgb(0, 0, 0)"> </td>
+ <td style="background: rgb(0, 0, 51)"> </td>
+ <td style="background: rgb(0, 0, 102)"> </td>
+ <td style="background: rgb(0, 0, 153)"> </td>
+ <td style="background: rgb(0, 0, 204)"> </td>
+ <td style="background: rgb(0, 0, 255)"> </td>
+ <td style="background: rgb(51, 51, 255)"> </td>
+ <td style="background: rgb(102, 102, 255)"> </td>
+ <td style="background: rgb(153, 153, 255)"> </td>
+ <td style="background: rgb(204, 204, 255)"> </td>
+ <td style="background: rgb(255, 255, 255)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ </table>
+
+ <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in ten steps from black at the left to white at the right with fuchsia at the middle.</p>
+
+ <table border="border">
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsl(300, 100%, 0%)"> </td>
+ <td style="background: hsl(300, 100%, 10%)"> </td>
+ <td style="background: hsl(300, 100%, 20%)"> </td>
+ <td style="background: hsl(300, 100%, 30%)"> </td>
+ <td style="background: hsl(300, 100%, 40%)"> </td>
+ <td style="background: hsl(300, 100%, 50%)"> </td>
+ <td style="background: hsl(300, 100%, 60%)"> </td>
+ <td style="background: hsl(300, 100%, 70%)"> </td>
+ <td style="background: hsl(300, 100%, 80%)"> </td>
+ <td style="background: hsl(300, 100%, 90%)"> </td>
+ <td style="background: hsl(300, 100%, 100%)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: rgb(0, 0, 0)"> </td>
+ <td style="background: rgb(51, 0, 51)"> </td>
+ <td style="background: rgb(102, 0, 102)"> </td>
+ <td style="background: rgb(153, 0, 153)"> </td>
+ <td style="background: rgb(204, 0, 204)"> </td>
+ <td style="background: rgb(255, 0, 255)"> </td>
+ <td style="background: rgb(255, 51, 255)"> </td>
+ <td style="background: rgb(255, 102, 255)"> </td>
+ <td style="background: rgb(255, 153, 255)"> </td>
+ <td style="background: rgb(255, 204, 255)"> </td>
+ <td style="background: rgb(255, 255, 255)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ </table>
+
+ </body>
+</html>
\ No newline at end of file
+++ /dev/null
-<!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>CSS Test: hsl() values</title>
- <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
- <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
- <link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" />
- <meta name="flags" content="" />
- <meta name="assert" content="Implementation of algorithm for converting hsl() colors to rgb() colors." />
- <style type="text/css"><![CDATA[
- table { border-spacing: 0; padding: 0; border: none; }
- td { border: none; padding: 0; }
- td { width: 1.2em; height: 1.2em; }
- ]]></style>
- </head>
- <body>
-
- <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change gradually from red at the left to green at the right (through yellow in the middle).</p>
-
- <table border="border">
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsl(0, 100%, 50%)"> </td>
- <td style="background: hsl(12, 100%, 50%)"> </td>
- <td style="background: hsl(24, 100%, 50%)"> </td>
- <td style="background: hsl(36, 100%, 50%)"> </td>
- <td style="background: hsl(48, 100%, 50%)"> </td>
- <td style="background: hsl(60, 100%, 50%)"> </td>
- <td style="background: hsl(72, 100%, 50%)"> </td>
- <td style="background: hsl(84, 100%, 50%)"> </td>
- <td style="background: hsl(96, 100%, 50%)"> </td>
- <td style="background: hsl(108, 100%, 50%)"> </td>
- <td style="background: hsl(120, 100%, 50%)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: rgb(255, 0, 0)"> </td>
- <td style="background: rgb(255, 51, 0)"> </td>
- <td style="background: rgb(255, 102, 0)"> </td>
- <td style="background: rgb(255, 153, 0)"> </td>
- <td style="background: rgb(255, 204, 0)"> </td>
- <td style="background: rgb(255, 255, 0)"> </td>
- <td style="background: rgb(204, 255, 0)"> </td>
- <td style="background: rgb(153, 255, 0)"> </td>
- <td style="background: rgb(102, 255, 0)"> </td>
- <td style="background: rgb(51, 255, 0)"> </td>
- <td style="background: rgb(0, 255, 0)"> </td>
- <td style="background: black"> </td>
- </tr>
- </table>
-
- <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change gradually from green at the left to blue at the right (through aqua in the middle).</p>
-
- <table border="border">
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsl(120, 100%, 50%)"> </td>
- <td style="background: hsl(132, 100%, 50%)"> </td>
- <td style="background: hsl(144, 100%, 50%)"> </td>
- <td style="background: hsl(156, 100%, 50%)"> </td>
- <td style="background: hsl(168, 100%, 50%)"> </td>
- <td style="background: hsl(180, 100%, 50%)"> </td>
- <td style="background: hsl(192, 100%, 50%)"> </td>
- <td style="background: hsl(204, 100%, 50%)"> </td>
- <td style="background: hsl(216, 100%, 50%)"> </td>
- <td style="background: hsl(228, 100%, 50%)"> </td>
- <td style="background: hsl(240, 100%, 50%)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: rgb(0, 255, 0)"> </td>
- <td style="background: rgb(0, 255, 51)"> </td>
- <td style="background: rgb(0, 255, 102)"> </td>
- <td style="background: rgb(0, 255, 153)"> </td>
- <td style="background: rgb(0, 255, 204)"> </td>
- <td style="background: rgb(0, 255, 255)"> </td>
- <td style="background: rgb(0, 204, 255)"> </td>
- <td style="background: rgb(0, 153, 255)"> </td>
- <td style="background: rgb(0, 102, 255)"> </td>
- <td style="background: rgb(0, 51, 255)"> </td>
- <td style="background: rgb(0, 0, 255)"> </td>
- <td style="background: black"> </td>
- </tr>
- </table>
-
-
- <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change gradually from blue at the left to red at the right (through fuchsia in the middle).</p>
-
- <table border="border">
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsl(240, 100%, 50%)"> </td>
- <td style="background: hsl(252, 100%, 50%)"> </td>
- <td style="background: hsl(264, 100%, 50%)"> </td>
- <td style="background: hsl(276, 100%, 50%)"> </td>
- <td style="background: hsl(288, 100%, 50%)"> </td>
- <td style="background: hsl(300, 100%, 50%)"> </td>
- <td style="background: hsl(312, 100%, 50%)"> </td>
- <td style="background: hsl(324, 100%, 50%)"> </td>
- <td style="background: hsl(336, 100%, 50%)"> </td>
- <td style="background: hsl(348, 100%, 50%)"> </td>
- <td style="background: hsl(360, 100%, 50%)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: rgb(0, 0, 255)"> </td>
- <td style="background: rgb(51, 0, 255)"> </td>
- <td style="background: rgb(102, 0, 255)"> </td>
- <td style="background: rgb(153, 0, 255)"> </td>
- <td style="background: rgb(204, 0, 255)"> </td>
- <td style="background: rgb(255, 0, 255)"> </td>
- <td style="background: rgb(255, 0, 204)"> </td>
- <td style="background: rgb(255, 0, 153)"> </td>
- <td style="background: rgb(255, 0, 102)"> </td>
- <td style="background: rgb(255, 0, 51)"> </td>
- <td style="background: rgb(255, 0, 0)"> </td>
- <td style="background: black"> </td>
- </tr>
- </table>
-
- <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in two steps from nearly gray at the left to red at the right.</p>
-
- <table border="border">
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsl(0, 20%, 50%)"> </td>
- <td style="background: hsl(0, 60%, 50%)"> </td>
- <td style="background: hsl(0, 100%, 50%)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: rgb(153, 102, 102)"> </td>
- <td style="background: rgb(204, 51, 51)"> </td>
- <td style="background: rgb(255, 0, 0)"> </td>
- <td style="background: black"> </td>
- </tr>
- </table>
-
- <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in two steps from nearly gray at the left to yellow at the right.</p>
-
- <table border="border">
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsl(60, 20%, 50%)"> </td>
- <td style="background: hsl(60, 60%, 50%)"> </td>
- <td style="background: hsl(60, 100%, 50%)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: rgb(153, 153, 102)"> </td>
- <td style="background: rgb(204, 204, 51)"> </td>
- <td style="background: rgb(255, 255, 0)"> </td>
- <td style="background: black"> </td>
- </tr>
- </table>
-
- <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in two steps from nearly gray at the left to green at the right.</p>
-
- <table border="border">
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsl(120, 20%, 50%)"> </td>
- <td style="background: hsl(120, 60%, 50%)"> </td>
- <td style="background: hsl(120, 100%, 50%)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: rgb(102, 153, 102)"> </td>
- <td style="background: rgb(51, 204, 51)"> </td>
- <td style="background: rgb(0, 255, 0)"> </td>
- <td style="background: black"> </td>
- </tr>
- </table>
-
- <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in two steps from nearly gray at the left to aqua at the right.</p>
-
- <table border="border">
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsl(180, 20%, 50%)"> </td>
- <td style="background: hsl(180, 60%, 50%)"> </td>
- <td style="background: hsl(180, 100%, 50%)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: rgb(102, 153, 153)"> </td>
- <td style="background: rgb(51, 204, 204)"> </td>
- <td style="background: rgb(0, 255, 255)"> </td>
- <td style="background: black"> </td>
- </tr>
- </table>
-
- <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in two steps from nearly gray at the left to blue at the right.</p>
-
- <table border="border">
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsl(240, 20%, 50%)"> </td>
- <td style="background: hsl(240, 60%, 50%)"> </td>
- <td style="background: hsl(240, 100%, 50%)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: rgb(102, 102, 153)"> </td>
- <td style="background: rgb(51, 51, 204)"> </td>
- <td style="background: rgb(0, 0, 255)"> </td>
- <td style="background: black"> </td>
- </tr>
- </table>
-
- <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in two steps from nearly gray at the left to fuchsia at the right.</p>
-
- <table border="border">
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsl(300, 20%, 50%)"> </td>
- <td style="background: hsl(300, 60%, 50%)"> </td>
- <td style="background: hsl(300, 100%, 50%)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: rgb(153, 102, 153)"> </td>
- <td style="background: rgb(204, 51, 204)"> </td>
- <td style="background: rgb(255, 0, 255)"> </td>
- <td style="background: black"> </td>
- </tr>
- </table>
-
- <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in ten steps from black at the left to white at the right with red at the middle.</p>
-
- <table border="border">
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsl(0, 100%, 0%)"> </td>
- <td style="background: hsl(0, 100%, 10%)"> </td>
- <td style="background: hsl(0, 100%, 20%)"> </td>
- <td style="background: hsl(0, 100%, 30%)"> </td>
- <td style="background: hsl(0, 100%, 40%)"> </td>
- <td style="background: hsl(0, 100%, 50%)"> </td>
- <td style="background: hsl(0, 100%, 60%)"> </td>
- <td style="background: hsl(0, 100%, 70%)"> </td>
- <td style="background: hsl(0, 100%, 80%)"> </td>
- <td style="background: hsl(0, 100%, 90%)"> </td>
- <td style="background: hsl(0, 100%, 100%)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: rgb(0, 0, 0)"> </td>
- <td style="background: rgb(51, 0, 0)"> </td>
- <td style="background: rgb(102, 0, 0)"> </td>
- <td style="background: rgb(153, 0, 0)"> </td>
- <td style="background: rgb(204, 0, 0)"> </td>
- <td style="background: rgb(255, 0, 0)"> </td>
- <td style="background: rgb(255, 51, 51)"> </td>
- <td style="background: rgb(255, 102, 102)"> </td>
- <td style="background: rgb(255, 153, 153)"> </td>
- <td style="background: rgb(255, 204, 204)"> </td>
- <td style="background: rgb(255, 255, 255)"> </td>
- <td style="background: black"> </td>
- </tr>
- </table>
-
- <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in ten steps from black at the left to white at the right with yellow at the middle.</p>
-
- <table border="border">
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsl(60, 100%, 0%)"> </td>
- <td style="background: hsl(60, 100%, 10%)"> </td>
- <td style="background: hsl(60, 100%, 20%)"> </td>
- <td style="background: hsl(60, 100%, 30%)"> </td>
- <td style="background: hsl(60, 100%, 40%)"> </td>
- <td style="background: hsl(60, 100%, 50%)"> </td>
- <td style="background: hsl(60, 100%, 60%)"> </td>
- <td style="background: hsl(60, 100%, 70%)"> </td>
- <td style="background: hsl(60, 100%, 80%)"> </td>
- <td style="background: hsl(60, 100%, 90%)"> </td>
- <td style="background: hsl(60, 100%, 100%)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: rgb(0, 0, 0)"> </td>
- <td style="background: rgb(51, 51, 0)"> </td>
- <td style="background: rgb(102, 102, 0)"> </td>
- <td style="background: rgb(153, 153, 0)"> </td>
- <td style="background: rgb(204, 204, 0)"> </td>
- <td style="background: rgb(255, 255, 0)"> </td>
- <td style="background: rgb(255, 255, 51)"> </td>
- <td style="background: rgb(255, 255, 102)"> </td>
- <td style="background: rgb(255, 255, 153)"> </td>
- <td style="background: rgb(255, 255, 204)"> </td>
- <td style="background: rgb(255, 255, 255)"> </td>
- <td style="background: black"> </td>
- </tr>
- </table>
-
- <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in ten steps from black at the left to white at the right with green at the middle.</p>
-
- <table border="border">
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsl(120, 100%, 0%)"> </td>
- <td style="background: hsl(120, 100%, 10%)"> </td>
- <td style="background: hsl(120, 100%, 20%)"> </td>
- <td style="background: hsl(120, 100%, 30%)"> </td>
- <td style="background: hsl(120, 100%, 40%)"> </td>
- <td style="background: hsl(120, 100%, 50%)"> </td>
- <td style="background: hsl(120, 100%, 60%)"> </td>
- <td style="background: hsl(120, 100%, 70%)"> </td>
- <td style="background: hsl(120, 100%, 80%)"> </td>
- <td style="background: hsl(120, 100%, 90%)"> </td>
- <td style="background: hsl(120, 100%, 100%)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: rgb(0, 0, 0)"> </td>
- <td style="background: rgb(0, 51, 0)"> </td>
- <td style="background: rgb(0, 102, 0)"> </td>
- <td style="background: rgb(0, 153, 0)"> </td>
- <td style="background: rgb(0, 204, 0)"> </td>
- <td style="background: rgb(0, 255, 0)"> </td>
- <td style="background: rgb(51, 255, 51)"> </td>
- <td style="background: rgb(102, 255, 102)"> </td>
- <td style="background: rgb(153, 255, 153)"> </td>
- <td style="background: rgb(204, 255, 204)"> </td>
- <td style="background: rgb(255, 255, 255)"> </td>
- <td style="background: black"> </td>
- </tr>
- </table>
-
- <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in ten steps from black at the left to white at the right with aqua at the middle.</p>
-
- <table border="border">
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsl(180, 100%, 0%)"> </td>
- <td style="background: hsl(180, 100%, 10%)"> </td>
- <td style="background: hsl(180, 100%, 20%)"> </td>
- <td style="background: hsl(180, 100%, 30%)"> </td>
- <td style="background: hsl(180, 100%, 40%)"> </td>
- <td style="background: hsl(180, 100%, 50%)"> </td>
- <td style="background: hsl(180, 100%, 60%)"> </td>
- <td style="background: hsl(180, 100%, 70%)"> </td>
- <td style="background: hsl(180, 100%, 80%)"> </td>
- <td style="background: hsl(180, 100%, 90%)"> </td>
- <td style="background: hsl(180, 100%, 100%)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: rgb(0, 0, 0)"> </td>
- <td style="background: rgb(0, 51, 51)"> </td>
- <td style="background: rgb(0, 102, 102)"> </td>
- <td style="background: rgb(0, 153, 153)"> </td>
- <td style="background: rgb(0, 204, 204)"> </td>
- <td style="background: rgb(0, 255, 255)"> </td>
- <td style="background: rgb(51, 255, 255)"> </td>
- <td style="background: rgb(102, 255, 255)"> </td>
- <td style="background: rgb(153, 255, 255)"> </td>
- <td style="background: rgb(204, 255, 255)"> </td>
- <td style="background: rgb(255, 255, 255)"> </td>
- <td style="background: black"> </td>
- </tr>
- </table>
-
- <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in ten steps from black at the left to white at the right with blue at the middle.</p>
-
- <table border="border">
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsl(240, 100%, 0%)"> </td>
- <td style="background: hsl(240, 100%, 10%)"> </td>
- <td style="background: hsl(240, 100%, 20%)"> </td>
- <td style="background: hsl(240, 100%, 30%)"> </td>
- <td style="background: hsl(240, 100%, 40%)"> </td>
- <td style="background: hsl(240, 100%, 50%)"> </td>
- <td style="background: hsl(240, 100%, 60%)"> </td>
- <td style="background: hsl(240, 100%, 70%)"> </td>
- <td style="background: hsl(240, 100%, 80%)"> </td>
- <td style="background: hsl(240, 100%, 90%)"> </td>
- <td style="background: hsl(240, 100%, 100%)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: rgb(0, 0, 0)"> </td>
- <td style="background: rgb(0, 0, 51)"> </td>
- <td style="background: rgb(0, 0, 102)"> </td>
- <td style="background: rgb(0, 0, 153)"> </td>
- <td style="background: rgb(0, 0, 204)"> </td>
- <td style="background: rgb(0, 0, 255)"> </td>
- <td style="background: rgb(51, 51, 255)"> </td>
- <td style="background: rgb(102, 102, 255)"> </td>
- <td style="background: rgb(153, 153, 255)"> </td>
- <td style="background: rgb(204, 204, 255)"> </td>
- <td style="background: rgb(255, 255, 255)"> </td>
- <td style="background: black"> </td>
- </tr>
- </table>
-
- <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in ten steps from black at the left to white at the right with fuchsia at the middle.</p>
-
- <table border="border">
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsl(300, 100%, 0%)"> </td>
- <td style="background: hsl(300, 100%, 10%)"> </td>
- <td style="background: hsl(300, 100%, 20%)"> </td>
- <td style="background: hsl(300, 100%, 30%)"> </td>
- <td style="background: hsl(300, 100%, 40%)"> </td>
- <td style="background: hsl(300, 100%, 50%)"> </td>
- <td style="background: hsl(300, 100%, 60%)"> </td>
- <td style="background: hsl(300, 100%, 70%)"> </td>
- <td style="background: hsl(300, 100%, 80%)"> </td>
- <td style="background: hsl(300, 100%, 90%)"> </td>
- <td style="background: hsl(300, 100%, 100%)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: rgb(0, 0, 0)"> </td>
- <td style="background: rgb(51, 0, 51)"> </td>
- <td style="background: rgb(102, 0, 102)"> </td>
- <td style="background: rgb(153, 0, 153)"> </td>
- <td style="background: rgb(204, 0, 204)"> </td>
- <td style="background: rgb(255, 0, 255)"> </td>
- <td style="background: rgb(255, 51, 255)"> </td>
- <td style="background: rgb(255, 102, 255)"> </td>
- <td style="background: rgb(255, 153, 255)"> </td>
- <td style="background: rgb(255, 204, 255)"> </td>
- <td style="background: rgb(255, 255, 255)"> </td>
- <td style="background: black"> </td>
- </tr>
- </table>
-
- </body>
-</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+ <head>
+ <title>CSS Test: hsla() clipping outside device gamut</title>
+ <link title="L. David Baron" rel="author" href="http://dbaron.org/">
+ <link title="Mozilla Corporation" rel="author" href="http://mozilla.com/">
+ <link rel="help" href="http://www.w3.org/TR/css3-color/#hsla-color">
+ <meta content="" name="flags">
+ <meta content="Test clipping of hsla() values outside the device gamut." name="assert">
+ <style type="text/css">
+
+ body { background: white; color: black; }
+ table { border-spacing: 0 2px; padding: 0; border: none; }
+ td { border: none; padding: 0; height: 1.2em; }
+
+ </style>
+ </head>
+ <body>
+
+ <p><strong>WARNING: This test assumes that the device gamut is sRGB
+ (as it will be for many CRT monitors).</strong></p>
+
+ <p>Every row in this table should have both columns the same color:</p>
+
+ <table>
+ <tr>
+ <th style="background:white; color: black">Column 1</th>
+ <th style="background:black; color: white">Column 2</th>
+ </tr>
+ <tr>
+ <td style="background: hsla(240, 100%, -100%, 0.6)"> </td>
+ <td style="background: rgb(102, 102, 102)"> </td>
+ </tr>
+ <tr>
+ <td style="background: hsla(240, 75%, -20%, 0.4)"> </td>
+ <td style="background: rgb(153, 153, 153)"> </td>
+ </tr>
+ <tr>
+ <td style="background: hsla(240, 75%, 120%, 0.6)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: hsla(240, 130%, 50%, 0.4)"> </td>
+ <td style="background: rgb(153, 153, 255)"> </td>
+ </tr>
+ <tr>
+ <td style="background: hsla(264, 130%, 50%, 0.6)"> </td>
+ <td style="background: rgb(163, 102, 255)"> </td>
+ </tr>
+ <tr>
+ <td style="background: hsla(0, -50%, 40%, 0.4)"> </td>
+ <td style="background: rgb(194, 194, 194)"> </td>
+ </tr>
+ <tr>
+ <td style="background: hsla(30, -50%, 60%, 0.6)"> </td>
+ <td style="background: rgb(194, 194, 194)"> </td>
+ </tr>
+ </table>
+
+ </body>
+</html>
\ No newline at end of file
+++ /dev/null
-<!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>CSS Test: hsla() clipping outside device gamut</title>
- <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
- <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
- <link rel="help" href="http://www.w3.org/TR/css3-color/#hsla-color" />
- <meta name="flags" content="" />
- <meta name="assert" content="Test clipping of hsla() values outside the device gamut." />
- <style type="text/css"><![CDATA[
-
- body { background: white; color: black; }
- table { border-spacing: 0 2px; padding: 0; border: none; }
- td { border: none; padding: 0; height: 1.2em; }
-
- ]]></style>
- </head>
- <body>
-
- <p><strong>WARNING: This test assumes that the device gamut is sRGB
- (as it will be for many CRT monitors).</strong></p>
-
- <p>Every row in this table should have both columns the same color:</p>
-
- <table>
- <tr>
- <th style="background:white; color: black">Column 1</th>
- <th style="background:black; color: white">Column 2</th>
- </tr>
- <tr>
- <td style="background: hsla(240, 100%, -100%, 0.6)"> </td>
- <td style="background: rgb(102, 102, 102)"> </td>
- </tr>
- <tr>
- <td style="background: hsla(240, 75%, -20%, 0.4)"> </td>
- <td style="background: rgb(153, 153, 153)"> </td>
- </tr>
- <tr>
- <td style="background: hsla(240, 75%, 120%, 0.6)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: hsla(240, 130%, 50%, 0.4)"> </td>
- <td style="background: rgb(153, 153, 255)"> </td>
- </tr>
- <tr>
- <td style="background: hsla(264, 130%, 50%, 0.6)"> </td>
- <td style="background: rgb(163, 102, 255)"> </td>
- </tr>
- <tr>
- <td style="background: hsla(0, -50%, 40%, 0.4)"> </td>
- <td style="background: rgb(194, 194, 194)"> </td>
- </tr>
- <tr>
- <td style="background: hsla(30, -50%, 60%, 0.6)"> </td>
- <td style="background: rgb(194, 194, 194)"> </td>
- </tr>
- </table>
-
- </body>
-</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+ <head>
+ <title>CSS Test: modding of H values in hsla() colors</title>
+ <link title="L. David Baron" rel="author" href="http://dbaron.org/">
+ <link title="Mozilla Corporation" rel="author" href="http://mozilla.com/">
+ <link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color">
+ <link rel="help" href="http://www.w3.org/TR/css3-color/#hsla-color">
+ <meta content="" name="flags">
+ <meta content="H values in hsla() colors should be treated like angles, even when outside [0,360)" name="assert">
+ <style type="text/css">
+ table { border-spacing: 0; padding: 0; border: none; }
+ td { border: none; padding: 0; }
+ td { width: 1.2em; height: 1.2em; }
+ </style>
+ </head>
+ <body>
+ <p>Each column in the following table should have every cell the
+ same color, except for the checkerboard pattern at the right and
+ left used to indicate the row positions.</p>
+
+ <table>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: hsla(0, 100%, 50%, 1.0)"> </td>
+ <td style="background: hsla(60, 100%, 50%, 0.8)"> </td>
+ <td style="background: hsla(120, 100%, 50%, 0.4)"> </td>
+ <td style="background: hsla(180, 100%, 50%, 0.6)"> </td>
+ <td style="background: hsla(240, 100%, 50%, 0.8)"> </td>
+ <td style="background: hsla(300, 100%, 50%, 0.4)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsla(-360, 100%, 50%, 1.0)"> </td>
+ <td style="background: hsla(-300, 100%, 50%, 0.8)"> </td>
+ <td style="background: hsla(-240, 100%, 50%, 0.4)"> </td>
+ <td style="background: hsla(-180, 100%, 50%, 0.6)"> </td>
+ <td style="background: hsla(-120, 100%, 50%, 0.8)"> </td>
+ <td style="background: hsla(-60, 100%, 50%, 0.4)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: hsla(360, 100%, 50%, 1.0)"> </td>
+ <td style="background: hsla(420, 100%, 50%, 0.8)"> </td>
+ <td style="background: hsla(480, 100%, 50%, 0.4)"> </td>
+ <td style="background: hsla(540, 100%, 50%, 0.6)"> </td>
+ <td style="background: hsla(600, 100%, 50%, 0.8)"> </td>
+ <td style="background: hsla(660, 100%, 50%, 0.4)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsla(6120, 100%, 50%, 1.0)"> </td>
+ <td style="background: hsla(-9660, 100%, 50%, 0.8)"> </td>
+ <td style="background: hsla(99840, 100%, 50%, 0.4)"> </td>
+ <td style="background: hsla(-900, 100%, 50%, 0.6)"> </td>
+ <td style="background: hsla(-104880, 100%, 50%, 0.8)"> </td>
+ <td style="background: hsla(2820, 100%, 50%, 0.4)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ </table>
+
+ </body>
+</html>
\ No newline at end of file
+++ /dev/null
-<!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>CSS Test: modding of H values in hsla() colors</title>
- <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
- <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
- <link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" />
- <link rel="help" href="http://www.w3.org/TR/css3-color/#hsla-color" />
- <meta name="flags" content="" />
- <meta name="assert" content="H values in hsla() colors should be treated like angles, even when outside [0,360)" />
- <style type="text/css"><![CDATA[
- table { border-spacing: 0; padding: 0; border: none; }
- td { border: none; padding: 0; }
- td { width: 1.2em; height: 1.2em; }
- ]]></style>
- </head>
- <body>
- <p>Each column in the following table should have every cell the
- same color, except for the checkerboard pattern at the right and
- left used to indicate the row positions.</p>
-
- <table>
- <tr>
- <td style="background: white"> </td>
- <td style="background: hsla(0, 100%, 50%, 1.0)"> </td>
- <td style="background: hsla(60, 100%, 50%, 0.8)"> </td>
- <td style="background: hsla(120, 100%, 50%, 0.4)"> </td>
- <td style="background: hsla(180, 100%, 50%, 0.6)"> </td>
- <td style="background: hsla(240, 100%, 50%, 0.8)"> </td>
- <td style="background: hsla(300, 100%, 50%, 0.4)"> </td>
- <td style="background: black"> </td>
- </tr>
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsla(-360, 100%, 50%, 1.0)"> </td>
- <td style="background: hsla(-300, 100%, 50%, 0.8)"> </td>
- <td style="background: hsla(-240, 100%, 50%, 0.4)"> </td>
- <td style="background: hsla(-180, 100%, 50%, 0.6)"> </td>
- <td style="background: hsla(-120, 100%, 50%, 0.8)"> </td>
- <td style="background: hsla(-60, 100%, 50%, 0.4)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: hsla(360, 100%, 50%, 1.0)"> </td>
- <td style="background: hsla(420, 100%, 50%, 0.8)"> </td>
- <td style="background: hsla(480, 100%, 50%, 0.4)"> </td>
- <td style="background: hsla(540, 100%, 50%, 0.6)"> </td>
- <td style="background: hsla(600, 100%, 50%, 0.8)"> </td>
- <td style="background: hsla(660, 100%, 50%, 0.4)"> </td>
- <td style="background: black"> </td>
- </tr>
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsla(6120, 100%, 50%, 1.0)"> </td>
- <td style="background: hsla(-9660, 100%, 50%, 0.8)"> </td>
- <td style="background: hsla(99840, 100%, 50%, 0.4)"> </td>
- <td style="background: hsla(-900, 100%, 50%, 0.6)"> </td>
- <td style="background: hsla(-104880, 100%, 50%, 0.8)"> </td>
- <td style="background: hsla(2820, 100%, 50%, 0.4)"> </td>
- <td style="background: white"> </td>
- </tr>
- </table>
-
- </body>
-</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+ <head>
+ <title>CSS Test: hsla() overpainting</title>
+ <link title="L. David Baron" rel="author" href="http://dbaron.org/">
+ <link title="Mozilla Corporation" rel="author" href="http://mozilla.com/">
+ <link rel="help" href="http://www.w3.org/TR/css3-color/#hsla-color">
+ <meta content="" name="flags">
+ <meta content="Test that hsla() does not behave like opacity and draw in an offscreen buffer." name="assert">
+ <style type="text/css">
+ html, body { background: white; }
+ table { border-spacing: 0; padding: 0; border: none; }
+ td { border: none; padding: 0; }
+
+ td, div { height: 1.2em; }
+ </style>
+ </head>
+ <body>
+
+ <p>Every row in this table should have both columns the same color:</p>
+
+ <table>
+ <tr>
+ <th style="background:white; color: black">Column 1</th>
+ <th style="background:black; color: white">Column 2</th>
+ </tr>
+ <tr>
+ <td style="background: hsla(240, 100%, 50%, 0.2)"> </td>
+ <td style="background: rgb(204, 204, 255)"> </td>
+ </tr>
+ <tr>
+ <td style="background: hsla(240, 100%, 50%, 0.2)"><div style="background: inherit"> </div></td>
+ <td style="background: rgb(163, 163, 255)"> </td>
+ </tr>
+ <tr>
+ <td style="background: hsla(240, 100%, 50%, 0.4)"> </td>
+ <td style="background: rgb(153, 153, 255)"> </td>
+ </tr>
+ <tr>
+ <td style="background: hsla(240, 100%, 50%, 0.4)"><div style="background: inherit"> </div></td>
+ <td style="background: rgb(92, 92, 255)"> </td>
+ </tr>
+ <tr>
+ <td style="background: hsla(240, 100%, 50%, 0.6)"> </td>
+ <td style="background: rgb(102, 102, 255)"> </td>
+ </tr>
+ <tr>
+ <td style="background: hsla(240, 100%, 50%, 0.6)"><div style="background: inherit"> </div></td>
+ <td style="background: rgb(41, 41, 255)"> </td>
+ </tr>
+ <tr>
+ <td style="background: hsla(240, 100%, 50%, 0.8)"> </td>
+ <td style="background: rgb(51, 51, 255)"> </td>
+ </tr>
+ <tr>
+ <td style="background: hsla(240, 100%, 50%, 0.8)"><div style="background: inherit"> </div></td>
+ <td style="background: rgb(10, 10, 255)"> </td>
+ </tr>
+ </table>
+
+ </body>
+</html>
\ No newline at end of file
+++ /dev/null
-<!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>CSS Test: hsla() overpainting</title>
- <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
- <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
- <link rel="help" href="http://www.w3.org/TR/css3-color/#hsla-color" />
- <meta name="flags" content="" />
- <meta name="assert" content="Test that hsla() does not behave like opacity and draw in an offscreen buffer." />
- <style type="text/css"><![CDATA[
- html, body { background: white; }
- table { border-spacing: 0; padding: 0; border: none; }
- td { border: none; padding: 0; }
-
- td, div { height: 1.2em; }
- ]]></style>
- </head>
- <body>
-
- <p>Every row in this table should have both columns the same color:</p>
-
- <table>
- <tr>
- <th style="background:white; color: black">Column 1</th>
- <th style="background:black; color: white">Column 2</th>
- </tr>
- <tr>
- <td style="background: hsla(240, 100%, 50%, 0.2)"> </td>
- <td style="background: rgb(204, 204, 255)"> </td>
- </tr>
- <tr>
- <td style="background: hsla(240, 100%, 50%, 0.2)"><div style="background: inherit"> </div></td>
- <td style="background: rgb(163, 163, 255)"> </td>
- </tr>
- <tr>
- <td style="background: hsla(240, 100%, 50%, 0.4)"> </td>
- <td style="background: rgb(153, 153, 255)"> </td>
- </tr>
- <tr>
- <td style="background: hsla(240, 100%, 50%, 0.4)"><div style="background: inherit"> </div></td>
- <td style="background: rgb(92, 92, 255)"> </td>
- </tr>
- <tr>
- <td style="background: hsla(240, 100%, 50%, 0.6)"> </td>
- <td style="background: rgb(102, 102, 255)"> </td>
- </tr>
- <tr>
- <td style="background: hsla(240, 100%, 50%, 0.6)"><div style="background: inherit"> </div></td>
- <td style="background: rgb(41, 41, 255)"> </td>
- </tr>
- <tr>
- <td style="background: hsla(240, 100%, 50%, 0.8)"> </td>
- <td style="background: rgb(51, 51, 255)"> </td>
- </tr>
- <tr>
- <td style="background: hsla(240, 100%, 50%, 0.8)"><div style="background: inherit"> </div></td>
- <td style="background: rgb(10, 10, 255)"> </td>
- </tr>
- </table>
-
- </body>
-</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+ <head>
+ <title>CSS Test: hsla() overpainting</title>
+ <link title="L. David Baron" rel="author" href="http://dbaron.org/">
+ <link title="Mozilla Corporation" rel="author" href="http://mozilla.com/">
+ <link rel="help" href="http://www.w3.org/TR/css3-color/#hsla-color">
+ <meta content="" name="flags">
+ <meta content="Test that hsla() does not behave like opacity and draw in an offscreen buffer." name="assert">
+ <style type="text/css">
+
+ body { background: white; }
+
+ div.test { margin: 1em; line-height: 0; font-family: monospace; }
+ div.test span { background: hsla(240, 100%, 50%, 0.4); color: hsla(0, 100%, 50%, 0); }
+
+ div.ref { height: 1em; width: 5em; background: rgb(92, 92, 255); }
+
+ </style>
+ </head>
+ <body>
+
+ <p>These two rectangles should be the same color:</p>
+
+ <div class="test"><span>XXXXX<br>XXXXX</span></div>
+
+ <div class="ref"></div>
+
+ </body>
+</html>
\ No newline at end of file
+++ /dev/null
-<!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>CSS Test: hsla() overpainting</title>
- <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
- <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
- <link rel="help" href="http://www.w3.org/TR/css3-color/#hsla-color" />
- <meta name="flags" content="" />
- <meta name="assert" content="Test that hsla() does not behave like opacity and draw in an offscreen buffer." />
- <style type="text/css"><![CDATA[
-
- body { background: white; }
-
- div.test { margin: 1em; line-height: 0; font-family: monospace; }
- div.test span { background: hsla(240, 100%, 50%, 0.4); color: hsla(0, 100%, 50%, 0); }
-
- div.ref { height: 1em; width: 5em; background: rgb(92, 92, 255); }
-
- ]]></style>
- </head>
- <body>
-
- <p>These two rectangles should be the same color:</p>
-
- <div class="test"><span>XXXXX<br/>XXXXX</span></div>
-
- <div class="ref"></div>
-
- </body>
-</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+ <head>
+ <title>CSS Test: hsla()</title>
+ <link title="L. David Baron" rel="author" href="http://dbaron.org/">
+ <link title="Mozilla Corporation" rel="author" href="http://mozilla.com/">
+ <link rel="help" href="http://www.w3.org/TR/css3-color/#hsla-color">
+ <meta content="invalid" name="flags">
+ <meta content="Test rules for parsing of hsla() colors." name="assert">
+ <style type="text/css">
+ html, body { background: white; }
+ p { color: hsla(120, 100%, 25%, 1.0); }
+ p { color: hsla(0, 100%, 25%); }
+ p { color: hsla(0, 100%, 25%, 1.0, 1.0); }
+ p { color: hsla(0, 100%, 25%, 1.0,); }
+ p { color: hsla(0, 255, 128, 1.0); }
+ p { color: hsla(0%, 100%, 50%, 1.0); }
+ p { color: hsla(0, 100%, 50%, 1%); }
+ p { color: hsla(0, 100%, 50%, 0%); }
+ p { color: hsla(0deg, 100%, 50%, 1.0); }
+ p { color: hsla(0px, 100%, 50%, 1.0); }
+ </style>
+ </head>
+ <body>
+ <p>This text should be dark green.</p>
+
+ <div>Note: the rules tested by this test may be changed in
+ future levels of the CSS Color Module.</div>
+ </body>
+</html>
\ No newline at end of file
+++ /dev/null
-<!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>CSS Test: hsla()</title>
- <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
- <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
- <link rel="help" href="http://www.w3.org/TR/css3-color/#hsla-color" />
- <meta name="flags" content="invalid" />
- <meta name="assert" content="Test rules for parsing of hsla() colors." />
- <style type="text/css"><![CDATA[
- html, body { background: white; }
- p { color: hsla(120, 100%, 25%, 1.0); }
- p { color: hsla(0, 100%, 25%); }
- p { color: hsla(0, 100%, 25%, 1.0, 1.0); }
- p { color: hsla(0, 100%, 25%, 1.0,); }
- p { color: hsla(0, 255, 128, 1.0); }
- p { color: hsla(0%, 100%, 50%, 1.0); }
- p { color: hsla(0, 100%, 50%, 1%); }
- p { color: hsla(0, 100%, 50%, 0%); }
- p { color: hsla(0deg, 100%, 50%, 1.0); }
- p { color: hsla(0px, 100%, 50%, 1.0); }
- ]]></style>
- </head>
- <body>
- <p>This text should be dark green.</p>
-
- <div>Note: the rules tested by this test may be changed in
- future levels of the CSS Color Module.</div>
- </body>
-</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+ <head>
+ <title>CSS Test: hsla() values</title>
+ <link title="L. David Baron" rel="author" href="http://dbaron.org/">
+ <link title="Mozilla Corporation" rel="author" href="http://mozilla.com/">
+ <link rel="help" href="http://www.w3.org/TR/css3-color/#hsla-color">
+ <meta content="" name="flags">
+ <meta content="Implementation of algorithm for converting hsla() colors to rgba() colors." name="assert">
+ <style type="text/css">
+ table { border-spacing: 0; padding: 0; border: none; }
+ td { border: none; padding: 0; }
+ td { width: 1.2em; height: 1.2em; }
+ </style>
+ </head>
+ <body>
+
+ <p>The following table should have three matching rows changing (in 5 steps) from red at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p>
+
+ <div style="background: black">
+ <table border="border">
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsla(0, 100%, 50%, 1)"> </td>
+ <td style="background: hsla(0, 100%, 50%, 0.8)"> </td>
+ <td style="background: hsla(0, 100%, 50%, 0.6)"> </td>
+ <td style="background: hsla(0, 100%, 50%, 0.4)"> </td>
+ <td style="background: hsla(0, 100%, 50%, 0.2)"> </td>
+ <td style="background: hsla(0, 100%, 50%, 0)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: hsla(0, 100%, 50%, 1.0)"> </td>
+ <td style="background: hsla(0, 100%, 40%, 1.0)"> </td>
+ <td style="background: hsla(0, 100%, 30%, 1.0)"> </td>
+ <td style="background: hsla(0, 100%, 20%, 1.0)"> </td>
+ <td style="background: hsla(0, 100%, 10%, 1.0)"> </td>
+ <td style="background: hsla(0, 100%, 0%, 1.0)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: rgb(100%, 0%, 0%)"> </td>
+ <td style="background: rgb(80%, 0%, 0%)"> </td>
+ <td style="background: rgb(60%, 0%, 0%)"> </td>
+ <td style="background: rgb(40%, 0%, 0%)"> </td>
+ <td style="background: rgb(20%, 0%, 0%)"> </td>
+ <td style="background: rgb(0%, 0%, 0%)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ </table>
+ </div>
+
+ <p>The following table should have three matching rows changing (in 5 steps) from red at the left to white at the right (plus a checkerboard at both ends to show where the rows are):</p>
+
+ <div style="background: white">
+ <table border="border">
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: hsla(0, 100%, 50%, 1)"> </td>
+ <td style="background: hsla(0, 100%, 50%, 0.8)"> </td>
+ <td style="background: hsla(0, 100%, 50%, 0.6)"> </td>
+ <td style="background: hsla(0, 100%, 50%, 0.4)"> </td>
+ <td style="background: hsla(0, 100%, 50%, 0.2)"> </td>
+ <td style="background: hsla(0, 100%, 50%, 0)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsla(0, 100%, 50%, 1.0)"> </td>
+ <td style="background: hsla(0, 100%, 60%, 1.0)"> </td>
+ <td style="background: hsla(0, 100%, 70%, 1.0)"> </td>
+ <td style="background: hsla(0, 100%, 80%, 1.0)"> </td>
+ <td style="background: hsla(0, 100%, 90%, 1.0)"> </td>
+ <td style="background: hsla(0, 100%, 100%, 1.0)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: rgb(100%, 0%, 0%)"> </td>
+ <td style="background: rgb(100%, 20%, 20%)"> </td>
+ <td style="background: rgb(100%, 40%, 40%)"> </td>
+ <td style="background: rgb(100%, 60%, 60%)"> </td>
+ <td style="background: rgb(100%, 80%, 80%)"> </td>
+ <td style="background: rgb(100%, 100%, 100%)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ </table>
+ </div>
+
+ <p>The following table should have three matching rows changing (in 5 steps) from yellow at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p>
+
+ <div style="background: black">
+ <table border="border">
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsla(60, 100%, 50%, 1)"> </td>
+ <td style="background: hsla(60, 100%, 50%, 0.8)"> </td>
+ <td style="background: hsla(60, 100%, 50%, 0.6)"> </td>
+ <td style="background: hsla(60, 100%, 50%, 0.4)"> </td>
+ <td style="background: hsla(60, 100%, 50%, 0.2)"> </td>
+ <td style="background: hsla(60, 100%, 50%, 0)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: hsla(60, 100%, 50%, 1.0)"> </td>
+ <td style="background: hsla(60, 100%, 40%, 1.0)"> </td>
+ <td style="background: hsla(60, 100%, 30%, 1.0)"> </td>
+ <td style="background: hsla(60, 100%, 20%, 1.0)"> </td>
+ <td style="background: hsla(60, 100%, 10%, 1.0)"> </td>
+ <td style="background: hsla(60, 100%, 0%, 1.0)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: rgb(100%, 100%, 0%)"> </td>
+ <td style="background: rgb(80%, 80%, 0%)"> </td>
+ <td style="background: rgb(60%, 60%, 0%)"> </td>
+ <td style="background: rgb(40%, 40%, 0%)"> </td>
+ <td style="background: rgb(20%, 20%, 0%)"> </td>
+ <td style="background: rgb(0%, 0%, 0%)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ </table>
+ </div>
+
+ <p>The following table should have three matching rows changing (in 5 steps) from yellow at the left to white at the right (plus a checkerboard at both ends to show where the rows are):</p>
+
+ <div style="background: white">
+ <table border="border">
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: hsla(60, 100%, 50%, 1)"> </td>
+ <td style="background: hsla(60, 100%, 50%, 0.8)"> </td>
+ <td style="background: hsla(60, 100%, 50%, 0.6)"> </td>
+ <td style="background: hsla(60, 100%, 50%, 0.4)"> </td>
+ <td style="background: hsla(60, 100%, 50%, 0.2)"> </td>
+ <td style="background: hsla(60, 100%, 50%, 0)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsla(60, 100%, 50%, 1.0)"> </td>
+ <td style="background: hsla(60, 100%, 60%, 1.0)"> </td>
+ <td style="background: hsla(60, 100%, 70%, 1.0)"> </td>
+ <td style="background: hsla(60, 100%, 80%, 1.0)"> </td>
+ <td style="background: hsla(60, 100%, 90%, 1.0)"> </td>
+ <td style="background: hsla(60, 100%, 100%, 1.0)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: rgb(100%, 100%, 0%)"> </td>
+ <td style="background: rgb(100%, 100%, 20%)"> </td>
+ <td style="background: rgb(100%, 100%, 40%)"> </td>
+ <td style="background: rgb(100%, 100%, 60%)"> </td>
+ <td style="background: rgb(100%, 100%, 80%)"> </td>
+ <td style="background: rgb(100%, 100%, 100%)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ </table>
+ </div>
+
+ <p>The following table should have three matching rows changing (in 5 steps) from green at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p>
+
+ <div style="background: black">
+ <table border="border">
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsla(120, 100%, 50%, 1)"> </td>
+ <td style="background: hsla(120, 100%, 50%, 0.8)"> </td>
+ <td style="background: hsla(120, 100%, 50%, 0.6)"> </td>
+ <td style="background: hsla(120, 100%, 50%, 0.4)"> </td>
+ <td style="background: hsla(120, 100%, 50%, 0.2)"> </td>
+ <td style="background: hsla(120, 100%, 50%, 0)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: hsla(120, 100%, 50%, 1.0)"> </td>
+ <td style="background: hsla(120, 100%, 40%, 1.0)"> </td>
+ <td style="background: hsla(120, 100%, 30%, 1.0)"> </td>
+ <td style="background: hsla(120, 100%, 20%, 1.0)"> </td>
+ <td style="background: hsla(120, 100%, 10%, 1.0)"> </td>
+ <td style="background: hsla(120, 100%, 0%, 1.0)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: rgb(0%, 100%, 0%)"> </td>
+ <td style="background: rgb(0%, 80%, 0%)"> </td>
+ <td style="background: rgb(0%, 60%, 0%)"> </td>
+ <td style="background: rgb(0%, 40%, 0%)"> </td>
+ <td style="background: rgb(0%, 20%, 0%)"> </td>
+ <td style="background: rgb(0%, 0%, 0%)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ </table>
+ </div>
+
+ <p>The following table should have three matching rows changing (in 5 steps) from green at the left to white at the right (plus a checkerboard at both ends to show where the rows are):</p>
+
+ <div style="background: white">
+ <table border="border">
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: hsla(120, 100%, 50%, 1)"> </td>
+ <td style="background: hsla(120, 100%, 50%, 0.8)"> </td>
+ <td style="background: hsla(120, 100%, 50%, 0.6)"> </td>
+ <td style="background: hsla(120, 100%, 50%, 0.4)"> </td>
+ <td style="background: hsla(120, 100%, 50%, 0.2)"> </td>
+ <td style="background: hsla(120, 100%, 50%, 0)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsla(120, 100%, 50%, 1.0)"> </td>
+ <td style="background: hsla(120, 100%, 60%, 1.0)"> </td>
+ <td style="background: hsla(120, 100%, 70%, 1.0)"> </td>
+ <td style="background: hsla(120, 100%, 80%, 1.0)"> </td>
+ <td style="background: hsla(120, 100%, 90%, 1.0)"> </td>
+ <td style="background: hsla(120, 100%, 100%, 1.0)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: rgb(0%, 100%, 0%)"> </td>
+ <td style="background: rgb(20%, 100%, 20%)"> </td>
+ <td style="background: rgb(40%, 100%, 40%)"> </td>
+ <td style="background: rgb(60%, 100%, 60%)"> </td>
+ <td style="background: rgb(80%, 100%, 80%)"> </td>
+ <td style="background: rgb(100%, 100%, 100%)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ </table>
+ </div>
+
+ <p>The following table should have three matching rows changing (in 5 steps) from aqua at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p>
+
+ <div style="background: black">
+ <table border="border">
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsla(180, 100%, 50%, 1)"> </td>
+ <td style="background: hsla(180, 100%, 50%, 0.8)"> </td>
+ <td style="background: hsla(180, 100%, 50%, 0.6)"> </td>
+ <td style="background: hsla(180, 100%, 50%, 0.4)"> </td>
+ <td style="background: hsla(180, 100%, 50%, 0.2)"> </td>
+ <td style="background: hsla(180, 100%, 50%, 0)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: hsla(180, 100%, 50%, 1.0)"> </td>
+ <td style="background: hsla(180, 100%, 40%, 1.0)"> </td>
+ <td style="background: hsla(180, 100%, 30%, 1.0)"> </td>
+ <td style="background: hsla(180, 100%, 20%, 1.0)"> </td>
+ <td style="background: hsla(180, 100%, 10%, 1.0)"> </td>
+ <td style="background: hsla(180, 100%, 0%, 1.0)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: rgb(0%, 100%, 100%)"> </td>
+ <td style="background: rgb(0%, 80%, 80%)"> </td>
+ <td style="background: rgb(0%, 60%, 60%)"> </td>
+ <td style="background: rgb(0%, 40%, 40%)"> </td>
+ <td style="background: rgb(0%, 20%, 20%)"> </td>
+ <td style="background: rgb(0%, 0%, 0%)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ </table>
+ </div>
+
+ <p>The following table should have three matching rows changing (in 5 steps) from aqua at the left to white at the right (plus a checkerboard at both ends to show where the rows are):</p>
+
+ <div style="background: white">
+ <table border="border">
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: hsla(180, 100%, 50%, 1)"> </td>
+ <td style="background: hsla(180, 100%, 50%, 0.8)"> </td>
+ <td style="background: hsla(180, 100%, 50%, 0.6)"> </td>
+ <td style="background: hsla(180, 100%, 50%, 0.4)"> </td>
+ <td style="background: hsla(180, 100%, 50%, 0.2)"> </td>
+ <td style="background: hsla(180, 100%, 50%, 0)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsla(180, 100%, 50%, 1.0)"> </td>
+ <td style="background: hsla(180, 100%, 60%, 1.0)"> </td>
+ <td style="background: hsla(180, 100%, 70%, 1.0)"> </td>
+ <td style="background: hsla(180, 100%, 80%, 1.0)"> </td>
+ <td style="background: hsla(180, 100%, 90%, 1.0)"> </td>
+ <td style="background: hsla(180, 100%, 100%, 1.0)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: rgb(0%, 100%, 100%)"> </td>
+ <td style="background: rgb(20%, 100%, 100%)"> </td>
+ <td style="background: rgb(40%, 100%, 100%)"> </td>
+ <td style="background: rgb(60%, 100%, 100%)"> </td>
+ <td style="background: rgb(80%, 100%, 100%)"> </td>
+ <td style="background: rgb(100%, 100%, 100%)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ </table>
+ </div>
+
+ <p>The following table should have three matching rows changing (in 5 steps) from blue at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p>
+
+ <div style="background: black">
+ <table border="border">
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsla(240, 100%, 50%, 1)"> </td>
+ <td style="background: hsla(240, 100%, 50%, 0.8)"> </td>
+ <td style="background: hsla(240, 100%, 50%, 0.6)"> </td>
+ <td style="background: hsla(240, 100%, 50%, 0.4)"> </td>
+ <td style="background: hsla(240, 100%, 50%, 0.2)"> </td>
+ <td style="background: hsla(240, 100%, 50%, 0)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: hsla(240, 100%, 50%, 1.0)"> </td>
+ <td style="background: hsla(240, 100%, 40%, 1.0)"> </td>
+ <td style="background: hsla(240, 100%, 30%, 1.0)"> </td>
+ <td style="background: hsla(240, 100%, 20%, 1.0)"> </td>
+ <td style="background: hsla(240, 100%, 10%, 1.0)"> </td>
+ <td style="background: hsla(240, 100%, 0%, 1.0)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: rgb(0%, 0%, 100%)"> </td>
+ <td style="background: rgb(0%, 0%, 80%)"> </td>
+ <td style="background: rgb(0%, 0%, 60%)"> </td>
+ <td style="background: rgb(0%, 0%, 40%)"> </td>
+ <td style="background: rgb(0%, 0%, 20%)"> </td>
+ <td style="background: rgb(0%, 0%, 0%)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ </table>
+ </div>
+
+ <p>The following table should have three matching rows changing (in 5 steps) from blue at the left to white at the right (plus a checkerboard at both ends to show where the rows are):</p>
+
+ <div style="background: white">
+ <table border="border">
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: hsla(240, 100%, 50%, 1)"> </td>
+ <td style="background: hsla(240, 100%, 50%, 0.8)"> </td>
+ <td style="background: hsla(240, 100%, 50%, 0.6)"> </td>
+ <td style="background: hsla(240, 100%, 50%, 0.4)"> </td>
+ <td style="background: hsla(240, 100%, 50%, 0.2)"> </td>
+ <td style="background: hsla(240, 100%, 50%, 0)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsla(240, 100%, 50%, 1.0)"> </td>
+ <td style="background: hsla(240, 100%, 60%, 1.0)"> </td>
+ <td style="background: hsla(240, 100%, 70%, 1.0)"> </td>
+ <td style="background: hsla(240, 100%, 80%, 1.0)"> </td>
+ <td style="background: hsla(240, 100%, 90%, 1.0)"> </td>
+ <td style="background: hsla(240, 100%, 100%, 1.0)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: rgb(0%, 0%, 100%)"> </td>
+ <td style="background: rgb(20%, 20%, 100%)"> </td>
+ <td style="background: rgb(40%, 40%, 100%)"> </td>
+ <td style="background: rgb(60%, 60%, 100%)"> </td>
+ <td style="background: rgb(80%, 80%, 100%)"> </td>
+ <td style="background: rgb(100%, 100%, 100%)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ </table>
+ </div>
+
+ <p>The following table should have three matching rows changing (in 5 steps) from fuchsia at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p>
+
+ <div style="background: black">
+ <table border="border">
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsla(300, 100%, 50%, 1)"> </td>
+ <td style="background: hsla(300, 100%, 50%, 0.8)"> </td>
+ <td style="background: hsla(300, 100%, 50%, 0.6)"> </td>
+ <td style="background: hsla(300, 100%, 50%, 0.4)"> </td>
+ <td style="background: hsla(300, 100%, 50%, 0.2)"> </td>
+ <td style="background: hsla(300, 100%, 50%, 0)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: hsla(300, 100%, 50%, 1.0)"> </td>
+ <td style="background: hsla(300, 100%, 40%, 1.0)"> </td>
+ <td style="background: hsla(300, 100%, 30%, 1.0)"> </td>
+ <td style="background: hsla(300, 100%, 20%, 1.0)"> </td>
+ <td style="background: hsla(300, 100%, 10%, 1.0)"> </td>
+ <td style="background: hsla(300, 100%, 0%, 1.0)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: rgb(100%, 0%, 100%)"> </td>
+ <td style="background: rgb(80%, 0%, 80%)"> </td>
+ <td style="background: rgb(60%, 0%, 60%)"> </td>
+ <td style="background: rgb(40%, 0%, 40%)"> </td>
+ <td style="background: rgb(20%, 0%, 20%)"> </td>
+ <td style="background: rgb(0%, 0%, 0%)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ </table>
+ </div>
+
+ <p>The following table should have three matching rows changing (in 5 steps) from fuchsia at the left to white at the right (plus a checkerboard at both ends to show where the rows are):</p>
+
+ <div style="background: white">
+ <table border="border">
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: hsla(300, 100%, 50%, 1)"> </td>
+ <td style="background: hsla(300, 100%, 50%, 0.8)"> </td>
+ <td style="background: hsla(300, 100%, 50%, 0.6)"> </td>
+ <td style="background: hsla(300, 100%, 50%, 0.4)"> </td>
+ <td style="background: hsla(300, 100%, 50%, 0.2)"> </td>
+ <td style="background: hsla(300, 100%, 50%, 0)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsla(300, 100%, 50%, 1.0)"> </td>
+ <td style="background: hsla(300, 100%, 60%, 1.0)"> </td>
+ <td style="background: hsla(300, 100%, 70%, 1.0)"> </td>
+ <td style="background: hsla(300, 100%, 80%, 1.0)"> </td>
+ <td style="background: hsla(300, 100%, 90%, 1.0)"> </td>
+ <td style="background: hsla(300, 100%, 100%, 1.0)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: rgb(100%, 0%, 100%)"> </td>
+ <td style="background: rgb(100%, 20%, 100%)"> </td>
+ <td style="background: rgb(100%, 40%, 100%)"> </td>
+ <td style="background: rgb(100%, 60%, 100%)"> </td>
+ <td style="background: rgb(100%, 80%, 100%)"> </td>
+ <td style="background: rgb(100%, 100%, 100%)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ </table>
+ </div>
+
+ <p>The following table should have two matching rows changing (in 5 steps) from red at the left to green at the right (plus a checkerboard at both ends to show where the rows are):</p>
+
+ <div style="background: lime">
+ <table border="border">
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsla(0, 100%, 50%, 1)"> </td>
+ <td style="background: hsla(0, 100%, 50%, 0.8)"> </td>
+ <td style="background: hsla(0, 100%, 50%, 0.6)"> </td>
+ <td style="background: hsla(0, 100%, 50%, 0.4)"> </td>
+ <td style="background: hsla(0, 100%, 50%, 0.2)"> </td>
+ <td style="background: hsla(0, 100%, 50%, 0)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: rgb(100%, 0%, 0%)"> </td>
+ <td style="background: rgb(80%, 20%, 0%)"> </td>
+ <td style="background: rgb(60%, 40%, 0%)"> </td>
+ <td style="background: rgb(40%, 60%, 0%)"> </td>
+ <td style="background: rgb(20%, 80%, 0%)"> </td>
+ <td style="background: rgb(0%, 100%, 0%)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ </table>
+ </div>
+
+ <p>The following table should have two matching rows changing (in 5 steps) from green at the left to blue at the right (plus a checkerboard at both ends to show where the rows are):</p>
+
+ <div style="background: blue">
+ <table border="border">
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsla(120, 100%, 50%, 1)"> </td>
+ <td style="background: hsla(120, 100%, 50%, 0.8)"> </td>
+ <td style="background: hsla(120, 100%, 50%, 0.6)"> </td>
+ <td style="background: hsla(120, 100%, 50%, 0.4)"> </td>
+ <td style="background: hsla(120, 100%, 50%, 0.2)"> </td>
+ <td style="background: hsla(120, 100%, 50%, 0)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: rgb(0%, 100%, 0%)"> </td>
+ <td style="background: rgb(0%, 80%, 20%)"> </td>
+ <td style="background: rgb(0%, 60%, 40%)"> </td>
+ <td style="background: rgb(0%, 40%, 60%)"> </td>
+ <td style="background: rgb(0%, 20%, 80%)"> </td>
+ <td style="background: rgb(0%, 0%, 100%)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ </table>
+ </div>
+
+ <p>The following table should have two matching rows changing (in 5 steps) from blue at the left to red at the right (plus a checkerboard at both ends to show where the rows are):</p>
+
+ <div style="background: red">
+ <table border="border">
+ <tr>
+ <td style="background: black"> </td>
+ <td style="background: hsla(240, 100%, 50%, 1)"> </td>
+ <td style="background: hsla(240, 100%, 50%, 0.8)"> </td>
+ <td style="background: hsla(240, 100%, 50%, 0.6)"> </td>
+ <td style="background: hsla(240, 100%, 50%, 0.4)"> </td>
+ <td style="background: hsla(240, 100%, 50%, 0.2)"> </td>
+ <td style="background: hsla(240, 100%, 50%, 0)"> </td>
+ <td style="background: white"> </td>
+ </tr>
+ <tr>
+ <td style="background: white"> </td>
+ <td style="background: rgb(0%, 0%, 100%)"> </td>
+ <td style="background: rgb(20%, 0%, 80%)"> </td>
+ <td style="background: rgb(40%, 0%, 60%)"> </td>
+ <td style="background: rgb(60%, 0%, 40%)"> </td>
+ <td style="background: rgb(80%, 0%, 20%)"> </td>
+ <td style="background: rgb(100%, 0%, 0%)"> </td>
+ <td style="background: black"> </td>
+ </tr>
+ </table>
+ </div>
+
+ </body>
+</html>
\ No newline at end of file
+++ /dev/null
-<!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>CSS Test: hsla() values</title>
- <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
- <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
- <link rel="help" href="http://www.w3.org/TR/css3-color/#hsla-color" />
- <meta name="flags" content="" />
- <meta name="assert" content="Implementation of algorithm for converting hsla() colors to rgba() colors." />
- <style type="text/css"><![CDATA[
- table { border-spacing: 0; padding: 0; border: none; }
- td { border: none; padding: 0; }
- td { width: 1.2em; height: 1.2em; }
- ]]></style>
- </head>
- <body>
-
- <p>The following table should have three matching rows changing (in 5 steps) from red at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p>
-
- <div style="background: black">
- <table border="border">
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsla(0, 100%, 50%, 1)"> </td>
- <td style="background: hsla(0, 100%, 50%, 0.8)"> </td>
- <td style="background: hsla(0, 100%, 50%, 0.6)"> </td>
- <td style="background: hsla(0, 100%, 50%, 0.4)"> </td>
- <td style="background: hsla(0, 100%, 50%, 0.2)"> </td>
- <td style="background: hsla(0, 100%, 50%, 0)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: hsla(0, 100%, 50%, 1.0)"> </td>
- <td style="background: hsla(0, 100%, 40%, 1.0)"> </td>
- <td style="background: hsla(0, 100%, 30%, 1.0)"> </td>
- <td style="background: hsla(0, 100%, 20%, 1.0)"> </td>
- <td style="background: hsla(0, 100%, 10%, 1.0)"> </td>
- <td style="background: hsla(0, 100%, 0%, 1.0)"> </td>
- <td style="background: black"> </td>
- </tr>
- <tr>
- <td style="background: black"> </td>
- <td style="background: rgb(100%, 0%, 0%)"> </td>
- <td style="background: rgb(80%, 0%, 0%)"> </td>
- <td style="background: rgb(60%, 0%, 0%)"> </td>
- <td style="background: rgb(40%, 0%, 0%)"> </td>
- <td style="background: rgb(20%, 0%, 0%)"> </td>
- <td style="background: rgb(0%, 0%, 0%)"> </td>
- <td style="background: white"> </td>
- </tr>
- </table>
- </div>
-
- <p>The following table should have three matching rows changing (in 5 steps) from red at the left to white at the right (plus a checkerboard at both ends to show where the rows are):</p>
-
- <div style="background: white">
- <table border="border">
- <tr>
- <td style="background: white"> </td>
- <td style="background: hsla(0, 100%, 50%, 1)"> </td>
- <td style="background: hsla(0, 100%, 50%, 0.8)"> </td>
- <td style="background: hsla(0, 100%, 50%, 0.6)"> </td>
- <td style="background: hsla(0, 100%, 50%, 0.4)"> </td>
- <td style="background: hsla(0, 100%, 50%, 0.2)"> </td>
- <td style="background: hsla(0, 100%, 50%, 0)"> </td>
- <td style="background: black"> </td>
- </tr>
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsla(0, 100%, 50%, 1.0)"> </td>
- <td style="background: hsla(0, 100%, 60%, 1.0)"> </td>
- <td style="background: hsla(0, 100%, 70%, 1.0)"> </td>
- <td style="background: hsla(0, 100%, 80%, 1.0)"> </td>
- <td style="background: hsla(0, 100%, 90%, 1.0)"> </td>
- <td style="background: hsla(0, 100%, 100%, 1.0)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: rgb(100%, 0%, 0%)"> </td>
- <td style="background: rgb(100%, 20%, 20%)"> </td>
- <td style="background: rgb(100%, 40%, 40%)"> </td>
- <td style="background: rgb(100%, 60%, 60%)"> </td>
- <td style="background: rgb(100%, 80%, 80%)"> </td>
- <td style="background: rgb(100%, 100%, 100%)"> </td>
- <td style="background: black"> </td>
- </tr>
- </table>
- </div>
-
- <p>The following table should have three matching rows changing (in 5 steps) from yellow at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p>
-
- <div style="background: black">
- <table border="border">
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsla(60, 100%, 50%, 1)"> </td>
- <td style="background: hsla(60, 100%, 50%, 0.8)"> </td>
- <td style="background: hsla(60, 100%, 50%, 0.6)"> </td>
- <td style="background: hsla(60, 100%, 50%, 0.4)"> </td>
- <td style="background: hsla(60, 100%, 50%, 0.2)"> </td>
- <td style="background: hsla(60, 100%, 50%, 0)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: hsla(60, 100%, 50%, 1.0)"> </td>
- <td style="background: hsla(60, 100%, 40%, 1.0)"> </td>
- <td style="background: hsla(60, 100%, 30%, 1.0)"> </td>
- <td style="background: hsla(60, 100%, 20%, 1.0)"> </td>
- <td style="background: hsla(60, 100%, 10%, 1.0)"> </td>
- <td style="background: hsla(60, 100%, 0%, 1.0)"> </td>
- <td style="background: black"> </td>
- </tr>
- <tr>
- <td style="background: black"> </td>
- <td style="background: rgb(100%, 100%, 0%)"> </td>
- <td style="background: rgb(80%, 80%, 0%)"> </td>
- <td style="background: rgb(60%, 60%, 0%)"> </td>
- <td style="background: rgb(40%, 40%, 0%)"> </td>
- <td style="background: rgb(20%, 20%, 0%)"> </td>
- <td style="background: rgb(0%, 0%, 0%)"> </td>
- <td style="background: white"> </td>
- </tr>
- </table>
- </div>
-
- <p>The following table should have three matching rows changing (in 5 steps) from yellow at the left to white at the right (plus a checkerboard at both ends to show where the rows are):</p>
-
- <div style="background: white">
- <table border="border">
- <tr>
- <td style="background: white"> </td>
- <td style="background: hsla(60, 100%, 50%, 1)"> </td>
- <td style="background: hsla(60, 100%, 50%, 0.8)"> </td>
- <td style="background: hsla(60, 100%, 50%, 0.6)"> </td>
- <td style="background: hsla(60, 100%, 50%, 0.4)"> </td>
- <td style="background: hsla(60, 100%, 50%, 0.2)"> </td>
- <td style="background: hsla(60, 100%, 50%, 0)"> </td>
- <td style="background: black"> </td>
- </tr>
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsla(60, 100%, 50%, 1.0)"> </td>
- <td style="background: hsla(60, 100%, 60%, 1.0)"> </td>
- <td style="background: hsla(60, 100%, 70%, 1.0)"> </td>
- <td style="background: hsla(60, 100%, 80%, 1.0)"> </td>
- <td style="background: hsla(60, 100%, 90%, 1.0)"> </td>
- <td style="background: hsla(60, 100%, 100%, 1.0)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: rgb(100%, 100%, 0%)"> </td>
- <td style="background: rgb(100%, 100%, 20%)"> </td>
- <td style="background: rgb(100%, 100%, 40%)"> </td>
- <td style="background: rgb(100%, 100%, 60%)"> </td>
- <td style="background: rgb(100%, 100%, 80%)"> </td>
- <td style="background: rgb(100%, 100%, 100%)"> </td>
- <td style="background: black"> </td>
- </tr>
- </table>
- </div>
-
- <p>The following table should have three matching rows changing (in 5 steps) from green at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p>
-
- <div style="background: black">
- <table border="border">
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsla(120, 100%, 50%, 1)"> </td>
- <td style="background: hsla(120, 100%, 50%, 0.8)"> </td>
- <td style="background: hsla(120, 100%, 50%, 0.6)"> </td>
- <td style="background: hsla(120, 100%, 50%, 0.4)"> </td>
- <td style="background: hsla(120, 100%, 50%, 0.2)"> </td>
- <td style="background: hsla(120, 100%, 50%, 0)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: hsla(120, 100%, 50%, 1.0)"> </td>
- <td style="background: hsla(120, 100%, 40%, 1.0)"> </td>
- <td style="background: hsla(120, 100%, 30%, 1.0)"> </td>
- <td style="background: hsla(120, 100%, 20%, 1.0)"> </td>
- <td style="background: hsla(120, 100%, 10%, 1.0)"> </td>
- <td style="background: hsla(120, 100%, 0%, 1.0)"> </td>
- <td style="background: black"> </td>
- </tr>
- <tr>
- <td style="background: black"> </td>
- <td style="background: rgb(0%, 100%, 0%)"> </td>
- <td style="background: rgb(0%, 80%, 0%)"> </td>
- <td style="background: rgb(0%, 60%, 0%)"> </td>
- <td style="background: rgb(0%, 40%, 0%)"> </td>
- <td style="background: rgb(0%, 20%, 0%)"> </td>
- <td style="background: rgb(0%, 0%, 0%)"> </td>
- <td style="background: white"> </td>
- </tr>
- </table>
- </div>
-
- <p>The following table should have three matching rows changing (in 5 steps) from green at the left to white at the right (plus a checkerboard at both ends to show where the rows are):</p>
-
- <div style="background: white">
- <table border="border">
- <tr>
- <td style="background: white"> </td>
- <td style="background: hsla(120, 100%, 50%, 1)"> </td>
- <td style="background: hsla(120, 100%, 50%, 0.8)"> </td>
- <td style="background: hsla(120, 100%, 50%, 0.6)"> </td>
- <td style="background: hsla(120, 100%, 50%, 0.4)"> </td>
- <td style="background: hsla(120, 100%, 50%, 0.2)"> </td>
- <td style="background: hsla(120, 100%, 50%, 0)"> </td>
- <td style="background: black"> </td>
- </tr>
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsla(120, 100%, 50%, 1.0)"> </td>
- <td style="background: hsla(120, 100%, 60%, 1.0)"> </td>
- <td style="background: hsla(120, 100%, 70%, 1.0)"> </td>
- <td style="background: hsla(120, 100%, 80%, 1.0)"> </td>
- <td style="background: hsla(120, 100%, 90%, 1.0)"> </td>
- <td style="background: hsla(120, 100%, 100%, 1.0)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: rgb(0%, 100%, 0%)"> </td>
- <td style="background: rgb(20%, 100%, 20%)"> </td>
- <td style="background: rgb(40%, 100%, 40%)"> </td>
- <td style="background: rgb(60%, 100%, 60%)"> </td>
- <td style="background: rgb(80%, 100%, 80%)"> </td>
- <td style="background: rgb(100%, 100%, 100%)"> </td>
- <td style="background: black"> </td>
- </tr>
- </table>
- </div>
-
- <p>The following table should have three matching rows changing (in 5 steps) from aqua at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p>
-
- <div style="background: black">
- <table border="border">
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsla(180, 100%, 50%, 1)"> </td>
- <td style="background: hsla(180, 100%, 50%, 0.8)"> </td>
- <td style="background: hsla(180, 100%, 50%, 0.6)"> </td>
- <td style="background: hsla(180, 100%, 50%, 0.4)"> </td>
- <td style="background: hsla(180, 100%, 50%, 0.2)"> </td>
- <td style="background: hsla(180, 100%, 50%, 0)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: hsla(180, 100%, 50%, 1.0)"> </td>
- <td style="background: hsla(180, 100%, 40%, 1.0)"> </td>
- <td style="background: hsla(180, 100%, 30%, 1.0)"> </td>
- <td style="background: hsla(180, 100%, 20%, 1.0)"> </td>
- <td style="background: hsla(180, 100%, 10%, 1.0)"> </td>
- <td style="background: hsla(180, 100%, 0%, 1.0)"> </td>
- <td style="background: black"> </td>
- </tr>
- <tr>
- <td style="background: black"> </td>
- <td style="background: rgb(0%, 100%, 100%)"> </td>
- <td style="background: rgb(0%, 80%, 80%)"> </td>
- <td style="background: rgb(0%, 60%, 60%)"> </td>
- <td style="background: rgb(0%, 40%, 40%)"> </td>
- <td style="background: rgb(0%, 20%, 20%)"> </td>
- <td style="background: rgb(0%, 0%, 0%)"> </td>
- <td style="background: white"> </td>
- </tr>
- </table>
- </div>
-
- <p>The following table should have three matching rows changing (in 5 steps) from aqua at the left to white at the right (plus a checkerboard at both ends to show where the rows are):</p>
-
- <div style="background: white">
- <table border="border">
- <tr>
- <td style="background: white"> </td>
- <td style="background: hsla(180, 100%, 50%, 1)"> </td>
- <td style="background: hsla(180, 100%, 50%, 0.8)"> </td>
- <td style="background: hsla(180, 100%, 50%, 0.6)"> </td>
- <td style="background: hsla(180, 100%, 50%, 0.4)"> </td>
- <td style="background: hsla(180, 100%, 50%, 0.2)"> </td>
- <td style="background: hsla(180, 100%, 50%, 0)"> </td>
- <td style="background: black"> </td>
- </tr>
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsla(180, 100%, 50%, 1.0)"> </td>
- <td style="background: hsla(180, 100%, 60%, 1.0)"> </td>
- <td style="background: hsla(180, 100%, 70%, 1.0)"> </td>
- <td style="background: hsla(180, 100%, 80%, 1.0)"> </td>
- <td style="background: hsla(180, 100%, 90%, 1.0)"> </td>
- <td style="background: hsla(180, 100%, 100%, 1.0)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: rgb(0%, 100%, 100%)"> </td>
- <td style="background: rgb(20%, 100%, 100%)"> </td>
- <td style="background: rgb(40%, 100%, 100%)"> </td>
- <td style="background: rgb(60%, 100%, 100%)"> </td>
- <td style="background: rgb(80%, 100%, 100%)"> </td>
- <td style="background: rgb(100%, 100%, 100%)"> </td>
- <td style="background: black"> </td>
- </tr>
- </table>
- </div>
-
- <p>The following table should have three matching rows changing (in 5 steps) from blue at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p>
-
- <div style="background: black">
- <table border="border">
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsla(240, 100%, 50%, 1)"> </td>
- <td style="background: hsla(240, 100%, 50%, 0.8)"> </td>
- <td style="background: hsla(240, 100%, 50%, 0.6)"> </td>
- <td style="background: hsla(240, 100%, 50%, 0.4)"> </td>
- <td style="background: hsla(240, 100%, 50%, 0.2)"> </td>
- <td style="background: hsla(240, 100%, 50%, 0)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: hsla(240, 100%, 50%, 1.0)"> </td>
- <td style="background: hsla(240, 100%, 40%, 1.0)"> </td>
- <td style="background: hsla(240, 100%, 30%, 1.0)"> </td>
- <td style="background: hsla(240, 100%, 20%, 1.0)"> </td>
- <td style="background: hsla(240, 100%, 10%, 1.0)"> </td>
- <td style="background: hsla(240, 100%, 0%, 1.0)"> </td>
- <td style="background: black"> </td>
- </tr>
- <tr>
- <td style="background: black"> </td>
- <td style="background: rgb(0%, 0%, 100%)"> </td>
- <td style="background: rgb(0%, 0%, 80%)"> </td>
- <td style="background: rgb(0%, 0%, 60%)"> </td>
- <td style="background: rgb(0%, 0%, 40%)"> </td>
- <td style="background: rgb(0%, 0%, 20%)"> </td>
- <td style="background: rgb(0%, 0%, 0%)"> </td>
- <td style="background: white"> </td>
- </tr>
- </table>
- </div>
-
- <p>The following table should have three matching rows changing (in 5 steps) from blue at the left to white at the right (plus a checkerboard at both ends to show where the rows are):</p>
-
- <div style="background: white">
- <table border="border">
- <tr>
- <td style="background: white"> </td>
- <td style="background: hsla(240, 100%, 50%, 1)"> </td>
- <td style="background: hsla(240, 100%, 50%, 0.8)"> </td>
- <td style="background: hsla(240, 100%, 50%, 0.6)"> </td>
- <td style="background: hsla(240, 100%, 50%, 0.4)"> </td>
- <td style="background: hsla(240, 100%, 50%, 0.2)"> </td>
- <td style="background: hsla(240, 100%, 50%, 0)"> </td>
- <td style="background: black"> </td>
- </tr>
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsla(240, 100%, 50%, 1.0)"> </td>
- <td style="background: hsla(240, 100%, 60%, 1.0)"> </td>
- <td style="background: hsla(240, 100%, 70%, 1.0)"> </td>
- <td style="background: hsla(240, 100%, 80%, 1.0)"> </td>
- <td style="background: hsla(240, 100%, 90%, 1.0)"> </td>
- <td style="background: hsla(240, 100%, 100%, 1.0)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: rgb(0%, 0%, 100%)"> </td>
- <td style="background: rgb(20%, 20%, 100%)"> </td>
- <td style="background: rgb(40%, 40%, 100%)"> </td>
- <td style="background: rgb(60%, 60%, 100%)"> </td>
- <td style="background: rgb(80%, 80%, 100%)"> </td>
- <td style="background: rgb(100%, 100%, 100%)"> </td>
- <td style="background: black"> </td>
- </tr>
- </table>
- </div>
-
- <p>The following table should have three matching rows changing (in 5 steps) from fuchsia at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p>
-
- <div style="background: black">
- <table border="border">
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsla(300, 100%, 50%, 1)"> </td>
- <td style="background: hsla(300, 100%, 50%, 0.8)"> </td>
- <td style="background: hsla(300, 100%, 50%, 0.6)"> </td>
- <td style="background: hsla(300, 100%, 50%, 0.4)"> </td>
- <td style="background: hsla(300, 100%, 50%, 0.2)"> </td>
- <td style="background: hsla(300, 100%, 50%, 0)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: hsla(300, 100%, 50%, 1.0)"> </td>
- <td style="background: hsla(300, 100%, 40%, 1.0)"> </td>
- <td style="background: hsla(300, 100%, 30%, 1.0)"> </td>
- <td style="background: hsla(300, 100%, 20%, 1.0)"> </td>
- <td style="background: hsla(300, 100%, 10%, 1.0)"> </td>
- <td style="background: hsla(300, 100%, 0%, 1.0)"> </td>
- <td style="background: black"> </td>
- </tr>
- <tr>
- <td style="background: black"> </td>
- <td style="background: rgb(100%, 0%, 100%)"> </td>
- <td style="background: rgb(80%, 0%, 80%)"> </td>
- <td style="background: rgb(60%, 0%, 60%)"> </td>
- <td style="background: rgb(40%, 0%, 40%)"> </td>
- <td style="background: rgb(20%, 0%, 20%)"> </td>
- <td style="background: rgb(0%, 0%, 0%)"> </td>
- <td style="background: white"> </td>
- </tr>
- </table>
- </div>
-
- <p>The following table should have three matching rows changing (in 5 steps) from fuchsia at the left to white at the right (plus a checkerboard at both ends to show where the rows are):</p>
-
- <div style="background: white">
- <table border="border">
- <tr>
- <td style="background: white"> </td>
- <td style="background: hsla(300, 100%, 50%, 1)"> </td>
- <td style="background: hsla(300, 100%, 50%, 0.8)"> </td>
- <td style="background: hsla(300, 100%, 50%, 0.6)"> </td>
- <td style="background: hsla(300, 100%, 50%, 0.4)"> </td>
- <td style="background: hsla(300, 100%, 50%, 0.2)"> </td>
- <td style="background: hsla(300, 100%, 50%, 0)"> </td>
- <td style="background: black"> </td>
- </tr>
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsla(300, 100%, 50%, 1.0)"> </td>
- <td style="background: hsla(300, 100%, 60%, 1.0)"> </td>
- <td style="background: hsla(300, 100%, 70%, 1.0)"> </td>
- <td style="background: hsla(300, 100%, 80%, 1.0)"> </td>
- <td style="background: hsla(300, 100%, 90%, 1.0)"> </td>
- <td style="background: hsla(300, 100%, 100%, 1.0)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: rgb(100%, 0%, 100%)"> </td>
- <td style="background: rgb(100%, 20%, 100%)"> </td>
- <td style="background: rgb(100%, 40%, 100%)"> </td>
- <td style="background: rgb(100%, 60%, 100%)"> </td>
- <td style="background: rgb(100%, 80%, 100%)"> </td>
- <td style="background: rgb(100%, 100%, 100%)"> </td>
- <td style="background: black"> </td>
- </tr>
- </table>
- </div>
-
- <p>The following table should have two matching rows changing (in 5 steps) from red at the left to green at the right (plus a checkerboard at both ends to show where the rows are):</p>
-
- <div style="background: lime">
- <table border="border">
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsla(0, 100%, 50%, 1)"> </td>
- <td style="background: hsla(0, 100%, 50%, 0.8)"> </td>
- <td style="background: hsla(0, 100%, 50%, 0.6)"> </td>
- <td style="background: hsla(0, 100%, 50%, 0.4)"> </td>
- <td style="background: hsla(0, 100%, 50%, 0.2)"> </td>
- <td style="background: hsla(0, 100%, 50%, 0)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: rgb(100%, 0%, 0%)"> </td>
- <td style="background: rgb(80%, 20%, 0%)"> </td>
- <td style="background: rgb(60%, 40%, 0%)"> </td>
- <td style="background: rgb(40%, 60%, 0%)"> </td>
- <td style="background: rgb(20%, 80%, 0%)"> </td>
- <td style="background: rgb(0%, 100%, 0%)"> </td>
- <td style="background: black"> </td>
- </tr>
- </table>
- </div>
-
- <p>The following table should have two matching rows changing (in 5 steps) from green at the left to blue at the right (plus a checkerboard at both ends to show where the rows are):</p>
-
- <div style="background: blue">
- <table border="border">
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsla(120, 100%, 50%, 1)"> </td>
- <td style="background: hsla(120, 100%, 50%, 0.8)"> </td>
- <td style="background: hsla(120, 100%, 50%, 0.6)"> </td>
- <td style="background: hsla(120, 100%, 50%, 0.4)"> </td>
- <td style="background: hsla(120, 100%, 50%, 0.2)"> </td>
- <td style="background: hsla(120, 100%, 50%, 0)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: rgb(0%, 100%, 0%)"> </td>
- <td style="background: rgb(0%, 80%, 20%)"> </td>
- <td style="background: rgb(0%, 60%, 40%)"> </td>
- <td style="background: rgb(0%, 40%, 60%)"> </td>
- <td style="background: rgb(0%, 20%, 80%)"> </td>
- <td style="background: rgb(0%, 0%, 100%)"> </td>
- <td style="background: black"> </td>
- </tr>
- </table>
- </div>
-
- <p>The following table should have two matching rows changing (in 5 steps) from blue at the left to red at the right (plus a checkerboard at both ends to show where the rows are):</p>
-
- <div style="background: red">
- <table border="border">
- <tr>
- <td style="background: black"> </td>
- <td style="background: hsla(240, 100%, 50%, 1)"> </td>
- <td style="background: hsla(240, 100%, 50%, 0.8)"> </td>
- <td style="background: hsla(240, 100%, 50%, 0.6)"> </td>
- <td style="background: hsla(240, 100%, 50%, 0.4)"> </td>
- <td style="background: hsla(240, 100%, 50%, 0.2)"> </td>
- <td style="background: hsla(240, 100%, 50%, 0)"> </td>
- <td style="background: white"> </td>
- </tr>
- <tr>
- <td style="background: white"> </td>
- <td style="background: rgb(0%, 0%, 100%)"> </td>
- <td style="background: rgb(20%, 0%, 80%)"> </td>
- <td style="background: rgb(40%, 0%, 60%)"> </td>
- <td style="background: rgb(60%, 0%, 40%)"> </td>
- <td style="background: rgb(80%, 0%, 20%)"> </td>
- <td style="background: rgb(100%, 0%, 0%)"> </td>
- <td style="background: black"> </td>
- </tr>
- </table>
- </div>
-
- </body>
-</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+ <head>
+ <title>CSS Test: currentColor (with 'background-color')</title>
+ <link title="L. David Baron" rel="author" href="http://dbaron.org/">
+ <link title="Mozilla Corporation" rel="author" href="http://mozilla.com/">
+ <link rel="help" href="http://www.w3.org/TR/css3-color/#currentcolor">
+ <meta content="" name="flags">
+ <meta content="currentColor uses the color from the color property" name="assert">
+ <style type="text/css">
+ #two {
+ color: green;
+ background: red;
+ background: currentcolor;
+ }
+ #three {
+ color: green;
+ background-color: red;
+ background-color: currentColor;
+ }
+ </style>
+ </head>
+ <body>
+ <p>This paragraph should be followed by two green blocks.</p>
+ <p id="two">This text should NOT be visible.</p>
+ <p id="three">This text should NOT be visible.</p>
+ </body>
+</html>
\ No newline at end of file
+++ /dev/null
-<!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>CSS Test: currentColor (with 'background-color')</title>
- <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
- <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
- <link rel="help" href="http://www.w3.org/TR/css3-color/#currentcolor" />
- <meta name="flags" content="" />
- <meta name="assert" content="currentColor uses the color from the color property" />
- <style type="text/css"><![CDATA[
- #two {
- color: green;
- background: red;
- background: currentcolor;
- }
- #three {
- color: green;
- background-color: red;
- background-color: currentColor;
- }
- ]]></style>
- </head>
- <body>
- <p>This paragraph should be followed by two green blocks.</p>
- <p id="two">This text should NOT be visible.</p>
- <p id="three">This text should NOT be visible.</p>
- </body>
-</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+ <head>
+ <title>CSS Test: currentColor (with 'border-color')</title>
+ <link title="L. David Baron" rel="author" href="http://dbaron.org/">
+ <link title="Mozilla Corporation" rel="author" href="http://mozilla.com/">
+ <link rel="help" href="http://www.w3.org/TR/css3-color/#currentcolor">
+ <meta content="" name="flags">
+ <meta content="currentColor uses the color from the color property" name="assert">
+ <style type="text/css">
+ #one {
+ color: green;
+ border: medium solid red;
+ border: medium solid currentColor;
+ }
+ #two {
+ color: green;
+ border: medium solid red;
+ border-color: currentcolor;
+ }
+ </style>
+ </head>
+ <body>
+ <p id="one">This paragraph should have a green border.</p>
+ <p id="two">This paragraph should have a green border.</p>
+ </body>
+</html>
\ No newline at end of file
+++ /dev/null
-<!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>CSS Test: currentColor (with 'border-color')</title>
- <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
- <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
- <link rel="help" href="http://www.w3.org/TR/css3-color/#currentcolor" />
- <meta name="flags" content="" />
- <meta name="assert" content="currentColor uses the color from the color property" />
- <style type="text/css"><![CDATA[
- #one {
- color: green;
- border: medium solid red;
- border: medium solid currentColor;
- }
- #two {
- color: green;
- border: medium solid red;
- border-color: currentcolor;
- }
- ]]></style>
- </head>
- <body>
- <p id="one">This paragraph should have a green border.</p>
- <p id="two">This paragraph should have a green border.</p>
- </body>
-</html>
+++ /dev/null
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-Copyright (c) 2012 Intel Corporation.
-
-Redistribution and use in source and binary forms, with or without modification,
-are permitted provided that the following conditions are met:
-
-* Redistributions of works must retain the original copyright notice, this list
- of conditions and the following disclaimer.
-* Redistributions in binary form must reproduce the original copyright notice,
- this list of conditions and the following disclaimer in the documentation
- and/or other materials provided with the distribution.
-* Neither the name of Intel Corporation nor the names of its contributors
- may be used to endorse or promote products derived from this work without
- specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY INTEL CORPORATION "AS IS"
-AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
-IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
-ARE DISCLAIMED. IN NO EVENT SHALL INTEL CORPORATION BE LIABLE FOR ANY DIRECT,
-INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
-BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
-OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
-NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
-EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-
-Authors:
- Christophe Dumez <christophe.dumez@intel.com>
-
--->
-
-<!--
- Additional mime-types for EFL WebKit.
--->
-<mime-info xmlns='http://www.freedesktop.org/standards/shared-mime-info'>
- <mime-type type="application/xhtml+xml">
- <glob pattern="*.xht"/>
- </mime-type>
-</mime-info>
echo "Install /opt/%name/%name.wgt fail ..."
fi
sync
- #### install eflwebkit.xml ####
- if [ -e /opt/tct-colors-css3-tests/colors/support/eflwebkit.xml ]; then
- if [ -e /usr/share/mime/packages/ ]; then
- cp -f /opt/tct-colors-css3-tests/colors/support/eflwebkit.xml /usr/share/mime/packages/
- update-mime-database -V /usr/share/mime/
- fi
- else
- echo "Install eflwebkit.xml fail, please check if exists file: /opt/tct-colors-css3-tests/colors/support/eflwebkit.xml ..."
- fi
fi
fi
sync
fi
- #### uninstall eflwebkit.xml ####
- if [ -e /usr/share/mime/packages/eflwebkit.xml ]; then
- rm -f /usr/share/mime/packages/eflwebkit.xml
- update-mime-database -V /usr/share/mime/
- fi
-
fi
rm -rf /opt/unpacked_crx/%name
<expected>Each column in the following table has every cell the same color, except for the checkerboard pattern at the right and left used to indicate the row positions</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t424-hsl-h-rotating-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t424-hsl-h-rotating-b.htm</test_script_entry>
</description>
<specs>
<spec>
<expected>The text is green</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t424-hsl-basic-a.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t424-hsl-basic-a.htm</test_script_entry>
</description>
<specs>
<spec>
<expected>Every row in this table have both columns the same color</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t425-hsla-clip-outside-device-gamut-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t425-hsla-clip-outside-device-gamut-b.htm</test_script_entry>
</description>
<specs>
<spec>
<expected>Each column in the following table has every cell the same color, except for the checkerboard pattern at the right and left used to indicate the row positions</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t425-hsla-h-rotating-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t425-hsla-h-rotating-b.htm</test_script_entry>
</description>
<specs>
<spec>
<expected>There is six lines of text in same color-black</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-clamping-a1.0-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-clamping-a1.0-b.htm</test_script_entry>
</description>
<specs>
<spec>
<expected>Every pairs of two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change gradually from one kind of color to another one</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t425-hsla-values-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t425-hsla-values-b.htm</test_script_entry>
</description>
<specs>
<spec>
<expected>The text is dark green</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t424-hsl-parsing-f.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t424-hsl-parsing-f.htm</test_script_entry>
</description>
<specs>
<spec>
<expected>There is only the text 'This should be the only text visible on this page.' displayed</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-clamping-a0.0-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-clamping-a0.0-b.htm</test_script_entry>
</description>
<specs>
<spec>
<expected>There are five lines of text in expected background or text color</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-func-int-a.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-func-int-a.htm</test_script_entry>
</description>
<specs>
<spec>
<expected>This should be the only text visible on this page</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t423-transparent-1-a.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t423-transparent-1-a.htm</test_script_entry>
</description>
<specs>
<spec>
<expected>All text is green</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-func-whitespace-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-func-whitespace-b.htm</test_script_entry>
</description>
<specs>
<spec>
<expected>The text is green</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-func-no-mixed-f.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-func-no-mixed-f.htm</test_script_entry>
</description>
<specs>
<spec>
<expected>Every pairs of two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change gradually from one kind of color to another one</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t424-hsl-values-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t424-hsl-values-b.htm</test_script_entry>
</description>
<specs>
<spec>
<expected>Every row in this table have both columns the same color</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t424-hsl-clip-outside-gamut-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t424-hsl-clip-outside-gamut-b.htm</test_script_entry>
</description>
<specs>
<spec>
<expected>This should be the only text visible on this page</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t423-transparent-2-a.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t423-transparent-2-a.htm</test_script_entry>
</description>
<specs>
<spec>
<expected>The text is dark green</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t425-hsla-parsing-f.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t425-hsla-parsing-f.htm</test_script_entry>
</description>
<specs>
<spec>
<expected>Every row in this table have both columns the same color</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-clip-outside-device-gamut-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-clip-outside-device-gamut-b.htm</test_script_entry>
</description>
<specs>
<spec>
<expected>There are two lines of text with green border displayed</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t44-currentcolor-border-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t44-currentcolor-border-b.htm</test_script_entry>
</description>
<specs>
<spec>
<expected>There are only the text ??This paragraph should be followed by two green blocks.?? and two blocks in green displayed</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t44-currentcolor-background-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t44-currentcolor-background-b.htm</test_script_entry>
</description>
<specs>
<spec>
<expected>There are two boxes in the same color</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t425-hsla-onscreen-multiple-boxes-c.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t425-hsla-onscreen-multiple-boxes-c.htm</test_script_entry>
</description>
<specs>
<spec>
<expected>Every row in this table have both columns the same color</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t425-hsla-onscreen-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t425-hsla-onscreen-b.htm</test_script_entry>
</description>
<specs>
<spec>
<expected>There are two boxes in the same color</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-onscreen-multiple-boxes-c.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-onscreen-multiple-boxes-c.htm</test_script_entry>
</description>
<specs>
<spec>
<expected>Every row in this table have both columns the same color</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-onscreen-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-onscreen-b.htm</test_script_entry>
</description>
<specs>
<spec>
<expected>There are two boxes in the same color</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t32-opacity-offscreen-multiple-boxes-2-c.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t32-opacity-offscreen-multiple-boxes-2-c.htm</test_script_entry>
</description>
<specs>
<spec>
<expected>There are two boxes in the same color</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t32-opacity-offscreen-multiple-boxes-1-c.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t32-opacity-offscreen-multiple-boxes-1-c.htm</test_script_entry>
</description>
<specs>
<spec>
<expected>Each column in the following table has every cell the same color, except for the checkerboard pattern at the right and left used to indicate the row positions</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t424-hsl-h-rotating-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t424-hsl-h-rotating-b.htm</test_script_entry>
</description>
</testcase>
<testcase component="WebAPI/DOM, Forms and Styles/CSS Color Module Level 3" execution_type="manual" id="css3_colors_tests_entry43" purpose="Check the basic functioning of hsl() colors.">
<expected>The text is green</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t424-hsl-basic-a.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t424-hsl-basic-a.htm</test_script_entry>
</description>
</testcase>
<testcase component="WebAPI/DOM, Forms and Styles/CSS Color Module Level 3" execution_type="manual" id="css3_colors_tests_entry49" purpose="Check the clipping of hsla() values when they are beyond the scope of device gamut.">
<expected>Every row in this table have both columns the same color</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t425-hsla-clip-outside-device-gamut-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t425-hsla-clip-outside-device-gamut-b.htm</test_script_entry>
</description>
</testcase>
<testcase component="WebAPI/DOM, Forms and Styles/CSS Color Module Level 3" execution_type="manual" id="css3_colors_tests_entry50" purpose="Check H values in hsla() colors should be treated like angles, even if it is outside [0,360)">
<expected>Each column in the following table has every cell the same color, except for the checkerboard pattern at the right and left used to indicate the row positions</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t425-hsla-h-rotating-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t425-hsla-h-rotating-b.htm</test_script_entry>
</description>
</testcase>
<testcase component="WebAPI/DOM, Forms and Styles/CSS Color Module Level 3" execution_type="manual" id="css3_colors_tests_entry32" purpose="Check that alpha components of rgba() colors greater than 1 are treated to 1">
<expected>There is six lines of text in same color-black</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-clamping-a1.0-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-clamping-a1.0-b.htm</test_script_entry>
</description>
</testcase>
<testcase component="WebAPI/DOM, Forms and Styles/CSS Color Module Level 3" execution_type="manual" id="css3_colors_tests_entry54" purpose="Check the implementation of algorithm for converting hsla() colors to rgb() colors">
<expected>Every pairs of two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change gradually from one kind of color to another one</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t425-hsla-values-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t425-hsla-values-b.htm</test_script_entry>
</description>
</testcase>
<testcase component="WebAPI/DOM, Forms and Styles/CSS Color Module Level 3" execution_type="manual" id="css3_colors_tests_entry46" purpose="Check the rules for parsing of hsl() colors.">
<expected>The text is dark green</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t424-hsl-parsing-f.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t424-hsl-parsing-f.htm</test_script_entry>
</description>
</testcase>
<testcase component="WebAPI/DOM, Forms and Styles/CSS Color Module Level 3" execution_type="manual" id="css3_colors_tests_entry31" purpose="Check that alpha components of rgba() colors less than 0 are treated to 0">
<expected>There is only the text 'This should be the only text visible on this page.' displayed</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-clamping-a0.0-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-clamping-a0.0-b.htm</test_script_entry>
</description>
</testcase>
<testcase component="WebAPI/DOM, Forms and Styles/CSS Color Module Level 3" execution_type="manual" id="css3_colors_tests_entry34" purpose="Check that rgba() values produce correct colors">
<expected>There are five lines of text in expected background or text color</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-func-int-a.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-func-int-a.htm</test_script_entry>
</description>
</testcase>
<testcase component="WebAPI/DOM, Forms and Styles/CSS Color Module Level 3" execution_type="manual" id="css3_colors_tests_entry41" purpose="Check that the 'transparent' color keyword makes colors white transparent">
<expected>This should be the only text visible on this page</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t423-transparent-1-a.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t423-transparent-1-a.htm</test_script_entry>
</description>
</testcase>
<testcase component="WebAPI/DOM, Forms and Styles/CSS Color Module Level 3" execution_type="manual" id="css3_colors_tests_entry37" purpose="Check that whitespace is allowed within rgba() functions">
<expected>All text is green</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-func-whitespace-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-func-whitespace-b.htm</test_script_entry>
</description>
</testcase>
<testcase component="WebAPI/DOM, Forms and Styles/CSS Color Module Level 3" execution_type="manual" id="css3_colors_tests_entry35" purpose="Check that rgba() values are only accepted when all integers or all percentages">
<expected>The text is green</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-func-no-mixed-f.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-func-no-mixed-f.htm</test_script_entry>
</description>
</testcase>
<testcase component="WebAPI/DOM, Forms and Styles/CSS Color Module Level 3" execution_type="manual" id="css3_colors_tests_entry47" purpose="Check the implementation of algorithm for converting hsl() colors to rgb() colors">
<expected>Every pairs of two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change gradually from one kind of color to another one</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t424-hsl-values-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t424-hsl-values-b.htm</test_script_entry>
</description>
</testcase>
<testcase component="WebAPI/DOM, Forms and Styles/CSS Color Module Level 3" execution_type="manual" id="css3_colors_tests_entry44" purpose="Check that clipping of hsl() values are outside the device gamut">
<expected>Every row in this table have both columns the same color</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t424-hsl-clip-outside-gamut-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t424-hsl-clip-outside-gamut-b.htm</test_script_entry>
</description>
</testcase>
<testcase component="WebAPI/DOM, Forms and Styles/CSS Color Module Level 3" execution_type="manual" id="css3_colors_tests_entry42" purpose="Check that the 'transparent' color keyword makes colors black transparent">
<expected>This should be the only text visible on this page</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t423-transparent-2-a.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t423-transparent-2-a.htm</test_script_entry>
</description>
</testcase>
<testcase component="WebAPI/DOM, Forms and Styles/CSS Color Module Level 3" execution_type="manual" id="css3_colors_tests_entry53" purpose="Check the rules for parsing of hsla() colors">
<expected>The text is dark green</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t425-hsla-parsing-f.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t425-hsla-parsing-f.htm</test_script_entry>
</description>
</testcase>
<testcase component="WebAPI/DOM, Forms and Styles/CSS Color Module Level 3" execution_type="manual" id="css3_colors_tests_entry33" purpose="Check clipping of rgba() values are outside the device gamut">
<expected>Every row in this table have both columns the same color</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-clip-outside-device-gamut-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-clip-outside-device-gamut-b.htm</test_script_entry>
</description>
</testcase>
<testcase component="WebAPI/DOM, Forms and Styles/CSS Color Module Level 3" execution_type="manual" id="CSS3Colors_color_pseudo-classes" purpose="Check the color effect in Pseudo-classes on test div">
<expected>There are two lines of text with green border displayed</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t44-currentcolor-border-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t44-currentcolor-border-b.htm</test_script_entry>
</description>
</testcase>
<testcase component="WebAPI/DOM, Forms and Styles/CSS Color Module Level 3" execution_type="manual" id="css3_colors_tests_entry15" purpose="To check that currentColor uses the color from the color property works at boxes">
<expected>There are only the text ??This paragraph should be followed by two green blocks.?? and two blocks in green displayed</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t44-currentcolor-background-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t44-currentcolor-background-b.htm</test_script_entry>
</description>
</testcase>
<testcase component="WebAPI/DOM, Forms and Styles/CSS Color Module Level 3" execution_type="manual" id="css3_colors_tests_entry52" purpose="To check that hsla() does not behave like opacity">
<expected>There are two boxes in the same color</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t425-hsla-onscreen-multiple-boxes-c.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t425-hsla-onscreen-multiple-boxes-c.htm</test_script_entry>
</description>
</testcase>
<testcase component="WebAPI/DOM, Forms and Styles/CSS Color Module Level 3" execution_type="manual" id="css3_colors_tests_entry51" purpose="To check that hsla() does not behave like opacity and draw in an offscreen buffer">
<expected>Every row in this table have both columns the same color</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t425-hsla-onscreen-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t425-hsla-onscreen-b.htm</test_script_entry>
</description>
</testcase>
<testcase component="WebAPI/DOM, Forms and Styles/CSS Color Module Level 3" execution_type="manual" id="css3_colors_tests_entry39" purpose="To check that rgba() does not behave like opacity">
<expected>There are two boxes in the same color</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-onscreen-multiple-boxes-c.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-onscreen-multiple-boxes-c.htm</test_script_entry>
</description>
</testcase>
<testcase component="WebAPI/DOM, Forms and Styles/CSS Color Module Level 3" execution_type="manual" id="css3_colors_tests_entry38" purpose="To check that rgba() does not behave like opacity and draw in an offscreen buffer">
<expected>Every row in this table have both columns the same color</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-onscreen-b.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t422-rgba-onscreen-b.htm</test_script_entry>
</description>
</testcase>
<testcase component="WebAPI/DOM, Forms and Styles/CSS Color Module Level 3" execution_type="manual" id="css3_colors_tests_entry10" purpose="To check that opacity is group opacity over elements (not boxes)">
<expected>There are two boxes in the same color</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t32-opacity-offscreen-multiple-boxes-2-c.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t32-opacity-offscreen-multiple-boxes-2-c.htm</test_script_entry>
</description>
</testcase>
<testcase component="WebAPI/DOM, Forms and Styles/CSS Color Module Level 3" execution_type="manual" id="css3_colors_tests_entry9" purpose="To check that opacity is group opacity into elements (not boxes)">
<expected>There are two boxes in the same color</expected>
</step>
</steps>
- <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t32-opacity-offscreen-multiple-boxes-1-c.xht</test_script_entry>
+ <test_script_entry>/opt/tct-colors-css3-tests/colors/csswg/t32-opacity-offscreen-multiple-boxes-1-c.htm</test_script_entry>
</description>
</testcase>
<testcase component="WebAPI/DOM, Forms and Styles/CSS Color Module Level 3" execution_type="manual" id="CSS3Colors_color_transprent_rgba_0_0_0_0" purpose="Check if the color keyword transparent and color value rgba(0,0,0,0) have same effect">
</testcase>
</set>
</suite>
-</test_definition>
\ No newline at end of file
+</test_definition>
projects / test / tct / web / api.git / commitdiff