| <!DOCTYPE html> |
| <style> |
| /* Offset body by 50px so that buttons clearly change position when they enter/exit fullscreen. */ |
| body { |
| position: relative; |
| left: 50px; |
| } |
| </style> |
| <script src="../resources/js-test.js"></script> |
| <script src="../resources/run-after-layout-and-paint.js"></script> |
| <script src="full-screen-test.js"></script> |
| <script src="../fast/events/touch/resources/touch-hover-active-tests.js"></script> |
| <link rel="stylesheet" href="../fast/events/touch/resources/touch-hover-active-tests.css"> |
| |
| <button id="enter" class='touch-interactive' onclick="document.body.webkitRequestFullScreen()">Enter fullscreen</button> |
| <button id="exit" class='touch-interactive' onclick="document.webkitCancelFullScreen()">Exit fullscreen</button> |
| |
| <script> |
| var enterButton; |
| var exitButton; |
| |
| function runTest() { |
| if (!window.eventSender) { |
| debug('This test requires DRT.'); |
| return; |
| } |
| |
| enterButton = document.getElementById('enter'); |
| exitButton = document.getElementById('exit'); |
| |
| var enterButtonCenter = elementCenter(enterButton); |
| |
| // After entering fullscreen + layout, the button should lose hover. |
| waitForEventOnce(document, 'webkitfullscreenchange', function() { |
| shouldBeTrue("document.webkitIsFullScreen"); |
| runAfterLayoutAndPaint(function() { |
| shouldBeDefault("getHoverActiveState(enterButton)"); |
| |
| // After exiting fullscreen + layout, the button should lose hover. |
| waitForEventOnce(document, 'webkitfullscreenchange', function() { |
| shouldBeFalse("document.webkitIsFullScreen"); |
| runAfterLayoutAndPaint(function() { |
| shouldBeDefault("getHoverActiveState(exitButton)"); |
| endTest(); |
| }); |
| }); |
| |
| var exitButtonCenter = elementCenter(exitButton); |
| // Hover and click the "Exit fullscreen" button. |
| eventSender.mouseMoveTo(exitButtonCenter.x, exitButtonCenter.y); |
| eventSender.mouseDown(); |
| eventSender.mouseUp(); |
| shouldBeOnlyHovered("getHoverActiveState(exitButton)"); |
| }); |
| }); |
| |
| // Hover and click the "Enter fullscreen" button. |
| // We move by 50px in the x-direction to account for the relative position. |
| eventSender.mouseMoveTo(enterButtonCenter.x + 50, enterButtonCenter.y); |
| eventSender.mouseDown(); |
| eventSender.mouseUp(); |
| shouldBeOnlyHovered("getHoverActiveState(enterButton)"); |
| } |
| |
| runTest(); |
| </script> |
