<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[235191] trunk</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/235191">235191</a></dd>
<dt>Author</dt> <dd>rniwa@webkit.org</dd>
<dt>Date</dt> <dd>2018-08-22 12:59:24 -0700 (Wed, 22 Aug 2018)</dd>
</dl>

<h3>Log Message</h3>
<pre>Focus navigation order in slot fallback contents is wrong
https://bugs.webkit.org/show_bug.cgi?id=178001
<rdar://problem/42842997>

Reviewed by Antti Koivisto.

Source/WebCore:

The bug here is that when a slot uses its fallback content, the fallback content's focus order doesn't get
grouped by that of the slot. Consider the following DOM tree:

- ShadowRoot
    - div tabindex = 2
    - slot tabindex = 1
        - span tabindex = 3

In this example, the sequential focus navigation should be slot, span, then div. Even though span has tabindex
order of 3, which is lower than that of div, the fallback content of the slot should be grouped together
before the focus moves out of the slot content.

In WebKit, this concept of grouping elements for the sequential focus navigation ordering is implemeneted
as FocusNavigationScope. Both ShadowRoot and HTMLSlotElement are treated as a focus scope owner but we had
a bug that a slot element which uses its fallback content was not treated as a focus scope owner.

This patch addresses the bug by treating a slot wich uses its fallback content as a focus scope owner.

Test: fast/shadow-dom/focus-navigation-across-slots.html

* page/FocusController.cpp:
(WebCore::isFocusScopeOwner): Treat a slot elment hs a focus scope owner regardless of whether it has assigned
nodes or not.
(WebCore::FocusNavigationScope::SlotKind): Added.
(WebCore::FocusNavigationScope::m_slotKind): Added.
(WebCore::FocusNavigationScope::parentInScope const): Return null if `node` is a child of the slot element for
which this FocusNavigationScope is created (i.e. `node` is slot's fallback content).
(WebCore::FocusNavigationScope::firstNodeInScope const): Return the first child node when this
FocusNavigationScope is for a slot element using its fallback content.
(WebCore::FocusNavigationScope::lastNodeInScope const): Ditto for the last child.
(WebCore::FocusNavigationScope::FocusNavigationScope):
(WebCore::FocusNavigationScope::scopeOf): The scope of a child of a slot element which uses its fallback content
is its slot element (i.e. the current node is a fallback content). We can't simply check the current node is
a slot element which uses a fallback content since the scope of a slot element is the parent scope. e.g. its
tree scope like ShadowRoot or Document inside which this slot element appears.
(WebCore::FocusNavigationScope::scopeOwnedByScopeOwner): Create the appropriate FocusNavigationScope based on
whether the slot element has assigned or it uses its fallback content.

LayoutTests:

Updated the sequential focus navigation test for shadow DOM and its expectation.

New test passes in Firefox & Chrome other than the fact both browsers fail to focus a slot elemennt.

* fast/shadow-dom/focus-navigation-across-slots-expected.txt:
* fast/shadow-dom/focus-navigation-across-slots.html:</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsfastshadowdomfocusnavigationacrossslotsexpectedtxt">trunk/LayoutTests/fast/shadow-dom/focus-navigation-across-slots-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastshadowdomfocusnavigationacrossslotshtml">trunk/LayoutTests/fast/shadow-dom/focus-navigation-across-slots.html</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorepageFocusControllercpp">trunk/Source/WebCore/page/FocusController.cpp</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (235190 => 235191)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog      2018-08-22 19:33:46 UTC (rev 235190)
+++ trunk/LayoutTests/ChangeLog 2018-08-22 19:59:24 UTC (rev 235191)
</span><span class="lines">@@ -1,3 +1,18 @@
</span><ins>+2018-08-21  Ryosuke Niwa  <rniwa@webkit.org>
+
+        Focus navigation order in slot fallback contents is wrong
+        https://bugs.webkit.org/show_bug.cgi?id=178001
+        <rdar://problem/42842997>
+
+        Reviewed by Antti Koivisto.
+
+        Updated the sequential focus navigation test for shadow DOM and its expectation.
+
+        New test passes in Firefox & Chrome other than the fact both browsers fail to focus a slot elemennt.
+
+        * fast/shadow-dom/focus-navigation-across-slots-expected.txt:
+        * fast/shadow-dom/focus-navigation-across-slots.html:
+
</ins><span class="cx"> 2018-08-22  Per Arne Vollan  <pvollan@apple.com>
</span><span class="cx"> 
</span><span class="cx">         [Win] Some video tests under http/tests/security are crashing on EWS.
</span></span></pre></div>
<a id="trunkLayoutTestsfastshadowdomfocusnavigationacrossslotsexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/shadow-dom/focus-navigation-across-slots-expected.txt (235190 => 235191)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shadow-dom/focus-navigation-across-slots-expected.txt     2018-08-22 19:33:46 UTC (rev 235190)
+++ trunk/LayoutTests/fast/shadow-dom/focus-navigation-across-slots-expected.txt        2018-08-22 19:59:24 UTC (rev 235191)
</span><span class="lines">@@ -14,15 +14,15 @@
</span><span class="cx"> 10. Content in slot 2 with tabindex=1
</span><span class="cx"> 11. Content in slot 2 with tabindex=1
</span><span class="cx"> 12. Content in slot 2 with tabindex=0
</span><del>-13. Non-focusable slot fallback with tabindex=1
-14. Focusable slot element.
</del><ins>+13. Focusable slot element.
+14. Focusable slot fallback content with tabindex=0
</ins><span class="cx"> 15. Shadow content with tabindex=2
</span><del>-16. Non-focusable slot fallback with tabindex=0
-17. Focusable slot fallback content with tabindex=0
-16. Non-focusable slot fallback with tabindex=0
</del><ins>+16. Non-focusable slot fallback with tabindex=1
+17. Non-focusable slot fallback with tabindex=0
+16. Non-focusable slot fallback with tabindex=1
</ins><span class="cx"> 15. Shadow content with tabindex=2
</span><del>-14. Focusable slot element.
-13. Non-focusable slot fallback with tabindex=1
</del><ins>+14. Focusable slot fallback content with tabindex=0
+13. Focusable slot element.
</ins><span class="cx"> 12. Content in slot 2 with tabindex=0
</span><span class="cx"> 11. Content in slot 2 with tabindex=1
</span><span class="cx"> 10. Content in slot 2 with tabindex=1
</span></span></pre></div>
<a id="trunkLayoutTestsfastshadowdomfocusnavigationacrossslotshtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/shadow-dom/focus-navigation-across-slots.html (235190 => 235191)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shadow-dom/focus-navigation-across-slots.html     2018-08-22 19:33:46 UTC (rev 235190)
+++ trunk/LayoutTests/fast/shadow-dom/focus-navigation-across-slots.html        2018-08-22 19:59:24 UTC (rev 235191)
</span><span class="lines">@@ -102,13 +102,13 @@
</span><span class="cx">     shadowWithSlotFallback.closedShadowRoot.innerHTML = `
</span><span class="cx">         <slot name="slot1" onfocus="log(this)">
</span><span class="cx">             Non-focusable slot should not be focused.
</span><del>-            <div tabindex="0">16. Non-focusable slot fallback with tabindex=0</div>
-            <div tabindex="1">13. Non-focusable slot fallback with tabindex=1</div>
</del><ins>+            <div tabindex="0">17. Non-focusable slot fallback with tabindex=0</div>
+            <div tabindex="1">16. Non-focusable slot fallback with tabindex=1</div>
</ins><span class="cx">         </slot>
</span><span class="cx">         <div tabindex="2" onfocus="log(this)">15. Shadow content with tabindex=2</div>
</span><span class="cx">         <slot name="slot2" tabindex="1" style="display:block;" onfocus="log(this)">
</span><del>-            14. Focusable slot element.
-            <div tabindex="0">17. Focusable slot fallback content with tabindex=0</div>
</del><ins>+            13. Focusable slot element.
+            <div tabindex="0">14. Focusable slot fallback content with tabindex=0</div>
</ins><span class="cx">         </slot>`;
</span><span class="cx"> 
</span><span class="cx">     document.getElementById('first').focus();
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (235190 => 235191)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog   2018-08-22 19:33:46 UTC (rev 235190)
+++ trunk/Source/WebCore/ChangeLog      2018-08-22 19:59:24 UTC (rev 235191)
</span><span class="lines">@@ -1,3 +1,49 @@
</span><ins>+2018-08-21  Ryosuke Niwa  <rniwa@webkit.org>
+
+        Focus navigation order in slot fallback contents is wrong
+        https://bugs.webkit.org/show_bug.cgi?id=178001
+        <rdar://problem/42842997>
+
+        Reviewed by Antti Koivisto.
+
+        The bug here is that when a slot uses its fallback content, the fallback content's focus order doesn't get
+        grouped by that of the slot. Consider the following DOM tree:
+
+        - ShadowRoot
+            - div tabindex = 2
+            - slot tabindex = 1
+                - span tabindex = 3
+
+        In this example, the sequential focus navigation should be slot, span, then div. Even though span has tabindex
+        order of 3, which is lower than that of div, the fallback content of the slot should be grouped together
+        before the focus moves out of the slot content.
+
+        In WebKit, this concept of grouping elements for the sequential focus navigation ordering is implemeneted
+        as FocusNavigationScope. Both ShadowRoot and HTMLSlotElement are treated as a focus scope owner but we had
+        a bug that a slot element which uses its fallback content was not treated as a focus scope owner.
+
+        This patch addresses the bug by treating a slot wich uses its fallback content as a focus scope owner.
+
+        Test: fast/shadow-dom/focus-navigation-across-slots.html
+
+        * page/FocusController.cpp:
+        (WebCore::isFocusScopeOwner): Treat a slot elment hs a focus scope owner regardless of whether it has assigned
+        nodes or not.
+        (WebCore::FocusNavigationScope::SlotKind): Added.
+        (WebCore::FocusNavigationScope::m_slotKind): Added.
+        (WebCore::FocusNavigationScope::parentInScope const): Return null if `node` is a child of the slot element for
+        which this FocusNavigationScope is created (i.e. `node` is slot's fallback content).
+        (WebCore::FocusNavigationScope::firstNodeInScope const): Return the first child node when this
+        FocusNavigationScope is for a slot element using its fallback content.
+        (WebCore::FocusNavigationScope::lastNodeInScope const): Ditto for the last child.
+        (WebCore::FocusNavigationScope::FocusNavigationScope):
+        (WebCore::FocusNavigationScope::scopeOf): The scope of a child of a slot element which uses its fallback content
+        is its slot element (i.e. the current node is a fallback content). We can't simply check the current node is
+        a slot element which uses a fallback content since the scope of a slot element is the parent scope. e.g. its
+        tree scope like ShadowRoot or Document inside which this slot element appears.
+        (WebCore::FocusNavigationScope::scopeOwnedByScopeOwner): Create the appropriate FocusNavigationScope based on
+        whether the slot element has assigned or it uses its fallback content.
+
</ins><span class="cx"> 2018-08-22  David Kilzer  <ddkilzer@apple.com>
</span><span class="cx"> 
</span><span class="cx">         Move files in WebCore project to match Xcode folder structure
</span></span></pre></div>
<a id="trunkSourceWebCorepageFocusControllercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/page/FocusController.cpp (235190 => 235191)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/page/FocusController.cpp    2018-08-22 19:33:46 UTC (rev 235190)
+++ trunk/Source/WebCore/page/FocusController.cpp       2018-08-22 19:59:24 UTC (rev 235191)
</span><span class="lines">@@ -75,7 +75,7 @@
</span><span class="cx"> {
</span><span class="cx">     if (element.shadowRoot() && !hasCustomFocusLogic(element))
</span><span class="cx">         return true;
</span><del>-    if (is<HTMLSlotElement>(element) && downcast<HTMLSlotElement>(element).assignedNodes()) {
</del><ins>+    if (is<HTMLSlotElement>(element)) {
</ins><span class="cx">         ShadowRoot* root = element.containingShadowRoot();
</span><span class="cx">         if (root && root->host() && !hasCustomFocusLogic(*root->host()))
</span><span class="cx">             return true;
</span><span class="lines">@@ -97,6 +97,8 @@
</span><span class="cx">     Node* lastChildInScope(const Node&) const;
</span><span class="cx"> 
</span><span class="cx"> private:
</span><ins>+    enum class SlotKind : uint8_t { Assigned, Fallback };
+
</ins><span class="cx">     Node* firstChildInScope(const Node&) const;
</span><span class="cx"> 
</span><span class="cx">     Node* parentInScope(const Node&) const;
</span><span class="lines">@@ -105,11 +107,11 @@
</span><span class="cx">     Node* previousSiblingInScope(const Node&) const;
</span><span class="cx"> 
</span><span class="cx">     explicit FocusNavigationScope(TreeScope&);
</span><ins>+    explicit FocusNavigationScope(HTMLSlotElement&, SlotKind);
</ins><span class="cx"> 
</span><del>-    explicit FocusNavigationScope(HTMLSlotElement&);
-
</del><span class="cx">     TreeScope* m_rootTreeScope { nullptr };
</span><span class="cx">     HTMLSlotElement* m_slotElement { nullptr };
</span><ins>+    SlotKind m_slotKind { SlotKind::Assigned };
</ins><span class="cx"> };
</span><span class="cx"> 
</span><span class="cx"> // FIXME: Focus navigation should work with shadow trees that have slots.
</span><span class="lines">@@ -132,8 +134,17 @@
</span><span class="cx">     if (m_rootTreeScope && &m_rootTreeScope->rootNode() == &node)
</span><span class="cx">         return nullptr;
</span><span class="cx"> 
</span><del>-    if (UNLIKELY(m_slotElement && m_slotElement == node.assignedSlot()))
-        return nullptr;
</del><ins>+    if (UNLIKELY(m_slotElement)) {
+        if (m_slotKind == SlotKind::Assigned) {
+            if (m_slotElement == node.assignedSlot())
+                return nullptr;
+        } else {
+            ASSERT(m_slotKind == SlotKind::Fallback);
+            auto* parentNode = node.parentNode();
+            if (parentNode == m_slotElement)
+                return nullptr;
+        }
+    }
</ins><span class="cx"> 
</span><span class="cx">     return node.parentNode();
</span><span class="cx"> }
</span><span class="lines">@@ -166,8 +177,12 @@
</span><span class="cx"> {
</span><span class="cx">     if (UNLIKELY(m_slotElement)) {
</span><span class="cx">         auto* assigneNodes = m_slotElement->assignedNodes();
</span><del>-        ASSERT(assigneNodes);
-        return assigneNodes->first();
</del><ins>+        if (m_slotKind == SlotKind::Assigned) {
+            ASSERT(assigneNodes);
+            return assigneNodes->first();
+        }
+        ASSERT(m_slotKind == SlotKind::Fallback);
+        return m_slotElement->firstChild();
</ins><span class="cx">     }
</span><span class="cx">     ASSERT(m_rootTreeScope);
</span><span class="cx">     return &m_rootTreeScope->rootNode();
</span><span class="lines">@@ -177,8 +192,12 @@
</span><span class="cx"> {
</span><span class="cx">     if (UNLIKELY(m_slotElement)) {
</span><span class="cx">         auto* assigneNodes = m_slotElement->assignedNodes();
</span><del>-        ASSERT(assigneNodes);
-        return assigneNodes->last();
</del><ins>+        if (m_slotKind == SlotKind::Assigned) {
+            ASSERT(assigneNodes);
+            return assigneNodes->last();
+        }
+        ASSERT(m_slotKind == SlotKind::Fallback);
+        return m_slotElement->lastChild();
</ins><span class="cx">     }
</span><span class="cx">     ASSERT(m_rootTreeScope);
</span><span class="cx">     return &m_rootTreeScope->rootNode();
</span><span class="lines">@@ -213,8 +232,9 @@
</span><span class="cx"> {
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-FocusNavigationScope::FocusNavigationScope(HTMLSlotElement& slotElement)
</del><ins>+FocusNavigationScope::FocusNavigationScope(HTMLSlotElement& slotElement, SlotKind slotKind)
</ins><span class="cx">     : m_slotElement(&slotElement)
</span><ins>+    , m_slotKind(slotKind)
</ins><span class="cx"> {
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="lines">@@ -235,15 +255,21 @@
</span><span class="cx"> FocusNavigationScope FocusNavigationScope::scopeOf(Node& startingNode)
</span><span class="cx"> {
</span><span class="cx">     ASSERT(startingNode.isInTreeScope());
</span><del>-    Node* root = nullptr;
-    for (Node* currentNode = &startingNode; currentNode; currentNode = currentNode->parentNode()) {
</del><ins>+    RefPtr<Node> root;
+    RefPtr<Node> parentNode;
+    for (RefPtr<Node> currentNode = &startingNode; currentNode; currentNode = parentNode) {
</ins><span class="cx">         root = currentNode;
</span><span class="cx">         if (HTMLSlotElement* slot = currentNode->assignedSlot()) {
</span><span class="cx">             if (isFocusScopeOwner(*slot))
</span><del>-                return FocusNavigationScope(*slot);
</del><ins>+                return FocusNavigationScope(*slot, SlotKind::Assigned);
</ins><span class="cx">         }
</span><span class="cx">         if (is<ShadowRoot>(currentNode))
</span><span class="cx">             return FocusNavigationScope(downcast<ShadowRoot>(*currentNode));
</span><ins>+        parentNode = currentNode->parentNode();
+        // The scope of a fallback content of a HTMLSlotElement is the slot element
+        // but the scope of a HTMLSlotElement is its parent scope.
+        if (parentNode && is<HTMLSlotElement>(parentNode) && !downcast<HTMLSlotElement>(*parentNode).assignedNodes())
+            return FocusNavigationScope(downcast<HTMLSlotElement>(*parentNode), SlotKind::Fallback);
</ins><span class="cx">     }
</span><span class="cx">     ASSERT(root);
</span><span class="cx">     return FocusNavigationScope(root->treeScope());
</span><span class="lines">@@ -252,8 +278,10 @@
</span><span class="cx"> FocusNavigationScope FocusNavigationScope::scopeOwnedByScopeOwner(Element& element)
</span><span class="cx"> {
</span><span class="cx">     ASSERT(element.shadowRoot() || is<HTMLSlotElement>(element));
</span><del>-    if (is<HTMLSlotElement>(element))
-        return FocusNavigationScope(downcast<HTMLSlotElement>(element));
</del><ins>+    if (is<HTMLSlotElement>(element)) {
+        auto& slot = downcast<HTMLSlotElement>(element);
+        return FocusNavigationScope(slot, slot.assignedNodes() ? SlotKind::Assigned : SlotKind::Fallback);
+    }
</ins><span class="cx">     return FocusNavigationScope(*element.shadowRoot());
</span><span class="cx"> }
</span><span class="cx"> 
</span></span></pre>
</div>
</div>

</body>
</html>