diff --git a/core/modules/system/js/system.date.js b/core/modules/system/js/system.date.js
index 678614d..2610291 100644
--- a/core/modules/system/js/system.date.js
+++ b/core/modules/system/js/system.date.js
@@ -41,7 +41,7 @@
           return dateFormats[key] ? dateFormats[key] : value;
         });
 
-        $preview.html(dateString);
+        $preview.text(dateString);
         $target.toggleClass('js-hide', !dateString.length);
       }
 
diff --git a/core/modules/system/src/Tests/System/DateTimeTest.php b/core/modules/system/src/Tests/System/DateTimeTest.php
index 9ca050f..f55c042 100644
--- a/core/modules/system/src/Tests/System/DateTimeTest.php
+++ b/core/modules/system/src/Tests/System/DateTimeTest.php
@@ -3,7 +3,6 @@
 namespace Drupal\system\Tests\System;
 
 use Drupal\Core\Datetime\Entity\DateFormat;
-use Drupal\Core\Url;
 use Drupal\simpletest\WebTestBase;
 
 /**
@@ -74,97 +73,6 @@ function testTimeZoneHandling() {
   }
 
   /**
-   * Test date format configuration.
-   */
-  function testDateFormatConfiguration() {
-    // Confirm 'no custom date formats available' message appears.
-    $this->drupalGet('admin/config/regional/date-time');
-
-    // Add custom date format.
-    $this->clickLink(t('Add format'));
-    $date_format_id = strtolower($this->randomMachineName(8));
-    $name = ucwords($date_format_id);
-    $date_format = 'd.m.Y - H:i';
-    $edit = array(
-      'id' => $date_format_id,
-      'label' => $name,
-      'date_format_pattern' => $date_format,
-    );
-    $this->drupalPostForm('admin/config/regional/date-time/formats/add', $edit, t('Add format'));
-    $this->assertUrl(\Drupal::url('entity.date_format.collection', [], ['absolute' => TRUE]), [], 'Correct page redirection.');
-    $this->assertText(t('Custom date format added.'), 'Date format added confirmation message appears.');
-    $this->assertText($name, 'Custom date format appears in the date format list.');
-    $this->assertText(t('Delete'), 'Delete link for custom date format appears.');
-
-    // Edit the custom date format and re-save without editing the format.
-    $this->drupalGet('admin/config/regional/date-time');
-    $this->clickLink(t('Edit'));
-    $this->drupalPostForm(NULL, NULL, t('Save format'));
-    $this->assertUrl('admin/config/regional/date-time', array('absolute' => TRUE), 'Correct page redirection.');
-    $this->assertText(t('Custom date format updated.'), 'Custom date format successfully updated.');
-
-    // Edit custom date format.
-    $this->drupalGet('admin/config/regional/date-time');
-    $this->clickLink(t('Edit'));
-    $edit = array(
-      'date_format_pattern' => 'Y m',
-    );
-    $this->drupalPostForm($this->getUrl(), $edit, t('Save format'));
-    $this->assertUrl(\Drupal::url('entity.date_format.collection', [], ['absolute' => TRUE]), [], 'Correct page redirection.');
-    $this->assertText(t('Custom date format updated.'), 'Custom date format successfully updated.');
-
-    // Delete custom date format.
-    $this->clickLink(t('Delete'));
-    $this->drupalPostForm('admin/config/regional/date-time/formats/manage/' . $date_format_id . '/delete', array(), t('Delete'));
-    $this->assertUrl(\Drupal::url('entity.date_format.collection', [], ['absolute' => TRUE]), [], 'Correct page redirection.');
-    $this->assertRaw(t('The date format %format has been deleted.', array('%format' => $name)), 'Custom date format removed.');
-
-    // Make sure the date does not exist in config.
-    $date_format = DateFormat::load($date_format_id);
-    $this->assertFalse($date_format);
-
-    // Add a new date format with an existing format.
-    $date_format_id = strtolower($this->randomMachineName(8));
-    $name = ucwords($date_format_id);
-    $date_format = 'Y';
-    $edit = array(
-      'id' => $date_format_id,
-      'label' => $name,
-      'date_format_pattern' => $date_format,
-    );
-    $this->drupalPostForm('admin/config/regional/date-time/formats/add', $edit, t('Add format'));
-    $this->assertUrl(\Drupal::url('entity.date_format.collection', [], ['absolute' => TRUE]), [], 'Correct page redirection.');
-    $this->assertText(t('Custom date format added.'), 'Date format added confirmation message appears.');
-    $this->assertText($name, 'Custom date format appears in the date format list.');
-    $this->assertText(t('Delete'), 'Delete link for custom date format appears.');
-
-    $date_format = DateFormat::create(array(
-      'id' => 'xss_short',
-      'label' => 'XSS format',
-      'pattern' => '\<\s\c\r\i\p\t\>\a\l\e\r\t\(\'\X\S\S\'\)\;\<\/\s\c\r\i\p\t\>',
-      ));
-    $date_format->save();
-
-    $this->drupalGet(Url::fromRoute('entity.date_format.collection'));
-    $this->assertEscaped("<script>alert('XSS');</script>", 'The date format was properly escaped');
-
-    // Add a new date format with HTML in it.
-    $date_format_id = strtolower($this->randomMachineName(8));
-    $name = ucwords($date_format_id);
-    $date_format = '& \<\e\m\>Y\<\/\e\m\>';
-    $edit = array(
-      'id' => $date_format_id,
-      'label' => $name,
-      'date_format_pattern' => $date_format,
-    );
-    $this->drupalPostForm('admin/config/regional/date-time/formats/add', $edit, t('Add format'));
-    $this->assertUrl(\Drupal::url('entity.date_format.collection', [], ['absolute' => TRUE]), [], 'Correct page redirection.');
-    $this->assertText(t('Custom date format added.'), 'Date format added confirmation message appears.');
-    $this->assertText($name, 'Custom date format appears in the date format list.');
-    $this->assertEscaped('<em>' . date("Y") . '</em>');
-  }
-
-  /**
    * Test handling case with invalid data in selectors (like February, 31st).
    */
   function testEnteringDateTimeViaSelectors() {
diff --git a/core/modules/system/tests/src/FunctionalJavascript/System/DateFormatTest.php b/core/modules/system/tests/src/FunctionalJavascript/System/DateFormatTest.php
new file mode 100644
index 0000000..c412fab
--- /dev/null
+++ b/core/modules/system/tests/src/FunctionalJavascript/System/DateFormatTest.php
@@ -0,0 +1,121 @@
+<?php
+
+namespace Drupal\Tests\system\FunctionalJavascript\System;
+
+use Drupal\Core\Datetime\Entity\DateFormat;
+use Drupal\Core\Url;
+use Drupal\FunctionalJavascriptTests\JavascriptTestBase;
+use Drupal\FunctionalTests\AssertLegacyTrait;
+
+/**
+ * Tests that AJAX responses use the current theme.
+ *
+ * @group Ajax
+ */
+class DateFormatTest extends JavascriptTestBase {
+
+  use AssertLegacyTrait;
+
+  public static $modules = ['block'];
+
+  protected function setUp() {
+    parent::setUp();
+
+    // Create admin user and log in admin user.
+    $this->drupalLogin($this->drupalCreateUser(['administer site configuration']));
+    $this->drupalPlaceBlock('local_actions_block');
+  }
+
+  /**
+   * Test date format configuration.
+   */
+  public function testDateFormatConfiguration() {
+    // Confirm 'no custom date formats available' message appears.
+    $this->drupalGet('admin/config/regional/date-time');
+
+    // Add custom date format.
+    $this->clickLink(t('Add format'));
+    $date_format_id = strtolower($this->randomMachineName(8));
+    $name = ucwords($date_format_id);
+    $date_format = 'd.m.Y - H:i';
+    $edit = array(
+      'id' => $date_format_id,
+      'label' => $name,
+      'date_format_pattern' => $date_format,
+    );
+    $this->drupalPostForm('admin/config/regional/date-time/formats/add', $edit, t('Add format'));
+    $this->assertUrl(\Drupal::url('entity.date_format.collection', [], ['absolute' => TRUE]), [], 'Correct page redirection.');
+    $this->assertText(t('Custom date format added.'), 'Date format added confirmation message appears.');
+    $this->assertText($name, 'Custom date format appears in the date format list.');
+    $this->assertText(t('Delete'), 'Delete link for custom date format appears.');
+
+    // Edit the custom date format and re-save without editing the format.
+    $this->drupalGet('admin/config/regional/date-time');
+    $this->clickLink(t('Edit'));
+    $this->drupalPostForm(NULL, [], t('Save format'));
+    $this->assertUrl('admin/config/regional/date-time', array('absolute' => TRUE), 'Correct page redirection.');
+    $this->assertText(t('Custom date format updated.'), 'Custom date format successfully updated.');
+
+    // Edit custom date format.
+    $this->drupalGet('admin/config/regional/date-time');
+    $this->clickLink(t('Edit'));
+    $edit = array(
+      'date_format_pattern' => 'Y m',
+    );
+    $this->drupalPostForm($this->getUrl(), $edit, t('Save format'));
+    $this->assertUrl(\Drupal::url('entity.date_format.collection', [], ['absolute' => TRUE]), [], 'Correct page redirection.');
+    $this->assertText(t('Custom date format updated.'), 'Custom date format successfully updated.');
+
+    // Delete custom date format.
+    $this->getSession()->getPage()->find('css', '.dropbutton-wrapper button')->click();
+    //$this->click('.dropbutton-wrapper');
+    $this->clickLink(t('Delete'));
+    $this->drupalPostForm('admin/config/regional/date-time/formats/manage/' . $date_format_id . '/delete', array(), t('Delete'));
+    $this->assertUrl(\Drupal::url('entity.date_format.collection', [], ['absolute' => TRUE]), [], 'Correct page redirection.');
+    $this->assertRaw(t('The date format %format has been deleted.', array('%format' => $name)), 'Custom date format removed.');
+
+    // Make sure the date does not exist in config.
+    $date_format = DateFormat::load($date_format_id);
+    $this->assertFalse($date_format);
+
+    // Add a new date format with an existing format.
+    $date_format_id = strtolower($this->randomMachineName(8));
+    $name = ucwords($date_format_id);
+    $date_format = 'Y';
+    $edit = array(
+      'id' => $date_format_id,
+      'label' => $name,
+      'date_format_pattern' => $date_format,
+    );
+    $this->drupalPostForm('admin/config/regional/date-time/formats/add', $edit, t('Add format'));
+    $this->assertUrl(\Drupal::url('entity.date_format.collection', [], ['absolute' => TRUE]), [], 'Correct page redirection.');
+    $this->assertText(t('Custom date format added.'), 'Date format added confirmation message appears.');
+    $this->assertText($name, 'Custom date format appears in the date format list.');
+    $this->assertText(t('Delete'), 'Delete link for custom date format appears.');
+
+    $date_format = DateFormat::create(array(
+      'id' => 'xss_short',
+      'label' => 'XSS format',
+      'pattern' => '\<\s\c\r\i\p\t\>\a\l\e\r\t\(\"\X\S\S\")\;\<\/\s\c\r\i\p\t\>',
+    ));
+    $date_format->save();
+
+    $this->drupalGet(Url::fromRoute('entity.date_format.collection'));
+    $this->assertEscaped("<script>alert('XSS');</script>", 'The date format was properly escaped');
+    // Add a new date format with HTML in it.
+    $date_format_id = strtolower($this->randomMachineName(8));
+    $name = ucwords($date_format_id);
+    $date_format = '& \<\e\m\>Y\<\/\e\m\>';
+    $edit = array(
+      'id' => $date_format_id,
+      'label' => $name,
+      'date_format_pattern' => $date_format,
+    );
+    $this->drupalPostForm('admin/config/regional/date-time/formats/add', $edit, t('Add format'));
+    $this->assertUrl(\Drupal::url('entity.date_format.collection', [], ['absolute' => TRUE]), [], 'Correct page redirection.');
+    $this->assertText(t('Custom date format added.'), 'Date format added confirmation message appears.');
+    $this->assertText($name, 'Custom date format appears in the date format list.');
+    $this->assertEscaped('<em>' . date("Y") . '</em>');
+  }
+
+}