Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / fast / gradients / unprefixed-repeating-radial-gradients.html
blob9bc685955c4f93744e88015061506ac8109db856
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 .radial1 {
16 background-image: repeating-radial-gradient(white, black 20%);
19 .radial2 {
20 background-image: repeating-radial-gradient(white 80%, black);
23 .radial3 {
24 background-image: repeating-radial-gradient(at top left, red, blue 20px, red 40px);
27 .radial4 {
28 background-image: repeating-radial-gradient(at bottom left, red 10%, blue 30%);
31 .radial5 {
32 background-image: repeating-radial-gradient(at left, red -10%, blue -5%);
35 .radial6 {
36 background-image: repeating-radial-gradient(at left, red -10%, blue 105%);
39 .radial7 {
40 background-image: repeating-radial-gradient(at left, red 90%, blue 105%);
43 .radial8 {
44 background-image: repeating-radial-gradient(at top, red 2em, blue 3em);
47 .radial9 {
48 background-image: repeating-radial-gradient(circle at left, red, orange, yellow, green, blue, red 60px);
51 </style>
52 <script>
53 if (window.testRunner) {
54 testRunner.dumpAsTextWithPixelResults();
56 </script>
57 </head>
58 <body>
60 <div class="radial1 box"></div>
61 <div class="radial2 box"></div>
62 <div class="radial3 box"></div>
63 <br>
64 <div class="radial4 box"></div>
65 <div class="radial5 box"></div>
66 <div class="radial6 box"></div>
67 <br>
68 <div class="radial7 box"></div>
69 <div class="radial8 box"></div>
70 <div class="radial9 box"></div>
72 </body>
73 </html>