[Color] Make gradients work with ExtendedColors
[WebKit-https.git] / LayoutTests / css3 / color / gradients-expected.html
1 <style>
2 body {
3     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><g fill="#ccc"><rect width="5" height="5"/><rect x="5" y="5" width="5" height="5"/></g></svg>');
4     background-size: 100px 100px;
5 }
6 .box {
7     display: inline-block;
8     width: 80px;
9     height: 80px;
10 }
11 </style>
12 <p>These two rows should be identical</p>
13 <div class="box" style="background: linear-gradient(red, blue);"></div>
14 <!-- <div class="box" style="background: linear-gradient(red, rgba(0, 0, 255, 0.5));"></div> -->
15 <div class="box" style="background: linear-gradient(red, blue, green, cyan);"></div>
16 <div class="box" style="background: linear-gradient(to bottom right, red, blue);"></div>
17 <div class="box" style="background: linear-gradient(to bottom left, rgba(255, 0, 0, 0.6), rgba(0, 0, 255, 0.6));"></div>
18
19 <br>
20
21 <div class="box" style="background: linear-gradient(red, blue);"></div>
22 <!-- <div class="box" style="background: linear-gradient(red, rgba(0, 0, 255, 0.5));"></div> -->
23 <div class="box" style="background: linear-gradient(red, blue, green, cyan);"></div>
24 <div class="box" style="background: linear-gradient(to bottom right, red, blue);"></div>
25 <div class="box" style="background: linear-gradient(to bottom left, rgba(255, 0, 0, 0.6), rgba(0, 0, 255, 0.6));"></div>
26
27 <br>
28
29 <p>These two rows should be identical</p>
30 <div class="box" style="background: radial-gradient(green, yellow);"></div>
31 <!-- <div class="box" style="background: radial-gradient(orange, rgba(0, 0, 255, 0.5));"></div> -->
32 <div class="box" style="background: radial-gradient(red, blue, green, cyan);"></div>
33 <!-- <div class="box" style="background: radial-gradient(circle at top right, orange, purple);"></div> -->
34
35 <br>
36
37 <div class="box" style="background: radial-gradient(green, yellow);"></div>
38 <!-- <div class="box" style="background: radial-gradient(orange, rgba(0, 0, 255, 0.5));"></div> -->
39 <div class="box" style="background: radial-gradient(red, blue, green, cyan);"></div>
40 <!-- <div class="box" style="background: radial-gradient(circle at top right, orange, purple);"></div> -->