OLD | NEW |
| (Empty) |
1 import unittest | |
2 | |
3 from scss.parser import Stylesheet | |
4 | |
5 | |
6 class TestSCSS( unittest.TestCase ): | |
7 | |
8 def setUp(self): | |
9 self.parser = Stylesheet(options=dict(compress=True)) | |
10 | |
11 def test_math(self): | |
12 src = " 12 * (60px + 20px) " | |
13 test = "960px" | |
14 out = self.parser.loads(src) | |
15 self.assertEqual(test, out) | |
16 | |
17 def test_operations_and_functions(self): | |
18 src = """ | |
19 #navbar { | |
20 $navbar-width: 800px; | |
21 $items: 1 + 2; | |
22 $navbar-color: rgb(100, 100, 55); | |
23 $font: "Verdana", monospace; | |
24 width: $navbar-width; | |
25 border-bottom: 2px solid $navbar-color; | |
26 | |
27 #{enumerate("div", 1, $items)} { | |
28 p & { | |
29 color: blue } | |
30 color: red; } | |
31 } | |
32 | |
33 li { | |
34 background-color: $navbar-color - #333; | |
35 background-image: url(test/value.png); | |
36 float: left; | |
37 font: 8px/10px $font; | |
38 margin: 3px + 5.5px auto; | |
39 height: 5px + (4px * (2 + $items)); | |
40 width: $navbar-width / $items - 10px; | |
41 &:hover { background-color: $navbar-color - 10%; } }""" | |
42 test = "#navbar{width:800px;border-bottom:2px solid #646437}#navbar div1
, #navbar div2, #navbar div3{color:#f00}p #navbar div1, p #navbar div2, p #navba
r div3{color:#00f}li{float:left;margin:8.5px auto;width:256.667px;height:25px;ba
ckground-color:#313104;background-image:url(test/value.png);font:8px / 10px 'Ver
dana', monospace}li:hover{background-color:#5c5c3e}" | |
43 out = self.parser.loads(src) | |
44 self.assertEqual(test, out) | |
45 | |
46 def test_rgb_functions(self): | |
47 src = """ | |
48 @option warn:false; | |
49 | |
50 $color: rgba(23, 45, 67, .4) | |
51 $color2: #fdc; | |
52 .test { | |
53 red_test: red($color); | |
54 blue_test: blue($color); | |
55 green_test: green($color); | |
56 color: mix(#f00, #00f, 25%); | |
57 } | |
58 """ | |
59 test = ".test{color:#3f00bf;red_test:23;blue_test:67;green_test:45}" | |
60 out = self.parser.loads(src) | |
61 self.assertEqual(test, out) | |
62 | |
63 def test_hsl_functions(self): | |
64 src = """ | |
65 @option warn:false; | |
66 | |
67 $hsl: hsla(0, 100%, 25%, .4); | |
68 .test { | |
69 color: $hsl; | |
70 hue: hue($hsl); | |
71 s: saturation($hsl); | |
72 g: grayscale(#099); | |
73 l: lighten(#333, 50%); | |
74 ah: adjust-hue(#811, 45deg); | |
75 } | |
76 """ | |
77 test = ".test{color:rgba(127,0,0,0.40);hue:0;s:100%;g:#4c4c4c;l:#b2b2b2;
ah:#886a10}" | |
78 out = self.parser.loads(src) | |
79 self.assertEqual(test, out) | |
80 | |
81 def test_opacity_functions(self): | |
82 src = """ | |
83 $color: rgba(100, 100, 100, .4); | |
84 .test { | |
85 color: opacify( $color, 60% ); | |
86 } | |
87 """ | |
88 test = ".test{color:#646464}" | |
89 out = self.parser.loads(src) | |
90 self.assertEqual(test, out) | |
91 | |
92 def test_string_functions(self): | |
93 src = """ | |
94 $top: 'top'; | |
95 $bottom: bottom; | |
96 .test { | |
97 bottom: quote($bottom); | |
98 top: unquote($top); | |
99 } | |
100 """ | |
101 test = ".test{top:top;bottom:'bottom'}" | |
102 out = self.parser.loads(src) | |
103 self.assertEqual(test, out) | |
104 | |
105 def test_number_functions(self): | |
106 src = """ | |
107 @option warn:false; | |
108 | |
109 $top: 100px; | |
110 $bottom: 50px; | |
111 .test { | |
112 top: percentage($top / $bottom); | |
113 round: round($top); | |
114 ceil: ceil(1.24); | |
115 floor: floor(1.24); | |
116 abs: abs(-1.24); | |
117 } | |
118 """ | |
119 test = ".test{top:200%;round:100.0;ceil:2.0;floor:1.0;abs:1.24}" | |
120 out = self.parser.loads(src) | |
121 self.assertEqual(test, out) | |
122 | |
123 def test_introspection_functions(self): | |
124 src = """ | |
125 @option warn:false; | |
126 | |
127 $top: 100px; | |
128 $color: #f00; | |
129 .test { | |
130 test: type-of($top); | |
131 test2: type-of($color); | |
132 test3: unit($top); | |
133 test4: unitless($top); | |
134 } | |
135 """ | |
136 test = ".test{test:number;test2:color;test3:px;test4:false}" | |
137 out = self.parser.loads(src) | |
138 self.assertEqual(test, out) | |
139 | |
140 def test_compass_helpers(self): | |
141 src = """ | |
142 #{append-selector(".foo, .bar", ".baz")} { | |
143 color: red; | |
144 } | |
145 | |
146 .example { | |
147 | |
148 #{elements-of-type(block)} { | |
149 border: 1px solid #777777; | |
150 margin: 1em 3em; } | |
151 | |
152 #{elements-of-type(inline)} { | |
153 color: #cc0000; } | |
154 } | |
155 | |
156 a { | |
157 #{headings(2, 4)} { | |
158 font-weight: bold; | |
159 } | |
160 } | |
161 """ | |
162 test = ".foo .baz, .bar .baz{color:#f00}.example address, .example artic
le, .example aside, .example blockquote, .example center, .example dd, .example
dialog, .example dir, .example div, .example dl, .example dt, .example fieldset,
.example figure, .example footer, .example form, .example frameset, .example h1
, .example h2, .example h3, .example h4, .example h5, .example h6, .example head
er, .example hgroup, .example hr, .example isindex, .example menu, .example nav,
.example noframes, .example noscript, .example ol, .example p, .example pre, .e
xample section, .example ul{margin:1em 3em;border:1px solid #777}.example a, .ex
ample abbr, .example acronym, .example b, .example basefont, .example bdo, .exam
ple big, .example br, .example cite, .example code, .example dfn, .example em, .
example font, .example i, .example img, .example input, .example kbd, .example l
abel, .example q, .example s, .example samp, .example select, .example small, .e
xample span, .example strike, .example strong, .example sub, .example sup, .exam
ple textarea, .example tt, .example u, .example var{color:#c00}a h2, a h3, a h4{
font-weight:bold}" | |
163 out = self.parser.loads(src) | |
164 self.assertEqual(test, out) | |
165 | |
166 def test_image_functions(self): | |
167 src = """ | |
168 img.test { | |
169 width: image-width(scss/tests/ + 'bug_64.png'); | |
170 height: image-height(scss/tests/ + 'bug_64.png'); | |
171 background-image: inline-image(scss/tests/ + 'test.png') | |
172 | |
173 } | |
174 """ | |
175 test = 'img.test{width:64px;height:64px;background-image:url("data:image
/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAGXRFWHRTb2Z0d2FyZQBB
ZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRF8EFB3AAA////d5xsogAAAAN0Uk5T//8A18oNQQAAAClJ
REFUeNpiYIIDBkYGCAXEYDaEAFEQKbAQVBEyE6EASRuSYQgrAAIMAB1mAIkfpDEtAAAAAElFTkSuQmCC
")}' | |
176 out = self.parser.loads(src) | |
177 self.assertEqual(test, out) | |
178 | |
179 def test_function_define(self): | |
180 src = """ | |
181 @function percent-width($t, $c) { | |
182 $perc: $t / $c * 100%; | |
183 @return $perc; | |
184 } | |
185 | |
186 .test { | |
187 width: percent-width(5px, 24px); | |
188 } | |
189 """ | |
190 test = ".test{width:20.833%}" | |
191 out = self.parser.loads(src) | |
192 self.assertEqual(test, out) | |
193 | |
194 def test_misc(self): | |
195 src = """ | |
196 $test: center; | |
197 .test { | |
198 margin: 0 if($test == center, auto, 10px); | |
199 } | |
200 """ | |
201 test = ".test{margin:0 auto}" | |
202 out = self.parser.loads(src) | |
203 self.assertEqual(test, out) | |
OLD | NEW |