Index: LayoutTests/fast/dom/HTMLDialogElement/fullscreen-elements-do-not-affect-modality.html |
diff --git a/LayoutTests/fast/dom/HTMLDialogElement/fullscreen-elements-do-not-affect-modality.html b/LayoutTests/fast/dom/HTMLDialogElement/fullscreen-elements-do-not-affect-modality.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..a589d2b448471644785f647b1c98f19f50ae1d73 |
--- /dev/null |
+++ b/LayoutTests/fast/dom/HTMLDialogElement/fullscreen-elements-do-not-affect-modality.html |
@@ -0,0 +1,105 @@ |
+<!doctype html> |
+<html> |
+<head> |
+<script src="../../../fullscreen/full-screen-test.js"></script> |
+<style> |
+#bottom-dialog { |
+ top: 100px; |
+ left: 100px; |
+} |
+ |
+#top-dialog { |
+ top: 100px; |
+ left: 200px; |
+} |
+ |
+#inert-element { |
+ top: 100px; |
+ left: 300px; |
+} |
+ |
+.box { |
+ position: absolute; |
+ height: 50px; |
+ width: 50px; |
+ background: green; |
+} |
+</style> |
+</head> |
+<body> |
+<p>Tests that the active modal dialog is as expected when fullscreen |
+elements are added to the top layer. This test requires testRunner.</p> |
+ |
+<dialog class="box" id="bottom-dialog"></dialog> |
+<dialog class="box" id="top-dialog"></dialog> |
+<div class="box" id="bottom-div"> |
+ <div class="box" id="top-div"></div> |
+</div> |
+<div class="box" id="inert-element"></div> |
+<script> |
+bottomDialog = document.querySelector('#bottom-dialog'); |
+topDialog = document.querySelector('#top-dialog'); |
+bottomDiv = document.querySelector('#bottom-div'); |
+topDiv = document.querySelector('#top-div'); |
+inert = document.querySelector('#inert-element'); |
+ |
+expectClick = null; |
+document.addEventListener('click', function(e) { |
+ clickedOn = e.target; |
+ testExpected('clickedOn', expectClick); |
+}); |
+ |
+function clickOn(element) |
+{ |
+ if (!window.eventSender) |
+ return; |
+ var rect = element.getBoundingClientRect(); |
+ eventSender.mouseMoveTo(rect.left + rect.width / 2, rect.top + rect.height / 2); |
+ eventSender.mouseDown(); |
+ eventSender.mouseUp(); |
+} |
+ |
+function makeFullscreen(element) |
+{ |
+ runWithKeyDown(function() { element.webkitRequestFullscreen(); }); |
+} |
+ |
+function shouldBeActiveModalDialog(expected) |
+{ |
+ consoleWrite('the active modal dialog should be: ' + expected.id); |
+ expectClick = expected; |
+ clickOn(expected); |
+ expectClick = document.documentElement; |
+ clickOn(inert); |
+} |
+ |
+function shouldBeNoModalDialog() |
+{ |
+ consoleWrite('there should be no modal dialog'); |
+ expectClick = inert; |
+ clickOn(inert); |
+} |
+ |
+document.addEventListener('webkitfullscreenchange', function(e) { |
+ if (document.webkitFullscreenElement == bottomDiv) { |
+ topDialog.showModal(); |
+ makeFullscreen(topDiv); |
+ } else if (document.webkitFullscreenElement == topDiv) { |
+ // Hide to simplify hit testing on the inert element. |
+ bottomDiv.style.display = 'none'; |
+ topDiv.style.display = 'none'; |
+ |
+ shouldBeActiveModalDialog(topDialog); |
+ topDialog.close(); |
+ shouldBeActiveModalDialog(bottomDialog); |
+ bottomDialog.close(); |
+ shouldBeNoModalDialog(); |
+ endTest(); |
+ } |
+}); |
+ |
+bottomDialog.showModal(); |
+makeFullscreen(bottomDiv); |
+</script> |
+</body> |
+</html> |