OLD | NEW |
1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
2 <script> | 2 <script> |
3 if (window.testRunner) | 3 if (window.testRunner) |
4 window.testRunner.dumpAsText(true); | 4 window.testRunner.dumpAsText(true); |
5 </script> | 5 </script> |
6 <style> | 6 <style> |
7 | 7 |
8 li | 8 li |
9 { | 9 { |
10 » margin: 5px; | 10 margin: 5px; |
11 » width: 130px; | 11 width: 130px; |
12 » height: 130px; | 12 height: 130px; |
13 » background: url("resources/ducky.png") 0 0 /50% 50%, linear-gradient(to
right, #00ffff 0%, rgba(0,0,255,0) 24%, #ff0000 50%, #ffff00 75%, #00ff00 100%)
0 0 /100% 100%; | 13 background: linear-gradient(to right, #00ffff 0%, rgba(0,0,255,0) 24%, #ff0000
50%, #ffff00 75%, #00ff00 100%) 0 0 /50% 50%, |
14 » display: block; | 14 url("resources/ducky.png") 0 0 /100% 100%; |
15 » float: left; | 15 display: block; |
| 16 float: left; |
16 } | 17 } |
17 </style> | 18 </style> |
18 <!-- this file should contain a duck on top of a gradient with every type of ble
nding --> | 19 <!-- this file should contain a gradient repeated four times on top of a duck wi
th every type of blending --> |
19 <body style="background-color: green"> | 20 <body style="background-color: green"> |
20 <ul> | 21 <ul> |
21 <li style="background-blend-mode: normal, normal"></li> | 22 <li style="background-blend-mode: normal, normal"></li> |
22 <li style="background-blend-mode: multiply, normal"></li> | 23 <li style="background-blend-mode: multiply, normal"></li> |
23 <li style="background-blend-mode: screen, normal"></li> | 24 <li style="background-blend-mode: screen, normal"></li> |
24 <li style="background-blend-mode: overlay, normal; opacity:.9"></li> | 25 <li style="background-blend-mode: overlay, normal; opacity:.9"></li> |
25 <li style="background-blend-mode: darken, normal"></li> | 26 <li style="background-blend-mode: darken, normal"></li> |
26 <li style="background-blend-mode: lighten, normal"></li> | 27 <li style="background-blend-mode: lighten, normal"></li> |
27 <li style="background-blend-mode: color-dodge, normal"></li> | 28 <li style="background-blend-mode: color-dodge, normal"></li> |
28 <li style="background-blend-mode: color-burn, normal"></li> | 29 <li style="background-blend-mode: color-burn, normal"></li> |
29 <li style="background-blend-mode: hard-light, normal"></li> | 30 <li style="background-blend-mode: hard-light, normal"></li> |
30 <li style="background-blend-mode: soft-light, normal"></li> | 31 <li style="background-blend-mode: soft-light, normal"></li> |
31 <li style="background-blend-mode: difference, normal"></li> | 32 <li style="background-blend-mode: difference, normal"></li> |
32 <li style="background-blend-mode: exclusion, normal"></li> | 33 <li style="background-blend-mode: exclusion, normal"></li> |
33 <li style="background-blend-mode: hue, normal;"></li> | 34 <li style="background-blend-mode: hue, normal;"></li> |
34 <li style="background-blend-mode: saturation, normal"></li> | 35 <li style="background-blend-mode: saturation, normal"></li> |
35 <li style="background-blend-mode: color, normal"></li> | 36 <li style="background-blend-mode: color, normal"></li> |
36 <li style="background-blend-mode: luminosity, normal"></li> | 37 <li style="background-blend-mode: luminosity, normal"></li> |
37 </ul> | 38 </ul> |
38 </body> | 39 </body> |
39 | 40 |
OLD | NEW |