diff --git a/core/modules/file/src/Plugin/Field/FieldFormatter/FileAudioFormatter.php b/core/modules/file/src/Plugin/Field/FieldFormatter/FileAudioFormatter.php
index 3fc874b65b..4030643115 100644
--- a/core/modules/file/src/Plugin/Field/FieldFormatter/FileAudioFormatter.php
+++ b/core/modules/file/src/Plugin/Field/FieldFormatter/FileAudioFormatter.php
@@ -14,7 +14,7 @@
  *   }
  * )
  */
-class FileAudioFormatter extends FileMediaFormatter {
+class FileAudioFormatter extends FileMediaFormatterBase {
 
   /**
    * {@inheritdoc}
diff --git a/core/modules/file/src/Plugin/Field/FieldFormatter/FileMediaFormatter.php b/core/modules/file/src/Plugin/Field/FieldFormatter/FileMediaFormatterBase.php
similarity index 98%
rename from core/modules/file/src/Plugin/Field/FieldFormatter/FileMediaFormatter.php
rename to core/modules/file/src/Plugin/Field/FieldFormatter/FileMediaFormatterBase.php
index a375034cc2..616ddf14f8 100644
--- a/core/modules/file/src/Plugin/Field/FieldFormatter/FileMediaFormatter.php
+++ b/core/modules/file/src/Plugin/Field/FieldFormatter/FileMediaFormatterBase.php
@@ -14,7 +14,7 @@
 /**
  * Base class for media file formatter.
  */
-abstract class FileMediaFormatter extends FileFormatterBase implements ContainerFactoryPluginInterface, FileMediaFormatterInterface {
+abstract class FileMediaFormatterBase extends FileFormatterBase implements ContainerFactoryPluginInterface, FileMediaFormatterInterface {
 
   /**
    * The renderer service.
diff --git a/core/modules/file/src/Plugin/Field/FieldFormatter/FileVideoFormatter.php b/core/modules/file/src/Plugin/Field/FieldFormatter/FileVideoFormatter.php
index 2141f8a885..bf5aefc3da 100644
--- a/core/modules/file/src/Plugin/Field/FieldFormatter/FileVideoFormatter.php
+++ b/core/modules/file/src/Plugin/Field/FieldFormatter/FileVideoFormatter.php
@@ -16,7 +16,7 @@
  *   }
  * )
  */
-class FileVideoFormatter extends FileMediaFormatter {
+class FileVideoFormatter extends FileMediaFormatterBase {
 
   /**
    * {@inheritdoc}
diff --git a/core/modules/file/tests/src/Functional/Formatter/FileAudioFormatterTest.php b/core/modules/file/tests/src/Functional/Formatter/FileAudioFormatterTest.php
new file mode 100644
index 0000000000..a8d6e51295
--- /dev/null
+++ b/core/modules/file/tests/src/Functional/Formatter/FileAudioFormatterTest.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace Drupal\Tests\file\Functional\Formatter;
+
+use Drupal\entity_test\Entity\EntityTest;
+use Drupal\file\Entity\File;
+
+/**
+ * @coversDefaultClass \Drupal\file\Plugin\Field\FieldFormatter\FileAudioFormatter
+ * @group file
+ */
+class FileAudioFormatterTest extends FileMediaFormatterTestBase {
+
+  /**
+   * @covers ::viewElements
+   */
+  public function testRender() {
+    $this->createMediaField('file_audio', 'mp3');
+
+    file_put_contents('public://file.mp3', str_repeat('t', 10));
+    $file = File::create([
+      'uri' => 'public://file.mp3',
+      'filename' => 'file.mp3',
+    ]);
+    $file->save();
+
+    $entity = EntityTest::create([
+      $this->fieldName => [
+        [
+          'target_id' => $file->id(),
+        ],
+      ],
+    ]);
+    $entity->save();
+
+    $this->drupalGet($entity->url());
+
+    $this->assertSession()->elementExists('css', 'audio');
+    $this->assertSession()->elementAttributeContains('css', 'audio', 'controls', 'controls');
+
+    $this->assertSession()->elementExists('css', 'audio > source');
+    $this->assertSession()->elementAttributeContains('css', 'audio > source', 'src', file_create_url($file->getFileUri()));
+    $this->assertSession()->elementAttributeContains('css', 'audio > source', 'type', 'audio/mpeg');
+  }
+
+}
diff --git a/core/modules/file/tests/src/Functional/Formatter/FileMediaFormatterTestBase.php b/core/modules/file/tests/src/Functional/Formatter/FileMediaFormatterTestBase.php
new file mode 100644
index 0000000000..2fbce8475d
--- /dev/null
+++ b/core/modules/file/tests/src/Functional/Formatter/FileMediaFormatterTestBase.php
@@ -0,0 +1,78 @@
+<?php
+
+namespace Drupal\Tests\file\Functional\Formatter;
+
+use Drupal\Component\Utility\Unicode;
+use Drupal\Core\Field\FieldStorageDefinitionInterface;
+use Drupal\field\Entity\FieldConfig;
+use Drupal\field\Entity\FieldStorageConfig;
+use Drupal\Tests\BrowserTestBase;
+
+/**
+ * @coversDefaultClass \Drupal\file\Plugin\Field\FieldFormatter\FileAudioFormatter
+ * @group file
+ */
+class FileMediaFormatterTestBase extends BrowserTestBase {
+
+  /**
+   * The field name.
+   *
+   * @var string
+   */
+  protected $fieldName;
+
+  /**
+   * The view display.
+   *
+   * @var \Drupal\Core\Entity\Display\EntityViewDisplayInterface
+   */
+  protected $display;
+
+  /**
+   * {@inheritdoc}
+   */
+  public static $modules = [
+    'entity_test',
+    'field',
+    'file',
+    'user',
+    'system',
+  ];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp() {
+    parent::setUp();
+    $this->drupalLogin($this->drupalCreateUser(['view test entity']));
+  }
+
+  protected function createMediaField($formatter, $file_extionsions) {
+
+    $entityType = $bundle = 'entity_test';
+    $this->fieldName = Unicode::strtolower($this->randomMachineName());
+
+    FieldStorageConfig::create(array(
+      'entity_type' => $entityType,
+      'field_name' => $this->fieldName,
+      'type' => 'file',
+      'cardinality' => FieldStorageDefinitionInterface::CARDINALITY_UNLIMITED,
+    ))->save();
+    FieldConfig::create([
+      'entity_type' => $entityType,
+      'field_name' => $this->fieldName,
+      'bundle' => $bundle,
+      'settings' => [
+        'file_extensions' => $file_extionsions,
+      ],
+    ])->save();
+
+    $this->display = entity_get_display('entity_test', 'entity_test', 'full');
+    $this->display->setComponent($this->fieldName, [
+      'type' => $formatter,
+      'settings' => [],
+    ]);
+    $this->display->save();
+  }
+
+}
diff --git a/core/modules/file/tests/src/Functional/Formatter/FileVideoFormatterTest.php b/core/modules/file/tests/src/Functional/Formatter/FileVideoFormatterTest.php
new file mode 100644
index 0000000000..59cb116da8
--- /dev/null
+++ b/core/modules/file/tests/src/Functional/Formatter/FileVideoFormatterTest.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace Drupal\Tests\file\Functional\Formatter;
+
+use Drupal\entity_test\Entity\EntityTest;
+use Drupal\file\Entity\File;
+
+/**
+ * @coversDefaultClass \Drupal\file\Plugin\Field\FieldFormatter\FileVideoFormatter
+ * @group file
+ */
+class FileVideoFormatterTest extends FileMediaFormatterTestBase {
+
+  /**
+   * @covers ::viewElements
+   */
+  public function testRender() {
+    $this->createMediaField('file_video', 'mp4');
+
+    file_put_contents('public://file.mp4', str_repeat('t', 10));
+    $file = File::create([
+      'uri' => 'public://file.mp4',
+      'filename' => 'file.mp4',
+    ]);
+    $file->save();
+
+    $entity = EntityTest::create([
+      $this->fieldName => [
+        [
+          'target_id' => $file->id(),
+        ],
+      ],
+    ]);
+    $entity->save();
+
+    $this->drupalGet($entity->url());
+
+    $this->assertSession()->elementExists('css', 'video');
+    $this->assertSession()->elementAttributeContains('css', 'video', 'controls', 'controls');
+
+    $this->assertSession()->elementExists('css', 'video > source');
+    $this->assertSession()->elementAttributeContains('css', 'video > source', 'src', file_create_url($file->getFileUri()));
+    $this->assertSession()->elementAttributeContains('css', 'video > source', 'type', 'video/mp4');
+  }
+
+}
diff --git a/core/modules/file/tests/src/Kernel/Formatter/FileAudioFormatterTest.php b/core/modules/file/tests/src/Kernel/Formatter/FileAudioFormatterTest.php
deleted file mode 100644
index c9d3aa586c..0000000000
--- a/core/modules/file/tests/src/Kernel/Formatter/FileAudioFormatterTest.php
+++ /dev/null
@@ -1,130 +0,0 @@
-<?php
-
-namespace Drupal\Tests\file\Kernel\Formatter;
-
-use Drupal\Component\Utility\Unicode;
-use Drupal\Core\Entity\Entity\EntityViewDisplay;
-use Drupal\Core\Field\FieldStorageDefinitionInterface;
-use Drupal\entity_test\Entity\EntityTest;
-use Drupal\field\Entity\FieldConfig;
-use Drupal\field\Entity\FieldStorageConfig;
-use Drupal\file\Entity\File;
-use Drupal\KernelTests\KernelTestBase;
-
-/**
- * @coversDefaultClass \Drupal\file\Plugin\Field\FieldFormatter\FileAudioFormatter
- * @group file
- */
-class FileAudioFormatterTest extends KernelTestBase {
-
-  /**
-   * The field name.
-   *
-   * @var string
-   */
-  protected $fieldName;
-
-  /**
-   * The view display.
-   *
-   * @var \Drupal\Core\Entity\Display\EntityViewDisplayInterface
-   */
-  protected $display;
-
-  /**
-   * {@inheritdoc}
-   */
-  public static $modules = [
-    'entity_test',
-    'field',
-    'file',
-    'user',
-    'system',
-  ];
-
-  /**
-   * {@inheritdoc}
-   */
-  protected function setUp() {
-    parent::setUp();
-
-    $this->installConfig(['field']);
-    $this->installEntitySchema('entity_test');
-    $this->installEntitySchema('file');
-    $this->installSchema('file', array('file_usage'));
-
-    $entityType = 'entity_test';
-    $bundle = $entityType;
-    $this->fieldName = Unicode::strtolower($this->randomMachineName());
-
-    FieldStorageConfig::create(array(
-      'entity_type' => $entityType,
-      'field_name' => $this->fieldName,
-      'type' => 'file',
-      'cardinality' => FieldStorageDefinitionInterface::CARDINALITY_UNLIMITED,
-    ))->save();
-    FieldConfig::create([
-      'entity_type' => $entityType,
-      'field_name' => $this->fieldName,
-      'bundle' => $bundle,
-      'settings' => [
-        'file_extensions' => 'mp3',
-      ],
-    ])->save();
-
-    $this->display = EntityViewDisplay::create([
-      'targetEntityType' => $entityType,
-      'bundle' => $bundle,
-      'mode' => 'default',
-      'content' => [],
-    ]);
-    $this->display->setComponent($this->fieldName, [
-      'type' => 'file_audio',
-      'settings' => [],
-    ]);
-    $this->display->save();
-  }
-
-  /**
-   * @covers ::viewElements
-   */
-  public function testRender() {
-    file_put_contents('public://file.mp3', str_repeat('t', 10));
-    $file = File::create([
-      'uri' => 'public://file.mp3',
-      'filename' => 'file.mp3',
-    ]);
-    $file->save();
-
-    $entity = EntityTest::create([
-      $this->fieldName => [
-        [
-          'target_id' => $file->id(),
-        ],
-      ],
-    ]);
-    $entity->save();
-
-    $build = $this->display->build($entity);
-
-    \Drupal::service('renderer')->renderRoot($build);
-
-    $src = file_create_url($file->getFileUri());
-
-    $expected_output = <<<EXPECTED
-
-  <div>
-    <div>$this->fieldName</div>
-          <div>
-              <div><audio  controls="controls">
-      <source  src="$src" type="audio/mpeg" />
-  </audio>
-</div>
-              </div>
-      </div>
-
-EXPECTED;
-    $this->assertEquals($expected_output, $build[$this->fieldName]['#markup']);
-  }
-
-}
diff --git a/core/modules/file/tests/src/Kernel/Formatter/FileVideoFormatterTest.php b/core/modules/file/tests/src/Kernel/Formatter/FileVideoFormatterTest.php
deleted file mode 100644
index 23fd77adbc..0000000000
--- a/core/modules/file/tests/src/Kernel/Formatter/FileVideoFormatterTest.php
+++ /dev/null
@@ -1,130 +0,0 @@
-<?php
-
-namespace Drupal\Tests\file\Kernel\Formatter;
-
-use Drupal\Component\Utility\Unicode;
-use Drupal\Core\Entity\Entity\EntityViewDisplay;
-use Drupal\Core\Field\FieldStorageDefinitionInterface;
-use Drupal\entity_test\Entity\EntityTest;
-use Drupal\field\Entity\FieldConfig;
-use Drupal\field\Entity\FieldStorageConfig;
-use Drupal\file\Entity\File;
-use Drupal\KernelTests\KernelTestBase;
-
-/**
- * @coversDefaultClass \Drupal\file\Plugin\Field\FieldFormatter\FileVideoFormatter
- * @group file
- */
-class FileVideoFormatterTest extends KernelTestBase {
-
-  /**
-   * The field name.
-   *
-   * @var string
-   */
-  protected $fieldName;
-
-  /**
-   * The view display.
-   *
-   * @var \Drupal\Core\Entity\Display\EntityViewDisplayInterface
-   */
-  protected $display;
-
-  /**
-   * {@inheritdoc}
-   */
-  public static $modules = [
-    'entity_test',
-    'field',
-    'file',
-    'user',
-    'system',
-  ];
-
-  /**
-   * {@inheritdoc}
-   */
-  protected function setUp() {
-    parent::setUp();
-
-    $this->installConfig(['field']);
-    $this->installEntitySchema('entity_test');
-    $this->installEntitySchema('file');
-    $this->installSchema('file', array('file_usage'));
-
-    $entityType = 'entity_test';
-    $bundle = $entityType;
-    $this->fieldName = Unicode::strtolower($this->randomMachineName());
-
-    FieldStorageConfig::create(array(
-      'entity_type' => $entityType,
-      'field_name' => $this->fieldName,
-      'type' => 'file',
-      'cardinality' => FieldStorageDefinitionInterface::CARDINALITY_UNLIMITED,
-    ))->save();
-    FieldConfig::create([
-      'entity_type' => $entityType,
-      'field_name' => $this->fieldName,
-      'bundle' => $bundle,
-      'settings' => [
-        'file_extensions' => 'mp4',
-      ],
-    ])->save();
-
-    $this->display = EntityViewDisplay::create([
-      'targetEntityType' => $entityType,
-      'bundle' => $bundle,
-      'mode' => 'default',
-      'content' => [],
-    ]);
-    $this->display->setComponent($this->fieldName, [
-      'type' => 'file_video',
-      'settings' => [],
-    ]);
-    $this->display->save();
-  }
-
-  /**
-   * @covers ::viewElements
-   */
-  public function testRender() {
-    file_put_contents('public://file.mp4', str_repeat('t', 10));
-    $file = File::create([
-      'uri' => 'public://file.mp4',
-      'filename' => 'file.mp4',
-    ]);
-    $file->save();
-
-    $entity = EntityTest::create([
-      $this->fieldName => [
-        [
-          'target_id' => $file->id(),
-        ],
-      ],
-    ]);
-    $entity->save();
-
-    $build = $this->display->build($entity);
-
-    \Drupal::service('renderer')->renderRoot($build);
-
-    $src = file_create_url($file->getFileUri());
-
-    $expected_output = <<<EXPECTED
-
-  <div>
-    <div>$this->fieldName</div>
-          <div>
-              <div><video  controls="controls">
-      <source  src="$src" type="video/mp4" />
-  </video>
-</div>
-              </div>
-      </div>
-
-EXPECTED;
-    $this->assertEquals($expected_output, $build[$this->fieldName]['#markup']);
-  }
-
-}