function OffCanvasTest::testNarrowWidth

Tests the body displacement behaves differently at a narrow width.

File

core/modules/system/tests/src/FunctionalJavascript/OffCanvasTest.php, line 120

Class

OffCanvasTest

Tests the off-canvas dialog functionality.

Namespace

Code

public function testNarrowWidth() : void {
  $narrow_width_breakpoint = 768;
  $offset = 20;
  $height = 800;
  $page = $this->getSession()
    ->getPage();
  $web_assert = $this->assertSession();
  // Test the same functionality on multiple themes.
  foreach (static::getTestThemes() as $theme) {
    $this->enableTheme($theme);
    // Testing at the wider width.
    $this->getSession()
      ->resizeWindow($narrow_width_breakpoint + $offset, $height);
    $this->drupalGet('/off-canvas-test-links');
    $this->assertFalse($page->find('css', '.dialog-off-canvas-main-canvas')
      ->hasAttribute('style'), 'Body not padded on wide page load.');
    $page->clickLink("Open side panel 1");
    $this->waitForOffCanvasToOpen();
    // Check that the main canvas is padded when page is not narrow width and
    // tray is open.
    $page->waitFor(10, function ($page) {
      return $page->find('css', '.dialog-off-canvas-main-canvas')
        ->hasAttribute('style');
    });
    $web_assert->elementAttributeContains('css', '.dialog-off-canvas-main-canvas', 'style', 'padding-right');
    // Testing at the narrower width.
    $this->getSession()
      ->resizeWindow($narrow_width_breakpoint - $offset, $height);
    $this->drupalGet('/off-canvas-test-links');
    $this->assertFalse($page->find('css', '.dialog-off-canvas-main-canvas')
      ->hasAttribute('style'), 'Body not padded on narrow page load.');
    $page->clickLink("Open side panel 1");
    $this->waitForOffCanvasToOpen();
    $this->assertFalse($page->find('css', '.dialog-off-canvas-main-canvas')
      ->hasAttribute('style'), 'Body not padded on narrow page with tray open.');
  }
}