webkit-gradient-radial-1b.html (5500B)
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(radial, ...) expressions, 10 with 0-sized inner circle listed second 11 </title> 12 <style> 13 div { 14 border: 1px solid black; 15 width: 40px; 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 <!-- left top: --> 29 <div style="background: -webkit-gradient(radial, 30 left top, 40, left top, 0, 31 from(yellow), to(blue))"></div> 32 <div style="background: -webkit-gradient(radial, 33 left top, 40, left top, 0, 34 from(yellow), 35 color-stop(0.7, pink), 36 to(blue))"></div> 37 <!-- center top: --> 38 <div style="background: -webkit-gradient(radial, 39 center top, 40, center top, 0, 40 from(yellow), to(blue))"></div> 41 <div style="background: -webkit-gradient(radial, 42 center top, 40, center top, 0, 43 from(yellow), 44 color-stop(0.7, pink), 45 to(blue))"></div> 46 <!-- right top: --> 47 <div style="background: -webkit-gradient(radial, 48 right top, 40, right top, 0, 49 from(yellow), to(blue))"></div> 50 <div style="background: -webkit-gradient(radial, 51 right top, 40, right top, 0, 52 from(yellow), 53 color-stop(0.7, pink), 54 to(blue))"></div> 55 <br> 56 57 <!-- left center: --> 58 <div style="background: -webkit-gradient(radial, 59 left center, 40, left center, 0, 60 from(yellow), to(blue))"></div> 61 <div style="background: -webkit-gradient(radial, 62 left center, 40, left center, 0, 63 from(yellow), 64 color-stop(0.7, pink), 65 to(blue))"></div> 66 <!-- center center: --> 67 <div style="background: -webkit-gradient(radial, 68 center center, 40, center center, 0, 69 from(yellow), to(blue))"></div> 70 <div style="background: -webkit-gradient(radial, 71 center center, 40, center center, 0, 72 from(yellow), 73 color-stop(0.7, pink), 74 to(blue))"></div> 75 <!-- right center: --> 76 <div style="background: -webkit-gradient(radial, 77 right center, 40, right center, 0, 78 from(yellow), to(blue))"></div> 79 <div style="background: -webkit-gradient(radial, 80 right center, 40, right center, 0, 81 from(yellow), 82 color-stop(0.7, pink), 83 to(blue))"></div> 84 <br> 85 86 <!-- left bottom: --> 87 <div style="background: -webkit-gradient(radial, 88 left bottom, 40, left bottom, 0, 89 from(yellow), to(blue))"></div> 90 <div style="background: -webkit-gradient(radial, 91 left bottom, 40, left bottom, 0, 92 from(yellow), 93 color-stop(0.7, pink), 94 to(blue))"></div> 95 <!-- center bottom: --> 96 <div style="background: -webkit-gradient(radial, 97 center bottom, 40, center bottom, 0, 98 from(yellow), to(blue))"></div> 99 <div style="background: -webkit-gradient(radial, 100 center bottom, 40, center bottom, 0, 101 from(yellow), 102 color-stop(0.7, pink), 103 to(blue))"></div> 104 <!-- right bottom: --> 105 <div style="background: -webkit-gradient(radial, 106 right bottom, 40, right bottom, 0, 107 from(yellow), to(blue))"></div> 108 <div style="background: -webkit-gradient(radial, 109 right bottom, 40, right bottom, 0, 110 from(yellow), 111 color-stop(0.7, pink), 112 to(blue))"></div> 113 </body> 114 </html>