Thijs/wiki.techinc.nl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Support mask-image in ResourceLoader ImageModule

Browse source 
The feature would be opt in to retain backwards compatible
support while also moving closer to rendering icons
consistently with how Codex does.

An example of this in use are:
* Ie5c88e0aa243f73f2dc9f310d18fd59b831edc64
* I17fabdf276f6c33fb78c007d75cda6bb9e02d79b

Bug: T365764
Bug: T358246
Change-Id: I95caab8037ccceba73101da2eb3c601f39511377
This commit is contained in:
Jon Robson 2024-06-04 15:00:29 -07:00 committed by Catrope
parent 0866d5e2a0
commit e977eea153
2 changed files with 27 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
includes/ResourceLoader/ImageModule.php
View file

@ -30,6 +30,8 @@ use Wikimedia\Minify\CSSMin;
* @since 1.25
*/
class ImageModule extends Module {
/** @var bool */
private $useMaskImage;
/** @var array|null */
protected $definition;
@ -69,6 +71,9 @@ class ImageModule extends Module {
* @par Construction options:
* @code
* [
* // When set the icon will use mask-image instead of background-image for the CSS output. Using mask-image
* // allows colorization of SVGs in Codex. Defaults to false for backwards compatibility.
* 'useMaskImage' => false,
* // Base path to prepend to all local paths in $options. Defaults to $IP
* 'localBasePath' => [base path],
* // Path to JSON file that contains any of the settings below
@ -113,6 +118,7 @@ class ImageModule extends Module {
* @endcode
*/
public function __construct( array $options = [], $localBasePath = null ) {
$this->useMaskImage = $options['useMaskImage'] ?? false;
$this->localBasePath = static::extractLocalBasePath( $options, $localBasePath );
$this->definition = $options;
@ -355,6 +361,7 @@ class ImageModule extends Module {
}
$style = implode( "\n", $rules );
return [ 'all' => $style ];
}
@ -391,11 +398,24 @@ class ImageModule extends Module {
*/
protected function getCssDeclarations( $primary ): array {
$primaryUrl = CSSMin::buildUrlValue( $primary );
if ( $this->supportsMaskImage() ) {
return [
"--webkit-mask-image: $primaryUrl;",
"mask-image: $primaryUrl;",
];
}
return [
"background-image: $primaryUrl;",
];
}
/**
* @return bool
*/
public function supportsMaskImage() {
return $this->useMaskImage;
}
/**
* @return bool
*/

9
tests/phpunit/includes/ResourceLoader/ImageModuleTest.php
View file

@ -262,14 +262,19 @@ class ImageModuleTest extends ResourceLoaderTestCase {
'data:image/svg+xml',
'background-image: url(data:image/svg+xml);',
],
[
'data:image/svg+xml',
"--webkit-mask-image: url(data:image/svg+xml);\n mask-image: url(data:image/svg+xml);",
true
]
];
}
/**
* @dataProvider providerGetStyleDeclarations
*/
public function testGetStyleDeclarations( $dataUriReturnValue, $expected ) {
$module = TestingAccessWrapper::newFromObject( new ImageModule() );
public function testGetStyleDeclarations( $dataUriReturnValue, $expected, $useMaskImage = false ) {
$module = TestingAccessWrapper::newFromObject( new ImageModule( [ 'useMaskImage' => $useMaskImage ] ) );
$context = $this->getResourceLoaderContext();
$image = $this->getImageMock( $context, $dataUriReturnValue );