OLD | NEW |
(Empty) | |
| 1 <style> |
| 2 div { |
| 3 width: 80px; |
| 4 height: 80px; |
| 5 border: 1px solid grey; |
| 6 display: inline-block; |
| 7 margin: 5px; |
| 8 } |
| 9 |
| 10 .reference1 { |
| 11 background: conic-gradient(rgb(0%, 75%, 25%), rgb(0%, 25%, 75%)); |
| 12 } |
| 13 |
| 14 .c1 { |
| 15 background: conic-gradient(rgb(0%, 75%, 25%), rgb(0%, 0%, 100%) 150%); |
| 16 } |
| 17 |
| 18 .c2 { |
| 19 background: conic-gradient(rgb(0%, 100%, 0%) -50%, rgb(0%, 25%, 75%)); |
| 20 } |
| 21 |
| 22 .c3 { |
| 23 background: conic-gradient(rgb(0%, 100%, 0%) -50%, rgb(0%, 0%, 100%) 150%); |
| 24 } |
| 25 |
| 26 .c4 { |
| 27 background: repeating-conic-gradient(rgb(0%, 75%, 25%), rgb(0%, 25%, 75%)); |
| 28 } |
| 29 |
| 30 .c5 { |
| 31 background: repeating-conic-gradient(rgb(0%, 100%, 0%) -50%, rgb(0%, 25%, 75%)
); |
| 32 } |
| 33 |
| 34 .c6 { |
| 35 background: repeating-conic-gradient(rgb(0%, 75%, 25%), rgb(0%, 0%, 100%) 150%
); |
| 36 } |
| 37 |
| 38 .c7 { |
| 39 background: repeating-conic-gradient(rgb(0%, 100%, 0%) -50%, rgb(0%, 0%, 100%)
150%); |
| 40 } |
| 41 |
| 42 .reference2 { |
| 43 background: repeating-conic-gradient(#0f0 20deg, yellow 50deg, blue 70deg, #0f
0 140deg); |
| 44 } |
| 45 |
| 46 .c8 { |
| 47 background: repeating-conic-gradient(blue -50deg, #0f0 20deg, yellow 50deg, bl
ue 70deg); |
| 48 } |
| 49 |
| 50 .c9 { |
| 51 background: repeating-conic-gradient(yellow -70deg, blue -50deg, #0f0 20deg, y
ellow 50deg); |
| 52 } |
| 53 |
| 54 .c10 { |
| 55 background: repeating-conic-gradient(#0f0 -100deg, yellow -70deg, blue -50deg,
#0f0 20deg); |
| 56 } |
| 57 |
| 58 .c11 { |
| 59 background: repeating-conic-gradient(blue -170deg, #0f0 -100deg, yellow -70deg
, blue -50deg); |
| 60 } |
| 61 |
| 62 .c12 { |
| 63 background: repeating-conic-gradient(#0f0 260deg, yellow 290deg, blue 310deg,
#0f0 380deg); |
| 64 } |
| 65 |
| 66 .c13 { |
| 67 background: repeating-conic-gradient(yellow 290deg, blue 310deg, #0f0 380deg,
yellow 410deg); |
| 68 } |
| 69 |
| 70 .c14 { |
| 71 background: repeating-conic-gradient(blue 310deg, #0f0 380deg, yellow 410deg,
blue 430deg); |
| 72 } |
| 73 |
| 74 </style> |
| 75 |
| 76 <p>All gradients in a row should render the same.</p> |
| 77 |
| 78 <div class="reference1"></div> |
| 79 <div class="c1"></div> |
| 80 <div class="c2"></div> |
| 81 <div class="c3"></div> |
| 82 <div class="c4"></div> |
| 83 <div class="c5"></div> |
| 84 <div class="c6"></div> |
| 85 <div class="c7"></div> |
| 86 <br> |
| 87 |
| 88 <div class="reference2"></div> |
| 89 <div class="c8"></div> |
| 90 <div class="c9"></div> |
| 91 <div class="c10"></div> |
| 92 <div class="c11"></div> |
| 93 <div class="c12"></div> |
| 94 <div class="c13"></div> |
| 95 <div class="c14"></div> |
| 96 |
OLD | NEW |