[Shadow DOM] Extend a 'path' notation in utility function so that we …

…can specify arbitrary ShadowRoot. https://bugs.webkit.org/show_bug.cgi?id=80405 Reviewed by Dimitri Glazkov. Extract common utility function, getElementByIdInShadow(path), into a shadow-dom.js (renamed from create-dom.js) and support 'consecutive slashes' notation so that we can specify arbitrary ShadowRoot in shadow DOM tree. Until now, we can get an element only from the youngest ShadowRoot. * fast/dom/shadow/access-key.html: * fast/dom/shadow/get-element-by-id-in-shadow-root-expected.txt: * fast/dom/shadow/get-element-by-id-in-shadow-root.html: * fast/dom/shadow/resources/shadow-dom.js: Renamed from LayoutTests/fast/dom/shadow/resources/create-dom.js. (createShadowRoot): (createDOM): (isShadowRoot): (getElementInShadowTreeStack): * fast/dom/shadow/shadow-boundary-events.html: Canonical link: https://commits.webkit.org/97640@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@110022 268f45cc-cd09-0410-ab3c-d52691b4dbfc
WebKit · Mar 7, 2012 · 1a2023f · 1a2023f
1 parent 525e362
commit 1a2023f
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 53 deletions.
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
@@ -1,3 +1,25 @@
+2012-03-06  Hayato Ito  <hayato@chromium.org>
+
+        [Shadow DOM] Extend a 'path' notation in utility function so that we can specify arbitrary ShadowRoot.
+        https://bugs.webkit.org/show_bug.cgi?id=80405
+
+        Reviewed by Dimitri Glazkov.
+
+        Extract common utility function, getElementByIdInShadow(path), into a shadow-dom.js
+        (renamed from create-dom.js) and support 'consecutive slashes' notation so that
+        we can specify arbitrary ShadowRoot in shadow DOM tree.  Until now, we can get an element
+        only from the youngest ShadowRoot.
+
+        * fast/dom/shadow/access-key.html:
+        * fast/dom/shadow/get-element-by-id-in-shadow-root-expected.txt:
+        * fast/dom/shadow/get-element-by-id-in-shadow-root.html:
+        * fast/dom/shadow/resources/shadow-dom.js: Renamed from LayoutTests/fast/dom/shadow/resources/create-dom.js.
+        (createShadowRoot):
+        (createDOM):
+        (isShadowRoot):
+        (getElementInShadowTreeStack):
+        * fast/dom/shadow/shadow-boundary-events.html:
+
 2012-03-06  Fumitoshi Ukai  <ukai@chromium.org>
 
         Unreviewed, update chromium test expectations

diff --git a/LayoutTests/fast/dom/shadow/access-key.html b/LayoutTests/fast/dom/shadow/access-key.html
@@ -2,7 +2,7 @@
 <html>
 <head>
 <script src="../../js/resources/js-test-pre.js"></script>
-<script src="resources/create-dom.js"></script>
+<script src="resources/shadow-dom.js"></script>
 </head>
 <body>
 <p id="description"></p>
@@ -44,17 +44,6 @@
     eventRecords[eventType].push(event.target.id);
 }
 
-function getElementInShadow(path)
-{
-    var ids = path.split('/');
-    var element = document.getElementById(ids[0]);
-    for (var i = 1; element != null && i < ids.length; ++i) {
-        var shadowRoot = internals.shadowRoot(element);
-        element = internals.getElementByIdInShadowRoot(shadowRoot, ids[i]);
-    }
-    return element;
-}
-
 function prepareDOMTree(parent)
 {
     parent.appendChild(
@@ -72,7 +61,7 @@
                'shadowC/inputD', 'shadowC/inputE',
                'shadowC/shadowF/inputG'];
     for (var i = 0; i < ids.length; ++i) {
-        var element = getElementInShadow(ids[i]);
+        var element = getElementInShadowTreeStack(ids[i]);
         element.addEventListener('focus', recordEvent, false);
     }
 }
@@ -93,12 +82,12 @@
     pressAccessKey('a');
     shouldBe('dispatchedEvent("focus")', '["inputE"]');
 
-    getElementInShadow('shadowC/inputD').focus();
+    getElementInShadowTreeStack('shadowC/inputD').focus();
     clearEventRecords();
     pressAccessKey('a');
     shouldBe('dispatchedEvent("focus")', '["inputE"]');
 
-    getElementInShadow('shadowC/shadowF/inputG').focus();
+    getElementInShadowTreeStack('shadowC/shadowF/inputG').focus();
     clearEventRecords();
     pressAccessKey('a');
     shouldBe('dispatchedEvent("focus")', '["inputE"]');

diff --git a/LayoutTests/fast/dom/shadow/get-element-by-id-in-shadow-root-expected.txt b/LayoutTests/fast/dom/shadow/get-element-by-id-in-shadow-root-expected.txt
@@ -1,11 +1,13 @@
-Tests to ensure that internals.getElementByIdInTreeScope can get an element in TreeScope by its id. Can only run within DRT
+Tests to ensure that internals.getElementByIdInShadowRoot can get an element in ShadowRoot by its id. Can only run within DRT
 
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
 
-PASS getElementInShadow('divA/inputB').id is "inputB"
-PASS getElementInShadow('divA/divC').id is "divC"
-PASS getElementInShadow('divA/divC/inputD').id is "inputD"
+PASS getElementInShadowTreeStack('divA/inputB').id is "inputB"
+PASS getElementInShadowTreeStack('divA/divC').id is "divC"
+PASS getElementInShadowTreeStack('divA/divC/inputD').id is "inputD"
+PASS getElementInShadowTreeStack('divA/divC//inputE').id is "inputE"
+PASS getElementInShadowTreeStack('divA/divC///inputF').id is "inputF"
 PASS successfullyParsed is true
 
 TEST COMPLETE

diff --git a/LayoutTests/fast/dom/shadow/get-element-by-id-in-shadow-root.html b/LayoutTests/fast/dom/shadow/get-element-by-id-in-shadow-root.html
@@ -2,22 +2,11 @@
 <html>
 <head>
 <script src="../../js/resources/js-test-pre.js"></script>
-<script src="resources/create-dom.js"></script>
+<script src="resources/shadow-dom.js"></script>
 </head>
 <body>
 <script>
-description("Tests to ensure that internals.getElementByIdInTreeScope can get an element in TreeScope by its id. Can only run within DRT");
-
-function getElementInShadow(path)
-{
-    var ids = path.split('/');
-    var element = document.getElementById(ids[0]);
-    for (var i = 1; element != null && i < ids.length; ++i) {
-        var shadowRoot = internals.shadowRoot(element);
-        element = internals.getElementByIdInShadowRoot(shadowRoot, ids[i]);
-    }
-    return element;
-}
+description("Tests to ensure that internals.getElementByIdInShadowRoot can get an element in ShadowRoot by its id. Can only run within DRT");
 
 function prepareDomTree(parent)
 {
@@ -27,17 +16,29 @@
                       createDOM('input', {'id': 'inputB'}),
                       createDOM('div', {'id': 'divC'},
                                 createShadowRoot(
-                                    createDOM('input', {'id': 'inputD'}))))));
+                                    createDOM('input', {'id': 'inputD'})),
+                                createShadowRoot(
+                                    createDOM('input', {'id': 'inputE'})),
+                                createShadowRoot(
+                                    createDOM('input', {'id': 'inputF'}))))));
 }
 
 function test()
 {
     if (window.layoutTestController)
         layoutTestController.dumpAsText();
+    if (window.internals)
+        window.internals.setMultipleShadowSubtreesEnabled(true);
+
     prepareDomTree(document.body);
-    shouldBeEqualToString("getElementInShadow('divA/inputB').id", 'inputB');
-    shouldBeEqualToString("getElementInShadow('divA/divC').id", 'divC');
-    shouldBeEqualToString("getElementInShadow('divA/divC/inputD').id", 'inputD');
+    shouldBeEqualToString("getElementInShadowTreeStack('divA/inputB').id", 'inputB');
+    shouldBeEqualToString("getElementInShadowTreeStack('divA/divC').id", 'divC');
+    shouldBeEqualToString("getElementInShadowTreeStack('divA/divC/inputD').id", 'inputD');
+    shouldBeEqualToString("getElementInShadowTreeStack('divA/divC//inputE').id", 'inputE');
+    shouldBeEqualToString("getElementInShadowTreeStack('divA/divC///inputF').id", 'inputF');
+
+    if (window.internals)
+        window.internals.setMultipleShadowSubtreesEnabled(false);
 }
 
 test();

diff --git a/...s/fast/dom/shadow/resources/create-dom.js → ...s/fast/dom/shadow/resources/shadow-dom.js b/...s/fast/dom/shadow/resources/create-dom.js → ...s/fast/dom/shadow/resources/shadow-dom.js
@@ -26,3 +26,27 @@ function createDOM(tagName, attributes)
     }
     return element;
 }
+
+function isShadowRoot(node)
+{
+    // FIXME: window.internals should have internals.isShadowRoot(node).
+    return node.host;
+}
+
+// You can spefify youngerShadowRoot by consecutive slashes.
+// See LayoutTests/fast/dom/shadow/get-element-by-id-in-shadow-root.html for actual usages.
+function getElementInShadowTreeStack(path)
+{
+    var ids = path.split('/');
+    var node = document.getElementById(ids[0]);
+    for (var i = 1; node != null && i < ids.length; ++i) {
+        if (isShadowRoot(node))
+            node = internals.youngerShadowRoot(node);
+        else
+            node = internals.oldestShadowRoot(node);
+        if (ids[i] != '')
+            node = internals.getElementByIdInShadowRoot(node, ids[i]);
+    }
+    return node;
+}
+
diff --git a/LayoutTests/fast/dom/shadow/shadow-boundary-events.html b/LayoutTests/fast/dom/shadow/shadow-boundary-events.html
@@ -2,7 +2,7 @@
 <html>
 <head>
 <script src="../../js/resources/js-test-pre.js"></script>
-<script src="resources/create-dom.js"></script>
+<script src="resources/shadow-dom.js"></script>
 </head>
 <body>
 <p id="description"></p>
@@ -64,17 +64,6 @@
     eventRecords[eventType].push(eventString);
 }
 
-function getElementInShadow(path)
-{
-    var ids = path.split('/');
-    var element = document.getElementById(ids[0]);
-    for (var i = 1; element != null && i < ids.length; ++i) {
-        var shadowRoot = internals.shadowRoot(element);
-        element = internals.getElementByIdInShadowRoot(shadowRoot, ids[i]);
-    }
-    return element;
-}
-
 function prepareDOMTree(parent)
 {
     parent.appendChild(
@@ -100,7 +89,7 @@
                'shadowD/shadowF/shadowG/divH', 'shadowD/shadowF/shadowG/divI',
                'shadowD/divJ', 'shadowD/shadowK', 'shadowD/shadowK/divL'];
     for (var i = 0; i < ids.length; ++i) {
-        var element = getElementInShadow(ids[i]);
+        var element = getElementInShadowTreeStack(ids[i]);
         element.addEventListener('mouseover', recordEvent, false);
         element.addEventListener('mouseout', recordEvent, false);
         element.addEventListener('focusin', recordEvent, false);
@@ -113,17 +102,17 @@
 function moveMouse(oldElementId, newElementId, message)
 {
     debug('\n' + message + '\n' + 'Moving mouse from ' + oldElementId + ' to ' + newElementId);
-    moveMouseOver(getElementInShadow(oldElementId));
+    moveMouseOver(getElementInShadowTreeStack(oldElementId));
     clearEventRecords();
-    moveMouseOver(getElementInShadow(newElementId));
+    moveMouseOver(getElementInShadowTreeStack(newElementId));
 }
 
 function moveFocus(oldElementId, newElementId, message)
 {
     debug('\n' + message + '\n' + 'Moving focus from ' + oldElementId + ' to ' + newElementId);
-    getElementInShadow(oldElementId).focus();
+    getElementInShadowTreeStack(oldElementId).focus();
     clearEventRecords();
-    getElementInShadow(newElementId).focus();
+    getElementInShadowTreeStack(newElementId).focus();
 }
 
 function test()