OLD | NEW |
| (Empty) |
1 .redBox { | |
2 width: 50px; | |
3 height: 50px; | |
4 background-color: red; | |
5 } | |
6 | |
7 .greenBox { | |
8 width: 50px; | |
9 height: 50px; | |
10 background-color: green; | |
11 } | |
12 | |
13 .blueBox { | |
14 width: 50px; | |
15 height: 50px; | |
16 background-color: blue; | |
17 } | |
18 | |
19 .orangeBox { | |
20 width: 50px; | |
21 height: 50px; | |
22 background-color: orange; | |
23 } | |
24 | |
25 .flowArticle { | |
26 -webkit-flow-into: article; | |
27 } | |
28 | |
29 .regionArticle { | |
30 -webkit-flow-from: article; | |
31 } | |
32 | |
33 .regionArticleAfter::after { | |
34 display: block; | |
35 width: 50px; | |
36 height: 50px; | |
37 content: 'This text should not be displayed'; | |
38 border: 1px solid black; | |
39 -webkit-flow-from: article; | |
40 } | |
41 | |
42 .regionArticleBefore::before { | |
43 display: block; | |
44 width: 50px; | |
45 height: 50px; | |
46 border: 1px solid black; | |
47 -webkit-flow-from: article; | |
48 } | |
49 | |
50 .borderBox { | |
51 width: 50px; | |
52 height: 50px; | |
53 float: left; | |
54 border: 1px solid black; | |
55 } | |
56 | |
57 .borderBoxNoFloat { | |
58 width: 50px; | |
59 height: 50px; | |
60 border: 1px solid black; | |
61 } | |
62 | |
63 .pass { | |
64 font-weight: bold; | |
65 color: green; | |
66 } | |
67 | |
68 .fail, .error { | |
69 font-weight: bold; | |
70 color: red; | |
71 } | |
72 | |
73 .break { | |
74 -webkit-region-break-before: always; | |
75 display: block; | |
76 } | |
77 | |
78 .token { | |
79 color: blue; | |
80 font-weight: bold; | |
81 } | |
82 | |
83 .description { | |
84 width: 600px; | |
85 } | |
86 | |
87 .bigBox { | |
88 height: 100px; | |
89 width: 300px; | |
90 } | |
91 | |
92 .greyBigBox { | |
93 height: 100px; | |
94 width: 300px; | |
95 background-color: lightgrey; | |
96 } | |
97 | |
98 .descriptionVertical { | |
99 height: 600px; | |
100 } | |
101 | |
102 .bigBoxVertical { | |
103 height: 300px; | |
104 width: 100px; | |
105 } | |
106 | |
107 .greyBigBoxVertical { | |
108 height: 300px; | |
109 width: 100px; | |
110 background-color: lightgrey; | |
111 } | |
112 | |
113 .floatLeft { | |
114 float: left; | |
115 } | |
116 | |
117 .floatRight { | |
118 float: right; | |
119 } | |
120 | |
121 .clear { | |
122 clear: both; | |
123 } | |
124 | |
125 /* regions create Stacking Contexts */ | |
126 .forcedStackingContext { | |
127 position: relative; | |
128 z-index: 1; | |
129 } | |
130 | |
131 /* overflow tests styles */ | |
132 .overflowContentFlow { | |
133 -webkit-flow-into: flow1; | |
134 padding: 5px; | |
135 } | |
136 | |
137 .overflowContent { | |
138 padding: 5px; | |
139 } | |
140 | |
141 .overflowBox { | |
142 width: 30px; | |
143 height: 50px; | |
144 background-color: lime; | |
145 } | |
146 | |
147 .overflowBox2 { | |
148 width: 50px; | |
149 height: 50px; | |
150 background-color: lime; | |
151 } | |
152 | |
153 .overflowFirstBox { | |
154 border: 1px solid blue; | |
155 } | |
156 | |
157 .overflowSecondBox { | |
158 border: 1px solid green; | |
159 overflow: hidden; | |
160 } | |
OLD | NEW |