display-override-member-css-environment-variables-window-controls-overlay-manual.tentative.html (3443B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <title>Test CSS environment variables when "window-controls-overlay" in display-override member</title> 6 <link rel="manifest" href="resources/display-override-member-css-environment-variables-window-controls-overlay.webmanifest" /> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <h1>Test CSS environment variables when "window-controls-overlay" in display-override member</h1> 9 <style> 10 #windowControlsOverlayElementStyle { 11 padding-left: env(titlebar-area-x); 12 padding-right: env(titlebar-area-width); 13 padding-top: env(titlebar-area-y); 14 padding-bottom: env(titlebar-area-height); 15 } 16 </style> 17 18 <script src="/resources/testharness.js"></script> 19 <script src="/resources/testharnessreport.js"></script> 20 <script src="resources/display-override-member-media-feature-manual.js"></script> 21 22 <script> 23 setup({ explicit_timeout: true }); 24 var manual_test = async_test("titlebar-area CSS environment variables"); 25 manual_test.step_timeout(() => { 26 manual_test.force_timeout(); 27 manual_test.done(); 28 }, 60000); 29 manual_test.step(() => { 30 navigator.windowControlsOverlay.addEventListener('geometrychange', (event) => { 31 if (navigator.windowControlsOverlay.visible) { 32 const windowControlsOverlayElementStyle = document.getElementById('windowControlsOverlayElementStyle'); 33 const x = getComputedStyle(windowControlsOverlayElementStyle).getPropertyValue('padding-left'); 34 const w = getComputedStyle(windowControlsOverlayElementStyle).getPropertyValue('padding-right'); 35 const y = getComputedStyle(windowControlsOverlayElementStyle).getPropertyValue('padding-top'); 36 const h = getComputedStyle(windowControlsOverlayElementStyle).getPropertyValue('padding-bottom'); 37 const boundingClientRect = navigator.windowControlsOverlay.getTitlebarAreaRect(); 38 manual_test.step(() => { 39 assert_equals(x, boundingClientRect.x + 'px', 'CSS environment "titlebar-area-x" does not equal navigator.windowControlsOverlay.getTitlebarAreaRect().x'); 40 assert_equals(y, boundingClientRect.y + 'px', 'CSS environment "titlebar-area-x" does not equal navigator.windowControlsOverlay.getTitlebarAreaRect().y'); 41 assert_equals(w, boundingClientRect.width + 'px', 'CSS environment "titlebar-area-x" does not equal navigator.windowControlsOverlay.getTitlebarAreaRect().width'); 42 assert_equals(h, boundingClientRect.height + 'px', 'CSS environment "titlebar-area-x" does not equal navigator.windowControlsOverlay.getTitlebarAreaRect().height'); 43 }); 44 manual_test.done(); 45 } 46 }); 47 }); 48 </script> 49 </head> 50 51 <body> 52 <h1>Description</h1> 53 <p>This test validates that when in "window-controls-overlay" mode, the 'titlebar-area-*' CSS environment variables 54 match the values returned by navigator.windowControlsOverlay.getTitlebarAreaRect().</p> 55 <h1>Manual Test Steps:</h1> 56 <p> 57 <ol> 58 <li> Install this app, and toggle into "window-controls-overlay" mode.</li> 59 <li> Upon toggling into "window-controls-overlay" mode, the test will validate that the CSS enviroment variable 60 values match the JavaScript API.</li> 61 </ol> 62 Note: This test will automatically timeout and fail if not completed within 60 seconds. 63 </p> 64 <div id="windowControlsOverlayElementStyle"></div> 65 </body> 66 67 </html>