Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(475)

Side by Side Diff: third_party/WebKit/LayoutTests/fast/gradients/repeating-conic-gradient.html

Issue 2908053002: CSS Conic Gradients: do not support unitless 0 angles (Closed)
Patch Set: Created 3 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 2
3 <style> 3 <style>
4 div { 4 div {
5 width: 200px; 5 width: 200px;
6 height: 200px; 6 height: 200px;
7 border: 1px solid grey; 7 border: 1px solid grey;
8 border-radius: 50%; 8 border-radius: 50%;
9 display: inline-block; 9 display: inline-block;
10 margin: 20px; 10 margin: 20px;
11 } 11 }
12 12
13 /* basic */ 13 /* basic */
14 .conic1 { 14 .conic1 {
15 background: #0ac repeating-conic-gradient(hsla(0,0%,100%,.2) 0, hsla(0,0%,100% ,.2) 15deg, hsla(0,0%,100%,0) 15deg, hsla(0,0%,100%,0) 30deg); 15 background: #0ac repeating-conic-gradient(hsla(0,0%,100%,.2) 0deg, hsla(0,0%,1 00%,.2) 15deg, hsla(0,0%,100%,0) 15deg, hsla(0,0%,100%,0) 30deg);
16 } 16 }
17 17
18 /* kitchen sink */ 18 /* kitchen sink */
19 .conic2 { 19 .conic2 {
20 background: 20 background:
21 radial-gradient(#000 3%, rgba(0,0,0,0.3) 10%, rgba(0,0,0,0) 30%), 21 radial-gradient(#000 3%, rgba(0,0,0,0.3) 10%, rgba(0,0,0,0) 30%),
22 conic-gradient(red, orange, lime, aqua, blue, magenta, red), 22 conic-gradient(red, orange, lime, aqua, blue, magenta, red),
23 radial-gradient(closest-side, #444 0%, #444 1%, #bbb 0%, #bbb 2%, #444 0%, # 444 4%, #bbb 0%, #bbb 8%, #444 0%, #444 16%, #bbb 0%, #bbb 32%, #444 0%, #444 64 %, #bbb 0%, #bbb 100%), 23 radial-gradient(closest-side, #444 0%, #444 1%, #bbb 0%, #bbb 2%, #444 0%, # 444 4%, #bbb 0%, #bbb 8%, #444 0%, #444 16%, #bbb 0%, #bbb 32%, #444 0%, #444 64 %, #bbb 0%, #bbb 100%),
24 repeating-conic-gradient(#bbb 0, #bbb 6.25%, #444 0, #444 12.5%); 24 repeating-conic-gradient(#bbb 0%, #bbb 6.25%, #444 0%, #444 12.5%);
25 background-blend-mode: normal, multiply, exclusion, normal; 25 background-blend-mode: normal, multiply, exclusion, normal;
26 } 26 }
27 27
28 /* out-of-range stops */ 28 /* out-of-range stops */
29 .conic3 { 29 .conic3 {
30 background: repeating-conic-gradient(red -100%, #0f0 -30%, blue 130%, red 200% ); 30 background: repeating-conic-gradient(red -100%, #0f0 -30%, blue 130%, red 200% );
31 } 31 }
32 32
33 /* same-phase, different ranges */ 33 /* same-phase, different ranges */
34 .conic4 { 34 .conic4 {
(...skipping 10 matching lines...) Expand all
45 45
46 </style> 46 </style>
47 47
48 <div class="conic1"></div> 48 <div class="conic1"></div>
49 <div class="conic2"></div> 49 <div class="conic2"></div>
50 <div class="conic3"></div> 50 <div class="conic3"></div>
51 <br> 51 <br>
52 <div class="conic4"></div> 52 <div class="conic4"></div>
53 <div class="conic5"></div> 53 <div class="conic5"></div>
54 <div class="conic6"></div> 54 <div class="conic6"></div>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698