Reland r165040 "Make ancestors of modal <dialog> inert"

Original code review: https://codereview.chromium.org/133393002/
r165040 was reverted due to failing a11y tests in
content_browsertests; they have been disabled and will be rebaselined
after this change is rolled in.

BUG=329407
TBR=esprehn

Review URL: https://codereview.chromium.org/139183002

git-svn-id: svn://svn.chromium.org/blink/trunk@165211 bbb929c8-8fbe-4397-9dbb-9b2b20218538

9 files changed, 163 insertions, 40 deletions

diff --git a/third_party/WebKit/LayoutTests/dialog/inert-node-is-not-highlighted-expected.html b/third_party/WebKit/LayoutTests/dialog/inert-node-is-not-highlighted-expected.html
index 64796e7..3aaeb5f 100644
--- a/third_party/WebKit/LayoutTests/dialog/inert-node-is-not-highlighted-expected.html
+++ b/third_party/WebKit/LayoutTests/dialog/inert-node-is-not-highlighted-expected.html
@@ -24,7 +24,8 @@ none (crbug.com/147490).</p>
 <script>
 dialog = document.querySelector('dialog');
 dialog.show();
-document.execCommand('SelectAll');
+selectable = document.querySelector('#selectable');
+window.getSelection().selectAllChildren(selectable);
 </script>
 </body>
 </html>
diff --git a/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/inert-inlines.html b/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/inert-inlines.html
index 2b9c920..8d95ae6 100644
--- a/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/inert-inlines.html
+++ b/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/inert-inlines.html
@@ -53,8 +53,8 @@ inertElements.forEach(function(id) {
     element.addEventListener('mousemove', eventFiredOnInertElement);
 });
 
-document.body.addEventListener('click', function(e) {
-    document.body.firedOn = true;
+document.addEventListener('click', function(e) {
+    document.firedOn = true;
 });
 
 document.getElementById('dialog-parent').addEventListener('click', function(e) {
@@ -63,7 +63,7 @@ document.getElementById('dialog-parent').addEventListener('click', function(e) {
 
 document.querySelector('dialog').showModal();
 inertElements.forEach(function(id) {
-    expectedTarget = document.body;
+    expectedTarget = document;
     if (id == 'dialog-sibling')
         expectedTarget = document.getElementById('dialog-parent')
     element = document.getElementById(id);
diff --git a/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/inert-node-is-unfocusable-expected.txt b/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/inert-node-is-unfocusable-expected.txt
index 71d1f6e..0151288 100644
--- a/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/inert-node-is-unfocusable-expected.txt
+++ b/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/inert-node-is-unfocusable-expected.txt
@@ -1,9 +1,9 @@
-Test that inert nodes are not focusable. The test passses if only the document body and the topmost dialog and its button are focusable.
+Test that inert nodes are not focusable. The test passses if only the topmost dialog and its button are focusable.
 
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
 
-PASS "body"; focusedElement === theElement is true
+PASS "body"; focusedElement === theElement is false
 PASS "top-dialog"; focusedElement === theElement is true
 PASS "top-dialog-button"; focusedElement === theElement is true
 PASS "bottom-dialog"; focusedElement === theElement is false
diff --git a/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/inert-node-is-unfocusable.html b/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/inert-node-is-unfocusable.html
index 66da1580..631e6d4 100644
--- a/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/inert-node-is-unfocusable.html
+++ b/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/inert-node-is-unfocusable.html
@@ -21,8 +21,8 @@
     <a id="anchor" href="">Link</a>
 </div>
 <script>
-description('Test that inert nodes are not focusable. The test passses if only the document body ' +
-            'and the topmost dialog and its button are focusable.');
+description('Test that inert nodes are not focusable. The test passses if only the ' +
+            'topmost dialog and its button are focusable.');
 
 function testFocus(element, expectFocus) {
     focusedElement = null;
@@ -47,7 +47,7 @@ bottomDialog.showModal();
 var topDialog = document.getElementById('top-dialog');
 topDialog.showModal();
 
-testFocus(document.body, true);
+testFocus(document.body, false);
 testTree(topDialog, true);
 testTree(bottomDialog, false);
 testTree(document.getElementById('container'), false);
diff --git a/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/modal-dialog-ancestor-is-inert-expected.txt b/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/modal-dialog-ancestor-is-inert-expected.txt
new file mode 100644
index 0000000..212dbda
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/modal-dialog-ancestor-is-inert-expected.txt
@@ -0,0 +1,19 @@
+Test that ancestors of modal <dialog> are inert. To test manually, click the left box. There should be no change. Then click the right box. If both boxes turn green, the test passes.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Clicking on ancestor
+PASS handledEvent.document is true
+PASS handledEvent.body is false
+PASS handledEvent.dialog is false
+PASS handledEvent.div is false
+Clicking on dialog
+PASS handledEvent.document is true
+PASS handledEvent.body is true
+PASS handledEvent.dialog is true
+PASS handledEvent.div is true
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/modal-dialog-ancestor-is-inert.html b/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/modal-dialog-ancestor-is-inert.html
new file mode 100644
index 0000000..554664c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/modal-dialog-ancestor-is-inert.html
@@ -0,0 +1,111 @@
+<!doctype html>
+<html>
+<head>
+<style>
+#ancestor {
+    position: absolute;
+    height: 50px;
+    width: 50px;
+    top: 200px;
+    left: 100px;
+    border: 1px solid;
+}
+
+dialog {
+    height: 50px;
+    width: 50px;
+    top: 200px;
+    left: 200px;
+    margin: 0;
+}
+
+dialog::backdrop {
+    display: none;
+}
+</style>
+<script src="../../../resources/js-test.js"></script>
+</head>
+<body>
+<div id="ancestor">
+    <dialog></dialog>
+</div>
+<script>
+function clickOn(element)
+{
+    var rect = element.getBoundingClientRect();
+    eventSender.mouseMoveTo(rect.left + rect.width / 2, rect.top + rect.height / 2);
+    eventSender.mouseDown();
+    eventSender.mouseUp();
+}
+
+// For manual testing, indicate success only if automatic testing would also
+// print success for all ancestor nodes.
+function turnDivGreenOnSuccess()
+{
+    if (handledEvent['document'] && handledEvent['body'] && handledEvent['div'])
+        div.style.backgroundColor = 'green';
+}
+
+description('Test that ancestors of modal &lt;dialog&gt; are inert. To test manually, ' +
+            'click the left box. There should be no change. Then click the right box. ' +
+            'If both boxes turn green, the test passes.');
+div = document.querySelector('#ancestor');
+dialog = document.querySelector('dialog');
+dialog.showModal();
+
+handledEvent = {};
+document.addEventListener('click', function(event) {
+    handledEvent['document'] = true;
+    turnDivGreenOnSuccess();
+});
+
+document.body.addEventListener('click', function(event) {
+    handledEvent['body'] = true;
+    turnDivGreenOnSuccess();
+    // body should get a event only via bubbling.
+    if (event.target != dialog) {
+       testFailed('body was targeted for an click event');
+       div.style.backgroundColor = 'red';
+    }
+});
+
+div.addEventListener('click', function(event) {
+    handledEvent['div'] = true;
+    turnDivGreenOnSuccess();
+    // div should get a event only via bubbling.
+    if (event.target != dialog) {
+       testFailed('div was targeted for an click event');
+       div.style.backgroundColor = 'red';
+    }
+});
+
+dialog.addEventListener('click', function(event) {
+    handledEvent['dialog'] = true;
+    dialog.style.backgroundColor = 'green';
+    if (event.target != dialog) {
+        testFailed('dialog was not targeted for a click event');
+        dialog.style.backgroundColor = 'red';
+    }
+});
+
+if (window.eventSender) {
+    nodes = [ 'document', 'body', 'div', 'dialog' ];
+    nodes.map(function(node) { handledEvent[node] = false; });
+    debug('Clicking on ancestor');
+    clickOn(div);
+    shouldBeTrue('handledEvent.document');
+    shouldBeFalse('handledEvent.body');
+    shouldBeFalse('handledEvent.dialog');
+    shouldBeFalse('handledEvent.div');
+    handledEvent.document = false;
+
+    debug('Clicking on dialog');
+    clickOn(dialog);
+    shouldBeTrue('handledEvent.document');
+    shouldBeTrue('handledEvent.body');
+    shouldBeTrue('handledEvent.dialog');
+    shouldBeTrue('handledEvent.div');
+}
+</script>
+</body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/modal-dialog-blocks-mouse-events-expected.txt b/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/modal-dialog-blocks-mouse-events-expected.txt
index 6268bb2..23785d3 100644
--- a/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/modal-dialog-blocks-mouse-events-expected.txt
+++ b/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/modal-dialog-blocks-mouse-events-expected.txt
@@ -4,11 +4,11 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 
 
 Clicking on inert box
-PASS inertDiv.firedOn is false
-PASS Object.keys(body.firedOnEvents).length is events.length
+PASS inertDivHandledEvent is false
+PASS Object.keys(handledEvents.document).length is expectedEventCountForDocument
 Clicking on non-inert box
-PASS inertDiv.firedOn is false
-PASS Object.keys(dialogDiv.firedOnEvents).length is events.length
+PASS inertDivHandledEvent is false
+PASS Object.keys(handledEvents.dialogDiv).length is events.length
 PASS successfullyParsed is true
 
 TEST COMPLETE
diff --git a/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/modal-dialog-blocks-mouse-events.html b/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/modal-dialog-blocks-mouse-events.html
index 2d1ec44..a725e10 100644
--- a/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/modal-dialog-blocks-mouse-events.html
+++ b/third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/modal-dialog-blocks-mouse-events.html
@@ -40,17 +40,8 @@ function clickOn(element)
 {
     if (!window.eventSender)
         return;
-
-    var absoluteTop = 0;
-    var absoluteLeft = 0;
-    for (var parentNode = element; parentNode; parentNode = parentNode.offsetParent) {
-      absoluteLeft += parentNode.offsetLeft;
-      absoluteTop += parentNode.offsetTop;
-    }
-
-    var x = absoluteLeft + element.offsetWidth / 2;
-    var y = absoluteTop + element.offsetHeight / 2;
-    eventSender.mouseMoveTo(x, y);
+    var rect = element.getBoundingClientRect();
+    eventSender.mouseMoveTo(rect.left + rect.width / 2, rect.top + rect.height / 2);
     eventSender.mouseDown();
     eventSender.mouseUp();
     eventSender.mouseMoveTo(0, 0);
@@ -61,45 +52,46 @@ if (window.testRunner)
 
 dialog.showModal();
 
+inertDivHandledEvent = false;
 inertDiv = document.getElementById('inert-div');
-inertDiv.firedOn = false;
 eventFiredOnInertNode = function(event) {
-    inertDiv.firedOn = true;
+    inertDivHandledEvent = true;
     inertDiv.style.backgroundColor = 'red';
 };
 
 events =  ['mousedown', 'mouseup', 'click', 'mousemove', 'mouseover', 'mouseout'];
 dialogDiv = document.getElementById('dialog-div');
-dialogDiv.firedOnEvents = {};
+handledEvents = {};
+handledEvents.dialogDiv = {};
 eventFiredOnDialog = function(event) {
-    dialogDiv.firedOnEvents[event.type] = true;
-    if (Object.keys(dialogDiv.firedOnEvents).length == events.length)
+    handledEvents.dialogDiv[event.type] = true;
+    if (Object.keys(handledEvents.dialogDiv).length == events.length)
         dialogDiv.style.backgroundColor = 'green';
 };
 
-body = document.body;
-body.firedOnEvents = {};
-eventFiredOnBody = function(event) {
-    body.firedOnEvents[event.type] = true;
-    if (Object.keys(body.firedOnEvents).length == events.length && !inertDiv.firedOn)
+handledEvents.document = {};
+expectedEventCountForDocument = events.length - 1; // document won't get 'mouseout'
+eventFiredOnDocument = function(event) {
+    handledEvents.document[event.type] = true;
+    if (Object.keys(handledEvents.document).length == document.expectedEventCount && !inertDivHandledEvent)
         inertDiv.style.backgroundColor = 'green';
 };
 
 for (var i = 0; i < events.length; ++i) {
     inertDiv.addEventListener(events[i], eventFiredOnInertNode);
     dialogDiv.addEventListener(events[i], eventFiredOnDialog);
-    document.body.addEventListener(events[i], eventFiredOnBody);
+    document.addEventListener(events[i], eventFiredOnDocument);
 }
 
 debug('Clicking on inert box');
 clickOn(inertDiv);
-shouldBeFalse('inertDiv.firedOn');
-shouldBe('Object.keys(body.firedOnEvents).length', 'events.length');
+shouldBeFalse('inertDivHandledEvent');
+shouldBe('Object.keys(handledEvents.document).length', 'expectedEventCountForDocument');
 
 debug('Clicking on non-inert box');
 clickOn(dialogDiv);
-shouldBeFalse('inertDiv.firedOn');
-shouldBe('Object.keys(dialogDiv.firedOnEvents).length', 'events.length');
+shouldBeFalse('inertDivHandledEvent');
+shouldBe('Object.keys(handledEvents.dialogDiv).length', 'events.length');
 </script>
 </body>
 </html>
diff --git a/third_party/WebKit/Source/core/dom/Node.cpp b/third_party/WebKit/Source/core/dom/Node.cpp
index edf48a6..7e9d3a9 100644
--- a/third_party/WebKit/Source/core/dom/Node.cpp
+++ b/third_party/WebKit/Source/core/dom/Node.cpp
@@ -792,7 +792,7 @@ bool Node::shouldHaveFocusAppearance() const
 bool Node::isInert() const
 {
     const HTMLDialogElement* dialog = document().activeModalDialog();
-    if (dialog && !containsIncludingShadowDOM(dialog) && !dialog->containsIncludingShadowDOM(this))
+    if (dialog && this != document() && !dialog->containsIncludingShadowDOM(this))
         return true;
     return document().ownerElement() && document().ownerElement()->isInert();
 }