Skip to content

Commit af3a695

Browse files
kukulichkukulich
committed
Improved Css::convertStyleToInline()
1 parent 5c92c58 commit af3a695

18 files changed

+1526
-366
lines changed

‎Jyxo/Css.php

Lines changed: 366 additions & 114 deletions
Large diffs are not rendered by default.

‎tests/Jyxo/CssTest.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ public function testMinify()
172172
*/
173173
public function testConvertStyleToInline()
174174
{
175-
$testCount = 6;
175+
$testCount = 10;
176176

177177
for ($i = 1; $i <= $testCount; $i++) {
178178
$this->assertStringEqualsFile(

‎tests/files/css/convertstyle-1-expected.html

Lines changed: 356 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
<html>
22
<head>
33
<style type="text/css">
4+
html h1 {font-family: sans-serif;}
45
a {color: green;}
5-
p > a {color: yellow;}
66
#header {border: solid 1px black;}
7+
8+
@media screen and (max-width: 600px) {
9+
a {
10+
color: pink;
11+
}
12+
}
713
</style>
814
<style type="text/css">
915
<![CDATA[
@@ -17,19 +23,359 @@
1723
a#remove.icon.small {background-image: url("remove.png");}
1824
a img {text-decoration: none;}
1925
h1, h2 {font-weight: bold;}
20-
a:link {color: orange}
26+
a:link {color: orange;}
27+
p img.last:last-child {border: solid 1px red;}
28+
29+
p a:first-child {color: red;}
30+
p a:last-child {color: green;}
31+
p a:nth-child(3) {color: pink;}
32+
33+
p#child span:nth-child(0n+1) {background: black;}
34+
p#child span:nth-child(odd) {color: yellow;}
35+
p#child span:nth-child(2n+1) {font-style: italic;}
36+
p#child span:nth-child(even) {color: blue;}
37+
p#child span:nth-child(2n) {font-weight: bold;}
38+
p#child span:nth-child(3) {background: pink;}
39+
40+
p#last-child span:nth-last-child(0n+1) {background: black;}
41+
p#last-child span:nth-last-child(odd) {color: yellow;}
42+
p#last-child span:nth-last-child(2n+1) {font-style: italic;}
43+
p#last-child span:nth-last-child(even) {color: blue;}
44+
p#last-child span:nth-last-child(2n) {font-weight: bold;}
45+
p#last-child span:nth-last-child(3) {background: pink;}
46+
47+
div#child-positive span:nth-child(4n+3) {color: green;}
48+
div#child-negative span:nth-child(-5n+16) {color: red;}
49+
50+
div#child-last-positive span:nth-last-child(4n+3) {color: green;}
51+
div#child-last-negative span:nth-last-child(-5n+16) {color: red;}
52+
53+
div#first-of-type strong:first-of-type {color: red;}
54+
div#last-of-type strong:last-of-type {color: blue;}
55+
div#nth-of-type strong:nth-of-type(3) {color: pink;}
56+
57+
div#nth-of-type span:nth-of-type(0n+1) {background: black;}
58+
div#nth-of-type span:nth-of-type(odd) {color: yellow;}
59+
div#nth-of-type span:nth-of-type(2n+1) {font-style: italic;}
60+
div#nth-of-type span:nth-of-type(even) {color: blue;}
61+
div#nth-of-type span:nth-of-type(2n) {font-weight: bold;}
62+
div#nth-of-type span:nth-of-type(3) {background: pink;}
63+
64+
div#nth-of-type-positive span:nth-of-type(4n+3) {color: green;}
65+
div#nth-of-type-negative span:nth-of-type(-5n+16) {color: red;}
66+
67+
div#nth-of-type-last-positive span:nth-last-of-type(4n+3) {color: green;}
68+
div#nth-of-type-last-negative span:nth-last-of-type(-5n+16) {color: red;}
2169
/* ]]> */
2270
</style>
71+
<!--[if gte mso 12]>
72+
<style type="text/css">
73+
a {color: blue;}
74+
</style>
75+
<![endif]-->
2376
</head>
2477
<body>
25-
<h1 id="header" style="border:solid 1px black;font-size:200%;font-weight:bold;background-color: #ffffff; color: #000000;">H1</h1>
78+
<h1 id="header" style="font-family:sans-serif;border:solid 1px black;font-size:200%;font-weight:bold;background-color:#fff;color:#000">H1</h1>
2679
<p>
27-
<a href="http://domain.tld" title="Link" style="color:green;color:orange;">Link</a>
28-
<a style="color:green;color:orange;"><img src="image.gif" style="text-decoration:none;" /></a>
29-
<a class="icon small" style="color:green;display:block;width:16px;height:16px;color:orange;"></a>
30-
<a id="remove" class="icon small" style="color:green;display:block;width:16px;height:16px;background-image:url('remove.png');color:orange;"></a>
80+
<a href="http://domain.tld" title="Link" style="color:red">Link</a>
81+
<a style="color:orange"><img src="image.gif" style="text-decoration:none" /></a>
82+
<a class="icon small" style="color:pink;display:block;width:16px;height:16px"></a>
83+
<a id="remove" class="icon small" style="color:orange;display:block;width:16px;height:16px;background-image:url('remove.png')"></a>
84+
<img src="image.gif" />
3185
</p>
32-
<h2 style="font-weight:bold;">H2</h2>
33-
<p>Text text text</p>
86+
<h2 style="font-weight:bold">H2</h2>
87+
<p id="child">
88+
<span style="background:black;color:yellow;font-style:italic">First</span>
89+
<span style="color:blue;font-weight:bold">Second</span>
90+
<span style="color:yellow;font-style:italic;background:pink">Third</span>
91+
</p>
92+
<p id="last-child">
93+
<span style="color:yellow;font-style:italic;background:pink">First</span>
94+
<span style="color:blue;font-weight:bold">Second</span>
95+
<span style="background:black;color:yellow;font-style:italic">Third</span>
96+
</p>
97+
<div id="child-positive">
98+
<span>1</span>
99+
<span>2</span>
100+
<span style="color:green">3</span>
101+
<span>4</span>
102+
<span>5</span>
103+
<span>6</span>
104+
<span style="color:green">7</span>
105+
<span>8</span>
106+
<span>9</span>
107+
<span>10</span>
108+
<span style="color:green">11</span>
109+
<span>12</span>
110+
<span>13</span>
111+
<span>14</span>
112+
<span style="color:green">15</span>
113+
<span>16</span>
114+
<span>17</span>
115+
<span>18</span>
116+
<span style="color:green">19</span>
117+
<span>20</span>
118+
</div>
119+
<div id="child-negative">
120+
<span style="color:red">1</span>
121+
<span>2</span>
122+
<span>3</span>
123+
<span>4</span>
124+
<span>5</span>
125+
<span style="color:red">6</span>
126+
<span>7</span>
127+
<span>8</span>
128+
<span>9</span>
129+
<span>10</span>
130+
<span style="color:red">11</span>
131+
<span>12</span>
132+
<span>13</span>
133+
<span>14</span>
134+
<span>15</span>
135+
<span style="color:red">16</span>
136+
<span>17</span>
137+
<span>18</span>
138+
<span>19</span>
139+
<span>20</span>
140+
</div>
141+
<div id="child-last-positive">
142+
<span>1</span>
143+
<span style="color:green">2</span>
144+
<span>3</span>
145+
<span>4</span>
146+
<span>5</span>
147+
<span style="color:green">6</span>
148+
<span>7</span>
149+
<span>8</span>
150+
<span>9</span>
151+
<span style="color:green">10</span>
152+
<span>11</span>
153+
<span>12</span>
154+
<span>13</span>
155+
<span style="color:green">14</span>
156+
<span>15</span>
157+
<span>16</span>
158+
<span>17</span>
159+
<span style="color:green">18</span>
160+
<span>19</span>
161+
<span>20</span>
162+
</div>
163+
<div id="child-last-negative">
164+
<span>1</span>
165+
<span>2</span>
166+
<span>3</span>
167+
<span>4</span>
168+
<span style="color:red">5</span>
169+
<span>6</span>
170+
<span>7</span>
171+
<span>8</span>
172+
<span>9</span>
173+
<span style="color:red">10</span>
174+
<span>11</span>
175+
<span>12</span>
176+
<span>13</span>
177+
<span>14</span>
178+
<span style="color:red">15</span>
179+
<span>16</span>
180+
<span>17</span>
181+
<span>18</span>
182+
<span>19</span>
183+
<span style="color:red">20</span>
184+
</div>
185+
186+
<div id="first-of-type">
187+
<span>Span 1</span>
188+
<strong style="color:red">Strong 1</strong>
189+
<span>Span 2</span>
190+
<strong>Strong 2</strong>
191+
</div>
192+
193+
<div id="last-of-type">
194+
<span>Span 1</span>
195+
<strong>Strong 1</strong>
196+
<span>Span 2</span>
197+
<strong style="color:blue">Strong 2</strong>
198+
</div>
199+
200+
<div id="nth-of-type">
201+
<span style="background:black;color:yellow;font-style:italic">Span 1</span>
202+
<strong>Strong 1</strong>
203+
<span style="color:blue;font-weight:bold">Span 2</span>
204+
<strong>Strong 2</strong>
205+
<span style="color:yellow;font-style:italic;background:pink">Span 3</span>
206+
<strong style="color:pink">Strong 3</strong>
207+
</div>
208+
209+
<div id="nth-of-type-positive">
210+
<strong>1</strong>
211+
<span>1</span>
212+
<strong>2</strong>
213+
<span>2</span>
214+
<strong>3</strong>
215+
<span style="color:green">3</span>
216+
<strong>4</strong>
217+
<span>4</span>
218+
<strong>5</strong>
219+
<span>5</span>
220+
<strong>6</strong>
221+
<span>6</span>
222+
<strong>7</strong>
223+
<span style="color:green">7</span>
224+
<strong>8</strong>
225+
<span>8</span>
226+
<strong>9</strong>
227+
<span>9</span>
228+
<strong>10</strong>
229+
<span>10</span>
230+
<strong>11</strong>
231+
<span style="color:green">11</span>
232+
<strong>12</strong>
233+
<span>12</span>
234+
<strong>13</strong>
235+
<span>13</span>
236+
<strong>14</strong>
237+
<span>14</span>
238+
<strong>15</strong>
239+
<span style="color:green">15</span>
240+
<strong>16</strong>
241+
<span>16</span>
242+
<strong>17</strong>
243+
<span>17</span>
244+
<strong>18</strong>
245+
<span>18</span>
246+
<strong>19</strong>
247+
<span style="color:green">19</span>
248+
<strong>20</strong>
249+
<span>20</span>
250+
</div>
251+
252+
<div id="nth-of-type-negative">
253+
<strong>1</strong>
254+
<span style="color:red">1</span>
255+
<strong>2</strong>
256+
<span>2</span>
257+
<strong>3</strong>
258+
<span>3</span>
259+
<strong>4</strong>
260+
<span>4</span>
261+
<strong>5</strong>
262+
<span>5</span>
263+
<strong>6</strong>
264+
<span style="color:red">6</span>
265+
<strong>7</strong>
266+
<span>7</span>
267+
<strong>8</strong>
268+
<span>8</span>
269+
<strong>9</strong>
270+
<span>9</span>
271+
<strong>10</strong>
272+
<span>10</span>
273+
<strong>11</strong>
274+
<span style="color:red">11</span>
275+
<strong>12</strong>
276+
<span>12</span>
277+
<strong>13</strong>
278+
<span>13</span>
279+
<strong>14</strong>
280+
<span>14</span>
281+
<strong>15</strong>
282+
<span>15</span>
283+
<strong>16</strong>
284+
<span style="color:red">16</span>
285+
<strong>17</strong>
286+
<span>17</span>
287+
<strong>18</strong>
288+
<span>18</span>
289+
<strong>19</strong>
290+
<span>19</span>
291+
<strong>20</strong>
292+
<span>20</span>
293+
</div>
294+
295+
<div id="nth-of-type-last-positive">
296+
<strong>1</strong>
297+
<span>1</span>
298+
<strong>2</strong>
299+
<span style="color:green">2</span>
300+
<strong>3</strong>
301+
<span>3</span>
302+
<strong>4</strong>
303+
<span>4</span>
304+
<strong>5</strong>
305+
<span>5</span>
306+
<strong>6</strong>
307+
<span style="color:green">6</span>
308+
<strong>7</strong>
309+
<span>7</span>
310+
<strong>8</strong>
311+
<span>8</span>
312+
<strong>9</strong>
313+
<span>9</span>
314+
<strong>10</strong>
315+
<span style="color:green">10</span>
316+
<strong>11</strong>
317+
<span>11</span>
318+
<strong>12</strong>
319+
<span>12</span>
320+
<strong>13</strong>
321+
<span>13</span>
322+
<strong>14</strong>
323+
<span style="color:green">14</span>
324+
<strong>15</strong>
325+
<span>15</span>
326+
<strong>16</strong>
327+
<span>16</span>
328+
<strong>17</strong>
329+
<span>17</span>
330+
<strong>18</strong>
331+
<span style="color:green">18</span>
332+
<strong>19</strong>
333+
<span>19</span>
334+
<strong>20</strong>
335+
<span>20</span>
336+
</div>
337+
338+
<div id="nth-of-type-last-negative">
339+
<strong>1</strong>
340+
<span>1</span>
341+
<strong>2</strong>
342+
<span>2</span>
343+
<strong>3</strong>
344+
<span>3</span>
345+
<strong>4</strong>
346+
<span>4</span>
347+
<strong>5</strong>
348+
<span style="color:red">5</span>
349+
<strong>6</strong>
350+
<span>6</span>
351+
<strong>7</strong>
352+
<span>7</span>
353+
<strong>8</strong>
354+
<span>8</span>
355+
<strong>9</strong>
356+
<span>9</span>
357+
<strong>10</strong>
358+
<span style="color:red">10</span>
359+
<strong>11</strong>
360+
<span>11</span>
361+
<strong>12</strong>
362+
<span>12</span>
363+
<strong>13</strong>
364+
<span>13</span>
365+
<strong>14</strong>
366+
<span>14</span>
367+
<strong>15</strong>
368+
<span style="color:red">15</span>
369+
<strong>16</strong>
370+
<span>16</span>
371+
<strong>17</strong>
372+
<span>17</span>
373+
<strong>18</strong>
374+
<span>18</span>
375+
<strong>19</strong>
376+
<span>19</span>
377+
<strong>20</strong>
378+
<span style="color:red">20</span>
379+
</div>
34380
</body>
35-
</html>
381+
</html>

0 commit comments

Comments
 (0)