Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 237 lines (217 sloc) 11.139 kb
00e2862 Add test file for linear gradients
Jason Johnston authored
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5 <title>Tests for background gradients</title>
6
7 <style type="text/css">
8
9 .section {
10 display: block;
11 border: 1px solid #CCC;
12 margin: 2em 1em;
13 overflow: hidden;
14 background:url(border.png);
15 position: relative;
c5352d1 Fix for issue #64: Prevent rounding in BgPosition calculation and add sp...
Jason Johnston authored
16 z-index: 0;
9d5402e Fix layout of gradient test page in ie6
Jason Johnston authored
17 zoom: 1;
00e2862 Add test file for linear gradients
Jason Johnston authored
18 }
19
20 h1 {
21 font-size: 1em;
22 margin: 1em;
23 }
24
25 p {
26 float: left;
27 padding: 1em;
28 width: 15%;
29 height: 8em;
30 border: 1px solid;
31 margin: 1em;
32 color: #000;
33 text-shadow: #FFF 0 0 2px;
34 -moz-border-radius: 1em;
35 -webkit-border-radius: 1em;
36 border-radius: 1em;
3e71920 Split the monolithic PIE.htc into separate source files per class/compon...
Jason Johnston authored
37 behavior: url(../build/PIE.htc);
00e2862 Add test file for linear gradients
Jason Johnston authored
38 }
39
40 #vert1 {
d69817f Add webkit linear gradient equivalents to test document; the syntaxes ar...
Jason Johnston authored
41 background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(blue));
00e2862 Add test file for linear gradients
Jason Johnston authored
42 background: -moz-linear-gradient(top, yellow, blue);
43 -pie-background: linear-gradient(top, yellow, blue);
44 }
45 #vert2 {
d69817f Add webkit linear gradient equivalents to test document; the syntaxes ar...
Jason Johnston authored
46 background: -webkit-gradient(linear, left bottom, left top, from(blue), to(yellow));
00e2862 Add test file for linear gradients
Jason Johnston authored
47 background: -moz-linear-gradient(bottom, blue, yellow);
48 -pie-background: linear-gradient(bottom, blue, yellow);
49 }
50 #vert3 {
d69817f Add webkit linear gradient equivalents to test document; the syntaxes ar...
Jason Johnston authored
51 background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(blue));
00e2862 Add test file for linear gradients
Jason Johnston authored
52 background: -moz-linear-gradient(-90deg, yellow, blue);
53 -pie-background: linear-gradient(-90deg, yellow, blue);
54 }
55 #vert4 {
d69817f Add webkit linear gradient equivalents to test document; the syntaxes ar...
Jason Johnston authored
56 background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(blue));
00e2862 Add test file for linear gradients
Jason Johnston authored
57 background: -moz-linear-gradient(270deg, yellow, blue);
58 -pie-background: linear-gradient(270deg, yellow, blue);
59 }
60 #vert5 {
d69817f Add webkit linear gradient equivalents to test document; the syntaxes ar...
Jason Johnston authored
61 background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(blue));
00e2862 Add test file for linear gradients
Jason Johnston authored
62 background: -moz-linear-gradient(top, yellow 0%, blue 100%);
63 -pie-background: linear-gradient(top, yellow 0%, blue 100%);
64 }
65 #vert6 {
d69817f Add webkit linear gradient equivalents to test document; the syntaxes ar...
Jason Johnston authored
66 background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(blue));
00e2862 Add test file for linear gradients
Jason Johnston authored
67 background: -moz-linear-gradient(center top, yellow, blue);
68 -pie-background: linear-gradient(center top, yellow, blue);
69 }
70 #vert7 {
d69817f Add webkit linear gradient equivalents to test document; the syntaxes ar...
Jason Johnston authored
71 background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(blue));
00e2862 Add test file for linear gradients
Jason Johnston authored
72 background: -moz-linear-gradient(yellow, blue);
73 -pie-background: linear-gradient(yellow, blue);
74 }
75
76 #horiz1 {
d69817f Add webkit linear gradient equivalents to test document; the syntaxes ar...
Jason Johnston authored
77 background: -webkit-gradient(linear, left top, right top, from(yellow), to(blue));
00e2862 Add test file for linear gradients
Jason Johnston authored
78 background: -moz-linear-gradient(left, yellow, blue);
79 -pie-background: linear-gradient(left, yellow, blue);
80 }
81 #horiz2 {
d69817f Add webkit linear gradient equivalents to test document; the syntaxes ar...
Jason Johnston authored
82 background: -webkit-gradient(linear, right top, left top, from(blue), to(yellow));
00e2862 Add test file for linear gradients
Jason Johnston authored
83 background: -moz-linear-gradient(right, blue, yellow);
84 -pie-background: linear-gradient(right, blue, yellow);
85 }
86 #horiz3 {
d69817f Add webkit linear gradient equivalents to test document; the syntaxes ar...
Jason Johnston authored
87 background: -webkit-gradient(linear, left top, right top, from(yellow), to(blue));
00e2862 Add test file for linear gradients
Jason Johnston authored
88 background: -moz-linear-gradient(0, yellow, blue);
89 -pie-background: linear-gradient(0, yellow, blue);
90 }
91 #horiz4 {
d69817f Add webkit linear gradient equivalents to test document; the syntaxes ar...
Jason Johnston authored
92 background: -webkit-gradient(linear, left top, right top, from(yellow), to(blue));
00e2862 Add test file for linear gradients
Jason Johnston authored
93 background: -moz-linear-gradient(360deg, yellow, blue);
94 -pie-background: linear-gradient(360deg, yellow, blue);
95 }
96 #horiz5 {
d69817f Add webkit linear gradient equivalents to test document; the syntaxes ar...
Jason Johnston authored
97 background: -webkit-gradient(linear, left top, right top, from(yellow), to(blue));
00e2862 Add test file for linear gradients
Jason Johnston authored
98 background: -moz-linear-gradient(left, yellow 0%, blue 100%);
99 -pie-background: linear-gradient(left, yellow 0%, blue 100%);
100 }
101 #horiz6 {
d69817f Add webkit linear gradient equivalents to test document; the syntaxes ar...
Jason Johnston authored
102 background: -webkit-gradient(linear, left top, right top, from(yellow), to(blue));
00e2862 Add test file for linear gradients
Jason Johnston authored
103 background: -moz-linear-gradient(left center, yellow, blue);
104 -pie-background: linear-gradient(left center, yellow, blue);
105 }
106
107
108 #diag1 {
d69817f Add webkit linear gradient equivalents to test document; the syntaxes ar...
Jason Johnston authored
109 background: -webkit-gradient(linear, left top, right bottom, from(yellow), to(blue));
00e2862 Add test file for linear gradients
Jason Johnston authored
110 background: -moz-linear-gradient(top left, yellow, blue);
111 -pie-background: linear-gradient(top left, yellow, blue);
112 }
113 #diag2 {
d69817f Add webkit linear gradient equivalents to test document; the syntaxes ar...
Jason Johnston authored
114 background: -webkit-gradient(linear, left top, right bottom, from(yellow), to(blue));
00e2862 Add test file for linear gradients
Jason Johnston authored
115 background: -moz-linear-gradient(0 0, yellow, blue);
116 -pie-background: linear-gradient(0 0, yellow, blue);
117 }
118 #diag3 {
d69817f Add webkit linear gradient equivalents to test document; the syntaxes ar...
Jason Johnston authored
119 background: -webkit-gradient(linear, left top, right bottom, from(yellow), to(blue));
00e2862 Add test file for linear gradients
Jason Johnston authored
120 background: -moz-linear-gradient(top 0px left 0px, yellow, blue);
121 -pie-background: linear-gradient(top 0px left 0px, yellow, blue);
122 }
123 #diag4 {
d69817f Add webkit linear gradient equivalents to test document; the syntaxes ar...
Jason Johnston authored
124 background: -webkit-gradient(linear, right bottom, left top, from(blue), to(yellow));
00e2862 Add test file for linear gradients
Jason Johnston authored
125 background: -moz-linear-gradient(bottom right, blue, yellow);
126 -pie-background: linear-gradient(bottom right, blue, yellow);
127 }
128 #diag5 {
d69817f Add webkit linear gradient equivalents to test document; the syntaxes ar...
Jason Johnston authored
129 background: -webkit-gradient(linear, left top, right bottom, from(yellow), to(blue));
00e2862 Add test file for linear gradients
Jason Johnston authored
130 background: -moz-linear-gradient(-45deg, yellow, blue);
131 -pie-background: linear-gradient(-45deg, yellow, blue);
132 }
133 #diag6 {
d69817f Add webkit linear gradient equivalents to test document; the syntaxes ar...
Jason Johnston authored
134 background: -webkit-gradient(linear, left top, right bottom, from(yellow), to(blue));
00e2862 Add test file for linear gradients
Jason Johnston authored
135 background: -moz-linear-gradient(315deg, yellow, blue);
136 -pie-background: linear-gradient(315deg, yellow, blue);
137 }
138
139
140 #multi1 {
d69817f Add webkit linear gradient equivalents to test document; the syntaxes ar...
Jason Johnston authored
141 background: -webkit-gradient(linear, left top, left bottom, from(yellow), color-stop(0.2, blue), to(#0f0));
00e2862 Add test file for linear gradients
Jason Johnston authored
142 background: -moz-linear-gradient(top, yellow, blue 20%, #0f0);
143 -pie-background: linear-gradient(top, yellow, blue 20%, #0f0);
144 }
145 #multi2 {
d69817f Add webkit linear gradient equivalents to test document; the syntaxes ar...
Jason Johnston authored
146 background: -webkit-gradient(linear, left top, right top, from(yellow), color-stop(0.2, blue), to(#0f0));
00e2862 Add test file for linear gradients
Jason Johnston authored
147 background: -moz-linear-gradient(left, yellow, blue 20%, #0f0);
148 -pie-background: linear-gradient(left, yellow, blue 20%, #0f0);
149 }
150 #multi3 {
d69817f Add webkit linear gradient equivalents to test document; the syntaxes ar...
Jason Johnston authored
151 background: -webkit-gradient(linear, left top, left bottom, color-stop(0.3, yellow), color-stop(0.5, blue), color-stop(0.7, green));
00e2862 Add test file for linear gradients
Jason Johnston authored
152 background: -moz-linear-gradient(top, yellow 30%, blue 50%, green 70%);
153 -pie-background: linear-gradient(top, yellow 30%, blue 50%, green 70%);
154 }
155 #multi4 {
d69817f Add webkit linear gradient equivalents to test document; the syntaxes ar...
Jason Johnston authored
156 background: -webkit-gradient(linear, left top, right top, color-stop(0.5, yellow), color-stop(0.75, blue), to(green));
00e2862 Add test file for linear gradients
Jason Johnston authored
157 background: -moz-linear-gradient(left, yellow 50%, blue, green);
158 -pie-background: linear-gradient(left, yellow 50%, blue, green);
159 }
160 #multi5 {
d69817f Add webkit linear gradient equivalents to test document; the syntaxes ar...
Jason Johnston authored
161 background: -webkit-gradient(linear, left top, right top, from(aqua), color-stop(.0667, black), color-stop(.1333, blue), color-stop(.2, fuchsia), color-stop(.2667, gray), color-stop(.3333, green), color-stop(.4, lime), color-stop(.4667, maroon), color-stop(.5333, navy), color-stop(.6, olive), color-stop(.6667, purple), color-stop(.7333, red), color-stop(.8, silver), color-stop(.8667, teal), color-stop(.9333, white), to(yellow));
00e2862 Add test file for linear gradients
Jason Johnston authored
162 background: -moz-linear-gradient(left, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow );
163 -pie-background: linear-gradient(left, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow );
164 }
165 #multi6 {
d69817f Add webkit linear gradient equivalents to test document; the syntaxes ar...
Jason Johnston authored
166 background: -webkit-gradient(linear, left bottom, right top, from(red), color-stop(0.333, yellow), color-stop(.667, green), to(blue));
00e2862 Add test file for linear gradients
Jason Johnston authored
167 background: -moz-linear-gradient(45deg, red, yellow, green, blue);
168 -pie-background: linear-gradient(45deg, red, yellow, green, blue);
169 }
170
c5352d1 Fix for issue #64: Prevent rounding in BgPosition calculation and add sp...
Jason Johnston authored
171 #lineup p {
172 border: 0;
173 width: 40%;
174 height: 50px;
175 margin-right: 0;
176 border-radius: 0;
177 background: -moz-linear-gradient(center bottom,rgb(170,222,249) 0%,rgb(63,158,210) 100%);
178 -pie-background: linear-gradient(center bottom,rgb(170,222,249) 0%,rgb(63,158,210) 100%);
179 }
180 #lineup2 {
181 margin-left: 0;
182 }
00e2862 Add test file for linear gradients
Jason Johnston authored
183
184
185 </style>
186 </head>
187 <body>
188
189 <div class="section" id="vertTests">
190 <h1>Basic vertical linear gradient</h1>
191 <p id="vert1">linear-gradient( top, yellow, blue);</p>
192 <p id="vert2">linear-gradient( bottom, blue, yellow);</p>
193 <p id="vert3">linear-gradient( -90deg, yellow, blue);</p>
194 <p id="vert4">linear-gradient( 270deg, yellow, blue);</p>
195 <p id="vert5">linear-gradient( top, yellow 0%, blue 100%);</p>
196 <p id="vert6">linear-gradient( center top, yellow, blue);</p>
197 <p id="vert7">linear-gradient( yellow, blue);</p>
198 </div>
199
200 <div class="section" id="horizTests">
201 <h1>Basic horizontal linear gradient</h1>
202 <p id="horiz1">linear-gradient( left, yellow, blue);</p>
203 <p id="horiz2">linear-gradient( right, blue, yellow);</p>
204 <p id="horiz3">linear-gradient( 0, yellow, blue);</p>
205 <p id="horiz4">linear-gradient( 360deg, yellow, blue);</p>
206 <p id="horiz5">linear-gradient( left, yellow 0%, blue 100%);</p>
207 <p id="horiz6">linear-gradient( left center, yellow, blue);</p>
208 </div>
209
210 <div class="section" id="diagTests">
211 <h1>Basic diagonal linear gradient</h1>
212 <p id="diag1">linear-gradient(top left, yellow, blue);</p>
213 <p id="diag2">linear-gradient(0 0, yellow, blue);</p>
214 <p id="diag3">linear-gradient(top 0px left 0px, yellow, blue);</p>
215 <p id="diag4">linear-gradient(bottom right, blue, yellow);</p>
216 <p id="diag5">linear-gradient(-45deg, yellow, blue);</p>
217 <p id="diag6">linear-gradient(315deg, yellow, blue);</p>
218 </div>
219
220 <div class="section" id="multiStopTests">
221 <h1>Multiple color stops along linear gradient</h1>
222 <p id="multi1">linear-gradient(top, yellow, blue 20%, #0f0)</p>
223 <p id="multi2">linear-gradient(left, yellow, blue 20%, #0f0)</p>
224 <p id="multi3">linear-gradient(top, yellow 30%, blue 50%, green 70%)</p>
225 <p id="multi4">linear-gradient(left, yellow 50%, blue, green)</p>
226 <p id="multi5">linear-gradient(left, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow );</p>
227 <p id="multi6">linear-gradient(45deg, red, yellow, green, blue);</p>
228 </div>
229
c5352d1 Fix for issue #64: Prevent rounding in BgPosition calculation and add sp...
Jason Johnston authored
230 <div class="section" id="lineup">
231 <h1>Lining up (<a href="http://github.com/lojjic/PIE/issues/issue/64">issue 64</a>)</h1>
232 <p id="lineup1">element 1</p>
233 <p id="lineup2">element 2</p>
234 </div>
235
00e2862 Add test file for linear gradients
Jason Johnston authored
236 </body>
237 </html>
Something went wrong with that request. Please try again.