webkit-gradient-approx-radial-1.html (2524B)
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 which we don't render 10 quite correctly because they can't easily be represented with modern syntax. 11 </title> 12 <style> 13 div { 14 border: 1px solid black; 15 width: 50px; 16 height: 40px; 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 <!-- Inner circle has nonzero radius: --> 29 <div style="background: -webkit-gradient(radial, 30 left top, 10, left top, 40, 31 from(blue), to(yellow))"></div> 32 <div style="background: -webkit-gradient(radial, 33 center center, 50, center center, 40, 34 from(blue), to(yellow))"></div> 35 <br> 36 37 <!-- Both circles have the same radius: --> 38 <div style="background: -webkit-gradient(radial, 39 center center, 40, center center, 40, 40 from(blue), to(yellow))"></div> 41 <div style="background: -webkit-gradient(radial, 42 10 10, 10, 10 10, 10, 43 from(blue), to(yellow))"></div> 44 <br> 45 46 <!-- Inner circle has different center than outer circle: --> 47 <div style="background: -webkit-gradient(radial, 48 left bottom, 0, left top, 40, 49 from(blue), to(yellow))"></div> 50 <div style="background: -webkit-gradient(radial, 51 10 20, 40, 30 10, 5, 52 from(blue), to(yellow))"></div> 53 <br> 54 55 <!-- Inner circle and outer circle do not even intersect: --> 56 <div style="background: -webkit-gradient(radial, 57 10 10, 5, 30 10, 10, 58 from(blue), to(yellow))"></div> 59 <div style="background: -webkit-gradient(radial, 60 -50 10, 5, 150 10, 30, 61 from(blue), to(yellow))"></div> 62 63 </body> 64 </html>