Issue #3377420 by pivica, Berdir, smustgrave, sergey-serov, bkosborne,...

Issue #3377420 by pivica, Berdir, smustgrave, sergey-serov, bkosborne, bspeare, larowlan: Responsive image width/height values are not used from fallback image style

core/modules/responsive_image/responsive_image.module

@@ -221,6 +221,12 @@ function template_preprocess_responsive_image(&$variables) {
       $variables['img_element']['#title'] = $variables['attributes']['title'];
       unset($variables['attributes']['title']);
     }
+    if (isset($variables['img_element']['#width'])) {
+      $variables['attributes']['width'] = $variables['img_element']['#width'];
+    }
+    if (isset($variables['img_element']['#height'])) {
+      $variables['attributes']['height'] = $variables['img_element']['#height'];
+    }
     $variables['img_element']['#attributes'] = $variables['attributes'];
   }
 }

core/modules/responsive_image/tests/src/Functional/ResponsiveImageFieldDisplayTest.php

@@ -498,7 +498,7 @@ public function testResponsiveImageFieldFormattersMultipleSources() {
     $image_uri = File::load($node->{$field_name}->target_id)->getFileUri();
     $medium_transform_url = $this->fileUrlGenerator->transformRelative($medium_style->buildUrl($image_uri));
     $large_transform_url = $this->fileUrlGenerator->transformRelative($large_style->buildUrl($image_uri));
-    $this->assertSession()->responseMatches('/<img loading="eager" srcset="' . \preg_quote($medium_transform_url, '/') . ' 1x, ' . \preg_quote($large_transform_url, '/') . ' 1.5x, ' . \preg_quote($large_transform_url, '/') . ' 2x" width="220" height="220" src="' . \preg_quote($large_transform_url, '/') . '" alt="\w+" \/>/');
+    $this->assertSession()->responseMatches('/<img loading="eager" srcset="' . \preg_quote($medium_transform_url, '/') . ' 1x, ' . \preg_quote($large_transform_url, '/') . ' 1.5x, ' . \preg_quote($large_transform_url, '/') . ' 2x" width="480" height="480" src="' . \preg_quote($large_transform_url, '/') . '" alt="\w+" \/>/');
 
     $this->responsiveImgStyle
       // Test the output of an empty media query.
@@ -510,7 +510,7 @@ public function testResponsiveImageFieldFormattersMultipleSources() {
 
     // Assert the picture tag has source tags that include dimensions.
     $this->drupalGet('node/' . $nid);
-    $this->assertSession()->responseMatches('/<picture>\s+<source srcset="' . \preg_quote($large_transform_url, '/') . ' 1x" media="\(min-width: 851px\)" type="image\/webp" width="480" height="480"\/>\s+<source srcset="' . \preg_quote($medium_transform_url, '/') . ' 1x, ' . \preg_quote($large_transform_url, '/') . ' 1.5x, ' . \preg_quote($large_transform_url, '/') . ' 2x" type="image\/webp" width="220" height="220"\/>\s+<img loading="eager" src="' . \preg_quote($large_transform_url, '/') . '" width="480" height="480" alt="\w+" \/>\s+<\/picture>/');
+    $this->assertSession()->responseMatches('/<picture>\s+<source srcset="' . \preg_quote($large_transform_url, '/') . ' 1x" media="\(min-width: 851px\)" type="image\/webp" width="480" height="480"\/>\s+<source srcset="' . \preg_quote($medium_transform_url, '/') . ' 1x, ' . \preg_quote($large_transform_url, '/') . ' 1.5x, ' . \preg_quote($large_transform_url, '/') . ' 2x" type="image\/webp" width="220" height="220"\/>\s+<img loading="eager" width="480" height="480" src="' . \preg_quote($large_transform_url, '/') . '" alt="\w+" \/>\s+<\/picture>/');
   }
 
   /**