inert-computed-style.html (1403B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>inert isn't hit-testable, but that isn't expose in the computed style</title> 4 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 5 <link rel="author" title="Mozilla" href="https://mozilla.org"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 body { margin: 0 } 10 div { 11 width: 100px; 12 height: 100px; 13 position: absolute; 14 top: 0; 15 left: 0; 16 background-color: blue; 17 } 18 #nonInert { 19 background-color: red; 20 } 21 </style> 22 <div id="nonInert"></div> 23 <div id="inert"></div> 24 <script> 25 test(function() { 26 let inert = document.getElementById("inert"); 27 assert_equals( 28 document.elementFromPoint(50, 50), 29 inert, 30 "not-yet-inert node hit-test before non-inert node", 31 ); 32 inert.inert = true; 33 assert_equals( 34 document.elementFromPoint(50, 50), 35 nonInert, 36 "inert node is transparent to events (as pointer-events: none)", 37 ); 38 assert_equals( 39 getComputedStyle(inert).pointerEvents, 40 getComputedStyle(nonInert).pointerEvents, 41 "inert node doesn't change pointer-events computed value", 42 ); 43 assert_equals( 44 getComputedStyle(inert).userSelect, 45 getComputedStyle(nonInert).userSelect, 46 "inert node doesn't change user-select computed value", 47 ); 48 }); 49 </script>