Skip to content

Commit 4667f67

Browse files
sabberwormsabberworm
committed
Merge remote-tracking branch 'slusarz/color'
Closes MyIntervals#58 as fixed
2 parents 77d5d02 + 94867fd commit 4667f67

File tree

6 files changed

+62
-40
lines changed

6 files changed

+62
-40
lines changed

‎lib/Sabberworm/CSS/Value/Color.php

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,18 @@ public function getColorDescription() {
2121
return $this->getName();
2222
}
2323

24-
}
24+
public function __toString() {
25+
// Shorthand RGB color values
26+
// TODO: Include in output settings (once they’re done)
27+
if(implode('', array_keys($this->aComponents)) === 'rgb') {
28+
$sResult = sprintf(
29+
'%02x%02x%02x',
30+
$this->aComponents['r']->__toString(),
31+
$this->aComponents['g']->__toString(),
32+
$this->aComponents['b']->__toString()
33+
);
34+
return '#'.(($sResult[0] == $sResult[1]) && ($sResult[2] == $sResult[3]) && ($sResult[4] == $sResult[5]) ? "$sResult[0]$sResult[2]$sResult[4]" : $sResult);
35+
}
36+
return parent::__toString();
37+
}
38+
}

‎tests/Sabberworm/CSS/ParserTest.php

Lines changed: 27 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
use Sabberworm\CSS\Value\Size;
66
use Sabberworm\CSS\Property\Selector;
7+
use Sabberworm\CSS\RuleSet\DeclarationBlock;
78
use Sabberworm\CSS\Property\AtRule;
89

910
class ParserTest extends \PHPUnit_Framework_TestCase {
@@ -46,29 +47,35 @@ function testColorParsing() {
4647
}
4748
$sSelector = $oRuleSet->getSelectors();
4849
$sSelector = $sSelector[0]->getSelector();
49-
if ($sSelector == '#mine') {
50+
if ($sSelector === '#mine') {
5051
$aColorRule = $oRuleSet->getRules('color');
51-
$aValues = $aColorRule[0]->getValues();
52-
$this->assertSame('red', $aValues[0][0]);
52+
$oColor = $aColorRule[0]->getValue();
53+
$this->assertSame('red', $oColor);
5354
$aColorRule = $oRuleSet->getRules('background-');
54-
$aValues = $aColorRule[0]->getValues();
55-
$this->assertEquals(array('r' => new Size(35.0, null, true), 'g' => new Size(35.0, null, true), 'b' => new Size(35.0, null, true)), $aValues[0][0]->getColor());
55+
$oColor = $aColorRule[0]->getValue();
56+
$this->assertEquals(array('r' => new Size(35.0, null, true), 'g' => new Size(35.0, null, true), 'b' => new Size(35.0, null, true)), $oColor->getColor());
5657
$aColorRule = $oRuleSet->getRules('border-color');
57-
$aValues = $aColorRule[0]->getValues();
58-
$this->assertEquals(array('r' => new Size(10.0, null, true), 'g' => new Size(100.0, null, true), 'b' => new Size(230.0, null, true), 'a' => new Size("0000.3", null, true)), $aValues[0][0]->getColor());
58+
$oColor = $aColorRule[0]->getValue();
59+
$this->assertEquals(array('r' => new Size(10.0, null, true), 'g' => new Size(100.0, null, true), 'b' => new Size(230.0, null, true)), $oColor->getColor());
60+
$oColor = $aColorRule[1]->getValue();
61+
$this->assertEquals(array('r' => new Size(10.0, null, true), 'g' => new Size(100.0, null, true), 'b' => new Size(231.0, null, true), 'a' => new Size("0000.3", null, true)), $oColor->getColor());
5962
$aColorRule = $oRuleSet->getRules('outline-color');
60-
$aValues = $aColorRule[0]->getValues();
61-
$this->assertEquals(array('r' => new Size(34.0, null, true), 'g' => new Size(34.0, null, true), 'b' => new Size(34.0, null, true)), $aValues[0][0]->getColor());
62-
}
63-
}
64-
foreach ($oDoc->getAllValues('background-') as $oColor) {
65-
if ($oColor->getColorDescription() === 'hsl') {
66-
$this->assertEquals(array('h' => new Size(220.0, null, true), 's' => new Size(10.0, null, true), 'l' => new Size(220.0, null, true)), $oColor->getColor());
63+
$oColor = $aColorRule[0]->getValue();
64+
$this->assertEquals(array('r' => new Size(34.0, null, true), 'g' => new Size(34.0, null, true), 'b' => new Size(34.0, null, true)), $oColor->getColor());
65+
} else if($sSelector === '#yours') {
66+
$aColorRule = $oRuleSet->getRules('background-color');
67+
$oColor = $aColorRule[0]->getValue();
68+
$this->assertEquals(array('h' => new Size(220.0, null, true), 's' => new Size(10.0, '%', true), 'l' => new Size(220.0, '%', true)), $oColor->getColor());
69+
$oColor = $aColorRule[1]->getValue();
70+
$this->assertEquals(array('h' => new Size(220.0, null, true), 's' => new Size(10.0, '%', true), 'l' => new Size(220.0, '%', true), 'a' => new Size(0000.3, null, true)), $oColor->getColor());
6771
}
6872
}
6973
foreach ($oDoc->getAllValues('color') as $sColor) {
7074
$this->assertSame('red', $sColor);
7175
}
76+
$this->assertSame('#mine {color: red;border-color: #0a64e6;border-color: rgba(10,100,231,.3);outline-color: #222;background-color: #232323;}
77+
#yours {background-color: hsl(220,10%,220%);background-color: hsla(220,10%,220%,.3);}
78+
', $oDoc->__toString());
7279
}
7380

7481
function testUnicodeParsing() {
@@ -247,7 +254,7 @@ function testSlashedValues() {
247254

248255
function testFunctionSyntax() {
249256
$oDoc = $this->parsedStructureForFile('functions');
250-
$sExpected = 'div.main {background-image: linear-gradient(rgb(0,0,0),rgb(255,255,255));}
257+
$sExpected = 'div.main {background-image: linear-gradient(#000,#fff);}
251258
.collapser::before, .collapser::-moz-before, .collapser::-webkit-before {content: "»";font-size: 1.2em;margin-right: .2em;-moz-transition-property: -moz-transform;-moz-transition-duration: .2s;-moz-transform-origin: center 60%;}
252259
.collapser.expanded::before, .collapser.expanded::-moz-before, .collapser.expanded::-webkit-before {-moz-transform: rotate(90deg);}
253260
.collapser + * {height: 0;overflow: hidden;-moz-transition-property: height;-moz-transition-duration: .3s;}
@@ -273,19 +280,19 @@ function testFunctionSyntax() {
273280

274281
function testExpandShorthands() {
275282
$oDoc = $this->parsedStructureForFile('expand-shorthands');
276-
$sExpected = 'body {font: italic 500 14px/1.618 "Trebuchet MS",Georgia,serif;border: 2px solid rgb(255,0,255);background: rgb(204,204,204) url("/images/foo.png") no-repeat left top;margin: 1em !important;padding: 2px 6px 3px;}' . "\n";
283+
$sExpected = 'body {font: italic 500 14px/1.618 "Trebuchet MS",Georgia,serif;border: 2px solid #f0f;background: #ccc url("/images/foo.png") no-repeat left top;margin: 1em !important;padding: 2px 6px 3px;}' . "\n";
277284
$this->assertSame($sExpected, $oDoc->__toString());
278285
$oDoc->expandShorthands();
279-
$sExpected = 'body {margin-top: 1em !important;margin-right: 1em !important;margin-bottom: 1em !important;margin-left: 1em !important;padding-top: 2px;padding-right: 6px;padding-bottom: 3px;padding-left: 6px;border-top-color: rgb(255,0,255);border-right-color: rgb(255,0,255);border-bottom-color: rgb(255,0,255);border-left-color: rgb(255,0,255);border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-top-width: 2px;border-right-width: 2px;border-bottom-width: 2px;border-left-width: 2px;font-style: italic;font-variant: normal;font-weight: 500;font-size: 14px;line-height: 1.618;font-family: "Trebuchet MS",Georgia,serif;background-color: rgb(204,204,204);background-image: url("/images/foo.png");background-repeat: no-repeat;background-attachment: scroll;background-position: left top;}' . "\n";
286+
$sExpected = 'body {margin-top: 1em !important;margin-right: 1em !important;margin-bottom: 1em !important;margin-left: 1em !important;padding-top: 2px;padding-right: 6px;padding-bottom: 3px;padding-left: 6px;border-top-color: #f0f;border-right-color: #f0f;border-bottom-color: #f0f;border-left-color: #f0f;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-top-width: 2px;border-right-width: 2px;border-bottom-width: 2px;border-left-width: 2px;font-style: italic;font-variant: normal;font-weight: 500;font-size: 14px;line-height: 1.618;font-family: "Trebuchet MS",Georgia,serif;background-color: #ccc;background-image: url("/images/foo.png");background-repeat: no-repeat;background-attachment: scroll;background-position: left top;}' . "\n";
280287
$this->assertSame($sExpected, $oDoc->__toString());
281288
}
282289

283290
function testCreateShorthands() {
284291
$oDoc = $this->parsedStructureForFile('create-shorthands');
285-
$sExpected = 'body {font-size: 2em;font-family: Helvetica,Arial,sans-serif;font-weight: bold;border-width: 2px;border-color: rgb(153,153,153);border-style: dotted;background-color: rgb(255,255,255);background-image: url("foobar.png");background-repeat: repeat-y;margin-top: 2px;margin-right: 3px;margin-bottom: 4px;margin-left: 5px;}' . "\n";
292+
$sExpected = 'body {font-size: 2em;font-family: Helvetica,Arial,sans-serif;font-weight: bold;border-width: 2px;border-color: #999;border-style: dotted;background-color: #fff;background-image: url("foobar.png");background-repeat: repeat-y;margin-top: 2px;margin-right: 3px;margin-bottom: 4px;margin-left: 5px;}' . "\n";
286293
$this->assertSame($sExpected, $oDoc->__toString());
287294
$oDoc->createShorthands();
288-
$sExpected = 'body {background: rgb(255,255,255) url("foobar.png") repeat-y;margin: 2px 5px 4px 3px;border: 2px dotted rgb(153,153,153);font: bold 2em Helvetica,Arial,sans-serif;}' . "\n";
295+
$sExpected = 'body {background: #fff url("foobar.png") repeat-y;margin: 2px 5px 4px 3px;border: 2px dotted #999;font: bold 2em Helvetica,Arial,sans-serif;}' . "\n";
289296
$this->assertSame($sExpected, $oDoc->__toString());
290297
}
291298

@@ -298,7 +305,7 @@ function testNamespaces() {
298305

299306
function testInnerColors() {
300307
$oDoc = $this->parsedStructureForFile('inner-color');
301-
$sExpected = 'test {background: -webkit-gradient(linear,0 0,0 bottom,from(rgb(0,108,173)),to(rgb(0,159,249)));}' . "\n";
308+
$sExpected = 'test {background: -webkit-gradient(linear,0 0,0 bottom,from(#006cad),to(hsl(202,100%,49%)));}' . "\n";
302309
$this->assertSame($sExpected, $oDoc->__toString());
303310
}
304311

‎tests/Sabberworm/CSS/RuleSet/DeclarationBlockTest.php

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,10 @@ public function testExpandBorderShorthand($sCss, $sExpected) {
2020

2121
public function expandBorderShorthandProvider() {
2222
return array(
23-
array('body{ border: 2px solid rgb(0,0,0) }', 'body {border-width: 2px;border-style: solid;border-color: rgb(0,0,0);}'),
23+
array('body{ border: 2px solid #000 }', 'body {border-width: 2px;border-style: solid;border-color: #000;}'),
2424
array('body{ border: none }', 'body {border-style: none;}'),
2525
array('body{ border: 2px }', 'body {border-width: 2px;}'),
26-
array('body{ border: rgb(255,0,0) }', 'body {border-color: rgb(255,0,0);}'),
26+
array('body{ border: #f00 }', 'body {border-color: #f00;}'),
2727
array('body{ border: 1em solid }', 'body {border-width: 1em;border-style: solid;}'),
2828
array('body{ margin: 1em; }', 'body {margin: 1em;}')
2929
);
@@ -85,11 +85,11 @@ public function testExpandBackgroundShorthand($sCss, $sExpected) {
8585
public function expandBackgroundShorthandProvider() {
8686
return array(
8787
array('body {border: 1px;}', 'body {border: 1px;}'),
88-
array('body {background: rgb(255,0,0);}', 'body {background-color: rgb(255,0,0);background-image: none;background-repeat: repeat;background-attachment: scroll;background-position: 0% 0%;}'),
89-
array('body {background: rgb(255,0,0) url("foobar.png");}', 'body {background-color: rgb(255,0,0);background-image: url("foobar.png");background-repeat: repeat;background-attachment: scroll;background-position: 0% 0%;}'),
90-
array('body {background: rgb(255,0,0) url("foobar.png") no-repeat;}', 'body {background-color: rgb(255,0,0);background-image: url("foobar.png");background-repeat: no-repeat;background-attachment: scroll;background-position: 0% 0%;}'),
91-
array('body {background: rgb(255,0,0) url("foobar.png") no-repeat center;}', 'body {background-color: rgb(255,0,0);background-image: url("foobar.png");background-repeat: no-repeat;background-attachment: scroll;background-position: center center;}'),
92-
array('body {background: rgb(255,0,0) url("foobar.png") no-repeat top left;}', 'body {background-color: rgb(255,0,0);background-image: url("foobar.png");background-repeat: no-repeat;background-attachment: scroll;background-position: top left;}'),
88+
array('body {background: #f00;}', 'body {background-color: #f00;background-image: none;background-repeat: repeat;background-attachment: scroll;background-position: 0% 0%;}'),
89+
array('body {background: #f00 url("foobar.png");}', 'body {background-color: #f00;background-image: url("foobar.png");background-repeat: repeat;background-attachment: scroll;background-position: 0% 0%;}'),
90+
array('body {background: #f00 url("foobar.png") no-repeat;}', 'body {background-color: #f00;background-image: url("foobar.png");background-repeat: no-repeat;background-attachment: scroll;background-position: 0% 0%;}'),
91+
array('body {background: #f00 url("foobar.png") no-repeat center;}', 'body {background-color: #f00;background-image: url("foobar.png");background-repeat: no-repeat;background-attachment: scroll;background-position: center center;}'),
92+
array('body {background: #f00 url("foobar.png") no-repeat top left;}', 'body {background-color: #f00;background-image: url("foobar.png");background-repeat: no-repeat;background-attachment: scroll;background-position: top left;}'),
9393
);
9494
}
9595

@@ -129,7 +129,7 @@ public function testCreateBorderShorthand($sCss, $sExpected) {
129129

130130
public function createBorderShorthandProvider() {
131131
return array(
132-
array('body {border-width: 2px;border-style: solid;border-color: rgb(0,0,0);}', 'body {border: 2px solid rgb(0,0,0);}'),
132+
array('body {border-width: 2px;border-style: solid;border-color: #000;}', 'body {border: 2px solid #000;}'),
133133
array('body {border-style: none;}', 'body {border: none;}'),
134134
array('body {border-width: 1em;border-style: solid;}', 'body {border: 1em solid;}'),
135135
array('body {margin: 1em;}', 'body {margin: 1em;}')
@@ -196,12 +196,12 @@ public function testCreateBackgroundShorthand($sCss, $sExpected) {
196196
public function createBackgroundShorthandProvider() {
197197
return array(
198198
array('body {border: 1px;}', 'body {border: 1px;}'),
199-
array('body {background-color: rgb(255,0,0);}', 'body {background: rgb(255,0,0);}'),
200-
array('body {background-color: rgb(255,0,0);background-image: url(foobar.png);}', 'body {background: rgb(255,0,0) url("foobar.png");}'),
201-
array('body {background-color: rgb(255,0,0);background-image: url(foobar.png);background-repeat: no-repeat;}', 'body {background: rgb(255,0,0) url("foobar.png") no-repeat;}'),
202-
array('body {background-color: rgb(255,0,0);background-image: url(foobar.png);background-repeat: no-repeat;}', 'body {background: rgb(255,0,0) url("foobar.png") no-repeat;}'),
203-
array('body {background-color: rgb(255,0,0);background-image: url(foobar.png);background-repeat: no-repeat;background-position: center;}', 'body {background: rgb(255,0,0) url("foobar.png") no-repeat center;}'),
204-
array('body {background-color: rgb(255,0,0);background-image: url(foobar.png);background-repeat: no-repeat;background-position: top left;}', 'body {background: rgb(255,0,0) url("foobar.png") no-repeat top left;}'),
199+
array('body {background-color: #f00;}', 'body {background: #f00;}'),
200+
array('body {background-color: #f00;background-image: url(foobar.png);}', 'body {background: #f00 url("foobar.png");}'),
201+
array('body {background-color: #f00;background-image: url(foobar.png);background-repeat: no-repeat;}', 'body {background: #f00 url("foobar.png") no-repeat;}'),
202+
array('body {background-color: #f00;background-image: url(foobar.png);background-repeat: no-repeat;}', 'body {background: #f00 url("foobar.png") no-repeat;}'),
203+
array('body {background-color: #f00;background-image: url(foobar.png);background-repeat: no-repeat;background-position: center;}', 'body {background: #f00 url("foobar.png") no-repeat center;}'),
204+
array('body {background-color: #f00;background-image: url(foobar.png);background-repeat: no-repeat;background-position: top left;}', 'body {background: #f00 url("foobar.png") no-repeat top left;}'),
205205
);
206206
}
207207

‎tests/files/colortest.css

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
#mine {
22
color: red;
3-
border-color: rgba(10, 100, 230, 0.3);
3+
border-color: rgb(10, 100, 230);
4+
border-color: rgba(10, 100, 231, 0.3);
45
outline-color: #222;
56
background-color: #232323;
67
}
78

89
#yours {
9-
background-color: hsl(220, 10, 220);
10+
background-color: hsl(220, 10%, 220%);
11+
background-color: hsla(220, 10%, 220%, 0.3);
1012
}

‎tests/files/create-shorthands.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
body
2-
{
1+
body {
32
font-size: 2em; font-family: Helvetica,Arial,sans-serif; font-weight: bold;
43
border-width: 2px; border-color: #999; border-style: dotted;
54
background-color: #fff; background-image: url('foobar.png'); background-repeat: repeat-y;

‎tests/files/inner-color.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
test {
2-
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#006cad), to(#009ff9));
2+
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#006cad), to(hsl(202, 100%, 49%)));
33
}

0 commit comments

Comments
 (0)