diff --git a/core/modules/image/src/Entity/ImageStyle.php b/core/modules/image/src/Entity/ImageStyle.php index 649fa92..df134ab 100644 --- a/core/modules/image/src/Entity/ImageStyle.php +++ b/core/modules/image/src/Entity/ImageStyle.php @@ -342,7 +342,7 @@ public function getEffect($effect) { */ public function getEffects() { if (!$this->effectsBag) { - $this->effectsBag = new ImageEffectBag(\Drupal::service('plugin.manager.image.effect'), $this->effects); + $this->effectsBag = new ImageEffectBag($this->getImageEffectPluginManager(), $this->effects); $this->effectsBag->sort(); } return $this->effectsBag; @@ -386,4 +386,11 @@ public function setName($name) { return $this; } + /** + * {@inheritdoc} + */ + public function getImageEffectPluginManager() { + return \Drupal::service('plugin.manager.image.effect'); + } + } diff --git a/core/modules/image/src/ImageStyleInterface.php b/core/modules/image/src/ImageStyleInterface.php index 13a0d36..6a66f98 100644 --- a/core/modules/image/src/ImageStyleInterface.php +++ b/core/modules/image/src/ImageStyleInterface.php @@ -178,4 +178,12 @@ public function addImageEffect(array $configuration); */ public function deleteImageEffect(ImageEffectInterface $effect); + /** + * Returns the image effect plugin manager. + * + * @return \Drupal\Component\Plugin\PluginManagerInterface + * The image effect plugin manager. + */ + public function getImageEffectPluginManager(); + } diff --git a/core/modules/image/src/Tests/ImageStyleTest.php b/core/modules/image/src/Tests/ImageStyleTest.php index a6a15c2..78d9b7c 100644 --- a/core/modules/image/src/Tests/ImageStyleTest.php +++ b/core/modules/image/src/Tests/ImageStyleTest.php @@ -7,9 +7,7 @@ namespace Drupal\image\Tests; -use Drupal\Core\DependencyInjection\ContainerBuilder; use Drupal\Tests\UnitTestCase; -use Drupal\image\Entity\ImageStyle; /** * @coversDefaultClass \Drupal\image\Entity\ImageStyle @@ -72,8 +70,6 @@ public function setUp() { $this->effectManager = $this->getMockBuilder('\Drupal\image\ImageEffectManager') ->disableOriginalConstructor() ->getMock(); - $container = new ContainerBuilder(); - \Drupal::setContainer($container); } /** @@ -88,17 +84,28 @@ public function testTransformMimeType() { $image_effect->expects($this->any()) ->method('transformMimeType') ->will($this->returnCallback(function (&$mime_type) { $mime_type = 'image/webp';})); + $this->effectManager->expects($this->any()) ->method('createInstance') ->with($image_effect_id) ->will($this->returnValue($image_effect)); - \Drupal::getContainer()->set('plugin.manager.image.effect', $this->effectManager); - $image_style = new ImageStyle(array('effects' => array($image_effect_id => array('id' => $image_effect_id))), $this->entityTypeId); + $image_style = $this->getMockBuilder('\Drupal\image\Entity\ImageStyle') + ->setConstructorArgs(array( + array('effects' => array($image_effect_id => array('id' => $image_effect_id))), + $this->entityTypeId, + )) + ->setMethods(array('getImageEffectPluginManager')) + ->getMock(); + $image_style->expects($this->any()) + ->method('getImageEffectPluginManager') + ->will($this->returnValue($this->effectManager)); + $mime_types = array('image/jpeg', 'image/gif', 'image/png'); foreach ($mime_types as $mime_type) { $image_style->transformMimeType($mime_type); $this->assertEquals($mime_type, 'image/webp'); } } + } diff --git a/core/modules/responsive_image/responsive_image.module b/core/modules/responsive_image/responsive_image.module index 4b3b320..de919b5 100644 --- a/core/modules/responsive_image/responsive_image.module +++ b/core/modules/responsive_image/responsive_image.module @@ -8,6 +8,8 @@ use Drupal\Component\Utility\SafeMarkup; use Drupal\Core\Routing\RouteMatchInterface; use \Drupal\Core\Template\Attribute; +use Drupal\image\Entity\ImageStyle; +use Drupal\responsive_image\Entity\ResponsiveImageMapping; /** * The machine name for the empty image breakpoint image style option. @@ -198,7 +200,7 @@ function theme_responsive_image($variables) { $image = \Drupal::service('image.factory')->get($variables['uri']); $mime_type = $image->getMimeType(); - $responsive_image_mapping = entity_load('responsive_image_mapping', $variables['mapping_id']); + $responsive_image_mapping = ResponsiveImageMapping::load($variables['mapping_id']); // All breakpoints and multipliers. $breakpoints = \Drupal::service('breakpoint.manager')->getBreakpointsByGroup($responsive_image_mapping->getBreakpointGroup()); foreach ($responsive_image_mapping->getKeyedMappings() as $breakpoint_id => $multipliers) { @@ -209,13 +211,22 @@ function theme_responsive_image($variables) { $derivative_mime_types = array(); foreach ($multipliers as $multiplier => $mapping_definition) { switch ($mapping_definition['mapping_type']) { + // Create a source tag with the sizes attribute. case 'sizes': - foreach (array_filter($mapping_definition['sizes_image_styles']) as $image_style_name) { + // Loop through the image styles for this breakpoint and multiplier. + foreach ($mapping_definition['sizes_image_styles'] as $image_style_name) { + // Get the dimensions. $dimensions = responsive_image_get_image_dimensions($image_style_name, array('width' => $variables['width'], 'height' => $variables['height'])); // Get MIME type. $derivative_mime_type = responsive_image_get_mime_type($image_style_name, $mime_type); $derivative_mime_types[] = $derivative_mime_type; + // Add the image source with its width descriptor. When a width + // descriptor is used in a srcset, we can't add a multiplier to + // it. Because of this the image styles for all multipliers of + // this breakpoint should be merged in to one srcset and the sizes + // attribute should be merged as well. + // http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#image-candidate-string $srcset[] = _responsive_image_image_style_url($image_style_name, $image->getSource()) . ' ' . $dimensions['width'] . 'w'; $sizes = array_merge(explode(',', $mapping_definition['sizes']), $sizes); } @@ -224,19 +235,18 @@ function theme_responsive_image($variables) { // Get MIME type. $derivative_mime_type = responsive_image_get_mime_type($mapping_definition['image_style'], $mime_type); $derivative_mime_types[] = $derivative_mime_type; - + // Add the image source with its multiplier. $srcset[] = _responsive_image_image_style_url($mapping_definition['image_style'], $image->getSource()) . ' ' . $multiplier; break; } } - // Only add MIME type if it is unique. - $derivative_mime_types = array_unique($derivative_mime_types); $sources[] = array( '#theme' => 'responsive_image_source', '#srcset' => implode(', ', array_unique($srcset)), '#media' => $breakpoint->getMediaQuery(), - '#mime_type' => count($derivative_mime_types) == 1 ? reset($derivative_mime_types) : '', + // Only set a MIME type if all derivative images have the same MIME type. + '#mime_type' => count(array_unique($derivative_mime_types)) == 1 ? $derivative_mime_types[0] : '', '#sizes' => implode(',', array_unique($sizes)), ); } @@ -245,6 +255,8 @@ function theme_responsive_image($variables) { if (!empty($sources)) { $output = array(); $output[] = ''; + // Internet Explorer 9 doesn't recognise source elements that are wrapped in + // picture tags. See http://scottjehl.github.io/picturefill/#ie9 $output[] = ''; $output = array_merge($output, array_map('drupal_render', $sources)); $output[] = ''; @@ -267,7 +279,7 @@ function theme_responsive_image($variables) { $fallback_image["#$key"] = $variables[$key]; } } - $output[] = drupal_render($fallback_image); + $output[] = drupal_render($fallback_image, TRUE); $output[] = ''; return SafeMarkup::set(implode("\n", $output)); } @@ -325,7 +337,7 @@ function responsive_image_get_image_dimensions($image_style_name, $dimensions) { ); } else { - entity_load('image_style', $image_style_name)->transformDimensions($dimensions); + ImageStyle::load($image_style_name)->transformDimensions($dimensions); } return $dimensions; @@ -346,7 +358,7 @@ function responsive_image_get_mime_type($image_style_name, $mime_type) { if ($image_style_name == RESPONSIVE_IMAGE_EMPTY_IMAGE) { return 'image/gif'; } - entity_load('image_style', $image_style_name)->transformMimeType($mime_type); + ImageStyle::load($image_style_name)->transformMimeType($mime_type); return $mime_type; } @@ -356,8 +368,9 @@ function responsive_image_get_mime_type($image_style_name, $mime_type) { function _responsive_image_image_style_url($style_name, $path) { if ($style_name == RESPONSIVE_IMAGE_EMPTY_IMAGE) { // The smallest data URI for a 1px square transparent GIF image. - return 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; + // http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever + return 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; } - return entity_load('image_style', $style_name)->buildUrl($path); + return ImageStyle::load($style_name)->buildUrl($path); } diff --git a/core/modules/responsive_image/src/Entity/ResponsiveImageMapping.php b/core/modules/responsive_image/src/Entity/ResponsiveImageMapping.php index 9fdf90a..c4c0181 100644 --- a/core/modules/responsive_image/src/Entity/ResponsiveImageMapping.php +++ b/core/modules/responsive_image/src/Entity/ResponsiveImageMapping.php @@ -88,12 +88,14 @@ public function __construct(array $values, $entity_type_id = 'responsive_image_m /** * {@inheritdoc} */ - public function addMapping($breakpoint_id, $multiplier, $mapping_definition) { + public function addMapping($breakpoint_id, $multiplier, array $mapping_definition) { + // If there is an existing mapping, overwrite it. foreach ($this->mappings as &$mapping) { if ($mapping['breakpoint_id'] === $breakpoint_id && $mapping['multiplier'] === $multiplier) { - $mapping = $mapping_definition; - $mapping['breakpoint_id'] = $breakpoint_id; - $mapping['multiplier'] = $multiplier; + $mapping = array( + 'breakpoint_id' => $breakpoint_id, + 'multiplier' => $multiplier, + ) + $mapping_definition; return $this; } } @@ -121,6 +123,7 @@ public function getKeyedMappings() { $this->keyedMappings = array(); foreach($this->mappings as $mapping) { if (!$this->isEmptyMappingDefinition($mapping)) { + // Only return the selected image styles. $mapping['sizes_image_styles'] = array_filter($mapping['sizes_image_styles']); $this->keyedMappings[$mapping['breakpoint_id']][$mapping['multiplier']] = $mapping; } @@ -179,15 +182,18 @@ public function calculateDependencies() { /** * {@inheritdoc} */ - public static function isEmptyMappingDefinition($mapping_definition) { + public static function isEmptyMappingDefinition(array $mapping_definition) { if (!empty($mapping_definition)) { switch ($mapping_definition['mapping_type']) { case 'sizes': + // The mapping definition must have a sizes attribute defined and one + // or more image styles selected. if ($mapping_definition['sizes'] && array_filter($mapping_definition['sizes_image_styles'])) { return FALSE; } break; case 'image_style': + // The mapping definition must have an image style selected. if ($mapping_definition['image_style']) { return FALSE; } diff --git a/core/modules/responsive_image/src/Plugin/Field/FieldFormatter/ResponsiveImageFormatter.php b/core/modules/responsive_image/src/Plugin/Field/FieldFormatter/ResponsiveImageFormatter.php index 809f087..fd4e999 100644 --- a/core/modules/responsive_image/src/Plugin/Field/FieldFormatter/ResponsiveImageFormatter.php +++ b/core/modules/responsive_image/src/Plugin/Field/FieldFormatter/ResponsiveImageFormatter.php @@ -11,6 +11,8 @@ use Drupal\Core\Field\FieldItemListInterface; use Drupal\Core\Form\FormStateInterface; use Drupal\image\Plugin\Field\FieldFormatter\ImageFormatterBase; +use Drupal\responsive_image\Entity\ResponsiveImageMapping; +use Drupal\image\Entity\ImageStyle; /** * Plugin for responsive image formatter. @@ -41,7 +43,7 @@ public static function defaultSettings() { */ public function settingsForm(array $form, FormStateInterface $form_state) { $responsive_image_options = array(); - $responsive_image_mappings = entity_load_multiple('responsive_image_mapping'); + $responsive_image_mappings = ResponsiveImageMapping::loadMultiple(); if ($responsive_image_mappings && !empty($responsive_image_mappings)) { foreach ($responsive_image_mappings as $machine_name => $responsive_image_mapping) { if ($responsive_image_mapping->hasMappings()) { @@ -88,7 +90,7 @@ public function settingsForm(array $form, FormStateInterface $form_state) { public function settingsSummary() { $summary = array(); - $responsive_image_mapping = entity_load('responsive_image_mapping', $this->getSetting('responsive_image_mapping')); + $responsive_image_mapping = ResponsiveImageMapping::load($this->getSetting('responsive_image_mapping')); if ($responsive_image_mapping) { $summary[] = t('Responsive image mapping: @responsive_image_mapping', array('@responsive_image_mapping' => $responsive_image_mapping->label())); @@ -140,30 +142,38 @@ public function viewElements(FieldItemListInterface $items) { } // Collect cache tags to be added for each item in the field. - $responsive_image_mapping = entity_load('responsive_image_mapping', $this->getSetting('responsive_image_mapping')); + $responsive_image_mapping = ResponsiveImageMapping::load($this->getSetting('responsive_image_mapping')); $image_styles_to_load = array(); $all_cache_tags = array(); if ($responsive_image_mapping) { $all_cache_tags[] = $responsive_image_mapping->getCacheTag(); foreach ($responsive_image_mapping->getMappings() as $mapping) { + // Only image styles of non-empty mappings should be loaded. if (!$responsive_image_mapping::isEmptyMappingDefinition($mapping)) { $mapping['sizes_image_styles'] = array_filter($mapping['sizes_image_styles']); if ($mapping['mapping_type'] == 'image_style') { + // This mapping has one image style, add it. $image_styles_to_load[] = $mapping['image_style']; } else { + // This mapping has multiple image styles, merge them. $image_styles_to_load = array_merge($image_styles_to_load, $mapping['sizes_image_styles']); } } } } + + // If there is a fallback image style, add it to the image styles to load. if ($fallback_image_style) { $image_styles_to_load[] = $fallback_image_style; } else { + // Picturefill uses the first matching breakpoint. Meaning the breakpoints + // are sorted from large to small. With mobile-first in mind, the fallback + // image should be the one selected for the smallest screen. $fallback_image_style = end($image_styles_to_load); } - $image_styles = entity_load_multiple('image_style', $image_styles_to_load); + $image_styles = ImageStyle::loadMultiple($image_styles_to_load); foreach ($image_styles as $image_style) { $all_cache_tags[] = $image_style->getCacheTag(); } @@ -171,6 +181,7 @@ public function viewElements(FieldItemListInterface $items) { $cache_tags = NestedArray::mergeDeepArray($all_cache_tags); foreach ($items as $delta => $item) { + // Link the picture element to the original file. if (isset($link_file)) { $uri = array( 'path' => file_create_url($item->entity->getFileUri()), diff --git a/core/modules/responsive_image/src/ResponsiveImageMappingForm.php b/core/modules/responsive_image/src/ResponsiveImageMappingForm.php index ba35d64..ee9068c 100644 --- a/core/modules/responsive_image/src/ResponsiveImageMappingForm.php +++ b/core/modules/responsive_image/src/ResponsiveImageMappingForm.php @@ -110,21 +110,21 @@ public function form(array $form, FormStateInterface $form_state) { ); $mapping_definition = $responsive_image_mapping->getMappingDefinition($breakpoint_id, $multiplier); $form['keyed_mappings'][$breakpoint_id][$multiplier]['mapping_type'] = array( - '#title' => t('Type'), + '#title' => $this->t('Type'), '#type' => 'radios', '#options' => array( - '_none' => t('Do not use this breakpoint'), - 'image_style' => t('Use image styles'), - 'sizes' => t('Use the sizes attribute'), + '_none' => $this->t('Do not use this breakpoint'), + 'image_style' => $this->t('Use image styles'), + 'sizes' => $this->t('Use the sizes attribute'), ), '#default_value' => isset($mapping_definition['mapping_type']) ? $mapping_definition['mapping_type'] : '_none', ); $form['keyed_mappings'][$breakpoint_id][$multiplier]['image_style'] = array( '#type' => 'select', - '#title' => t('Image style'), + '#title' => $this->t('Image style'), '#options' => $image_styles, '#default_value' => isset($mapping_definition['image_style']) ? $mapping_definition['image_style'] : array(), - '#description' => $this->t('Select an image style for this breakpoint.'), + '#description' => $this->t('Select an image style for this breakpoint.'), '#states' => array( 'visible' => array( ':input[name="keyed_mappings[' . $breakpoint_id . '][' . $multiplier . '][mapping_type]"]' => array('value' => 'image_style'), @@ -133,7 +133,7 @@ public function form(array $form, FormStateInterface $form_state) { ); $form['keyed_mappings'][$breakpoint_id][$multiplier]['sizes'] = array( '#type' => 'textfield', - '#title' => t('Sizes'), + '#title' => $this->t('Sizes'), '#default_value' => isset($mapping_definition['sizes']) ? $mapping_definition['sizes'] : '', '#description' => $this->t('Enter the value for the sizes attribute (e.g. "(min-width:700px) 700px, 100vw").'), '#states' => array( @@ -143,7 +143,7 @@ public function form(array $form, FormStateInterface $form_state) { ), ); $form['keyed_mappings'][$breakpoint_id][$multiplier]['sizes_image_styles'] = array( - '#title' => t('Image styles'), + '#title' => $this->t('Image styles'), '#type' => 'checkboxes', '#options' => array_diff_key($image_styles, array('' => '')), '#default_value' => isset($mapping_definition['sizes_image_styles']) ? $mapping_definition['sizes_image_styles'] : array(), diff --git a/core/modules/responsive_image/src/ResponsiveImageMappingInterface.php b/core/modules/responsive_image/src/ResponsiveImageMappingInterface.php index 1a216ab..d4d374f 100644 --- a/core/modules/responsive_image/src/ResponsiveImageMappingInterface.php +++ b/core/modules/responsive_image/src/ResponsiveImageMappingInterface.php @@ -79,7 +79,7 @@ public function getBreakpointGroup(); * The multiplier. * * @return array|null - * The mapping definition. Null if the mapping does not exist. + * The mapping definition. NULL if the mapping does not exist. * The mapping definition has following keys: * - mapping_type: One of image_style or sizes. * - image_style: If mapping_type is image_style, the image style ID. @@ -99,7 +99,7 @@ public function getMappingDefinition($breakpoint_id, $multiplier); * @return bool * Whether the mapping definition is empty. */ - public static function isEmptyMappingDefinition($mapping_definition); + public static function isEmptyMappingDefinition(array $mapping_definition); /** * Adds a mapping to the responsive image configuration entity. @@ -113,7 +113,7 @@ public static function isEmptyMappingDefinition($mapping_definition); * * @return $this */ - public function addMapping($breakpoint_id, $multiplier, $mapping_definition); + public function addMapping($breakpoint_id, $multiplier, array $mapping_definition); /** * Removes all mappings from the responsive image configuration entity. diff --git a/core/modules/responsive_image/src/Tests/ResponsiveImageAdminUITest.php b/core/modules/responsive_image/src/Tests/ResponsiveImageAdminUITest.php index 09db7c3..492a81e 100644 --- a/core/modules/responsive_image/src/Tests/ResponsiveImageAdminUITest.php +++ b/core/modules/responsive_image/src/Tests/ResponsiveImageAdminUITest.php @@ -69,38 +69,26 @@ public function testResponsiveImageAdmin() { $this->assertFieldByName('label', 'Mapping One'); $this->assertFieldByName('breakpointGroup', 'responsive_image_test_module'); - // Check if the radio buttons are present. - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.mobile][1x][mapping_type]', ''); - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.mobile][2x][mapping_type]', ''); - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.narrow][1x][mapping_type]', ''); - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.narrow][2x][mapping_type]', ''); - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.wide][1x][mapping_type]', ''); - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.wide][2x][mapping_type]', ''); - - // Check if the image style dropdowns are present. - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.mobile][1x][image_style]', ''); - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.mobile][2x][image_style]', ''); - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.narrow][1x][image_style]', ''); - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.narrow][2x][image_style]', ''); - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.wide][1x][image_style]', ''); - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.wide][2x][image_style]', ''); + $cases = array( + array('mobile', '1x'), + array('mobile', '2x'), + array('narrow', '1x'), + array('narrow', '2x'), + array('wide', '1x'), + array('wide', '2x'), + ); - // Check if the sizes textfields are present. - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.mobile][1x][sizes]', ''); - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.mobile][2x][sizes]', ''); - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.narrow][1x][sizes]', ''); - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.narrow][2x][sizes]', ''); - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.wide][1x][sizes]', ''); - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.wide][2x][sizes]', ''); - - // Check if the image styles checkboxes are present. - foreach (array_keys(image_style_options(FALSE)) as $image_style_name) { - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.mobile][1x][sizes_image_styles][' . $image_style_name . ']'); - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.mobile][2x][sizes_image_styles][' . $image_style_name . ']'); - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.narrow][1x][sizes_image_styles][' . $image_style_name . ']'); - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.narrow][2x][sizes_image_styles][' . $image_style_name . ']'); - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.wide][1x][sizes_image_styles][' . $image_style_name . ']'); - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.wide][2x][sizes_image_styles][' . $image_style_name . ']'); + foreach ($cases as $case) { + // Check if the radio buttons are present. + $this->assertFieldByName('keyed_mappings[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][mapping_type]', ''); + // Check if the image style dropdowns are present. + $this->assertFieldByName('keyed_mappings[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][image_style]', ''); + // Check if the sizes textfields are present. + $this->assertFieldByName('keyed_mappings[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][sizes]', ''); + // Check if the image styles checkboxes are present. + foreach (array_keys(image_style_options(FALSE)) as $image_style_name) { + $this->assertFieldByName('keyed_mappings[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][sizes_image_styles][' . $image_style_name . ']'); + } } // Save mappings for 1x variant only. @@ -118,10 +106,14 @@ public function testResponsiveImageAdmin() { ); $this->drupalPostForm('admin/config/media/responsive-image-mapping/mapping_one', $edit, t('Save')); $this->drupalGet('admin/config/media/responsive-image-mapping/mapping_one'); + + // Check the mapping for multipliers 1x and 2x for the mobile breakpoint. $this->assertFieldByName('keyed_mappings[responsive_image_test_module.mobile][1x][image_style]', 'thumbnail'); $this->assertFieldByName('keyed_mappings[responsive_image_test_module.mobile][1x][mapping_type]', 'image_style'); $this->assertFieldByName('keyed_mappings[responsive_image_test_module.mobile][2x][image_style]', ''); $this->assertFieldByName('keyed_mappings[responsive_image_test_module.mobile][2x][mapping_type]', '_none'); + + // Check the mapping for multipliers 1x and 2x for the narrow breakpoint. $this->assertFieldByName('keyed_mappings[responsive_image_test_module.narrow][1x][image_style]', ''); $this->assertFieldByName('keyed_mappings[responsive_image_test_module.narrow][1x][mapping_type]', 'sizes'); $this->assertFieldByName('keyed_mappings[responsive_image_test_module.narrow][1x][sizes]', '(min-width: 700px) 700px, 100vw'); @@ -130,6 +122,8 @@ public function testResponsiveImageAdmin() { $this->assertNoFieldChecked('edit-keyed-mappings-responsive-image-test-modulenarrow-1x-sizes-image-styles-thumbnail'); $this->assertFieldByName('keyed_mappings[responsive_image_test_module.narrow][2x][image_style]', ''); $this->assertFieldByName('keyed_mappings[responsive_image_test_module.narrow][2x][mapping_type]', '_none'); + + // Check the mapping for multipliers 1x and 2x for the wide breakpoint. $this->assertFieldByName('keyed_mappings[responsive_image_test_module.wide][1x][image_style]', 'large'); $this->assertFieldByName('keyed_mappings[responsive_image_test_module.wide][1x][mapping_type]', 'image_style'); $this->assertFieldByName('keyed_mappings[responsive_image_test_module.wide][2x][image_style]', ''); diff --git a/core/modules/responsive_image/src/Tests/ResponsiveImageFieldDisplayTest.php b/core/modules/responsive_image/src/Tests/ResponsiveImageFieldDisplayTest.php index 1954ab1..67e1eda 100644 --- a/core/modules/responsive_image/src/Tests/ResponsiveImageFieldDisplayTest.php +++ b/core/modules/responsive_image/src/Tests/ResponsiveImageFieldDisplayTest.php @@ -8,6 +8,7 @@ namespace Drupal\responsive_image\Tests; use Drupal\image\Tests\ImageFieldTestBase; +use Drupal\image\Entity\ImageStyle; /** * Tests responsive image display formatter. @@ -164,8 +165,8 @@ public function _testResponsiveImageFieldFormatters($scheme) { $display->setComponent($field_name, $display_options) ->save(); - // Create a derivative so at least one MIME-type will be known. - $large_style = entity_load('image_style', 'large'); + // Create a derivative so at least one MIME type will be known. + $large_style = ImageStyle::load('large'); $large_style->createDerivative($image_uri, $large_style->buildUri($image_uri)); // Output should contain all image styles and all breakpoints. @@ -173,7 +174,7 @@ public function _testResponsiveImageFieldFormatters($scheme) { // Make sure the IE9 workaround is present. $this->assertRaw(''); $this->assertRaw(''); - $this->assertRaw('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'); + $this->assertRaw('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='); $this->assertRaw('/styles/medium/'); $this->assertRaw('/styles/large/'); $this->assertRaw('media="(min-width: 0px)"');