t424-hsl-h-rotating-b

modding of H values in hsl() colors

WeasyPrint

This browser

Assertion
H values in hsl() colors should be treated like angles, even when outside [0,360)

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3 	<head>
 4 		<title>CSS Test: modding of H values in hsl() colors</title>
 5 		<link rel="author" title="L. David Baron" href="https://dbaron.org/">
 6 		<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/">
 7 		<link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color">
 8 		<meta name="flags" content="">
 9 		<meta name="assert" content="H values in hsl() colors should be treated like angles, even when outside [0,360)">
10 		<style type="text/css">
11 		table { border-spacing: 0; padding: 0; border: none; }
12 		td { border: none; padding: 0; }
13 		td { width: 1.2em; height: 1.2em; }
14 		</style>
15 	</head>
16 	<body>
17 		<p>Each column in the following table should have every cell the
18 		same color, except for the checkerboard pattern at the right and
19 		left used to indicate the row positions.</p>
20 
21 		<table>
22 			<tr>
23 				<td style="background: white">&nbsp;</td>
24 				<td style="background: hsl(0, 100%, 50%)">&nbsp;</td>
25 				<td style="background: hsl(60, 100%, 50%)">&nbsp;</td>
26 				<td style="background: hsl(120, 100%, 50%)">&nbsp;</td>
27 				<td style="background: hsl(180, 100%, 50%)">&nbsp;</td>
28 				<td style="background: hsl(240, 100%, 50%)">&nbsp;</td>
29 				<td style="background: hsl(300, 100%, 50%)">&nbsp;</td>
30 				<td style="background: black">&nbsp;</td>
31 			</tr>
32 			<tr>
33 				<td style="background: black">&nbsp;</td>
34 				<td style="background: hsl(-360, 100%, 50%)">&nbsp;</td>
35 				<td style="background: hsl(-300, 100%, 50%)">&nbsp;</td>
36 				<td style="background: hsl(-240, 100%, 50%)">&nbsp;</td>
37 				<td style="background: hsl(-180, 100%, 50%)">&nbsp;</td>
38 				<td style="background: hsl(-120, 100%, 50%)">&nbsp;</td>
39 				<td style="background: hsl(-60, 100%, 50%)">&nbsp;</td>
40 				<td style="background: white">&nbsp;</td>
41 			</tr>
42 			<tr>
43 				<td style="background: white">&nbsp;</td>
44 				<td style="background: hsl(360, 100%, 50%)">&nbsp;</td>
45 				<td style="background: hsl(420, 100%, 50%)">&nbsp;</td>
46 				<td style="background: hsl(480, 100%, 50%)">&nbsp;</td>
47 				<td style="background: hsl(540, 100%, 50%)">&nbsp;</td>
48 				<td style="background: hsl(600, 100%, 50%)">&nbsp;</td>
49 				<td style="background: hsl(660, 100%, 50%)">&nbsp;</td>
50 				<td style="background: black">&nbsp;</td>
51 			</tr>
52 			<tr>
53 				<td style="background: black">&nbsp;</td>
54 				<td style="background: hsl(6120, 100%, 50%)">&nbsp;</td>
55 				<td style="background: hsl(-9660, 100%, 50%)">&nbsp;</td>
56 				<td style="background: hsl(99840, 100%, 50%)">&nbsp;</td>
57 				<td style="background: hsl(-900, 100%, 50%)">&nbsp;</td>
58 				<td style="background: hsl(-104880, 100%, 50%)">&nbsp;</td>
59 				<td style="background: hsl(2820, 100%, 50%)">&nbsp;</td>
60 				<td style="background: white">&nbsp;</td>
61 			</tr>
62 		</table>
63 
64 	</body>
65 </html>