Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / fast / gradients / css3-repeating-linear-gradients.html
blob6c62a8d11f7b682344b164befdf8cd5360d39316
1 <!DOCTYPE html>
3 <html>
4 <head>
5 <style type="text/css" media="screen">
6 .box {
7 display: inline-block;
8 height: 120px;
9 width: 200px;
10 margin: 10px;
11 border: 1px solid black;
12 background-repeat: no-repeat;
15 .linear1 {
16 background-image: -webkit-repeating-linear-gradient(white, black 20%);
17 background-image: -moz-repeating-linear-gradient(white, black 20%);
20 .linear2 {
21 background-image: -webkit-repeating-linear-gradient(white 80%, black);
22 background-image: -moz-repeating-linear-gradient(white 80%, black);
25 .linear3 {
26 background-image: -webkit-repeating-linear-gradient(top left, red, blue 20px, red 40px);
27 background-image: -moz-repeating-linear-gradient(top left, red, blue 20px, red 40px);
30 .linear4 {
31 background-image: -webkit-repeating-linear-gradient(left, red 10%, blue 30%);
32 background-image: -moz-repeating-linear-gradient(left, red 10%, blue 30%);
35 .linear5 {
36 background-image: -webkit-repeating-linear-gradient(left, red -10%, blue -5%);
37 background-image: -moz-repeating-linear-gradient(left, red -10%, blue -5%);
40 .linear6 {
41 background-image: -webkit-repeating-linear-gradient(left, red -10%, blue 105%);
42 background-image: -moz-repeating-linear-gradient(left, red -10%, blue 105%);
45 .linear7 {
46 background-image: -webkit-repeating-linear-gradient(left, red 90%, blue 105%);
47 background-image: -moz-repeating-linear-gradient(left, red 90%, blue 105%);
50 .linear8 {
51 background-image: -webkit-repeating-linear-gradient(left, red 2em, blue 3em);
52 background-image: -moz-repeating-linear-gradient(left, red 2em, blue 3em);
55 .linear9 {
56 background-image: -webkit-repeating-linear-gradient(left, red, orange, yellow, green, blue, red 60px);
57 background-image: -moz-repeating-linear-gradient(left, red, orange, yellow, green, blue, red 60px);
60 </style>
61 <script type="text/javascript" charset="utf-8">
62 if (window.testRunner) {
63 testRunner.dumpAsTextWithPixelResults();
65 </script>
66 </head>
67 <body>
69 <div class="linear1 box"></div>
70 <div class="linear2 box"></div>
71 <div class="linear3 box"></div>
72 <br>
73 <div class="linear4 box"></div>
74 <div class="linear5 box"></div>
75 <div class="linear6 box"></div>
76 <br>
77 <div class="linear7 box"></div>
78 <div class="linear8 box"></div>
79 <div class="linear9 box"></div>
81 </body>
82 </html>