display-override-member-app-region-window-controls-overlay-manual.tentative.html (2378B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <title>Test app-region CSS property when "window-controls-overlay" in display-override member</title> 6 <link rel="manifest" href="resources/display-override-member-app-region-window-controls-overlay.webmanifest" /> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <h1>Test app-region CSS property when "window-controls-overlay" in display-override member</h1> 9 <style> 10 #draggableRectangle { 11 app-region: drag; 12 background-color: blue; 13 position: absolute; 14 top: 25px; 15 left: 25px; 16 width: 250px; 17 height: 250px; 18 color: white; 19 } 20 21 #outerRectangle { 22 background-color: green; 23 position: relative; 24 width: 300px; 25 height: 300px; 26 text-align: center; 27 } 28 29 #innerRectangle { 30 app-region: no-drag; 31 background-color: red; 32 position: absolute; 33 top: 50px; 34 left: 50px; 35 width: 150px; 36 height: 150px; 37 } 38 </style> 39 40 <script src="/resources/testharness.js"></script> 41 <script src="/resources/testharnessreport.js"></script> 42 <script src="resources/display-override-member-media-feature-manual.js"></script> 43 44 <script> 45 setup({ explicit_timeout: true }) 46 var manual_test = async_test("app-region element drags window"); 47 48 window.addEventListener('DOMContentLoaded', function () { 49 document.getElementById('outerRectangle').addEventListener('click', manual_test.unreached_func('click event fired on outer rectangle')); 50 document.getElementById('innerRectangle').addEventListener('click', (e) => {e.stopPropagation();}, true); 51 }); 52 </script> 53 </head> 54 55 <body> 56 <h1>Description</h1> 57 <p>This test validates that an element will drag the window around when running in "window-controls-overlay" mode.</p> 58 <h1>Manual Test Steps:</h1> 59 <p> 60 <ol> 61 <li> Install this app, and toggle into "window-controls-overlay" mode.</li> 62 <li> Click and drag the blue rectangle containing the text "Drag Me". This element has the app-region:drag CSS property set.</li> 63 <li> If the app window moves around as you drag the blue rectangle, <button onclick="manual_test.done()">Click Here</button>.</li> 64 </ol> 65 </p> 66 <div id="outerRectangle"> 67 <div id="draggableRectangle"> 68 Drag Me 69 <div id="innerRectangle">Not Draggable</div> 70 </div> 71 </div> 72 </body> 73 </html>