• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/* PERCENTAGE_LENGTH_VALIDATOR_test */
2.a {
3  width: 100%;
4  height: 50%;
5}
6
7/* ENGTH_VALIDATOR_test */
8.b {
9  width: 100px;
10  height: 200px;
11}
12
13/* COLOR_VALIDATOR_test_1 */
14.c {
15  color: #808080;
16}
17
18/* COLOR_VALIDATOR_test_2 */
19.d {
20  color: green;
21}
22
23/* COLOR_VALIDATOR_test_3 */
24.e {
25  color: rgba(80, 60, 150, 1.0);
26}
27
28/* TIME_VALIDATOR_test */
29.f {
30  animation-duration: 500ms;
31  animation-delay: 100ms;
32}
33
34/* ITERATIONCOUNT_VALIDATOR_test */
35.g {
36  animation-iteration-count: 3;
37}
38
39/* TRANSITION_TIMING_FUNCTION_VALIDATOR_test */
40.h {
41  animation-timing-function: linear;
42}
43
44.h-steps {
45  animation-timing-function: steps(9, start);
46}
47
48/* EnumValidator_test */
49.i {
50  animation-fill-mode: forwards;
51}
52
53/* GRID_TEMPLATE_VALIDATOR_test */
54.j {
55  grid-template-columns: 50px 40px 80px;
56  grid-template-rows: repeat(auto-fill, 20px);
57}
58
59/* NUMBER_VALIDATOR_test */
60.l {
61  grid-row-start: 3;
62}
63
64/* BORDER_VALIDATOR_test */
65.m {
66  border: 5px solid #808080;
67}
68
69/* TEXT_INDENT_VALIDATOR_test */
70.n {
71  text-indent: 50px;
72}
73
74/* URL_VALIDATOR_test */
75.o {
76  background-image: url(/common/img/a.jpg);
77}
78
79/* TRANSITION_PROPERTY_VALIDATOR_test */
80.p {
81  transition-property: width;
82}
83
84/* TRANSITION_INTERVAL_VALIDATOR_test */
85.q {
86  transition-duration: 5s;
87}
88
89/* TRANSFORM_VALIDATOR_test */
90.r {
91  transform: translate(50%, 50%);
92}
93
94/* TRANSFORM_ORIGIN_VALIDATOR_test */
95.s {
96  transform-origin: 20% 40%;
97}
98
99/* ANGLE_VALIDATOR_test */
100.t {
101  start-angle: 240deg;
102}
103
104/* ANYTHING_VALIDATOR_test */
105.u {
106  selected-font-family: PingFangSC-Regular;
107}
108
109/* SHORTHAND_LENGTH_VALIDATOR_test */
110.v {
111  padding: 10px 15px;
112}
113
114#w {
115  font-size: 15px;
116  font-family: PingFangSC-Regular;
117}
118
119/* ******************common style******************* */
120
121/* keyframes_test_1 */
122@keyframes animation1 {
123  from {
124    background-color: #808080;
125  }
126  50% {
127    background-color: #000000;
128  }
129  to {
130    background-color: #000fff;
131  }
132}
133
134/* keyframes_test_2 */
135@keyframes animation2 {
136  from {
137    transform: translateX(90px);
138  }
139  50% {
140    transform: translateX(130px);
141  }
142  to {
143    transform: translateX(200px);
144  }
145}
146
147/* keyframes_test_3 */
148@keyframes animation3 {
149  from {
150    transform: rotate(90deg);
151  }
152  50% {
153    transform: rotate(150deg);
154  }
155  to {
156    transform: rotate(260deg);
157  }
158}
159
160/* keyframes_test_4 */
161@keyframes animation4 {
162  from {
163    transform: rotate(0.25turn);
164  }
165  50% {
166    transform: rotate(1rad);
167  }
168  to {
169    transform: rotate(400grad);
170  }
171}
172
173/* gradient_test_1 */
174.gradient1 {
175  background: linear-gradient(#ff0000, #00ff00);
176}
177
178/* gradient_test_2 */
179.gradient2 {
180  background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
181}
182
183/* gradient_test_3 */
184.gradient3 {
185  background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 0, 255) 60%);
186}
187
188/* gradient_test_4 */
189.gradient4 {
190  background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
191}
192
193/* shared-transition_test */
194.shared-transition-style {
195  shared-transition-effect: static;
196  shared-transition-name: shared-transition;
197}
198
199@keyframes shared-transition {
200  from { opacity: 0; }
201  to { opacity: 1; }
202}
203
204/* customize font */
205@font-face {
206  font-family: HWfont;
207  src: url(/common/HWfont.ttf);
208}
209
210.txt {
211  font-family: HWfont;
212}
213
214.shadow {
215  box-shadow: 100px 100px 30px 40px #888888;
216}
217
218/* transform-origin_test_1 */
219.transform-origin-style1 {
220  transform-origin: left;
221}
222
223/* transform-origin_test_2 */
224.transform-origin-style2 {
225  transform-origin: left bottom;
226}
227
228/* transform-origin_test_3 */
229.transform-origin-style3 {
230  transform-origin: right 90px;
231}
232
233/* transform_test_1 */
234.transform-style1 {
235  transform: translate3d(1px, 2px, 3px);
236}
237
238/* transform_test_2 */
239.transform-style2 {
240  transform: matrix(1,2,3,4,5,6);
241}
242
243/* transform_test_3 */
244.transform-style3 {
245  transform: matrix3d(1,0,0,0,0,1,6,0,0,0,1,0,50,100,0,1.1);
246}
247
248/* transform_test_4 */
249.transform-style4 {
250  transform: none;
251}
252
253/* transform_test_5 */
254.transform-style5 {
255  transform: rotate3d(1, 1, 1, 30deg) translate3d(1px, 2px, 3px) scale3d(1.5, 1.5, 1.5) perspective(800px);
256}
257
258/* simple animation test: @keyframes duration | easing-function | delay |
259 * iteration-count | direction | fill-mode | play-state | name*/
260.simple-animation1 {
261    animation: 3s ease-in 1s 2 reverse both paused slidein;
262}
263
264/* simple animation test: @keyframes name | duration | easing-function | delay */
265.simple-animation2 {
266    animation: test_05 3s linear 1s;
267}
268
269/* simple animation test: @keyframes name | duration */
270.simple-animation3 {
271    animation: sliding-vertically 3s;
272}
273
274.mask-image-url1 {
275    mask-image: url(common/mask.svg);
276}