Bugfix: background with background-size containing functions removed …

…slash, fixes #247
tdewolff · Apr 5, 2019 · 87dacf4 · 87dacf4
1 parent 2028e63
commit 87dacf4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/css/css.go b/css/css.go
@@ -539,12 +539,15 @@ func (c *cssMinifier) minifyProperty(prop css.Hash, values []Token) []Token {
 			values = []Token{{css.IdentToken, []byte("none"), nil}}
 		}
 	case css.Background:
+		// TODO: multiple background layers separated by comma
 		hasSize := false
 		for i := 0; i < len(values); i++ {
 			if values[i].TokenType == css.DelimToken && values[i].Data[0] == '/' {
 				hasSize = true
-				if i+1 < len(values) && (values[i+1].TokenType == css.NumberToken || values[i+1].TokenType == css.PercentageToken || values[i+1].TokenType == css.IdentToken && bytes.Equal(values[i+1].Data, []byte("auto"))) {
-					if i+2 < len(values) && (values[i+2].TokenType == css.NumberToken || values[i+2].TokenType == css.PercentageToken || values[i+2].TokenType == css.IdentToken && bytes.Equal(values[i+2].Data, []byte("auto"))) {
+				// background-size consists of either [<length-percentage> | auto | cover | contain] or [<length-percentage> | auto]{2}
+				// we can only minify the latter
+				if i+1 < len(values) && (values[i+1].TokenType == css.NumberToken || values[i+1].TokenType == css.PercentageToken || values[i+1].TokenType == css.IdentToken && bytes.Equal(values[i+1].Data, []byte("auto")) || values[i+1].TokenType == css.FunctionToken) {
+					if i+2 < len(values) && (values[i+2].TokenType == css.NumberToken || values[i+2].TokenType == css.PercentageToken || values[i+2].TokenType == css.IdentToken && bytes.Equal(values[i+2].Data, []byte("auto")) || values[i+2].TokenType == css.FunctionToken) {
 						sizeValues := c.minifyProperty(css.Background_Size, values[i+1:i+3])
 						if len(sizeValues) == 1 && bytes.Equal(sizeValues[0].Data, []byte("auto")) {
 							values = append(values[:i], values[i+3:]...)
@@ -554,10 +557,6 @@ func (c *cssMinifier) minifyProperty(prop css.Hash, values []Token) []Token {
 							values = append(values[:i+1], append(sizeValues, values[i+3:]...)...)
 							i += len(sizeValues) - 1
 						}
-					} else if values[i+1].TokenType == css.IdentToken && bytes.Equal(values[i+1].Data, []byte("auto")) {
-						values = append(values[:i], values[i+2:]...)
-						hasSize = false
-						i--
 					}
 				}
 			}
@@ -600,6 +599,7 @@ func (c *cssMinifier) minifyProperty(prop css.Hash, values []Token) []Token {
 				continue
 			}
 
+			// background-position or background-size
 			if values[i].TokenType == css.NumberToken || values[i].TokenType == css.PercentageToken || values[i].TokenType == css.IdentToken && (h == css.Left || h == css.Right || h == css.Top || h == css.Bottom || h == css.Center) {
 				j := i + 1
 				for ; j < len(values); j++ {

diff --git a/css/css_test.go b/css/css_test.go
@@ -95,9 +95,9 @@ func TestCSSInline(t *testing.T) {
 		{"color: rgba(255,0,0,1);", "color:red"},
 		{"color: rgba(255,0,0,2);", "color:red"},
 		{"color: rgba(255,0,0,0.5);", "color:rgba(255,0,0,.5)"}, // {"color: rgba(255,0,0,0.5);", "color:#ff000080"},
-		{"color: rgba(255,0,0,-1);", "color:transparent"}, // {"color: rgba(255,0,0,-1);", "color:#0000"},
+		{"color: rgba(255,0,0,-1);", "color:transparent"},       // {"color: rgba(255,0,0,-1);", "color:#0000"},
 		// {"color: rgba(0%,15%,25%,0.2);", "color:rgba(0,15%,25%,.2)"}, TODO: zero percentage to zero // {"color: rgba(0%,15%,25%,0.2);", "color:#00264033"},
-		{"color: rgba(0,0,0,0.5);", "color:rgba(0,0,0,.5)"}, // {"color: rgba(0,0,0,0.5);", "color:#00000080"},
+		{"color: rgba(0,0,0,0.5);", "color:rgba(0,0,0,.5)"},                 // {"color: rgba(0,0,0,0.5);", "color:#00000080"},
 		{"color: rgba(0,0,0,0.264705882);", "color:rgba(0,0,0,.264705882)"}, // {"color: rgba(0,0,0,0.264705882);", "color:#0004"},
 		{"color: rgb(255 0 0 / 1);", "color:red"},
 		{"color: hsla(5,0%,10%,0.75);", "color:hsla(5,0%,10%,.75)"}, // {"color: hsla(5,0%,10%,0.75);", "color:#1a1a1abf"},
@@ -143,6 +143,10 @@ func TestCSSInline(t *testing.T) {
 		{"background:no-repeat repeat", "background:repeat-y"},
 		{"background:top right", "background:100% 0"},
 		{"background:bottom left", "background:0 100%"},
+		{"background:#fff url(foo.svg) no-repeat right .75rem center / auto calc(100% - 1.5rem)", "background:#fff url(foo.svg) no-repeat 100% .75rem 50%/auto calc(100% - 1.5rem)"},
+		{"background:#fff / 5% auto", "background:#fff/5%"},
+		{"background:#fff / auto 5%", "background:#fff/auto 5%"},
+		{"background:calc(5%-2%) center", "background:calc(5%-2%)"},
 		{"font-weight: bold; font-weight: normal;", "font-weight:700;font-weight:400"},
 		{"font: caption;", "font:caption"},
 		{"font: bold 5px \"Times new Roman\",\"Sans-Serif\";", "font:700 5px times new roman,sans-serif"},