Skip to content

Commit

Permalink
Improved Css::convertStyleToInline()
Browse files Browse the repository at this point in the history
  • Loading branch information
@kukulich
kukulich committed Mar 11, 2016
1 parent 5c92c58 commit af3a695
Show file tree
Hide file tree
Showing 18 changed files with 1,526 additions and 366 deletions.
480 changes: 366 additions & 114 deletions Jyxo/Css.php
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion tests/Jyxo/CssTest.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ public function testMinify()
*/
public function testConvertStyleToInline()
{
$testCount = 6;
$testCount = 10;

for ($i = 1; $i <= $testCount; $i++) {
$this->assertStringEqualsFile(
Expand Down
366 changes: 356 additions & 10 deletions tests/files/css/convertstyle-1-expected.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
<html>
<head>
<style type="text/css">
html h1 {font-family: sans-serif;}
a {color: green;}
p > a {color: yellow;}
#header {border: solid 1px black;}

@media screen and (max-width: 600px) {
a {
color: pink;
}
}
</style>
<style type="text/css">
<![CDATA[
Expand All @@ -17,19 +23,359 @@
a#remove.icon.small {background-image: url("remove.png");}
a img {text-decoration: none;}
h1, h2 {font-weight: bold;}
a:link {color: orange}
a:link {color: orange;}
p img.last:last-child {border: solid 1px red;}

p a:first-child {color: red;}
p a:last-child {color: green;}
p a:nth-child(3) {color: pink;}

p#child span:nth-child(0n+1) {background: black;}
p#child span:nth-child(odd) {color: yellow;}
p#child span:nth-child(2n+1) {font-style: italic;}
p#child span:nth-child(even) {color: blue;}
p#child span:nth-child(2n) {font-weight: bold;}
p#child span:nth-child(3) {background: pink;}

p#last-child span:nth-last-child(0n+1) {background: black;}
p#last-child span:nth-last-child(odd) {color: yellow;}
p#last-child span:nth-last-child(2n+1) {font-style: italic;}
p#last-child span:nth-last-child(even) {color: blue;}
p#last-child span:nth-last-child(2n) {font-weight: bold;}
p#last-child span:nth-last-child(3) {background: pink;}

div#child-positive span:nth-child(4n+3) {color: green;}
div#child-negative span:nth-child(-5n+16) {color: red;}

div#child-last-positive span:nth-last-child(4n+3) {color: green;}
div#child-last-negative span:nth-last-child(-5n+16) {color: red;}

div#first-of-type strong:first-of-type {color: red;}
div#last-of-type strong:last-of-type {color: blue;}
div#nth-of-type strong:nth-of-type(3) {color: pink;}

div#nth-of-type span:nth-of-type(0n+1) {background: black;}
div#nth-of-type span:nth-of-type(odd) {color: yellow;}
div#nth-of-type span:nth-of-type(2n+1) {font-style: italic;}
div#nth-of-type span:nth-of-type(even) {color: blue;}
div#nth-of-type span:nth-of-type(2n) {font-weight: bold;}
div#nth-of-type span:nth-of-type(3) {background: pink;}

div#nth-of-type-positive span:nth-of-type(4n+3) {color: green;}
div#nth-of-type-negative span:nth-of-type(-5n+16) {color: red;}

div#nth-of-type-last-positive span:nth-last-of-type(4n+3) {color: green;}
div#nth-of-type-last-negative span:nth-last-of-type(-5n+16) {color: red;}
/* ]]> */
</style>
<!--[if gte mso 12]>
<style type="text/css">
a {color: blue;}
</style>
<![endif]-->
</head>
<body>
<h1 id="header" style="border:solid 1px black;font-size:200%;font-weight:bold;background-color: #ffffff; color: #000000;">H1</h1>
<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>
<p>
<a href="http://domain.tld" title="Link" style="color:green;color:orange;">Link</a>
<a style="color:green;color:orange;"><img src="image.gif" style="text-decoration:none;" /></a>
<a class="icon small" style="color:green;display:block;width:16px;height:16px;color:orange;"></a>
<a id="remove" class="icon small" style="color:green;display:block;width:16px;height:16px;background-image:url('remove.png');color:orange;"></a>
<a href="http://domain.tld" title="Link" style="color:red">Link</a>
<a style="color:orange"><img src="image.gif" style="text-decoration:none" /></a>
<a class="icon small" style="color:pink;display:block;width:16px;height:16px"></a>
<a id="remove" class="icon small" style="color:orange;display:block;width:16px;height:16px;background-image:url('remove.png')"></a>
<img src="image.gif" />
</p>
<h2 style="font-weight:bold;">H2</h2>
<p>Text text text</p>
<h2 style="font-weight:bold">H2</h2>
<p id="child">
<span style="background:black;color:yellow;font-style:italic">First</span>
<span style="color:blue;font-weight:bold">Second</span>
<span style="color:yellow;font-style:italic;background:pink">Third</span>
</p>
<p id="last-child">
<span style="color:yellow;font-style:italic;background:pink">First</span>
<span style="color:blue;font-weight:bold">Second</span>
<span style="background:black;color:yellow;font-style:italic">Third</span>
</p>
<div id="child-positive">
<span>1</span>
<span>2</span>
<span style="color:green">3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span style="color:green">7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span style="color:green">11</span>
<span>12</span>
<span>13</span>
<span>14</span>
<span style="color:green">15</span>
<span>16</span>
<span>17</span>
<span>18</span>
<span style="color:green">19</span>
<span>20</span>
</div>
<div id="child-negative">
<span style="color:red">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span style="color:red">6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span style="color:red">11</span>
<span>12</span>
<span>13</span>
<span>14</span>
<span>15</span>
<span style="color:red">16</span>
<span>17</span>
<span>18</span>
<span>19</span>
<span>20</span>
</div>
<div id="child-last-positive">
<span>1</span>
<span style="color:green">2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span style="color:green">6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span style="color:green">10</span>
<span>11</span>
<span>12</span>
<span>13</span>
<span style="color:green">14</span>
<span>15</span>
<span>16</span>
<span>17</span>
<span style="color:green">18</span>
<span>19</span>
<span>20</span>
</div>
<div id="child-last-negative">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span style="color:red">5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span style="color:red">10</span>
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
<span style="color:red">15</span>
<span>16</span>
<span>17</span>
<span>18</span>
<span>19</span>
<span style="color:red">20</span>
</div>

<div id="first-of-type">
<span>Span 1</span>
<strong style="color:red">Strong 1</strong>
<span>Span 2</span>
<strong>Strong 2</strong>
</div>

<div id="last-of-type">
<span>Span 1</span>
<strong>Strong 1</strong>
<span>Span 2</span>
<strong style="color:blue">Strong 2</strong>
</div>

<div id="nth-of-type">
<span style="background:black;color:yellow;font-style:italic">Span 1</span>
<strong>Strong 1</strong>
<span style="color:blue;font-weight:bold">Span 2</span>
<strong>Strong 2</strong>
<span style="color:yellow;font-style:italic;background:pink">Span 3</span>
<strong style="color:pink">Strong 3</strong>
</div>

<div id="nth-of-type-positive">
<strong>1</strong>
<span>1</span>
<strong>2</strong>
<span>2</span>
<strong>3</strong>
<span style="color:green">3</span>
<strong>4</strong>
<span>4</span>
<strong>5</strong>
<span>5</span>
<strong>6</strong>
<span>6</span>
<strong>7</strong>
<span style="color:green">7</span>
<strong>8</strong>
<span>8</span>
<strong>9</strong>
<span>9</span>
<strong>10</strong>
<span>10</span>
<strong>11</strong>
<span style="color:green">11</span>
<strong>12</strong>
<span>12</span>
<strong>13</strong>
<span>13</span>
<strong>14</strong>
<span>14</span>
<strong>15</strong>
<span style="color:green">15</span>
<strong>16</strong>
<span>16</span>
<strong>17</strong>
<span>17</span>
<strong>18</strong>
<span>18</span>
<strong>19</strong>
<span style="color:green">19</span>
<strong>20</strong>
<span>20</span>
</div>

<div id="nth-of-type-negative">
<strong>1</strong>
<span style="color:red">1</span>
<strong>2</strong>
<span>2</span>
<strong>3</strong>
<span>3</span>
<strong>4</strong>
<span>4</span>
<strong>5</strong>
<span>5</span>
<strong>6</strong>
<span style="color:red">6</span>
<strong>7</strong>
<span>7</span>
<strong>8</strong>
<span>8</span>
<strong>9</strong>
<span>9</span>
<strong>10</strong>
<span>10</span>
<strong>11</strong>
<span style="color:red">11</span>
<strong>12</strong>
<span>12</span>
<strong>13</strong>
<span>13</span>
<strong>14</strong>
<span>14</span>
<strong>15</strong>
<span>15</span>
<strong>16</strong>
<span style="color:red">16</span>
<strong>17</strong>
<span>17</span>
<strong>18</strong>
<span>18</span>
<strong>19</strong>
<span>19</span>
<strong>20</strong>
<span>20</span>
</div>

<div id="nth-of-type-last-positive">
<strong>1</strong>
<span>1</span>
<strong>2</strong>
<span style="color:green">2</span>
<strong>3</strong>
<span>3</span>
<strong>4</strong>
<span>4</span>
<strong>5</strong>
<span>5</span>
<strong>6</strong>
<span style="color:green">6</span>
<strong>7</strong>
<span>7</span>
<strong>8</strong>
<span>8</span>
<strong>9</strong>
<span>9</span>
<strong>10</strong>
<span style="color:green">10</span>
<strong>11</strong>
<span>11</span>
<strong>12</strong>
<span>12</span>
<strong>13</strong>
<span>13</span>
<strong>14</strong>
<span style="color:green">14</span>
<strong>15</strong>
<span>15</span>
<strong>16</strong>
<span>16</span>
<strong>17</strong>
<span>17</span>
<strong>18</strong>
<span style="color:green">18</span>
<strong>19</strong>
<span>19</span>
<strong>20</strong>
<span>20</span>
</div>

<div id="nth-of-type-last-negative">
<strong>1</strong>
<span>1</span>
<strong>2</strong>
<span>2</span>
<strong>3</strong>
<span>3</span>
<strong>4</strong>
<span>4</span>
<strong>5</strong>
<span style="color:red">5</span>
<strong>6</strong>
<span>6</span>
<strong>7</strong>
<span>7</span>
<strong>8</strong>
<span>8</span>
<strong>9</strong>
<span>9</span>
<strong>10</strong>
<span style="color:red">10</span>
<strong>11</strong>
<span>11</span>
<strong>12</strong>
<span>12</span>
<strong>13</strong>
<span>13</span>
<strong>14</strong>
<span>14</span>
<strong>15</strong>
<span style="color:red">15</span>
<strong>16</strong>
<span>16</span>
<strong>17</strong>
<span>17</span>
<strong>18</strong>
<span>18</span>
<strong>19</strong>
<span>19</span>
<strong>20</strong>
<span style="color:red">20</span>
</div>
</body>
</html>
</html>
Loading

0 comments on commit af3a695

Please sign in to comment.