function OffCanvasTest::testNarrowWidth

Tests the body displacement behaves differently at a narrow width.

File

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

Class

OffCanvasTest

Tests the off-canvas dialog functionality.

Namespace

Code

public function testNarrowWidth() {
    $narrow_width_breakpoint = 768;
    $offset = 20;
    $height = 800;
    $page = $this->getSession()
        ->getPage();
    $web_assert = $this->assertSession();
    // Test the same functionality on multiple themes.
    foreach ($this->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.');
    }
}