| <!DOCTYPE html> |
| |
| <html> |
| <head> |
| <style type="text/css" media="screen"> |
| .box { |
| display: inline-block; |
| height: 80px; |
| width: 80px; |
| margin: 2px; |
| border: 1px solid black; |
| background-repeat: no-repeat; |
| } |
| |
| .linear1_1 { |
| background-image: linear-gradient(to right, red -20%, green 50%); |
| } |
| |
| .linear1_2 { |
| background-image: linear-gradient(to right, green 50%, red 120%); |
| } |
| |
| .linear1_3 { |
| background-image: linear-gradient(to right, red -20%, green -10%); |
| } |
| |
| .linear1_4 { |
| background-image: linear-gradient(to right, red -10%, green -10%); |
| } |
| |
| .linear1_5 { |
| background-image: linear-gradient(to right, green 110%, red 120%); |
| } |
| |
| .linear1_6 { |
| background-image: linear-gradient(to right, green 110%, red 110%); |
| } |
| |
| .linear1_7 { |
| background-image: linear-gradient(to right, red -20%, green -10%, green 110%, red 120%); |
| } |
| |
| |
| .linear2_1 { |
| background-image: linear-gradient(to left bottom, red -20%, green 50%); |
| } |
| |
| .linear2_2 { |
| background-image: linear-gradient(to left bottom, green 50%, red 120%); |
| } |
| |
| .linear2_3 { |
| background-image: linear-gradient(to left bottom, red -20%, green -10%); |
| } |
| |
| .linear2_4 { |
| background-image: linear-gradient(to left bottom, red -10%, green -10%); |
| } |
| |
| .linear2_5 { |
| background-image: linear-gradient(to left bottom, green 110%, red 120%); |
| } |
| |
| .linear2_6 { |
| background-image: linear-gradient(to left bottom, green 110%, red 110%); |
| } |
| |
| .linear2_7 { |
| background-image: linear-gradient(to left bottom, red -20%, green -10%, green 110%, red 120%); |
| } |
| |
| |
| .linear3_1 { |
| background-image: repeating-linear-gradient(to right, red -30%, green -20%, red -10%); |
| } |
| |
| .linear3_2 { |
| background-image: repeating-linear-gradient(to right, red -10%, green 0%, red 10%); |
| } |
| |
| .linear3_3 { |
| background-image: repeating-linear-gradient(to right, red 90%, green 100%, red 110%); |
| } |
| |
| .linear3_4 { |
| background-image: repeating-linear-gradient(to right, red 110%, green 120%, red 130%); |
| } |
| |
| .linear3_5 { |
| background-image: repeating-linear-gradient(to right, red -20%, green -20%); |
| |
| } |
| |
| .linear3_6 { |
| background-image: repeating-linear-gradient(to right, red -20%, green 50%, green 100%, red 120%); |
| } |
| |
| .linear3_7 { |
| background-image: repeating-linear-gradient(to right, red -20%, green 0%, green 50%, red 120%); |
| } |
| |
| |
| |
| .linear4_1 { |
| background-image: repeating-linear-gradient(to left bottom, red -30%, green -20%, red -10%); |
| } |
| |
| .linear4_2 { |
| background-image: repeating-linear-gradient(to left bottom, red -10%, green 0%, red 10%); |
| } |
| |
| .linear4_3 { |
| background-image: repeating-linear-gradient(to left bottom, red 90%, green 100%, red 110%); |
| } |
| |
| .linear4_4 { |
| background-image: repeating-linear-gradient(to left bottom, red 110%, green 120%, red 130%); |
| } |
| |
| .linear4_5 { |
| background-image: repeating-linear-gradient(to left bottom, red -20%, green -20%); |
| |
| } |
| |
| .linear4_6 { |
| background-image: repeating-linear-gradient(to left bottom, red -20%, green 50%, green 100%, red 120%); |
| } |
| |
| .linear4_7 { |
| background-image: repeating-linear-gradient(to left bottom, red -20%, green 0%, green 50%, red 120%); |
| } |
| |
| .radial1_1 { |
| background-image: radial-gradient(red -50%, green 50%); |
| } |
| |
| .radial1_2 { |
| background-image: radial-gradient(green 50%, red 150%); |
| } |
| |
| .radial1_3 { |
| background-image: radial-gradient(red -20%, green -10%); |
| } |
| |
| .radial1_4 { |
| background-image: radial-gradient(red -10%, green -10%); |
| } |
| |
| .radial1_5 { |
| background-image: radial-gradient(green 110%, red 120%); |
| } |
| |
| .radial1_6 { |
| background-image: radial-gradient(green 110%, red 110%); |
| } |
| |
| .radial1_7 { |
| background-image: radial-gradient(red -20%, green -10%, green 110%, red 120%); |
| } |
| |
| |
| .radial2_1 { |
| background-image: repeating-radial-gradient(red -50%, green -40%, red -30%); |
| } |
| |
| .radial2_2 { |
| background-image: repeating-radial-gradient(red -10%, green 0%, red 10%); |
| } |
| |
| .radial2_3 { |
| background-image: repeating-radial-gradient(red 90%, green 100%, red 110%); |
| } |
| |
| .radial2_4 { |
| background-image: repeating-radial-gradient(red 130%, green 140%, red 150%); |
| } |
| |
| .radial2_5 { |
| background-image: repeating-radial-gradient(red -50%, green -50%); |
| } |
| |
| .radial2_6 { |
| background-image: repeating-radial-gradient(red -50%, green 50%, green 100%, red 120%); |
| } |
| |
| .radial2_7 { |
| background-image: repeating-radial-gradient(red -20%, green 0%, green 50%, red 150%); |
| } |
| </style> |
| <script type="text/javascript" charset="utf-8"> |
| if (window.testRunner) { |
| testRunner.dumpAsTextWithPixelResults(); |
| } |
| </script> |
| </head> |
| <body> |
| |
| <div class="linear1_1 box"></div> |
| <div class="linear1_2 box"></div> |
| <div class="linear1_3 box"></div> |
| <div class="linear1_4 box"></div> |
| <div class="linear1_5 box"></div> |
| <div class="linear1_6 box"></div> |
| <div class="linear1_7 box"></div> |
| <br> |
| |
| <div class="linear2_1 box"></div> |
| <div class="linear2_2 box"></div> |
| <div class="linear2_3 box"></div> |
| <div class="linear2_4 box"></div> |
| <div class="linear2_5 box"></div> |
| <div class="linear2_6 box"></div> |
| <div class="linear2_7 box"></div> |
| <br> |
| |
| <div class="radial1_1 box"></div> |
| <div class="radial1_2 box"></div> |
| <div class="radial1_3 box"></div> |
| <div class="radial1_4 box"></div> |
| <div class="radial1_5 box"></div> |
| <div class="radial1_6 box"></div> |
| <div class="radial1_7 box"></div> |
| <br> |
| |
| <div class="linear3_1 box"></div> |
| <div class="linear3_2 box"></div> |
| <div class="linear3_3 box"></div> |
| <div class="linear3_4 box"></div> |
| <div class="linear3_5 box"></div> |
| <div class="linear3_6 box"></div> |
| <div class="linear3_7 box"></div> |
| <br> |
| |
| <div class="linear4_1 box"></div> |
| <div class="linear4_2 box"></div> |
| <div class="linear4_3 box"></div> |
| <div class="linear4_4 box"></div> |
| <div class="linear4_5 box"></div> |
| <div class="linear4_6 box"></div> |
| <div class="linear4_7 box"></div> |
| <br> |
| |
| <div class="radial2_1 box"></div> |
| <div class="radial2_2 box"></div> |
| <div class="radial2_3 box"></div> |
| <div class="radial2_4 box"></div> |
| <div class="radial2_5 box"></div> |
| <div class="radial2_6 box"></div> |
| <div class="radial2_7 box"></div> |
| <br> |
| </body> |
| </html> |
