<?php

declare(strict_types=1);

namespace Drupal\Tests\ckeditor5\FunctionalJavascript;

use Drupal\Component\Utility\Html;
use Drupal\editor\Entity\Editor;
use Drupal\filter\Entity\FilterFormat;
use Drupal\Tests\TestFileCreationTrait;
use Drupal\Tests\ckeditor5\Traits\CKEditor5TestTrait;

// cspell:ignore imageresize

/**
 * @coversDefaultClass \Drupal\ckeditor5\Plugin\CKEditor5Plugin\Image
 * @group ckeditor5
 * @internal
 */
abstract class ImageTestBase extends CKEditor5TestBase {

  use CKEditor5TestTrait;
  use TestFileCreationTrait;

  /**
   * The user to use during testing.
   *
   * @var \Drupal\user\UserInterface
   */
  protected $adminUser;

  /**
   * A host entity with a body field to embed images in.
   *
   * @var \Drupal\node\NodeInterface
   */
  protected $host;

  /**
   * {@inheritdoc}
   */
  protected static $modules = [
    'ckeditor5',
    'node',
    'text',
  ];

  /**
   * {@inheritdoc}
   */
  protected $defaultTheme = 'stark';

  /**
   * Provides the relevant image attributes.
   *
   * @return string[]
   */
  protected function imageAttributes() {
    return [
      'src' => base_path() . 'core/misc/druplicon.png',
      'width' => '88',
      'height' => '100',
    ];
  }

  /**
   * Helper to format attributes.
   *
   * @param bool $reverse
   *   Reverse attributes when printing them.
   *
   * @return string
   */
  protected function imageAttributesAsString($reverse = FALSE) {
    $string = [];
    foreach ($this->imageAttributes() as $key => $value) {
      $string[] = $key . '="' . $value . '"';
    }
    if ($reverse) {
      $string = array_reverse($string);
    }
    return implode(' ', $string);
  }

  /**
   * Add an image to the CKEditor 5 editable zone.
   */
  protected function addImage() {
    $page = $this->getSession()->getPage();
    $src = $this->imageAttributes()['src'];
    $this->waitForEditor();
    $this->pressEditorButton('Insert image via URL');
    $dialog = $page->find('css', '.ck-dialog');
    $src_input = $dialog->find('css', '.ck-image-insert-url input[type=text]');
    $src_input->setValue($src);
    $dialog->find('xpath', "//button[span[text()='Insert']]")->click();
    // Wait for the image to be uploaded and rendered by CKEditor 5.
    $this->assertNotEmpty($this->assertSession()->waitForElementVisible('css', '.ck-widget.image > img[src="' . $src . '"]'));
  }

  /**
   * Ensures that attributes are retained on conversion.
   */
  public function testAttributeRetentionDuringUpcasting(): void {
    // Run test cases in a single test to make the test run faster.
    $attributes_to_retain = [
      '-none-' => 'inline',
      'data-caption="test caption 🦙"' => 'block',
      'data-align="left"' => 'inline',
    ];

    foreach ($attributes_to_retain as $attribute_to_retain => $expected_upcast_behavior_when_wrapped_in_block_element) {
      if ($attribute_to_retain === '-none-') {
        $attribute_to_retain = '';
      }
      $img_tag = '<img ' . $attribute_to_retain . ' alt="drupalimage test image" ' . $this->imageAttributesAsString() . ' />';
      $test_cases = [
        // Plain image tag for a baseline.
        [
          $img_tag,
          $img_tag,
        ],
        // Image tag wrapped with <p>.
        [
          "<p>$img_tag</p>",
          $expected_upcast_behavior_when_wrapped_in_block_element === 'inline' ? "<p>$img_tag</p>" : $img_tag,
        ],
        // Image tag wrapped with a disallowed paragraph-like element (<div).
        // When inline is the expected upcast behavior, it will wrap in <p>
        // because it still must wrap in a paragraph-like element, and <p> is
        // available to be that element.
        [
          "<div>$img_tag</div>",
          $expected_upcast_behavior_when_wrapped_in_block_element === 'inline' ? "<p>$img_tag</p>" : $img_tag,
        ],
      ];

      foreach ($test_cases as $test_case) {
        [$markup, $expected] = $test_case;
        $this->host->body->value = $markup;
        $this->host->save();

        $this->drupalGet($this->host->toUrl('edit-form'));
        $this->waitForEditor();

        // Ensure that the image is rendered in preview.
        $this->assertNotEmpty($this->assertSession()->waitForElementVisible('css', ".ck-content .ck-widget img"));
        $editor_dom = $this->getEditorDataAsDom();
        $expected_dom = Html::load($expected);
        $xpath = new \DOMXPath($this->getEditorDataAsDom());
        $this->assertEquals($expected_dom->getElementsByTagName('body')->item(0)->C14N(), $editor_dom->getElementsByTagName('body')->item(0)->C14N());

        // Ensure the test attribute is persisted on downcast.
        if ($attribute_to_retain) {
          $this->assertNotEmpty($xpath->query("//img[@$attribute_to_retain]"));
        }
      }
    }
  }

  /**
   * Tests that arbitrary attributes are allowed via GHS.
   */
  public function testImageArbitraryHtml(): void {
    $editor = Editor::load('test_format');
    $settings = $editor->getSettings();

    // Allow the data-foo attribute in img via GHS.
    $settings['plugins']['ckeditor5_sourceEditing']['allowed_tags'] = ['<img data-foo>'];
    $editor->setSettings($settings);
    $editor->save();
    $format = FilterFormat::load('test_format');
    $original_config = $format->filters('filter_html')
      ->getConfiguration();

    foreach ($this->providerLinkability() as $data) {
      [$image_type, $unrestricted] = $data;

      $format_config = $unrestricted ? ['status' => FALSE] : $original_config;
      $format->setFilterConfig('filter_html', $format_config)
        ->save();

      // Make the test content have either a block image or an inline image.
      $img_tag = '<img data-foo="bar" alt="drupalimage test image" data-entity-type="file" ' . $this->imageAttributesAsString() . ' />';
      $this->host->body->value .= $image_type === 'block'
        ? $img_tag
        : "<p>$img_tag</p>";
      $this->host->save();

      $expected_widget_selector = $image_type === 'block' ? 'image img' : 'image-inline';

      $this->drupalGet($this->host->toUrl('edit-form'));
      $this->waitForEditor();

      $drupalimage = $this->assertSession()->waitForElementVisible('css', ".ck-content .ck-widget.$expected_widget_selector");
      $this->assertNotEmpty($drupalimage);
      $this->assertEquals('bar', $drupalimage->getAttribute('data-foo'));

      $xpath = new \DOMXPath($this->getEditorDataAsDom());
      $this->assertNotEmpty($xpath->query('//img[@data-foo="bar"]'));
    }
  }

  /**
   * Tests linkability of the image CKEditor widget.
   *
   * Due to the complex overrides that `drupalImage.DrupalImage` is making, this
   * is explicitly testing the "editingDowncast" and "dataDowncast" results.
   * These are CKEditor 5 concepts.
   *
   * @see https://ckeditor.com/docs/ckeditor5/latest/framework/guides/architecture/editing-engine.html#conversion
   */
  public function testLinkability(): void {
    $format = FilterFormat::load('test_format');
    $original_config = $format->filters('filter_html')
      ->getConfiguration();
    $original_body_value = $this->host->body->value;
    foreach ($this->providerLinkability() as $data) {
      [$image_type, $unrestricted] = $data;
      assert($image_type === 'inline' || $image_type === 'block');

      $format_config = $unrestricted ? ['status' => FALSE] : $original_config;

      $format->setFilterConfig('filter_html', $format_config)
        ->save();

      // Make the test content have either a block image or an inline image.
      $img_tag = '<img alt="drupalimage test image" data-entity-type="file" ' . $this->imageAttributesAsString() . ' />';
      $this->host->body->value = $original_body_value . ($image_type === 'block'
        ? $img_tag
        : "<p>$img_tag</p>");
      $this->host->save();

      $this->drupalGet($this->host->toUrl('edit-form'));
      $page = $this->getSession()->getPage();
      // Adjust the expectations accordingly.
      $expected_widget_class = $image_type === 'block' ? 'image' : 'image-inline';

      $this->waitForEditor();
      $assert_session = $this->assertSession();

      // Initial state: the image CKEditor Widget is not selected.
      $drupalimage = $assert_session->waitForElementVisible('css', ".ck-content .ck-widget.$expected_widget_class");
      $this->assertNotEmpty($drupalimage);
      $this->assertFalse($drupalimage->hasClass('.ck-widget_selected'));

      $src = basename($this->imageAttributes()['src']);
      // Assert the "editingDowncast" HTML before making changes.
      $assert_session->elementExists('css', '.ck-content .ck-widget.' . $expected_widget_class . ' > img[src*="' . $src . '"][alt="drupalimage test image"]');

      // Assert the "dataDowncast" HTML before making changes.
      $xpath = new \DOMXPath($this->getEditorDataAsDom());
      $this->assertNotEmpty($xpath->query('//img[@alt="drupalimage test image"]'));
      $this->assertEmpty($xpath->query('//a'));

      // Assert the link button is present and not pressed.
      $link_button = $this->getEditorButton('Link');
      $this->assertSame('false', $link_button->getAttribute('aria-pressed'));

      // Tests linking images.
      $drupalimage->click();
      $this->assertTrue($drupalimage->hasClass('ck-widget_selected'));
      $this->assertEditorButtonEnabled('Link');
      // Assert structure of image toolbar balloon.
      $this->assertVisibleBalloon('.ck-toolbar[aria-label="Image toolbar"]');
      $link_image_button = $this->getBalloonButton('Link image');
      // Click the "Link image" button.
      $this->assertSame('false', $link_image_button->getAttribute('aria-pressed'));
      $link_image_button->press();
      // Assert structure of link form balloon.
      $balloon = $this->assertVisibleBalloon('.ck-link-form');
      $url_input = $balloon->find('css', '.ck-labeled-field-view__input-wrapper .ck-input-text[inputmode=url]');
      // Fill in link form balloon's <input> and hit "Insert".
      $url_input->setValue('http://www.drupal.org/association');
      $balloon->pressButton('Insert');

      // Assert the "editingDowncast" HTML after making changes. First assert the
      // link exists, then assert the expected DOM structure in detail.
      $assert_session->elementExists('css', '.ck-content a[href*="//www.drupal.org/association"]');
      // For inline images, the link is wrapping the widget; for block images the
      // link lives inside the widget. (This is how it is implemented upstream, it
      // could be implemented differently, we just want to ensure we do not break
      // it. Drupal only cares about having its own "dataDowncast", the
      // "editingDowncast" is considered an implementation detail.)
      $assert_session->elementExists('css', $image_type === 'inline'
        ? '.ck-content a[href*="//www.drupal.org/association"] .ck-widget.' . $expected_widget_class . ' > img[src*="' . $src . '"][alt="drupalimage test image"]'
        : '.ck-content .ck-widget.' . $expected_widget_class . ' a[href*="//www.drupal.org/association"] > img[src*="' . $src . '"][alt="drupalimage test image"]'
      );

      // Assert the "dataDowncast" HTML after making changes.
      $xpath = new \DOMXPath($this->getEditorDataAsDom());
      $this->assertCount(1, $xpath->query('//a[@href="http://www.drupal.org/association"]/img[@alt="drupalimage test image"]'));
      $this->assertEmpty($xpath->query('//a[@href="http://www.drupal.org/association" and @class="trusted"]'));

      // Add `class="trusted"` to the link.
      $xpath = new \DOMXPath($this->getEditorDataAsDom());
      $this->assertEmpty($xpath->query('//a[@href="http://www.drupal.org/association" and @class="trusted"]'));
      $this->pressEditorButton('Source');
      $source_text_area = $assert_session->waitForElement('css', '.ck-source-editing-area textarea');
      $this->assertNotEmpty($source_text_area);
      $new_value = str_replace('<a ', '<a class="trusted" ', $source_text_area->getValue());
      $source_text_area->setValue('<p>temp</p>');
      $source_text_area->setValue($new_value);
      $this->pressEditorButton('Source');

      // When unrestricted, additional attributes on links should be retained.
      $xpath = new \DOMXPath($this->getEditorDataAsDom());
      $this->assertCount($unrestricted ? 1 : 0, $xpath->query('//a[@href="http://www.drupal.org/association" and @class="trusted"]'));

      // Save the entity whose text field is being edited.
      $page->pressButton('Save');

      // Assert the HTML the end user sees.
      $assert_session->elementExists('css', $unrestricted
        ? 'a[href="http://www.drupal.org/association"].trusted img[src*="' . $src . '"]'
        : 'a[href="http://www.drupal.org/association"] img[src*="' . $src . '"]');

      // Go back to edit the now *linked* <drupal-media>. Everything from this
      // point onwards is effectively testing "upcasting" and proving there is no
      // data loss.
      $this->drupalGet($this->host->toUrl('edit-form'));
      $this->waitForEditor();

      // Assert the "dataDowncast" HTML before making changes.
      $xpath = new \DOMXPath($this->getEditorDataAsDom());
      $this->assertNotEmpty($xpath->query('//img[@alt="drupalimage test image"]'));
      $this->assertNotEmpty($xpath->query('//a[@href="http://www.drupal.org/association"]'));
      $this->assertNotEmpty($xpath->query('//a[@href="http://www.drupal.org/association"]/img[@alt="drupalimage test image"]'));
      $this->assertCount($unrestricted ? 1 : 0, $xpath->query('//a[@href="http://www.drupal.org/association" and @class="trusted"]'));

      // Tests unlinking images.
      $drupalimage->click();
      $this->assertEditorButtonEnabled('Link');
      $this->assertSame('true', $this->getEditorButton('Link')->getAttribute('aria-pressed'));
      // Assert structure of image toolbar balloon.
      $this->assertVisibleBalloon('.ck-toolbar[aria-label="Image toolbar"]');
      $link_image_button = $this->getBalloonButton('Link image');
      $this->assertSame('true', $link_image_button->getAttribute('aria-pressed'));
      $link_image_button->click();
      // Assert structure of link actions balloon.
      $this->getBalloonButton('Edit link');
      $unlink_image_button = $this->getBalloonButton('Unlink');
      // Click the "Unlink" button.
      $unlink_image_button->click();
      $this->assertSame('false', $this->getEditorButton('Link')->getAttribute('aria-pressed'));

      // Assert the "editingDowncast" HTML after making changes. Assert the
      // widget exists but not the link, or *any* link for that matter. Then
      // assert the expected DOM structure in detail.
      $assert_session->elementExists('css', '.ck-content .ck-widget.' . $expected_widget_class);
      $assert_session->elementNotExists('css', '.ck-content a');
      $assert_session->elementExists('css', '.ck-content .ck-widget.' . $expected_widget_class . ' > img[src*="' . $src . '"][alt="drupalimage test image"]');

      // Assert the "dataDowncast" HTML after making changes.
      $xpath = new \DOMXPath($this->getEditorDataAsDom());
      $this->assertCount(0, $xpath->query('//a[@href="http://www.drupal.org/association"]/img[@alt="drupalimage test image"]'));
      $this->assertCount(1, $xpath->query('//img[@alt="drupalimage test image"]'));
      $this->assertCount(0, $xpath->query('//a'));
    }
  }

  /**
   * Tests that alt text is required for images.
   *
   * @see https://ckeditor.com/docs/ckeditor5/latest/framework/guides/architecture/editing-engine.html#conversion
   *
   * @dataProvider providerAltTextRequired
   */
  public function testAltTextRequired(bool $unrestricted): void {
    // Disable filter_html.
    if ($unrestricted) {
      FilterFormat::load('test_format')
        ->setFilterConfig('filter_html', ['status' => FALSE])
        ->save();
    }

    // Make the test content has a block image and an inline image.
    $img_tag = preg_replace(
      '/width="\d+" height="\d+"/',
      'width="500"',
      '<img ' . $this->imageAttributesAsString() . ' />'
    );
    $this->host->body->value .= $img_tag . "<p>$img_tag</p>";
    $this->host->save();

    $page = $this->getSession()->getPage();

    $this->drupalGet($this->host->toUrl('edit-form'));
    $this->waitForEditor();
    $assert_session = $this->assertSession();

    // Confirm both of the images exist.
    $this->assertNotEmpty($image_block = $assert_session->waitForElementVisible('css', ".ck-content .ck-widget.image"));
    $this->assertNotEmpty($image_inline = $assert_session->waitForElementVisible('css', ".ck-content .ck-widget.image-inline"));

    // Confirm both of the images have an alt text required warning.
    $this->assertNotEmpty($image_block->find('css', '.image-alternative-text-missing-wrapper'));
    $this->assertNotEmpty($image_inline->find('css', '.image-alternative-text-missing-wrapper'));

    // Add alt text to the block image.
    $image_block->find('css', '.image-alternative-text-missing button')->click();
    $this->assertNotEmpty($assert_session->waitForElementVisible('css', '.ck-balloon-panel'));
    $this->assertVisibleBalloon('.ck-text-alternative-form');

    // Ensure that the missing alt text warning is hidden when the alternative
    // text form is open.
    $assert_session->waitForElement('css', '.ck-content .ck-widget.image .image-alternative-text-missing.ck-hidden');
    $assert_session->elementExists('css', '.ck-content .ck-widget.image-inline .image-alternative-text-missing');
    $assert_session->elementNotExists('css', '.ck-content .ck-widget.image-inline .image-alternative-text-missing.ck-hidden');

    // Ensure that the missing alt text error is not added to decorative images.
    $this->assertNotEmpty($decorative_button = $this->getBalloonButton('Decorative image'));
    $assert_session->elementExists('css', '.ck-balloon-panel .ck-text-alternative-form input[type=text]');
    $decorative_button->click();
    $assert_session->elementExists('css', '.ck-content .ck-widget.image .image-alternative-text-missing.ck-hidden');
    $assert_session->elementExists('css', ".ck-content .ck-widget.image-inline .image-alternative-text-missing-wrapper");
    $assert_session->elementNotExists('css', '.ck-content .ck-widget.image-inline .image-alternative-text-missing.ck-hidden');

    // Ensure that the missing alt text error is removed after saving the
    // changes.
    $this->assertNotEmpty($save_button = $this->getBalloonButton('Save'));
    $save_button->click();
    $this->assertTrue($assert_session->waitForElementRemoved('css', ".ck-content .ck-widget.image .image-alternative-text-missing-wrapper"));
    $assert_session->elementExists('css', '.ck-content .ck-widget.image-inline .image-alternative-text-missing-wrapper');

    // Ensure that the decorative image downcasts into empty alt attribute.
    $editor_dom = $this->getEditorDataAsDom();
    $decorative_img = $editor_dom->getElementsByTagName('img')->item(0);
    $this->assertTrue($decorative_img->hasAttribute('alt'));
    $this->assertEmpty($decorative_img->getAttribute('alt'));

    // Ensure that missing alt text error is not added to images with alt text.
    $this->assertNotEmpty($alt_text_button = $this->getBalloonButton('Change image alternative text'));
    $alt_text_button->click();

    $decorative_button->click();
    $this->assertNotEmpty($save_button = $this->getBalloonButton('Save'));
    $this->assertTrue($save_button->hasClass('ck-disabled'));

    $this->assertNotEmpty($alt_override_input = $page->find('css', '.ck-balloon-panel .ck-text-alternative-form input[type=text]'));
    $alt_override_input->setValue('There is now alt text');
    $this->assertTrue($assert_session->waitForElementRemoved('css', '.ck-balloon-panel .ck-text-alternative-form .ck-disabled'));
    $this->assertFalse($save_button->hasClass('ck-disabled'));
    $save_button->click();

    // Save the node and confirm that the alt text is retained.
    $page->pressButton('Save');
    $this->assertNotEmpty($assert_session->waitForElement('css', 'img[alt="There is now alt text"]'));

    // Ensure that alt form is opened after image upload.
    $this->drupalGet($this->host->toUrl('edit-form'));
    $this->waitForEditor();
    $this->addImage();
    $this->assertNotEmpty($assert_session->waitForElementVisible('css', '.ck-text-alternative-form'));
    $this->assertVisibleBalloon('.ck-text-alternative-form');
  }

  public static function providerAltTextRequired(): array {
    return [
      'Restricted' => [FALSE],
      'Unrestricted' => [TRUE],
    ];
  }

  protected function providerLinkability(): array {
    return [
      'BLOCK image, restricted' => ['block', FALSE],
      'BLOCK image, unrestricted' => ['block', TRUE],
      'INLINE image, restricted' => ['inline', FALSE],
      'INLINE image, unrestricted' => ['inline', TRUE],
    ];
  }

  /**
   * Tests alignment integration.
   *
   * @dataProvider providerAlignment
   */
  public function testAlignment(string $image_type): void {
    $assert_session = $this->assertSession();
    $page = $this->getSession()->getPage();
    // Make the test content have either a block image or an inline image.
    $img_tag = '<img alt="drupalimage test image" ' . $this->imageAttributesAsString() . ' />';
    $this->host->body->value .= $image_type === 'block'
      ? $img_tag
      : "<p>$img_tag</p>";
    $this->host->save();

    $image_selector = $image_type === 'block' ? '.ck-widget.image' : '.ck-widget.image-inline';
    $default_alignment = $image_type === 'block' ? 'Break text' : 'In line';

    $this->drupalGet($this->host->toUrl('edit-form'));
    $this->waitForEditor();
    $this->assertNotEmpty($assert_session->waitForElementVisible('css', $image_selector));

    // Ensure that the default alignment option matches expectation.
    $this->click($image_selector);
    $this->assertVisibleBalloon('[aria-label="Image toolbar"]');
    $this->assertTrue($this->getBalloonButton($default_alignment)->hasClass('ck-on'));
    $editor_dom = $this->getEditorDataAsDom();
    $drupal_media_element = $editor_dom->getElementsByTagName('img')
      ->item(0);
    $this->assertFalse($drupal_media_element->hasAttribute('data-align'));
    $this->getBalloonButton('Align center and break text')->click();

    // Assert the alignment class exists after editing downcast.
    $this->assertNotEmpty($assert_session->waitForElement('css', '.ck-widget.image.image-style-align-center'));
    $editor_dom = $this->getEditorDataAsDom();
    $drupal_media_element = $editor_dom->getElementsByTagName('img')
      ->item(0);
    $this->assertEquals('center', $drupal_media_element->getAttribute('data-align'));

    $page->pressButton('Save');
    // Check that the 'content has been updated' message status appears to confirm we left the editor.
    $this->assertNotEmpty($assert_session->waitForElementVisible('css', '[data-drupal-messages]'));
    // Check that the class is correct in the front end.
    $assert_session->elementExists('css', 'img.align-center');
    // Go back to the editor to check that the alignment class still exists.
    $edit_url = $this->getSession()->getCurrentURL() . '/edit';
    $this->drupalGet($edit_url);
    $this->waitForEditor();
    $assert_session->elementExists('css', '.ck-widget.image.image-style-align-center');

    // Ensure that "Centered image" alignment option is selected.
    $this->click('.ck-widget.image');
    $this->assertVisibleBalloon('[aria-label="Image toolbar"]');
    $this->assertTrue($this->getBalloonButton('Align center and break text')->hasClass('ck-on'));
    $this->getBalloonButton('Break text')->click();
    $this->assertTrue($assert_session->waitForElementRemoved('css', '.ck-widget.image.image-style-align-center'));
    $editor_dom = $this->getEditorDataAsDom();
    $drupal_media_element = $editor_dom->getElementsByTagName('img')
      ->item(0);
    $this->assertFalse($drupal_media_element->hasAttribute('data-align'));
  }

  public static function providerAlignment() {
    return [
      'Block image' => ['block'],
      'Inline image' => ['inline'],
    ];
  }

  /**
   * Ensures that width attribute upcasts and downcasts correctly.
   *
   * @param string $width
   *   The width input for the image.
   *
   * @dataProvider providerWidth
   */
  public function testWidth(string $width): void {
    $page = $this->getSession()->getPage();
    $assert_session = $this->assertSession();

    // Despite the absence of a `height` attribute on the `<img>`, CKEditor 5
    // should generate an appropriate `height`, matching with the aspect ratio
    // of the image.
    $expected_computed_height = $width;
    if (!str_ends_with($width, '%')) {
      $ratio = $width / (int) $this->imageAttributes()['width'];
      $expected_computed_height = (string) (int) round($ratio * (int) $this->imageAttributes()['height']);
    }

    // Add image to the host body.
    $this->host->body->value = sprintf('<img data-foo="bar" alt="drupalimage test image" ' . $this->imageAttributesAsString() . ' width="%s" />', $width);
    $this->host->save();

    $this->drupalGet($this->host->toUrl('edit-form'));
    $this->waitForEditor();

    // Ensure that the image is upcast as expected. In the editing view, the
    // width attribute should downcast to an inline style on the container
    // element.
    $assert_session->waitForElementVisible('css', ".ck-widget.image");
    $this->assertNotEmpty($assert_session->waitForElementVisible('css', ".ck-widget.image[style] img"));

    // Ensure that the width attribute is retained on downcast.
    $editor_data = $this->getEditorDataAsDom();
    $img_in_editor = $editor_data->getElementsByTagName('img')->item(0);
    $this->assertSame($width, $img_in_editor->getAttribute('width'));
    $this->assertSame($expected_computed_height, $img_in_editor->getAttribute('height'));

    // Save the node and ensure that the width attribute is retained, and ensure
    // that a natural image ratio-respecting height attribute has been added.
    $page->pressButton('Save');
    $this->assertNotEmpty($assert_session->waitForElement('css', "img[width='$width'][height='$expected_computed_height']"));
  }

  /**
   * Ensures that images can have caption set.
   */
  public function testImageCaption(): void {
    $page = $this->getSession()->getPage();
    $assert_session = $this->assertSession();

    // The foo attribute is added to be removed later by CKEditor 5 to make sure
    // CKEditor 5 was able to downcast data.
    $img_tag = '<img ' . $this->imageAttributesAsString() . ' alt="drupalimage test image" data-caption="Alpacas &lt;em&gt;are&lt;/em&gt; cute&lt;br&gt;really!" foo="bar">';
    $this->host->body->value = $img_tag;
    $this->host->save();

    $this->drupalGet($this->host->toUrl('edit-form'));
    $this->waitForEditor();

    $this->assertNotEmpty($assert_session->waitForElement('css', '.ck-editor'));
    $this->assertNotEmpty($figcaption = $assert_session->waitForElement('css', '.image figcaption'));
    $this->assertSame('Alpacas <em>are</em> cute<br>really!', $figcaption->getHtml());
    $page->pressButton('Source');
    $editor_dom = $this->getEditorDataAsDom();
    $data_caption = $editor_dom->getElementsByTagName('img')->item(0)->getAttribute('data-caption');
    $this->assertSame('Alpacas <em>are</em> cute<br>really!', $data_caption);

    $page->pressButton('Save');

    $src = $this->imageAttributes()['src'];
    $expected = '<img ' . $this->imageAttributesAsString(TRUE) . ' alt="drupalimage test image" data-caption="Alpacas &lt;em&gt;are&lt;/em&gt; cute&lt;br&gt;really!">';
    $expected_dom = Html::load($expected);
    $this->assertEquals($expected_dom->getElementsByTagName('body')->item(0)->C14N(), $editor_dom->getElementsByTagName('body')->item(0)->C14N());
    $assert_session->elementExists('xpath', '//figure/img[@src="' . $src . '" and not(@data-caption)]');
    $assert_session->responseContains('<figcaption>Alpacas <em>are</em> cute<br>really!</figcaption>');
  }

  /**
   * Data provider for ::testWidth().
   *
   * @return string[][]
   */
  public static function providerWidth(): array {
    return [
      'Image resize with percent unit (only allowed in HTML 4)' => [
        'width' => '33%',
      ],
      'Image resize with (implied) px unit' => [
        'width' => '100',
      ],
    ];
  }

  /**
   * Tests the image resize plugin.
   *
   * Confirms that enabling the resize plugin introduces the resize class to
   * images within CKEditor 5.
   *
   * @param bool $is_resize_enabled
   *   Boolean flag to test enabled or disabled.
   *
   * @dataProvider providerResize
   */
  public function testResize(bool $is_resize_enabled): void {
    // Disable resize plugin because it is enabled by default.
    if (!$is_resize_enabled) {
      Editor::load('test_format')->setSettings([
        'toolbar' => [
          'items' => [
            'drupalInsertImage',
          ],
        ],
        'plugins' => [
          'ckeditor5_imageResize' => [
            'allow_resize' => FALSE,
          ],
        ],
      ])->save();
    }

    $page = $this->getSession()->getPage();
    $assert_session = $this->assertSession();
    $this->drupalGet('node/add');
    $page->fillField('title[0][value]', 'My test content');
    $this->addImage();
    $image_figure = $assert_session->waitForElementVisible('css', 'figure');
    $this->assertSame($is_resize_enabled, $image_figure->hasClass('ck-widget_with-resizer'));
  }

  /**
   * Data provider for ::testResize().
   *
   * @return array
   *   The test cases.
   */
  public static function providerResize(): array {
    return [
      'Image resize is enabled' => [
        'is_resize_enabled' => TRUE,
      ],
      'Image resize is disabled' => [
        'is_resize_enabled' => FALSE,
      ],
    ];
  }

}
