chromedriver atoms: Fixed isElementClickable when button was a top-level component in a shadow DOM.

Author: sevaseva

javascript/chrome-driver/atoms.js

@@ -118,8 +118,16 @@ webdriver.chrome.scrollIntoView_ = function(elem, region, center) {
     scrollable.scrollTop += scroll.y;
   }
 
+  function getContainer(elem) {
+    var container = elem.parentNode;
+    if (SHADOW_DOM_ENABLED && (container instanceof ShadowRoot)) {
+      container = elem.host;
+    }
+    return container;
+  }
+
   var doc = goog.dom.getOwnerDocument(elem);
-  var container = elem.parentNode;
+  var container = getContainer(elem);
   var offset;
   while (container &&
          container != doc.documentElement &&
@@ -129,10 +137,7 @@ webdriver.chrome.scrollIntoView_ = function(elem, region, center) {
     var containerSize = new goog.math.Size(container.clientWidth,
                                            container.clientHeight);
     scrollHelper(container, containerSize, offset, region, center);
-    container = container.parentNode;
-    if (SHADOW_DOM_ENABLED && (container instanceof ShadowRoot)) {
-      container = container.host;
-    }
+    container = getContainer(container);
   }
 
   offset = goog.style.getClientPosition(elem);

javascript/chrome-driver/test/shadow_dom_test.html

@@ -27,42 +27,44 @@ <H1>Page for Shadow DOM chromedriver tests</H1>
 </div>
 
 <template id="parentTemplate">
-<div id="parentDiv">
+  <div id="parentDiv">
     <div style="border-style:solid;border-color:green">
-        <H3>Parent</H3>
-        <H4>Contents</H4>
-        <content></content>
+      <H3>Parent</H3>
+      <H4>Contents</H4>
+      <content></content>
     </div>
-</div>
+  </div>
 </template>
 <template id="olderChildTemplate">
-<div id="olderChildDiv">
+  <div id="olderChildDiv">
     <div style="border-style:solid;border-color:red">
-        <H3 id="olderHeading">Older Child</H3>
-        As the older child of a nested shadow root, this is the most likely
-        to go wrong bit of the page, so we'll concentrate our tests here.
-        <H4>Contents</H4>
-        <content></content>
-        <input id="olderTextBox" type="text" value="foo"/>
-        <input type="button" onClick="buttonWasClicked()" value="button"
-            id="olderButton"/>
+      <H3 id="olderHeading">Older Child</H3>
+      As the older child of a nested shadow root, this is the most likely
+      to go wrong bit of the page, so we'll concentrate our tests here.
+      <H4>Contents</H4>
+      <content></content>
+      <input id="olderTextBox" type="text" value="foo"/>
+      <input type="button" onClick="buttonWasClicked()" value="button"
+          id="olderButton"/>
     </div>
-</div>
+  </div>
 </template>
 <template id="youngerChildTemplate">
-<div id="youngerChildDiv">
+  <input type="button" onClick="buttonWasClicked()" value="button"
+      id="youngerButton"/>
+  <div id="youngerChildDiv">
     <div style="border-style:solid;border-color:blue">
-        <H3>Younger Child</H3>
-        <div style="border-style:dotted;border-color:blue">
-            <H4>Younger Child Contents</H4>
-            <content></content>
-        </div>
-        <div style="border-style:dashed;border-color:blue">
-            <H4>Younger Child Shadow</H4>
-            <shadow></shadow>
-        </div>
+      <H3>Younger Child</H3>
+      <div style="border-style:dotted;border-color:blue">
+        <H4>Younger Child Contents</H4>
+        <content></content>
+      </div>
+      <div style="border-style:dashed;border-color:blue">
+         <H4>Younger Child Shadow</H4>
+         <shadow></shadow>
+      </div>
     </div>
-</div>
+  </div>
 </template>
 <script type="text/javascript" >
 var parentShadowRoot = document.querySelector('#innerDiv').createShadowRoot();
@@ -108,6 +110,17 @@ <H4>Younger Child Shadow</H4>
             getCenterCoordinate(elemButton)).clickable);
   }
 
+  function testShadowRootTopLevelComponentIsElementClickable() {
+    // Regression test: check things also work on buttons that are top-level
+    // components of a shadow DOM
+    var elemButton = document.querySelector("* /deep/ #youngerButton");
+    webdriver.chrome.getLocationInView(elemButton, true);
+    assertTrue(
+        "Button #youngerButton should be clickable",
+        webdriver.chrome.isElementClickable(elemButton,
+            getCenterCoordinate(elemButton)).clickable);
+  }
+
   function testShadowRootIsDisplayed() {
     // check isDisplayed works as expected on elements within a shadow
     // DOM