| <!DOCTYPE html> |
| <html> |
| <head> |
| <style type="text/css" media="screen"> |
| body { overflow: hidden; } |
| .box { |
| display: inline-block; |
| height: 120px; |
| width: 201px; |
| margin: 10px; |
| border: 1px solid black; |
| background-repeat: no-repeat; |
| } |
| |
| .gradientAngle0 { |
| background-image: -webkit-linear-gradient(0deg, white, black); |
| } |
| |
| .gradientAngle90 { |
| background-image: -webkit-linear-gradient(90deg, white, black); |
| } |
| |
| .gradientAngle180 { |
| background-image: -webkit-linear-gradient(180deg, white, black); |
| } |
| |
| .gradientAngle270 { |
| background-image: -webkit-linear-gradient(270deg, white, black); |
| } |
| |
| .gradientAngleMinus0 { |
| background-image: -webkit-linear-gradient(-0deg, white, black); |
| } |
| |
| .gradientAngleMinus90 { |
| background-image: -webkit-linear-gradient(-90deg, white, black); |
| } |
| |
| .gradientAngleMinus180 { |
| background-image: -webkit-linear-gradient(-180deg, white, black); |
| } |
| |
| .gradientAngleMinus270 { |
| background-image: -webkit-linear-gradient(-270deg, white, black); |
| } |
| </style> |
| <script> |
| if (window.testRunner) { |
| testRunner.dumpAsTextWithPixelResults(); |
| } |
| </script> |
| </head> |
| <body> |
| <div class="box gradientAngle0"></div> |
| <div class="box gradientAngleMinus0"></div> |
| <br/> |
| <div class="box gradientAngle90"></div> |
| <div class="box gradientAngleMinus270"></div> |
| <br/> |
| <div class="box gradientAngle180"></div> |
| <div class="box gradientAngleMinus180"></div> |
| <br/> |
| <div class="box gradientAngle270"></div> |
| <div class="box gradientAngleMinus90"></div> |
| </body> |
| </html> |
