test_pointer-events.html (5295B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Test for pointer-events in HTML</title> 5 <script src="/tests/SimpleTest/SimpleTest.js"></script> 6 <script src="/tests/SimpleTest/EventUtils.js"></script> 7 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 8 <style type="text/css"> 9 10 div { height: 10px; width: 10px; background: black; } 11 12 </style> 13 </head> 14 <!-- need a set timeout because we need things to start after painting suppression ends --> 15 <body onload="setTimeout(run_test, 0)"> 16 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a> 17 <div id="display" style="position: absolute; top: 0; left: 0; width: 300px; height: 300px"> 18 19 <div id="one"></div> 20 <div id="two" style="pointer-events: visiblePainted;"></div> 21 <div id="three" style="height: 20px; pointer-events: none;"> 22 <div id="four"style="margin-top: 10px;"></div> 23 </div> 24 <a id="five" style="pointer-events: none;" href="http://mozilla.org/">link</a> 25 <input id="six" style="pointer-events: none;" type="button" value="button" /> 26 <table> 27 <tr style="pointer-events: none;"> 28 <td id="seven">no</td> 29 <td id="eight" style="pointer-events: visiblePainted;">yes</td> 30 <td id="nine" style="pointer-events: auto;">yes</td> 31 </td> 32 <tr style="opacity: 0.5; pointer-events: none;"> 33 <td id="ten">no</td> 34 <td id="eleven" style="pointer-events: visiblePainted;">yes</td> 35 <td id="twelve" style="pointer-events: auto;">yes</td> 36 </td> 37 </table> 38 <iframe id="thirteen" style="pointer-events: none;" src="about:blank" width="100" height="100"></iframe> 39 <script type="application/javascript"> 40 var iframe = document.getElementById("thirteen"); 41 iframe.contentDocument.open(); 42 iframe.contentDocument.writeln("<script type='application/javascript'>"); 43 iframe.contentDocument.writeln("document.addEventListener('mousedown', fail, false);"); 44 iframe.contentDocument.writeln("function fail() { parent.ok(false, 'thirteen: iframe content must not get pointer events with explicit none') }"); 45 iframe.contentDocument.writeln("<"+"/script>"); 46 iframe.contentDocument.close(); 47 </script> 48 49 </div> 50 <pre id="test"> 51 <script type="application/javascript"> 52 53 SimpleTest.expectAssertions(0, 1); 54 55 SimpleTest.waitForExplicitFinish(); 56 57 function catches_pointer_events(element_id) 58 { 59 // we just assume the element is on top here. 60 var element = document.getElementById(element_id); 61 var bounds = element.getBoundingClientRect(); 62 var point = { x: bounds.left + bounds.width/2, y: bounds.top + bounds.height/2 }; 63 return element == document.elementFromPoint(point.x, point.y); 64 } 65 66 function synthesizeMouseEvent(type, // string 67 x, // float 68 y, // float 69 button, // long 70 clickCount, // long 71 modifiers, // long 72 ignoreRootScrollFrame) // boolean 73 { 74 SpecialPowers.wrap(window).synthesizeMouseEvent(type, x, y, { button, clickCount, modifiers }, 75 { ignoreRootScrollFrame }); 76 } 77 78 function run_test() 79 { 80 ok(catches_pointer_events("one"), "one: div should default to catching pointer events"); 81 ok(catches_pointer_events("two"), "two: div should catch pointer events with explicit visiblePainted"); 82 ok(!catches_pointer_events("three"), "three: div should not catch pointer events with explicit none"); 83 ok(!catches_pointer_events("four"), "four: div should not catch pointer events with inherited none"); 84 ok(!catches_pointer_events("five"), "five: link should not catch pointer events with explicit none"); 85 ok(!catches_pointer_events("six"), "six: native-themed form control should not catch pointer events with explicit none"); 86 ok(!catches_pointer_events("seven"), "seven: td should not catch pointer events with inherited none"); 87 ok(catches_pointer_events("eight"), "eight: td should catch pointer events with explicit visiblePainted overriding inherited none"); 88 ok(catches_pointer_events("nine"), "nine: td should catch pointer events with explicit auto overriding inherited none"); 89 ok(!catches_pointer_events("ten"), "ten: td should not catch pointer events with inherited none"); 90 ok(catches_pointer_events("eleven"), "eleven: td should catch pointer events with explicit visiblePainted overriding inherited none"); 91 ok(catches_pointer_events("twelve"), "twelve: td should catch pointer events with explicit auto overriding inherited none"); 92 93 // elementFromPoint can't be used for iframe 94 var iframe = document.getElementById("thirteen"); 95 iframe.parentNode.addEventListener('mousedown', handleIFrameClick); 96 var bounds = iframe.getBoundingClientRect(); 97 var x = bounds.left + bounds.width/2; 98 var y = bounds.top + bounds.height/2; 99 synthesizeMouseEvent('mousedown', x, y, 0, 1, 0, true); 100 } 101 102 function handleIFrameClick() 103 { 104 ok(true, "thirteen: iframe content must not get pointer events with explicit none"); 105 106 document.getElementById("display").style.display = "none"; 107 SimpleTest.finish(); 108 } 109 110 </script> 111 </pre> 112 </body> 113 </html>