resourceloader: Use SVG url when ResourceLoaderImageModule can't embed
When the SVG is too big to be embeded it is now included via URL. Previously it would produce an empty/broken 'url()' value. Bug: T160532 Change-Id: I158781f9430cfa35737397ac7537a471634c4480
This commit is contained in:
parent
70cd7dd712
commit
f4329ddbc8
2 changed files with 80 additions and 10 deletions
|
|
@ -315,11 +315,7 @@ class ResourceLoaderImageModule extends ResourceLoaderModule {
|
||||||
$selectors = $this->getSelectors();
|
$selectors = $this->getSelectors();
|
||||||
|
|
||||||
foreach ( $this->getImages( $context ) as $name => $image ) {
|
foreach ( $this->getImages( $context ) as $name => $image ) {
|
||||||
$declarations = $this->getCssDeclarations(
|
$declarations = $this->getStyleDeclarations( $context, $image, $script );
|
||||||
$image->getDataUri( $context, null, 'original' ),
|
|
||||||
$image->getUrl( $context, $script, null, 'rasterized' )
|
|
||||||
);
|
|
||||||
$declarations = implode( "\n\t", $declarations );
|
|
||||||
$selector = strtr(
|
$selector = strtr(
|
||||||
$selectors['selectorWithoutVariant'],
|
$selectors['selectorWithoutVariant'],
|
||||||
[
|
[
|
||||||
|
|
@ -331,11 +327,7 @@ class ResourceLoaderImageModule extends ResourceLoaderModule {
|
||||||
$rules[] = "$selector {\n\t$declarations\n}";
|
$rules[] = "$selector {\n\t$declarations\n}";
|
||||||
|
|
||||||
foreach ( $image->getVariants() as $variant ) {
|
foreach ( $image->getVariants() as $variant ) {
|
||||||
$declarations = $this->getCssDeclarations(
|
$declarations = $this->getStyleDeclarations( $context, $image, $script, $variant );
|
||||||
$image->getDataUri( $context, $variant, 'original' ),
|
|
||||||
$image->getUrl( $context, $script, $variant, 'rasterized' )
|
|
||||||
);
|
|
||||||
$declarations = implode( "\n\t", $declarations );
|
|
||||||
$selector = strtr(
|
$selector = strtr(
|
||||||
$selectors['selectorWithVariant'],
|
$selectors['selectorWithVariant'],
|
||||||
[
|
[
|
||||||
|
|
@ -352,6 +344,28 @@ class ResourceLoaderImageModule extends ResourceLoaderModule {
|
||||||
return [ 'all' => $style ];
|
return [ 'all' => $style ];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param ResourceLoaderContext $context
|
||||||
|
* @param ResourceLoaderImage $image Image to get the style for
|
||||||
|
* @param string $script URL to load.php
|
||||||
|
* @param string|null $variant Variant to get the style for
|
||||||
|
* @return string
|
||||||
|
*/
|
||||||
|
private function getStyleDeclarations(
|
||||||
|
ResourceLoaderContext $context,
|
||||||
|
ResourceLoaderImage $image,
|
||||||
|
$script,
|
||||||
|
$variant = null
|
||||||
|
) {
|
||||||
|
$imageDataUri = $image->getDataUri( $context, $variant, 'original' );
|
||||||
|
$primaryUrl = $imageDataUri ?: $image->getUrl( $context, $script, $variant, 'original' );
|
||||||
|
$declarations = $this->getCssDeclarations(
|
||||||
|
$primaryUrl,
|
||||||
|
$image->getUrl( $context, $script, $variant, 'rasterized' )
|
||||||
|
);
|
||||||
|
return implode( "\n\t", $declarations );
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* SVG support using a transparent gradient to guarantee cross-browser
|
* SVG support using a transparent gradient to guarantee cross-browser
|
||||||
* compatibility (browsers able to understand gradient syntax support also SVG).
|
* compatibility (browsers able to understand gradient syntax support also SVG).
|
||||||
|
|
|
||||||
|
|
@ -197,6 +197,62 @@ class ResourceLoaderImageModuleTest extends ResourceLoaderTestCase {
|
||||||
] ) );
|
] ) );
|
||||||
$this->assertInstanceOf( ResourceLoaderImage::class, $context->getImageObj() );
|
$this->assertInstanceOf( ResourceLoaderImage::class, $context->getImageObj() );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public static function providerGetStyleDeclarations() {
|
||||||
|
return [
|
||||||
|
[
|
||||||
|
false,
|
||||||
|
<<<TEXT
|
||||||
|
background-image: url(rasterized.png);
|
||||||
|
background-image: linear-gradient(transparent, transparent), url(original.svg);
|
||||||
|
background-image: -o-linear-gradient(transparent, transparent), url(rasterized.png);
|
||||||
|
TEXT
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'data:image/svg+xml',
|
||||||
|
<<<TEXT
|
||||||
|
background-image: url(rasterized.png);
|
||||||
|
background-image: linear-gradient(transparent, transparent), url(data:image/svg+xml);
|
||||||
|
background-image: -o-linear-gradient(transparent, transparent), url(rasterized.png);
|
||||||
|
TEXT
|
||||||
|
],
|
||||||
|
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @dataProvider providerGetStyleDeclarations
|
||||||
|
* @covers ResourceLoaderContext::getStyleDeclarations
|
||||||
|
*/
|
||||||
|
public function testGetStyleDeclarations( $dataUriReturnValue, $expected ) {
|
||||||
|
$module = TestingAccessWrapper::newFromObject( new ResourceLoaderImageModule() );
|
||||||
|
$context = $this->getResourceLoaderContext();
|
||||||
|
$image = $this->getImageMock( $context, $dataUriReturnValue );
|
||||||
|
|
||||||
|
$styles = $module->getStyleDeclarations(
|
||||||
|
$context,
|
||||||
|
$image,
|
||||||
|
'load.php'
|
||||||
|
);
|
||||||
|
|
||||||
|
$this->assertEquals( $expected, $styles );
|
||||||
|
}
|
||||||
|
|
||||||
|
private function getImageMock( ResourceLoaderContext $context, $dataUriReturnValue ) {
|
||||||
|
$image = $this->getMockBuilder( 'ResourceLoaderImage' )
|
||||||
|
->disableOriginalConstructor()
|
||||||
|
->getMock();
|
||||||
|
$image->method( 'getDataUri' )
|
||||||
|
->will( $this->returnValue( $dataUriReturnValue ) );
|
||||||
|
$image->expects( $this->any() )
|
||||||
|
->method( 'getUrl' )
|
||||||
|
->will( $this->returnValueMap( [
|
||||||
|
[ $context, 'load.php', null, 'original', 'original.svg' ],
|
||||||
|
[ $context, 'load.php', null, 'rasterized', 'rasterized.png' ],
|
||||||
|
] ) );
|
||||||
|
|
||||||
|
return $image;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class ResourceLoaderImageModuleTestable extends ResourceLoaderImageModule {
|
class ResourceLoaderImageModuleTestable extends ResourceLoaderImageModule {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue