| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>shadow_dom_test.html</title> |
| <link rel="stylesheet" href="/filez/_main/third_party/js/qunit/qunit.css"> |
| <script src="/filez/_main/third_party/js/qunit/qunit.js"></script> |
| <script src="/filez/_main/third_party/js/qunit/qunit_test_runner.js"></script> |
| <script type="text/javascript" src="test_bootstrap.js"> |
| </script> |
| <script type="text/javascript"> |
| goog.require('goog.math.Coordinate'); |
| goog.require('webdriver.chrome'); |
| goog.require('bot.locators'); |
| </script> |
| </head> |
| <body> |
| <style> |
| /* Ensure test content clears the QUnit UI */ |
| #qunit { |
| position: relative; |
| z-index: 1; |
| } |
| #test-content { |
| position: relative; |
| z-index: 0; |
| } |
| </style> |
| <div id="qunit"></div> |
| <div id="qunit-fixture"></div> |
| <div id="test-content"> |
| <H1>Page for Shadow DOM chromedriver tests</H1> |
| The various sections are highlighted with colored borders to make it more obvious |
| where each element comes from. Default to pushing the content off the first |
| screen, to test that scrolling to the elements works. |
| <div id="padding"></div> |
| <script> |
| // Add enough padding to push content well past any QUnit UI |
| document.getElementById('padding').style.height = window.innerHeight + 'px'; |
| </script> |
| <div id="outerDiv"> |
| <div id="innerDiv" style="border-style:solid;border-color:yellow"> |
| stuff |
| </div> |
| </div> |
| |
| <template id="parentTemplate"> |
| <div id="parentDiv"> |
| <div style="border-style:solid;border-color:green"> |
| <H3>Parent</H3> |
| <H4>Contents</H4> |
| <slot></slot> |
| </div> |
| </div> |
| </template> |
| <template id="childTemplate"> |
| <div id="childDiv"> |
| <div style="border-style:solid;border-color:red"> |
| <H3 id="heading">Child</H3> |
| As the 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> |
| <slot></slot> |
| <input id="textBox" type="text" value="foo"/> |
| <input type="button" onClick="buttonWasClicked()" value="button" |
| id="button"/> |
| </div> |
| </div> |
| </template> |
| <script type="text/javascript" > |
| var parentShadowRoot = document.querySelector('#innerDiv').attachShadow({mode: 'open'}); |
| parentShadowRoot.appendChild(document.querySelector('#parentTemplate' |
| ).content.cloneNode(true)); |
| var childShadowRoot = parentShadowRoot.querySelector("#parentDiv" |
| ).attachShadow({mode: 'open'}); |
| childShadowRoot.appendChild(document.querySelector('#childTemplate' |
| ).content.cloneNode(true)); |
| // Helper to query into nested shadow roots |
| function deepQuery(selector) { |
| return childShadowRoot.querySelector(selector); |
| } |
| function buttonWasClicked() { |
| deepQuery("#textBox").value="Button Was Clicked"; |
| } |
| </script> |
| <script type="text/javascript"> |
| |
| function getCenterCoordinate(elem) { |
| var rect = elem.getClientRects()[0]; |
| var x = rect.left + (rect.right - rect.left) / 2; |
| var y = rect.top + (rect.bottom - rect.top) / 2; |
| return new goog.math.Coordinate(x, y); |
| } |
| |
| QUnit.test('shadow root isElementClickable', function(assert) { |
| // check isElementClickable works as expected on elements within a shadow |
| // DOM |
| var elemButton = deepQuery("#button"); |
| var elemText = deepQuery("#textBox"); |
| |
| // scroll to the element |
| webdriver.chrome.getLocationInView(elemButton, true); |
| assert.ok( |
| webdriver.chrome.isElementClickable(elemButton, |
| getCenterCoordinate(elemButton)).clickable, |
| "Button #button should be clickable"); |
| assert.notOk( |
| webdriver.chrome.isElementClickable(elemText, |
| getCenterCoordinate(elemButton)).clickable, |
| "Textbox #textBox should not be clickable from #button's location"); |
| }); |
| |
| QUnit.test('shadow root isDisplayed', function(assert) { |
| // check isDisplayed works as expected on elements within a shadow |
| // DOM |
| var elem = deepQuery("#textBox"); |
| assert.ok(webdriver.chrome.isElementDisplayed(elem), |
| "Text box #textBox should be visible"); |
| document.querySelector("#outerDiv").style.display="None"; |
| try { |
| assert.notOk( |
| webdriver.chrome.isElementDisplayed(elem), |
| "Text box #textBox should not be visible"); |
| } finally { |
| document.querySelector("#outerDiv").style.display=""; |
| } |
| }); |
| |
| QUnit.test('shadow root findElement', function(assert) { |
| // check FindElement works as expected on elements within a shadow |
| // DOM |
| var elemDiv = deepQuery("#childDiv"); |
| var elemButton = deepQuery("#button"); |
| assert.strictEqual( |
| webdriver.chrome.findElement({"id" : "button"}, elemDiv), |
| elemButton, |
| "webdriver.chrome.findElement didn't find the element #button"); |
| }); |
| |
| QUnit.test('bot locators findElements', function(assert) { |
| // webdriver.chrome.findElement depends on bot.locators.findElements. |
| // So check that bot.locators.findElements keeps working as expected |
| // with shadow roots |
| var elemDiv = deepQuery("#childDiv"); |
| var elemButton = deepQuery("#button"); |
| var elems = bot.locators.findElements({"id" : "button"}, elemDiv); |
| assert.strictEqual(elems.length, 1, |
| "webdriver.chrome.findElements didn't find exactly 1 element for #button"); |
| assert.strictEqual( |
| elems[0], |
| elemButton, |
| "webdriver.chrome.findElement didn't find the element button"); |
| }); |
| |
| </script> |
| </div><!-- end test-content --> |
| </body> |
| </html> |
