function ImageTestBase::testWidth

Same name in other branches
  1. 9 core/modules/ckeditor5/tests/src/FunctionalJavascript/ImageTestBase.php \Drupal\Tests\ckeditor5\FunctionalJavascript\ImageTestBase::testWidth()

Ensures that width attribute upcasts and downcasts correctly.

@dataProvider providerWidth

Parameters

string $width: The width input for the image.

File

core/modules/ckeditor5/tests/src/FunctionalJavascript/ImageTestBase.php, line 551

Class

ImageTestBase
@coversDefaultClass \Drupal\ckeditor5\Plugin\CKEditor5Plugin\Image @group ckeditor5 @internal

Namespace

Drupal\Tests\ckeditor5\FunctionalJavascript

Code

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}']"));
}

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.