function CKEditor5OffCanvasTest::testOffCanvasStyles

Tests if CKEditor is properly styled inside an off-canvas dialog.

File

core/modules/ckeditor5/tests/src/FunctionalJavascript/CKEditor5OffCanvasTest.php, line 25

Class

CKEditor5OffCanvasTest

Tests for CKEditor 5 to ensure correct styling in off-canvas.

Namespace

Code

public function testOffCanvasStyles() {
  $assert_session = $this->assertSession();
  $page = $this->getSession()
    ->getPage();
  $this->addNewTextFormat($page, $assert_session);
  $this->drupalGet('/ckeditor5_test/off_canvas');
  // The "Add Node" link triggers an off-canvas dialog with an add node form
  // that includes CKEditor.
  $page->clickLink('Add Node');
  $assert_session->waitForElementVisible('css', '#drupal-off-canvas');
  $assert_session->assertWaitOnAjaxRequest();
  $styles = $assert_session->elementExists('css', 'style#ckeditor5-off-canvas-reset');
  $this->stringContains('#drupal-off-canvas [data-drupal-ck-style-fence]', $styles->getText());
  $assert_session->elementExists('css', '.ck');
  $ckeditor_toolbar_bg_color = $this->getSession()
    ->evaluateScript('window.getComputedStyle(document.querySelector(\'.ck.ck-toolbar\')).backgroundColor');
  $this->assertEquals('rgb(255, 255, 255)', $ckeditor_toolbar_bg_color, 'Toolbar background-color should be unaffected by off-canvas');
  // Editable area should be visible.
  $assert_session->elementExists('css', '.ck .ck-content');
  $ckeditor_editable_bg_color = $this->getSession()
    ->evaluateScript('window.getComputedStyle(document.querySelector(\'.ck.ck-content\')).backgroundColor');
  $this->assertEquals('rgb(255, 255, 255)', $ckeditor_editable_bg_color, 'Content background-color should be unaffected by off-canvas');
}