[Shadow DOM] Make createDOM() function used in testing Shadow DOM more flexible.
authorhayato@chromium.org <hayato@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 29 Feb 2012 06:09:22 +0000 (06:09 +0000)
committerhayato@chromium.org <hayato@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 29 Feb 2012 06:09:22 +0000 (06:09 +0000)
https://bugs.webkit.org/show_bug.cgi?id=79745

Reviewed by Dimitri Glazkov.

Replaces createDom and createShadow function defined in
LayoutTests/fast/dom/shadow/create-dom.js with more flexible
one. Now we can represent a shadow host which has both light
children and ShadowRoots in one expression.

* fast/dom/shadow/access-key.html:
* fast/dom/shadow/get-element-by-id-in-shadow-root.html:
* fast/dom/shadow/resources/create-dom.js:
(createShadowRoot):
(createDOM):
* fast/dom/shadow/shadow-boundary-events.html:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@109191 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/fast/dom/shadow/access-key.html
LayoutTests/fast/dom/shadow/get-element-by-id-in-shadow-root.html
LayoutTests/fast/dom/shadow/resources/create-dom.js
LayoutTests/fast/dom/shadow/shadow-boundary-events.html

index dbd3c4ef9a25cccb81cb8ea54b34f43b693feebb..902127cbc6a4eecde2d255a6a2d3e7273f5ba973 100644 (file)
@@ -1,3 +1,22 @@
+2012-02-28  Hayato Ito  <hayato@chromium.org>
+
+        [Shadow DOM] Make createDOM() function used in testing Shadow DOM more flexible.
+        https://bugs.webkit.org/show_bug.cgi?id=79745
+
+        Reviewed by Dimitri Glazkov.
+
+        Replaces createDom and createShadow function defined in
+        LayoutTests/fast/dom/shadow/create-dom.js with more flexible
+        one. Now we can represent a shadow host which has both light
+        children and ShadowRoots in one expression.
+
+        * fast/dom/shadow/access-key.html:
+        * fast/dom/shadow/get-element-by-id-in-shadow-root.html:
+        * fast/dom/shadow/resources/create-dom.js:
+        (createShadowRoot):
+        (createDOM):
+        * fast/dom/shadow/shadow-boundary-events.html:
+
 2012-02-28  Kenichi Ishibashi  <bashi@chromium.org>
 
         [Chromium] Unreviewed test expectations update
index 77ac73cb04284e3fb3b5f3711506cab70993a444..350ed319fb01d95326df0bde2479d27f5a1cbec1 100644 (file)
@@ -55,16 +55,18 @@ function getElementInShadow(path)
     return element;
 }
 
-function prepareDomTree(parent)
+function prepareDOMTree(parent)
 {
     parent.appendChild(
-        createDom('div', {'id': 'divA'},
-                  createDom('input', {'id': 'inputB'}),
-                  createShadow('div', {'id': 'shadowC', 'tabindex': 0},
-                               createDom('input', {'id': 'inputD'}),
-                               createDom('input', {'id': 'inputE', 'accesskey': 'a'}),
-                               createShadow('div', {'id': 'shadowF', 'tabindex': 0},
-                                            createDom('input', {'id': 'inputG'})))));
+        createDOM('div', {'id': 'divA'},
+                  createDOM('input', {'id': 'inputB'}),
+                  createDOM('div', {'id': 'shadowC', 'tabindex': 0},
+                            createShadowRoot(
+                                createDOM('input', {'id': 'inputD'}),
+                                createDOM('input', {'id': 'inputE', 'accesskey': 'a'}),
+                                createDOM('div', {'id': 'shadowF', 'tabindex': 0},
+                                          createShadowRoot(
+                                              createDOM('input', {'id': 'inputG'})))))));
 
     var ids = ['inputB',
                'shadowC/inputD', 'shadowC/inputE',
@@ -80,7 +82,7 @@ function test()
     if (window.layoutTestController)
         layoutTestController.dumpAsText();
 
-    prepareDomTree(document.getElementById('sandbox'));
+    prepareDOMTree(document.getElementById('sandbox'));
 
     // Please see the discussion of https://bugs.webkit.org/show_bug.cgi?id=67096.
     // We don't have a clear idea how accesskey should work in regard to shadow DOM.
index eb13d4e9a1f81329be27224f49033e88bfca406c..7479a76a26e664fa100ca9a2ec2f5931c53d1786 100644 (file)
@@ -22,10 +22,12 @@ function getElementInShadow(path)
 function prepareDomTree(parent)
 {
     parent.appendChild(
-        createShadow('div', {'id': 'divA'},
-                     createDom('input', {'id': 'inputB'}),
-                     createShadow('div', {'id': 'divC'},
-                                  createDom('input', {'id': 'inputD'}))));
+        createDOM('div', {'id': 'divA'},
+                  createShadowRoot(
+                      createDOM('input', {'id': 'inputB'}),
+                      createDOM('div', {'id': 'divC'},
+                                createShadowRoot(
+                                    createDOM('input', {'id': 'inputD'}))))));
 }
 
 function test()
index a2751ad69f3b25e3561a1c31c8020706fff9cc33..72ca3da4fe8fefae0e822833f864aa74fc988aee 100644 (file)
@@ -1,24 +1,28 @@
-// This function can take optional child elements as arguments[2:].
-function createShadow(tagName, attributes)
+function createShadowRoot()
 {
-    var element = document.createElement(tagName);
-    for (var name in attributes)
-        element.setAttribute(name, attributes[name]);
-    var shadow = internals.ensureShadowRoot(element);
-    var childElements = Array.prototype.slice.call(arguments, 2);
-    for (var i = 0; i < childElements.length; ++i)
-        shadow.appendChild(childElements[i]);
-    return element;
+    return {'isShadowRoot': true,
+            'children': Array.prototype.slice.call(arguments)};
 }
 
-// This function can take optional child elements as arguments[2:].
-function createDom(tagName, attributes)
+// This function can take optional child elements, which might be a result of createShadowRoot(), as arguments[2:].
+function createDOM(tagName, attributes)
 {
     var element = document.createElement(tagName);
     for (var name in attributes)
         element.setAttribute(name, attributes[name]);
     var childElements = Array.prototype.slice.call(arguments, 2);
-    for (var i = 0; i < childElements.length; ++i)
-        element.appendChild(childElements[i]);
+    for (var i = 0; i < childElements.length; ++i) {
+        var child = childElements[i];
+        if (child.isShadowRoot) {
+            var shadowRoot;
+            if (window.WebKitShadowRoot)
+              shadowRoot = new WebKitShadowRoot(element);
+            else
+              shadowRoot = new internals.ensureShadowRoot(element);
+            for (var j = 0; j < child.children.length; ++j)
+                shadowRoot.appendChild(child.children[j]);
+        } else
+            element.appendChild(child);
+    }
     return element;
 }
index f0630c72c6b9d0f4e852a4e6c77e154d34c9c3dc..c4944317d187fbc4beb9381ab26924695406857d 100644 (file)
@@ -75,21 +75,25 @@ function getElementInShadow(path)
     return element;
 }
 
-function prepareDomTree(parent)
+function prepareDOMTree(parent)
 {
     parent.appendChild(
-        createDom('div', {'id': 'divA', 'style': 'padding-top: 40px'},
-                  createDom('div', {'id': 'divB', 'style': 'width: 40px; height: 40px', 'tabindex': 0}),
-                  createDom('div', {'id': 'divC', 'style': 'width: 40px; height: 40px', 'tabindex': 0}),
-                  createShadow('div', {'id': 'shadowD', 'style': 'padding-top: 40px'},
-                               createDom('div', {'id': 'divE', 'style': 'padding-top: 40px'},
-                                         createShadow('div', {'id': 'shadowF', 'style': 'padding-top: 40px'},
-                                                      createShadow('div', {'id': 'shadowG', 'style': 'padding-top: 40px'},
-                                                                   createDom('div', {'id': 'divH', 'style': 'width: 40px; height: 40px', 'tabindex': 0}),
-                                                                   createDom('div', {'id': 'divI', 'style': 'width: 40px; height: 40px', 'tabindex': 0})))),
-                               createDom('div', {'id': 'divJ', 'style': 'padding-top: 40px'},
-                                         createShadow('div', {'id': 'shadowK', 'style': 'padding-top: 40px'},
-                                                      createDom('div', {'id': 'divL', 'style': 'width: 40px; height: 40px', 'tabindex': 0}))))));
+        createDOM('div', {'id': 'divA', 'style': 'padding-top: 40px'},
+                  createDOM('div', {'id': 'divB', 'style': 'width: 40px; height: 40px', 'tabindex': 0}),
+                  createDOM('div', {'id': 'divC', 'style': 'width: 40px; height: 40px', 'tabindex': 0}),
+                  createDOM('div', {'id': 'shadowD', 'style': 'padding-top: 40px'},
+                            createShadowRoot(
+                                createDOM('div', {'id': 'divE', 'style': 'padding-top: 40px'},
+                                          createDOM('div', {'id': 'shadowF', 'style': 'padding-top: 40px'},
+                                                    createShadowRoot(
+                                                        createDOM('div', {'id': 'shadowG', 'style': 'padding-top: 40px'},
+                                                                  createShadowRoot(
+                                                                      createDOM('div', {'id': 'divH', 'style': 'width: 40px; height: 40px', 'tabindex': 0}),
+                                                                      createDOM('div', {'id': 'divI', 'style': 'width: 40px; height: 40px', 'tabindex': 0})))))),
+                                createDOM('div', {'id': 'divJ', 'style': 'padding-top: 40px'},
+                                          createDOM('div', {'id': 'shadowK', 'style': 'padding-top: 40px'},
+                                                    createShadowRoot(
+                                                        createDOM('div', {'id': 'divL', 'style': 'width: 40px; height: 40px', 'tabindex': 0}))))))));
 
     var ids = ['divA', 'divB', 'divC',
                'shadowD', 'shadowD/divE', 'shadowD/shadowF', 'shadowD/shadowF/shadowG',
@@ -126,7 +130,7 @@ function test()
 {
     if (window.layoutTestController)
         layoutTestController.dumpAsText();
-    prepareDomTree(document.getElementById('sandbox'));
+    prepareDOMTree(document.getElementById('sandbox'));
 
     // Test for mouseover/mouseout events.
     moveMouse('divB', 'divC',