| <!DOCTYPE html> |
| <html> |
| <title>Test that enabling immersive mode adds the immersive mode CSS class.</title> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../../resources/run-after-layout-and-paint.js"></script> |
| <script src="../media-controls.js"></script> |
| <video controls width=400 preload=metadata src="../content/60_sec_video.webm"></video> |
| <script> |
| async_test(t => { |
| const video = document.querySelector('video'); |
| const controls = mediaControls(video); |
| const immersiveModeCSSClass = 'immersive-mode'; |
| |
| window.onload = t.step_func(() => { |
| assert_false(controls.classList.contains(immersiveModeCSSClass)); |
| enableImmersiveMode(t); |
| assert_true(controls.classList.contains(immersiveModeCSSClass)); |
| checkThatVRCSSRulesAreRespected(); |
| |
| // Make sure that we still respect immersive mode when enlarged. |
| video.width = 1000; |
| runAfterLayoutAndPaint(t.step_func_done(() => { |
| assert_true(controls.classList.contains(immersiveModeCSSClass)); |
| checkThatVRCSSRulesAreRespected(); |
| })); |
| }); |
| |
| function checkThatVRCSSRulesAreRespected() { |
| // Check a few styles to make sure VR rules are not being overridden. |
| const muteButtonStyle = getComputedStyle(muteButton(video)); |
| const fullscreenButtonStyle = getComputedStyle(fullscreenButton(video)); |
| const overflowButtonStyle = getComputedStyle(overflowButton(video)); |
| const currentTimeStyle = getComputedStyle(currentTimeElement(video)); |
| const buttonPanelStyle = getComputedStyle(buttonPanelElement(video)); |
| const timelineStyle = getComputedStyle(timelineElement(video)); |
| const thumbStyle = getComputedStyle(timelineThumb(video)); |
| |
| assert_equals('43px', muteButtonStyle.height, 'Mute button height is respected'); |
| assert_equals('24px', fullscreenButtonStyle['background-size'], 'Fullscreen button background size is respected'); |
| assert_equals('43px', overflowButtonStyle.width, 'Overflow button width is respected'); |
| assert_equals('16px', currentTimeStyle['font-size'], 'Current time display font size is respected'); |
| assert_equals('43px', buttonPanelStyle.height, 'Button panel height is respected'); |
| assert_equals('535px', buttonPanelStyle['max-width'], 'Button panel max-width is respected'); |
| assert_equals('5px', timelineStyle.height, 'Timeline height is respected'); |
| assert_equals('471px', timelineStyle['max-width'], 'Timeline max-width is respected'); |
| assert_equals('16px', thumbStyle.width, 'Thumb width is respected'); |
| |
| if (internals.runtimeFlags.mediaControlsOverlayPlayButtonEnabled) { |
| const overlayPlayButtonStyle = getComputedStyle(mediaControlsOverlayPlayButtonInternal(video)); |
| assert_equals('64px', overlayPlayButtonStyle.height, 'Overlay play button height is respected'); |
| } |
| |
| } |
| }); |
| </script> |
| </html> |
