t425-hsla-h-rotating-b

modding of H values in hsla() colors

WeasyPrint

This browser

Assertion
H values in hsla() 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 hsla() 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 		<link rel="help" href="http://www.w3.org/TR/css3-color/#hsla-color">
 9 		<meta name="flags" content="">
10 		<meta name="assert" content="H values in hsla() colors should be treated like angles, even when outside [0,360)">
11 		<style type="text/css">
12 		table { border-spacing: 0; padding: 0; border: none; }
13 		td { border: none; padding: 0; }
14 		td { width: 1.2em; height: 1.2em; }
15 		</style>
16 	</head>
17 	<body>
18 		<p>Each column in the following table should have every cell the
19 		same color, except for the checkerboard pattern at the right and
20 		left used to indicate the row positions.</p>
21 
22 		<table>
23 			<tr>
24 				<td style="background: white">&nbsp;</td>
25 				<td style="background: hsla(0, 100%, 50%, 1.0)">&nbsp;</td>
26 				<td style="background: hsla(60, 100%, 50%, 0.8)">&nbsp;</td>
27 				<td style="background: hsla(120, 100%, 50%, 0.4)">&nbsp;</td>
28 				<td style="background: hsla(180, 100%, 50%, 0.6)">&nbsp;</td>
29 				<td style="background: hsla(240, 100%, 50%, 0.8)">&nbsp;</td>
30 				<td style="background: hsla(300, 100%, 50%, 0.4)">&nbsp;</td>
31 				<td style="background: black">&nbsp;</td>
32 			</tr>
33 			<tr>
34 				<td style="background: black">&nbsp;</td>
35 				<td style="background: hsla(-360, 100%, 50%, 1.0)">&nbsp;</td>
36 				<td style="background: hsla(-300, 100%, 50%, 0.8)">&nbsp;</td>
37 				<td style="background: hsla(-240, 100%, 50%, 0.4)">&nbsp;</td>
38 				<td style="background: hsla(-180, 100%, 50%, 0.6)">&nbsp;</td>
39 				<td style="background: hsla(-120, 100%, 50%, 0.8)">&nbsp;</td>
40 				<td style="background: hsla(-60, 100%, 50%, 0.4)">&nbsp;</td>
41 				<td style="background: white">&nbsp;</td>
42 			</tr>
43 			<tr>
44 				<td style="background: white">&nbsp;</td>
45 				<td style="background: hsla(360, 100%, 50%, 1.0)">&nbsp;</td>
46 				<td style="background: hsla(420, 100%, 50%, 0.8)">&nbsp;</td>
47 				<td style="background: hsla(480, 100%, 50%, 0.4)">&nbsp;</td>
48 				<td style="background: hsla(540, 100%, 50%, 0.6)">&nbsp;</td>
49 				<td style="background: hsla(600, 100%, 50%, 0.8)">&nbsp;</td>
50 				<td style="background: hsla(660, 100%, 50%, 0.4)">&nbsp;</td>
51 				<td style="background: black">&nbsp;</td>
52 			</tr>
53 			<tr>
54 				<td style="background: black">&nbsp;</td>
55 				<td style="background: hsla(6120, 100%, 50%, 1.0)">&nbsp;</td>
56 				<td style="background: hsla(-9660, 100%, 50%, 0.8)">&nbsp;</td>
57 				<td style="background: hsla(99840, 100%, 50%, 0.4)">&nbsp;</td>
58 				<td style="background: hsla(-900, 100%, 50%, 0.6)">&nbsp;</td>
59 				<td style="background: hsla(-104880, 100%, 50%, 0.8)">&nbsp;</td>
60 				<td style="background: hsla(2820, 100%, 50%, 0.4)">&nbsp;</td>
61 				<td style="background: white">&nbsp;</td>
62 			</tr>
63 		</table>
64 
65 	</body>
66 </html>