webkit-gradient-linear-2.html (3906B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <title> 9 CSS Test: -webkit-gradient(linear, ...) expressions with special cases 10 for color stops. 11 </title> 12 <style> 13 div { 14 border: 1px solid black; 15 width: 30px; 16 height: 50px; 17 margin: 1px; 18 float: left; 19 20 /* We include a fallback background, to easily distinguish failures at 21 * parse time (which fall back to this value) vs. something later on. */ 22 background: red; 23 } 24 br { clear: both; } 25 </style> 26 </head> 27 <body> 28 <!-- No color stops (transparent): --> 29 <div style="background: -webkit-gradient(linear, left center, right center 30 )"></div> 31 <!-- Add another background to be sure we're transparent, not white: --> 32 <div style="background: linear-gradient(to right, pink, purple), 33 -webkit-gradient(linear, left center, right center)"></div> 34 <br> 35 36 <!-- One color stop, at various positions (renders as solid color): --> 37 <div style="background: -webkit-gradient(linear, left center, right center, 38 from(blue))"></div> 39 <div style="background: -webkit-gradient(linear, left center, right center, 40 to(blue))"></div> 41 <div style="background: -webkit-gradient(linear, left center, right center, 42 color-stop(30%, blue))"></div> 43 <div style="background: -webkit-gradient(linear, left center, right center, 44 color-stop(1.5, blue))"></div> 45 <br> 46 47 <!-- Two color stops, both at the same position: --> 48 <div style="background: -webkit-gradient(linear, left center, right center, 49 from(blue), from(yellow))"></div> 50 <div style="background: -webkit-gradient(linear, left center, right center, 51 to(blue), to(yellow))"></div> 52 <div style="background: -webkit-gradient(linear, left center, right center, 53 color-stop(30%, blue), 54 color-stop(30%, yellow))"></div> 55 <div style="background: -webkit-gradient(linear, left center, right center, 56 color-stop(-1.5, blue), 57 color-stop(-1.5, yellow))"></div> 58 <div style="background: -webkit-gradient(linear, left center, right center, 59 color-stop(4.5, blue), 60 color-stop(4.5, yellow))"></div> 61 <br> 62 63 <!-- Color stops out of order & need (stable) sorting: --> 64 <div style="background: -webkit-gradient(linear, left center, right center, 65 to(yellow), from(blue))"></div> 66 <div style="background: -webkit-gradient(linear, left center, right center, 67 to(yellow), from(blue), 68 from(salmon))"></div> 69 <div style="background: -webkit-gradient(linear, left center, right center, 70 from(salmon), to(yellow), 71 from(blue))"></div> 72 <div style="background: -webkit-gradient(linear, left center, right center, 73 from(salmon), to(yellow), 74 from(orange), to(gray), from(blue))"></div> 75 <div style="background: -webkit-gradient(linear, left center, right center, 76 color-stop(0.8, salmon), 77 from(black), from(yellow), 78 to(blue), to(gray))"></div> 79 </body> 80 </html>