Issue #2876523 by andreyjan, jhuhta, keeganstreet, rolfmeijer, jhedstrom,...

Issue #2876523 by andreyjan, jhuhta, keeganstreet, rolfmeijer, jhedstrom, tstoeckler, larowlan, Krzysztof Domański: Breakpoint sizes input is too small

(cherry picked from commit 20236ef4)

core/modules/responsive_image/src/ResponsiveImageStyleForm.php

@@ -157,7 +157,7 @@ public function form(array $form, FormStateInterface $form_state) {
           ],
         ];
         $form['keyed_styles'][$breakpoint_id][$multiplier]['sizes'] = [
-          '#type' => 'textfield',
+          '#type' => 'textarea',
           '#title' => $this->t('Sizes'),
           '#default_value' => isset($image_style_mapping['image_mapping']['sizes']) ? $image_style_mapping['image_mapping']['sizes'] : '100vw',
           '#description' => $this->t('Enter the value for the sizes attribute, for example: %example_sizes.', ['%example_sizes' => '(min-width:700px) 700px, 100vw']),

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

@@ -112,7 +112,8 @@ public function testResponsiveImageAdmin() {
       'keyed_styles[responsive_image_test_module.mobile][1x][image_mapping_type]' => 'image_style',
       'keyed_styles[responsive_image_test_module.mobile][1x][image_style]' => 'thumbnail',
       'keyed_styles[responsive_image_test_module.narrow][1x][image_mapping_type]' => 'sizes',
-      'keyed_styles[responsive_image_test_module.narrow][1x][sizes]' => '(min-width: 700px) 700px, 100vw',
+      // Ensure the Sizes field allows long values.
+      'keyed_styles[responsive_image_test_module.narrow][1x][sizes]' => '(min-resolution: 192dpi) and (min-width: 170px) 386px, (min-width: 170px) 193px, (min-width: 768px) 18vw, (min-width: 480px) 30vw, 48vw',
       'keyed_styles[responsive_image_test_module.narrow][1x][sizes_image_styles][large]' => 'large',
       'keyed_styles[responsive_image_test_module.narrow][1x][sizes_image_styles][medium]' => 'medium',
       'keyed_styles[responsive_image_test_module.wide][1x][image_mapping_type]' => 'image_style',
@@ -128,7 +129,7 @@ public function testResponsiveImageAdmin() {
 
     // Check the mapping for multipliers 1x and 2x for the narrow breakpoint.
     $this->assertFieldByName('keyed_styles[responsive_image_test_module.narrow][1x][image_mapping_type]', 'sizes');
-    $this->assertFieldByName('keyed_styles[responsive_image_test_module.narrow][1x][sizes]', '(min-width: 700px) 700px, 100vw');
+    $this->assertFieldByName('keyed_styles[responsive_image_test_module.narrow][1x][sizes]', '(min-resolution: 192dpi) and (min-width: 170px) 386px, (min-width: 170px) 193px, (min-width: 768px) 18vw, (min-width: 480px) 30vw, 48vw');
     $this->assertFieldChecked('edit-keyed-styles-responsive-image-test-modulenarrow-1x-sizes-image-styles-large');
     $this->assertFieldChecked('edit-keyed-styles-responsive-image-test-modulenarrow-1x-sizes-image-styles-medium');
     $this->assertNoFieldChecked('edit-keyed-styles-responsive-image-test-modulenarrow-1x-sizes-image-styles-thumbnail');