webkit-gradient-linear-1d.html (2498B)
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, 10 from the an arbitrary spot along each side to the same arbitrary 11 place on opposite side. 12 </title> 13 <style> 14 div { 15 border: 1px solid black; 16 width: 100px; 17 height: 50px; 18 margin: 1px; 19 float: left; 20 21 /* We include a fallback background, to easily distinguish failures at 22 * parse time (which fall back to this value) vs. something later on. */ 23 background: red; 24 } 25 br { clear: both; } 26 </style> 27 </head> 28 <body> 29 <!-- Left to right gradients: --> 30 <div style="background: -webkit-gradient(linear, left 25%, right 25%, 31 from(blue), to(yellow))"></div> 32 33 <div style="background: -webkit-gradient(linear, left -123%, right -123%, 34 from(blue), 35 color-stop(0.3, pink), 36 to(yellow))"></div> 37 <br> 38 39 <!-- Right to left gradients: --> 40 <div style="background: -webkit-gradient(linear, right -10, left -10, 41 from(blue), to(yellow))"></div> 42 <div style="background: -webkit-gradient(linear, right 9999, left 9999, 43 from(blue), 44 color-stop(0.3, pink), 45 to(yellow))"></div> 46 <br> 47 48 <!-- Top to bottom gradients: --> 49 <div style="background: -webkit-gradient(linear, 1.11 top, 1.11 bottom, 50 from(blue), to(yellow))"></div> 51 52 <div style="background: -webkit-gradient(linear, -56.78 top, -56.78 bottom, 53 from(blue), 54 color-stop(0.3, pink), 55 to(yellow))"></div> 56 <br> 57 58 <!-- Bottom to top gradients: --> 59 <div style="background: -webkit-gradient(linear, -0 bottom, 0 top, 60 from(blue), to(yellow))"></div> 61 62 <div style="background: -webkit-gradient(linear, 0% bottom, -0% top, 63 from(blue), 64 color-stop(0.3, pink), 65 to(yellow))"></div> 66 </body> 67 </html>