| <!DOCTYPE html> |
| <style> |
| body { margin: 0 } |
| #top1 { display: block; width: 100%; height: 100px; background-color: green; z-index: 2; position: relative; } |
| #frame { border: 0; width: 100%; height: 140px; position: relative; top: -2px; z-index: 1; } |
| </style> |
| <body onload="runTest()"> |
| <div id="top1">TOP</div> |
| <iframe id="frame" style="width:100%; height:300px;" srcdoc=' |
| <style>body { margin: 0; } #target { display: block; height: 100px; width: 100%; background-color: yellow; } #target:hover { background-color: red; } </style> |
| <div id="target">Hover Test</div>'></iframe> |
| <div id="console"></div> |
| <script src="../../resources/js-test.js"></script> |
| <script> |
| description('Tests that hover is lost from iframe when the mouse is moved from iframe to the element that stacked up on iframe'); |
| |
| var bgColor; |
| var hoverBgColor; |
| var events = []; |
| var targetIds = []; |
| function runTest() { |
| var i = 0; |
| var frame = document.getElementById('frame'); |
| var hoverTarget = frame.contentDocument.getElementById('target'); |
| hoverTarget.addEventListener('mousemove', appendEventLog); |
| hoverTarget.addEventListener('mouseenter', appendEventLog); |
| hoverTarget.addEventListener('mouseleave', appendEventLog); |
| hoverTarget.addEventListener('mouseout', appendEventLog); |
| |
| function appendEventLog(e) { |
| events.push(e.type); |
| targetIds.push(e.currentTarget.id); |
| } |
| |
| function verifyEventLog(type, target) { |
| shouldBeEqualToString('events[' + i + ']', type); |
| shouldBeEqualToString('targetIds[' + i + ']', target); |
| debug(''); |
| i++; |
| } |
| |
| if (window.eventSender) { |
| var style = frame.contentWindow.getComputedStyle(hoverTarget, null); |
| var rect = frame.getBoundingClientRect(); |
| |
| // move mouse to top of div in iframe |
| eventSender.mouseMoveTo(rect.left + 2, rect.top + 2); |
| hoverBgColor = style.getPropertyValue('background-color'); |
| shouldBeEqualToString('hoverBgColor', 'rgb(255, 0, 0)'); |
| debug(''); |
| verifyEventLog('mouseenter', 'target'); |
| verifyEventLog('mousemove', 'target'); |
| |
| // move mouse to bottom of div stacked up on iframe |
| eventSender.mouseMoveTo(rect.left, rect.top) ; |
| bgColor = style.getPropertyValue('background-color'); |
| shouldBeEqualToString('bgColor', 'rgb(255, 255, 0)'); |
| debug(''); |
| verifyEventLog('mouseleave', 'target'); |
| verifyEventLog('mouseout', 'target'); |
| } |
| } |
| </script> |
| </body> |
