helper_doubletap_zoom_shadowdom.html (2107B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=2100"/> 6 <title>Check that double tapping shadow dom works</title> 7 <script src="apz_test_native_event_utils.js"></script> 8 <script src="apz_test_utils.js"></script> 9 <script src="/tests/SimpleTest/paint_listener.js"></script> 10 <script> 11 12 async function attach() { 13 let attachpoint = document.getElementById('attachpoint'); 14 attachpoint.attachShadow({mode: 'open'}).innerHTML = "<span>some text</span>"; 15 16 // flush layout 17 attachpoint.getBoundingClientRect(); 18 await promiseApzFlushedRepaints(); 19 } 20 21 async function test() { 22 let useTouchpad = (location.search == "?touchpad"); 23 24 await attach(); 25 26 var resolution = await getResolution(); 27 ok(resolution > 0, 28 "The initial_resolution is " + resolution + ", which is some sane value"); 29 30 // Check that double-tapping once zooms in 31 // This will hit the span inside the shadow dom, inline elements are not 32 // suitable zoom targets, so we will walk up, if you fail to walk out of 33 // the shadow tree we won't get an element and fail to zoom. If we succeed 34 // we'll hit the div with id target and zoom. 35 info("sending first double tap"); 36 await doubleTapOn(document.getElementById("target"), 10, 10, useTouchpad); 37 var prev_resolution = resolution; 38 resolution = await getResolution(); 39 ok(resolution > prev_resolution, "The first double-tap has increased the resolution to " + resolution); 40 41 // Check that double-tapping again on the same spot zooms out 42 info("sending second double tap"); 43 await doubleTapOn(document.getElementById("target"), 10, 10, useTouchpad); 44 prev_resolution = resolution; 45 resolution = await getResolution(); 46 ok(resolution < prev_resolution, "The second double-tap has decreased the resolution to " + resolution); 47 } 48 49 waitUntilApzStable() 50 .then(test) 51 .then(subtestDone, subtestFailed); 52 53 </script> 54 <style> 55 .outer { 56 width: 200px; 57 height: 200px; 58 background: yellow; 59 } 60 </style> 61 </head> 62 <body> 63 64 <div id="target" class="outer"> 65 <div id="attachpoint"></div> 66 </div> 67 68 </body> 69 </html>