diff --git a/core/modules/responsive_image/src/Tests/ResponsiveImageAdminUITest.php b/core/modules/responsive_image/src/Tests/ResponsiveImageAdminUITest.php
index fae8cf8..bf6dd39 100644
--- a/core/modules/responsive_image/src/Tests/ResponsiveImageAdminUITest.php
+++ b/core/modules/responsive_image/src/Tests/ResponsiveImageAdminUITest.php
@@ -79,7 +79,15 @@ public function testResponsiveImageAdmin() {
 
     foreach ($cases as $case) {
       // Check if the radio buttons are present.
-      $this->assertFieldByName('keyed_styles[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][image_mapping]', '');
+      $this->assertFieldByName('keyed_styles[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][image_mapping_type]', '');
+      // Check if the image style dropdowns are present.
+      $this->assertFieldByName('keyed_styles[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][image_style]', '');
+      // Check if the sizes textfields are present.
+      $this->assertFieldByName('keyed_styles[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_styles[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][sizes_image_styles][' . $image_style_name . ']');
+      }
     }
 
     // Save styles for 1x variant only.
@@ -87,24 +95,39 @@ public function testResponsiveImageAdmin() {
       'label' => 'Style One',
       'breakpoint_group' => 'responsive_image_test_module',
       'fallback_image_style' => 'thumbnail',
-      'keyed_styles[responsive_image_test_module.mobile][1x][image_mapping]' => 'thumbnail',
-      'keyed_styles[responsive_image_test_module.narrow][1x][image_mapping]' => 'medium',
-      'keyed_styles[responsive_image_test_module.wide][1x][image_mapping]' => 'large',
+      '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][mapping_type]' => 'sizes',
+      'keyed_styles[responsive_image_test_module.narrow][1x][sizes]' => '(min-width: 700px) 700px, 100vw',
+      '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',
+      'keyed_styles[responsive_image_test_module.wide][1x][image_style]' => 'large',
     );
     $this->drupalPostForm('admin/config/media/responsive-image-style/style_one', $edit, t('Save'));
     $this->drupalGet('admin/config/media/responsive-image-style/style_one');
 
-    // Check the style for multipliers 1x and 2x for the mobile breakpoint.
-    $this->assertFieldByName('keyed_styles[responsive_image_test_module.mobile][1x][image_mapping]', 'thumbnail');
-    $this->assertFieldByName('keyed_styles[responsive_image_test_module.mobile][2x][image_mapping]', '');
-
-    // Check the style for multipliers 1x and 2x for the narrow breakpoint.
-    $this->assertFieldByName('keyed_styles[responsive_image_test_module.narrow][1x][image_mapping]', 'medium');
-    $this->assertFieldByName('keyed_styles[responsive_image_test_module.narrow][2x][image_mapping]', '');
-
-    // Check the style for multipliers 1x and 2x for the wide breakpoint.
-    $this->assertFieldByName('keyed_styles[responsive_image_test_module.wide][1x][image_mapping]', 'large');
-    $this->assertFieldByName('keyed_styles[responsive_image_test_module.wide][2x][image_mapping]', '');
+    // Check the mapping for multipliers 1x and 2x for the mobile breakpoint.
+     $this->assertFieldByName('keyed_styles[responsive_image_test_module.mobile][1x][image_style]', 'thumbnail');
+    $this->assertFieldByName('keyed_styles[responsive_image_test_module.mobile][1x][image_mapping_type]', 'image_style');
+    $this->assertFieldByName('keyed_styles[responsive_image_test_module.mobile][2x][image_style]', '');
+    $this->assertFieldByName('keyed_styles[responsive_image_test_module.mobile][2x][image_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_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->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');
+    $this->assertFieldByName('keyed_styles[responsive_image_test_module.narrow][2x][image_style]', '');
+    $this->assertFieldByName('keyed_styles[responsive_image_test_module.narrow][2x][image_mapping_type]', '_none');
+
+    // Check the mapping for multipliers 1x and 2x for the wide breakpoint.
+    $this->assertFieldByName('keyed_styles[responsive_image_test_module.wide][1x][image_style]', 'large');
+    $this->assertFieldByName('keyed_styles[responsive_image_test_module.wide][1x][image_mapping_type]', 'image_style');
+    $this->assertFieldByName('keyed_styles[responsive_image_test_module.wide][2x][image_style]', '');
+    $this->assertFieldByName('keyed_styles[responsive_image_test_module.wide][2x][image_mapping_type]', '_none');
 
     // Delete the style.
     $this->drupalGet('admin/config/media/responsive-image-style/style_one/delete');