file_bug1446834.html (3526B)
1 <html> 2 <head> 3 <script src="/tests/SimpleTest/EventUtils.js"></script> 4 <script> 5 6 function lazyRequestAnimationFrame(fn) { 7 requestAnimationFrame( 8 function() { 9 setTimeout(fn); 10 }); 11 } 12 13 var tests = [ removeHost, removeShadowElement ]; 14 function nextTest() { 15 if (tests.length) { 16 var test = tests.shift(); 17 lazyRequestAnimationFrame(test); 18 } else { 19 parent.SimpleTest.finish(); 20 } 21 } 22 23 function removeHost() { 24 var hostgrandparent = document.getElementById("hostgrandparent"); 25 var hostparent = document.getElementById("hostparent"); 26 hostparent.innerHTML = "<div id='host'></div>"; 27 var host = document.getElementById("host"); 28 var sr = document.getElementById("host").attachShadow({mode: "open"}); 29 sr.innerHTML = "<input type='button' value='click'>"; 30 sr.firstChild.onclick = function() { 31 parent.is(hostparent.querySelector("div:hover"), host, "host should be hovered."); 32 host.remove(); 33 parent.is(hostgrandparent.querySelector("div:hover"), hostparent, 34 "hostgrandparent element should have descendants marked in :hover state."); 35 synthesizeMouseAtCenter(document.getElementById('light'), { type: "mousemove" }); 36 lazyRequestAnimationFrame( 37 function() { 38 parent.is(hostgrandparent.querySelector("div:hover"), null, 39 "hostgrandparent element shouldn't have descendants marked in :hover state anymore."); 40 nextTest(); 41 } 42 ); 43 } 44 lazyRequestAnimationFrame( 45 function() { 46 synthesizeMouseAtCenter(sr.firstChild, { type: "mousemove" }); 47 synthesizeMouseAtCenter(sr.firstChild, {}); 48 } 49 ); 50 } 51 52 function removeShadowElement() { 53 var hostgrandparent = document.getElementById("hostgrandparent"); 54 var hostparent = document.getElementById("hostparent"); 55 hostparent.innerHTML = "<div id='host'><input id='input' slot='slot' type='button' value='click'></div>"; 56 var host = document.getElementById("host"); 57 var input = document.getElementById("input"); 58 var sr = document.getElementById("host").attachShadow({mode: "open"}); 59 sr.innerHTML = "<div><div><slot name='slot'></slot></div></div>"; 60 var shadowOuterDiv = sr.firstChild; 61 var shadowInnerDiv = shadowOuterDiv.firstChild; 62 var slot = shadowInnerDiv.firstChild; 63 sr.firstChild.onclick = function() { 64 parent.is(hostparent.querySelector("div:hover"), host, "host should be hovered."); 65 slot.remove(); 66 parent.is(shadowOuterDiv.querySelector("div:hover"), shadowInnerDiv, 67 "Elements in shadow DOM should stay hovered"); 68 synthesizeMouseAtCenter(document.getElementById('light'), { type: "mousemove" }); 69 lazyRequestAnimationFrame( 70 function() { 71 parent.is(shadowOuterDiv.querySelector("div:hover"), null, 72 "Shadow DOM shouldn't be marked to be hovered anymore."); 73 nextTest(); 74 } 75 ); 76 } 77 lazyRequestAnimationFrame( 78 function() { 79 synthesizeMouseAtCenter(input, { type: "mousemove" }); 80 synthesizeMouseAtCenter(input, {}); 81 } 82 ); 83 } 84 </script> 85 <style> 86 </style> 87 </head> 88 <body onload="nextTest()"> 89 <div id="hostgrandparent"> 90 <div id="hostparent"> 91 </div> 92 foo 93 </div> 94 <div id="light">light dom</div> 95 </body> 96 </html>