From: Bartosz Dziewoński <matma.rex@gmail.com>
Date: Thu, 17 Apr 2014 20:09:28 +0000 (+0200)
Subject: mediawiki.mixins.less: Correctly embed images in .background-image-svg
X-Git-Tag: 1.31.0-rc.0~16133
X-Git-Url: https://git.cyclocoop.org/%28%28?a=commitdiff_plain;h=127222af0b77650d752f5ba05165701fe7fd7895;p=lhc%2Fweb%2Fwiklou.git

mediawiki.mixins.less: Correctly embed images in .background-image-svg

Using the /* @embed */ annotation twice for the same property
(background-image) confuses the LESS compiler, resulting in one of the
images not being embedded.

Let's use the embeddable() and embed() MediaWiki LESS functions,
like in the .background-image mixin.

And let's extend and clean up the documentation while we're here.

Bug: 61941
Change-Id: I39ea2004b9db34d096eed08b3ffdfcaf8d5fcd7d
---

diff --git a/resources/src/mediawiki.less/mediawiki.mixins.less b/resources/src/mediawiki.less/mediawiki.mixins.less
index 80b68cc28c..36f1bd44ff 100644
--- a/resources/src/mediawiki.less/mediawiki.mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.mixins.less
@@ -19,7 +19,7 @@
 	background-image: url(@url);
 }
 
-.vertical-gradient ( @startColor: gray, @endColor: white, @startPos: 0, @endPos: 100% ) {
+.vertical-gradient(@startColor: gray, @endColor: white, @startPos: 0, @endPos: 100%) {
 	background-color: @endColor;
 	background-image: -moz-linear-gradient( top, @startColor @startPos, @endColor @endPos ); // Firefox 3.6+
 	background-image: -webkit-gradient( linear, left top, left bottom, color-stop( @startPos, @startColor ), color-stop( @endPos, @endColor ) ); // Safari 4+, Chrome 2+
@@ -27,14 +27,27 @@
 	background-image: linear-gradient( @startColor @startPos, @endColor @endPos ); // Standard
 }
 
-/* Note gzip compression means that it is okay to embed twice */
-/* http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique */
-.background-image-svg(@svg, @fallback) {
+/*
+ * SVG support using a transparent gradient to guarantee cross-browser
+ * compatibility (browsers able to understand gradient syntax support also SVG).
+ * http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique
+ *
+ * We use gzip compression, which means that it is okay to embed twice.
+ *
+ * We do not embed the fallback image on the assumption that the gain for old browsers
+ * is not worth the harm done to modern ones.
+ */
+.background-image-svg(@svg, @fallback) when (embeddable(@svg)) {
+	background-image: url(@fallback);
+	/* We don't need the !ie hack because this old IE uses the fallback already */
+	background-image: -webkit-linear-gradient(transparent, transparent), embed(@svg);
+	background-image: linear-gradient(transparent, transparent), embed(@svg);
+}
+
+.background-image-svg(@svg, @fallback) when not (embeddable(@svg)) {
 	background-image: url(@fallback);
-	/* SVG support using a transparent gradient to guarantee cross-browser
-	 * compatibility (browsers able to understand gradient syntax support also SVG) */
-	/* @embed */ background-image: -webkit-linear-gradient(transparent, transparent), url(@svg);
-	/* @embed */ background-image: linear-gradient(transparent, transparent), url(@svg);
+	background-image: -webkit-linear-gradient(transparent, transparent), url(@svg);
+	background-image: linear-gradient(transparent, transparent), url(@svg);
 }
 
 /* Caution: Does not support localisable images */