DevTools: Migrate some elements tests

Bug: 667560
Change-Id: I8817cabc284c61c6cf25684bffaf5038ef37132f
Reviewed-on: https://chromium-review.googlesource.com/767847
Commit-Queue: Joel Einbinder <einbinder@chromium.org>
Reviewed-by: Andrey Lushnikov <lushnikov@chromium.org>
Reviewed-by: Will Chen <chenwilliam@chromium.org>
Cr-Commit-Position: refs/heads/master@{#516580}
diff --git a/third_party/WebKit/LayoutTests/FlagExpectations/enable-blink-features=LayoutNG b/third_party/WebKit/LayoutTests/FlagExpectations/enable-blink-features=LayoutNG
index b844891..6eb04e30 100644
--- a/third_party/WebKit/LayoutTests/FlagExpectations/enable-blink-features=LayoutNG
+++ b/third_party/WebKit/LayoutTests/FlagExpectations/enable-blink-features=LayoutNG
@@ -6431,10 +6431,10 @@
 crbug.com/591099 http/tests/devtools/elements/edit/edit-dom-actions-2.js [ Pass Timeout ]
 crbug.com/591099 http/tests/devtools/elements/edit/edit-dom-actions-4.html [ Timeout ]
 crbug.com/591099 http/tests/devtools/elements/edit/set-outer-html-for-xhtml.xhtml [ Pass Timeout ]
-crbug.com/591099 http/tests/devtools/elements/elements-css-path.html [ Failure Timeout ]
+crbug.com/591099 http/tests/devtools/elements/elements-css-path.js [ Failure Timeout ]
 crbug.com/591099 http/tests/devtools/elements/elements-inspect-iframe-from-different-domain.js [ Pass Timeout ]
 crbug.com/591099 http/tests/devtools/elements/elements-panel-restore-selection-when-node-comes-later.js [ Failure ]
-crbug.com/591099 http/tests/devtools/elements/elements-panel-search.html [ Failure Timeout ]
+crbug.com/591099 http/tests/devtools/elements/elements-panel-search.js [ Failure Timeout ]
 crbug.com/591099 http/tests/devtools/elements/event-listener-sidebar-jquery1.js [ Failure ]
 crbug.com/591099 http/tests/devtools/elements/event-listener-sidebar-jquery2.js [ Failure ]
 crbug.com/591099 http/tests/devtools/elements/event-listener-sidebar.js [ Failure ]
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/attribute-modified-ns.html b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/attribute-modified-ns.html
deleted file mode 100644
index 092d2ca..0000000
--- a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/attribute-modified-ns.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<html>
-<head>
-<script src="../../inspector/inspector-test.js"></script>
-<script src="../../inspector/elements-test.js"></script>
-<script>
-
-function setAttribute(namespace, name, value)
-{
-    var node = document.getElementById("node");
-    node.setAttributeNS(namespace, name, value);
-}
-
-function removeAttribute(name)
-{
-    var node = document.getElementById("node");
-    node.removeAttribute(name);
-}
-
-function test() {
-  var targetNode;
-
-  TestRunner.runTestSuite([
-    function testDumpInitial(next) {
-      function callback(node) {
-        targetNode = node;
-        TestRunner.addResult('========= Original ========');
-        ElementsTestRunner.dumpElementsTree(targetNode);
-        next();
-      }
-      ElementsTestRunner.selectNodeWithId('node', callback);
-    },
-
-    function testAttributeUpdated(next) {
-      function callback() {
-        TestRunner.domModel.removeEventListener(SDK.DOMModel.Events.AttrModified, callback);
-        TestRunner.addResult('===== On attribute set =====');
-        ElementsTestRunner.dumpElementsTree(targetNode);
-        next();
-      }
-      TestRunner.domModel.addEventListener(SDK.DOMModel.Events.AttrModified, callback);
-      TestRunner.evaluateInPage('setAttribute(\'http://www.w3.org/1999/xlink\', \'xlink:href\', \'changed-url\')');
-    },
-
-    function testAttributeRemoved(next) {
-      function callback() {
-        TestRunner.domModel.removeEventListener(SDK.DOMModel.Events.AttrRemoved, callback);
-        TestRunner.addResult('=== On attribute removed ===');
-        ElementsTestRunner.dumpElementsTree(targetNode);
-        next();
-      }
-      TestRunner.domModel.addEventListener(SDK.DOMModel.Events.AttrRemoved, callback);
-      TestRunner.evaluateInPage('removeAttribute(\'xlink:href\')');
-    },
-  ]);
-}
-
-</script>
-</head>
-<body onload="runTest()">
-<p>Tests that elements panel updates dom tree structure upon changing the attribute with namespace.</p>
-<svg>
-    <a id="node" xlink:href="http://localhost">link</a>
-</svg>
-</body>
-</html>
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/attribute-modified-ns.js b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/attribute-modified-ns.js
new file mode 100644
index 0000000..05e1933b
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/attribute-modified-ns.js
@@ -0,0 +1,64 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+(async function() {
+  TestRunner.addResult(
+      `Tests that elements panel updates dom tree structure upon changing the attribute with namespace.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <svg>
+          <a id="node" xlink:href="http://localhost">link</a>
+      </svg>
+    `);
+  await TestRunner.evaluateInPagePromise(`
+      function setAttribute(namespace, name, value)
+      {
+          var node = document.getElementById("node");
+          node.setAttributeNS(namespace, name, value);
+      }
+
+      function removeAttribute(name)
+      {
+          var node = document.getElementById("node");
+          node.removeAttribute(name);
+      }
+  `);
+
+  var targetNode;
+
+  TestRunner.runTestSuite([
+    function testDumpInitial(next) {
+      function callback(node) {
+        targetNode = node;
+        TestRunner.addResult('========= Original ========');
+        ElementsTestRunner.dumpElementsTree(targetNode);
+        next();
+      }
+      ElementsTestRunner.selectNodeWithId('node', callback);
+    },
+
+    function testAttributeUpdated(next) {
+      function callback() {
+        TestRunner.domModel.removeEventListener(SDK.DOMModel.Events.AttrModified, callback);
+        TestRunner.addResult('===== On attribute set =====');
+        ElementsTestRunner.dumpElementsTree(targetNode);
+        next();
+      }
+      TestRunner.domModel.addEventListener(SDK.DOMModel.Events.AttrModified, callback);
+      TestRunner.evaluateInPage('setAttribute(\'http://www.w3.org/1999/xlink\', \'xlink:href\', \'changed-url\')');
+    },
+
+    function testAttributeRemoved(next) {
+      function callback() {
+        TestRunner.domModel.removeEventListener(SDK.DOMModel.Events.AttrRemoved, callback);
+        TestRunner.addResult('=== On attribute removed ===');
+        ElementsTestRunner.dumpElementsTree(targetNode);
+        next();
+      }
+      TestRunner.domModel.addEventListener(SDK.DOMModel.Events.AttrRemoved, callback);
+      TestRunner.evaluateInPage('removeAttribute(\'xlink:href\')');
+    },
+  ]);
+})();
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/bidi-dom-tree-expected.txt b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/bidi-dom-tree-expected.txt
index 58e7a9f4..685da8b 100644
--- a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/bidi-dom-tree-expected.txt
+++ b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/bidi-dom-tree-expected.txt
@@ -1,20 +1,11 @@
 Tests that elements panel correctly displays DOM tree structure for bi-di pages.
 
-ویکی‌پدیا:خوش‌آمدید
   <!DOCTYPE html>
 - <html>
     - <head>
-          <meta charset="utf-8">
-          <script src="../../inspector/inspector-test.js"></script>
-          <script src="../../inspector/elements-test.js"></script>
-        - <script>
-              \nfunction test() {\n  // Warm up highlighter module.\n  runtime.loadModulePromise('source_frame').then(function() {\n    ElementsTestRunner.expandElementsTree(step1);\n  });\n\n  function step1() {\n    ElementsTestRunner.dumpElementsTree();\n    TestRunner.completeTest();\n  }\n}\n\n
-          </script>
+          <base href="http://127.0.0.1:8000/devtools/elements/">
       </head>
-    - <body onload="runTest()">
-        - <p>
-              "\nTests that elements panel correctly displays DOM tree structure for bi-di pages.\n"
-          </p>
+    - <body>
           <div title="ویکی&zwnj;پدیا:خوش&zwnj;آمدید">ویکی&zwnj;پدیا:خوش&zwnj;آمدید</div>
       </body>
   </html>
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/bidi-dom-tree.html b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/bidi-dom-tree.html
deleted file mode 100644
index 54418d5..0000000
--- a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/bidi-dom-tree.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<script src="../../inspector/inspector-test.js"></script>
-<script src="../../inspector/elements-test.js"></script>
-<script>
-
-function test() {
-  // Warm up highlighter module.
-  runtime.loadModulePromise('source_frame').then(function() {
-    ElementsTestRunner.expandElementsTree(step1);
-  });
-
-  function step1() {
-    ElementsTestRunner.dumpElementsTree();
-    TestRunner.completeTest();
-  }
-}
-
-</script>
-</head>
-
-<body onload="runTest()">
-<p>
-Tests that elements panel correctly displays DOM tree structure for bi-di pages.
-</p>
-
-<div title="ویکی‌پدیا:خوش‌آمدید">ویکی‌پدیا:خوش‌آمدید</div>
-
-</body>
-</html>
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/bidi-dom-tree.js b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/bidi-dom-tree.js
new file mode 100644
index 0000000..d2a81be
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/bidi-dom-tree.js
@@ -0,0 +1,23 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+(async function() {
+  TestRunner.addResult(`Tests that elements panel correctly displays DOM tree structure for bi-di pages.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <!DOCTYPE html>
+      <div title="ویکی‌پدیا:خوش‌آمدید">ویکی‌پدیا:خوش‌آمدید</div>
+    `);
+
+  // Warm up highlighter module.
+  runtime.loadModulePromise('source_frame').then(function() {
+    ElementsTestRunner.expandElementsTree(step1);
+  });
+
+  function step1() {
+    ElementsTestRunner.dumpElementsTree();
+    TestRunner.completeTest();
+  }
+})();
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/css-rule-hover-highlights-selectors.html b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/css-rule-hover-highlights-selectors.html
deleted file mode 100644
index 8285f68..0000000
--- a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/css-rule-hover-highlights-selectors.html
+++ /dev/null
@@ -1,127 +0,0 @@
-<html>
-<head>
-<script src="../../inspector/inspector-test.js"></script>
-<script src="../../inspector/elements-test.js"></script>
-<style>
-.border {
-    border: 1px solid black;
-}
-</style>
-<script>
-
-function requestAnimationFramePromise()
-{
-    return new Promise(fulfill => requestAnimationFrame(fulfill));
-}
-
-function buildShadowDOM()
-{
-    var host = document.querySelector("body");
-    var root = host.createShadowRoot();
-    var template = document.querySelector("#dom-template");
-    var clone = document.importNode(template.content, true);
-    root.appendChild(clone);
-    var second = root.querySelector("#fifth");
-    second.id = "inspected-shadow";
-    runTest();
-}
-
-function test() {
-  TestRunner.runTestSuite([
-    function setupProxyOverlay(next) {
-      TestRunner.evaluateFunctionInOverlay(drawHighlightProxy, next);
-    },
-
-    function testRegularNodeSelection(next) {
-      ElementsTestRunner.selectNodeAndWaitForStyles('inspected', onSelected);
-
-      function onSelected() {
-        resetHighlightCount(onHighlightCountReset);
-      }
-
-      function onHighlightCountReset() {
-        var section = ElementsTestRunner.firstMatchedStyleSection();
-        section._highlight();
-        TestRunner.callFunctionInPageAsync('requestAnimationFramePromise').then(onHighlighted);
-      }
-
-      function onHighlighted() {
-        dumpHighlightCount(next);
-      }
-    },
-
-    function testShadowDOMNodeSelection(next) {
-      ElementsTestRunner.selectNodeAndWaitForStyles('inspected-shadow', onSelected);
-
-      function onSelected() {
-        resetHighlightCount(onHighlightCountReset);
-      }
-
-      function onHighlightCountReset() {
-        var section = ElementsTestRunner.firstMatchedStyleSection();
-        section._highlight();
-        TestRunner.callFunctionInPageAsync('requestAnimationFramePromise').then(onHighlighted);
-      }
-
-      function onHighlighted() {
-        dumpHighlightCount(next);
-      }
-    },
-  ]);
-
-  function drawHighlightProxy() {
-    window._highlightsForTest = [];
-    var oldDrawHighlight = drawHighlight;
-    drawHighlight = proxy;
-
-    function proxy(highlight, context) {
-      window._highlightsForTest.push(highlight);
-      oldDrawHighlight(highlight, context);
-    }
-  }
-
-  function reportHighlights() {
-    var result = window._highlightsForTest.length;
-    window._highlightsForTest = [];
-    return result + '';
-  }
-
-  function dumpHighlightCount(next) {
-    TestRunner.evaluateFunctionInOverlay(reportHighlights, onResults);
-
-    function onResults(count) {
-      TestRunner.addResult('Highlights drawn: ' + count);
-      next();
-    }
-  }
-
-  function resetHighlightCount(next) {
-    TestRunner.evaluateFunctionInOverlay(reportHighlights, next);
-  }
-}
-
-</script>
-</head>
-
-<body onload="buildShadowDOM()">
-<p>
-Tests that long-hovering over StylesSidebar matched rule selector highlights
-matching nodes in the page.
-</p>
-<div class="border">1st</div>
-<div id="inspected" class="border">2nd</div>
-<div class="border">3rd</div>
-<template id="dom-template">
-    <style>
-    .bck {
-        border: 1px solid black;
-    }
-    </style>
-    <div class="bck">1st</div>
-    <div class="bck">2nd</div>
-    <div class="bck">3rd</div>
-    <div class="bck">4th</div>
-    <div class="bck" id="fifth">5th</div>
-</template>
-</body>
-</html>
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/css-rule-hover-highlights-selectors.js b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/css-rule-hover-highlights-selectors.js
new file mode 100644
index 0000000..bc1a576b
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/css-rule-hover-highlights-selectors.js
@@ -0,0 +1,116 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+(async function() {
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <style>
+      .border {
+          border: 1px solid black;
+      }
+      </style>
+      <div class="border">1st</div>
+      <div id="inspected" class="border">2nd</div>
+      <div class="border">3rd</div>
+      <template id="dom-template">
+          <style>
+          .bck {
+              border: 1px solid black;
+          }
+          </style>
+          <div class="bck">1st</div>
+          <div class="bck">2nd</div>
+          <div class="bck">3rd</div>
+          <div class="bck">4th</div>
+          <div class="bck" id="fifth">5th</div>
+      </template>
+    `);
+  await TestRunner.evaluateInPagePromise(`
+      function requestAnimationFramePromise()
+      {
+          return new Promise(fulfill => requestAnimationFrame(fulfill));
+      }
+
+      var host = document.querySelector("body");
+      var root = host.createShadowRoot();
+      var template = document.querySelector("#dom-template");
+      var clone = document.importNode(template.content, true);
+      root.appendChild(clone);
+      var second = root.querySelector("#fifth");
+      second.id = "inspected-shadow";
+  `);
+
+  TestRunner.runTestSuite([
+    function setupProxyOverlay(next) {
+      TestRunner.evaluateFunctionInOverlay(drawHighlightProxy, next);
+    },
+
+    function testRegularNodeSelection(next) {
+      ElementsTestRunner.selectNodeAndWaitForStyles('inspected', onSelected);
+
+      function onSelected() {
+        resetHighlightCount(onHighlightCountReset);
+      }
+
+      function onHighlightCountReset() {
+        var section = ElementsTestRunner.firstMatchedStyleSection();
+        section._highlight();
+        TestRunner.callFunctionInPageAsync('requestAnimationFramePromise').then(onHighlighted);
+      }
+
+      function onHighlighted() {
+        dumpHighlightCount(next);
+      }
+    },
+
+    function testShadowDOMNodeSelection(next) {
+      ElementsTestRunner.selectNodeAndWaitForStyles('inspected-shadow', onSelected);
+
+      function onSelected() {
+        resetHighlightCount(onHighlightCountReset);
+      }
+
+      function onHighlightCountReset() {
+        var section = ElementsTestRunner.firstMatchedStyleSection();
+        section._highlight();
+        TestRunner.callFunctionInPageAsync('requestAnimationFramePromise').then(onHighlighted);
+      }
+
+      function onHighlighted() {
+        dumpHighlightCount(next);
+      }
+    },
+  ]);
+
+  function drawHighlightProxy() {
+    window._highlightsForTest = [];
+    var oldDrawHighlight = drawHighlight;
+    drawHighlight = proxy;
+
+    function proxy(highlight, context) {
+      window._highlightsForTest.push(highlight);
+      oldDrawHighlight(highlight, context);
+    }
+  }
+
+  function reportHighlights() {
+    var result = window._highlightsForTest.length;
+    window._highlightsForTest = [];
+    return result + '';
+  }
+
+  function dumpHighlightCount(next) {
+    TestRunner.evaluateFunctionInOverlay(reportHighlights, onResults);
+
+    function onResults(count) {
+      TestRunner.addResult('Highlights drawn: ' + count);
+      next();
+    }
+  }
+
+  function resetHighlightCount(next) {
+    TestRunner.evaluateFunctionInOverlay(reportHighlights, next);
+  }
+})();
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-css-path-expected.txt b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-css-path-expected.txt
index 2533582..939166d4 100644
--- a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-css-path-expected.txt
+++ b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-css-path-expected.txt
@@ -1,25 +1,14 @@
 Tests DOMNode.cssPath()
 
-
-ид
-  
-класс
-   
-   
   html
     head
-      head > meta
-      #script-id
-      head > script:nth-child(3)
-      #test-script
+      head > base
     body
-      body > p
+      body > article:nth-child(1)
       body > article:nth-child(2)
-      body > article:nth-child(3)
       body > input[type="number"]
       #ids
         #ids > div:nth-child(1)
-        #ids > div:nth-child(2)
         #inner-id
         #__proto__
         #\23 \22 ridiculous\22 \2e id
@@ -31,7 +20,7 @@
         #\37
         #ид
         #input-id
-        #ids > input[type="text"]:nth-child(14)
+        #ids > input[type="text"]:nth-child(13)
         #ids > p
       #classes
         #classes > div.foo.bar
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-css-path.html b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-css-path.html
deleted file mode 100644
index 36a6e1a..0000000
--- a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-css-path.html
+++ /dev/null
@@ -1,139 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<script src="../../inspector/inspector-test.js" id="script-id"></script>
-<script src="../../inspector/elements-test.js"></script>
-<script id="test-script">
-function matchingElements(selector)
-{
-    return document.querySelectorAll(selector).length;
-}
-
-function test() {
-  var nodeQueue = [];
-  ElementsTestRunner.expandElementsTree(enqueueNodes);
-
-  function enqueueNodes() {
-    enqueueNode('', getDocumentElement());
-    dumpNodeData();
-  }
-
-  function dumpNodeData() {
-    var entry = nodeQueue.shift();
-    if (!entry) {
-      TestRunner.completeTest();
-      return;
-    }
-    var cssPath = Components.DOMPresentationUtils.cssPath(entry.node, true);
-    var result = entry.prefix + cssPath;
-    TestRunner.addResult(result.replace(/\n/g, '\\n'));
-    var escapedPath = cssPath.replace(/\\/g, '\\\\');
-    TestRunner.evaluateInPage('matchingElements(\'' + escapedPath + '\')', callback);
-
-    function callback(result) {
-      TestRunner.assertEquals(1, result.value);
-      dumpNodeData();
-    }
-  }
-
-  function getDocumentElement() {
-    var map = TestRunner.domModel._idToDOMNode;
-    for (var id in map) {
-      if (map[id].nodeName() === '#document')
-        return map[id];
-    }
-
-    return null;
-  }
-
-  function enqueueNode(prefix, node) {
-    if (node.nodeType() === Node.ELEMENT_NODE)
-      nodeQueue.push({prefix: prefix, node: node});
-    var children = node.children();
-    for (var i = 0; children && i < children.length; ++i)
-      enqueueNode(prefix + '  ', children[i]);
-  }
-}
-</script>
-</head>
-
-<body onload="runTest()">
-<p>Tests DOMNode.cssPath()</p>
-
-<article></article>
-<article></article>
-<input type="number"/>
-
-<!-- Comment node -->
-
-<div id="ids">
-    <!-- Comment node -->
-    <div></div>
-    <div></div>
-    <div id="inner-id"></div>
-    <div id="__proto__"></div>
-    <div id='#"ridiculous".id'></div>
-    <div id="'quoted.value'"></div>
-    <div id=".foo.bar"></div>
-    <div id="-"></div>
-    <div id="-a"></div>
-    <div id="-0"></div>
-    <div id="7"></div>
-    <div id="ид">ид</div>
-    <input type="text" id="input-id"/>
-    <input type="text"/>
-    <p></p>
-</div>
-
-<div id="classes">
-    <!-- Comment node 1 -->
-    <div class="foo bar"></div>
-    <!-- Comment node 2 -->
-    <div class=" foo foo "></div>
-    <div class=".foo"></div>
-    <div class=".foo.bar"></div>
-    <div class="-"></div>
-    <div class="-a"></div>
-    <div class="-0"></div>
-    <div class="--a"></div>
-    <div class="---a"></div>
-    <div class="7"></div>
-    <div class="класс">класс</div>
-    <div class="__proto__"></div>
-    <div class="__proto__ foo"></div>
-    <span class="bar"></span>
-    <div id="id-with-class" class="moo"></div>
-    <input type="text" class="input-class-one"/>
-    <input type="text" class="input-class-two"/>
-    <!-- Comment node 3 -->
-</div>
-
-<div id="non-unique-classes">
-  <!-- Comment node 1 -->
-  <span class="c1"></span>
-  <!-- Comment node 2 -->
-  <span class="c1"></span>
-  <!-- Comment node 3 -->
-  <span class="c1 c2"></span>
-  <!-- Comment node 4 -->
-  <span class="c1 c2 c3"></span>
-  <!-- Comment node 5 -->
-  <span></span>
-  <!-- Comment node 6 -->
-  <div class="c1"></div>
-  <!-- Comment node 7 -->
-  <div class="c1 c2"></div>
-  <!-- Comment node 8 -->
-  <div class="c3 c2"></div>
-  <!-- Comment node 9 -->
-  <div class="c3 c4"></div>
-  <!-- Comment node 10 -->
-  <div class="c1 c4"></div>
-  <!-- Comment node 11 -->
-  <input type="text" class="input-class"/>
-  <input type="text" class="input-class"/>
-  <div></div>
-</div>
-</body>
-</html>
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-css-path.js b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-css-path.js
new file mode 100644
index 0000000..21e02c9
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-css-path.js
@@ -0,0 +1,136 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+(async function() {
+  TestRunner.addResult(`Tests DOMNode.cssPath()\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <!DOCTYPE html>
+      <article></article>
+      <article></article>
+      <input type="number">
+
+      <!-- Comment node -->
+
+      <div id="ids">
+          <!-- Comment node -->
+
+          <div></div>
+          <div id="inner-id"></div>
+          <div id="__proto__"></div>
+          <div id="#&quot;ridiculous&quot;.id"></div>
+          <div id="'quoted.value'"></div>
+          <div id=".foo.bar"></div>
+          <div id="-"></div>
+          <div id="-a"></div>
+          <div id="-0"></div>
+          <div id="7"></div>
+          <div id="&#x438;&#x434;">&#x438;&#x434;</div>
+          <input type="text" id="input-id">
+          <input type="text">
+          <p></p>
+      </div>
+
+      <div id="classes">
+          <!-- Comment node 1 -->
+          <div class="foo bar"></div>
+          <!-- Comment node 2 -->
+          <div class=" foo foo "></div>
+          <div class=".foo"></div>
+          <div class=".foo.bar"></div>
+          <div class="-"></div>
+          <div class="-a"></div>
+          <div class="-0"></div>
+          <div class="--a"></div>
+          <div class="---a"></div>
+          <div class="7"></div>
+          <div class="&#x43A;&#x43B;&#x430;&#x441;&#x441;">&#x43A;&#x43B;&#x430;&#x441;&#x441;</div>
+          <div class="__proto__"></div>
+          <div class="__proto__ foo"></div>
+          <span class="bar"></span>
+          <div id="id-with-class" class="moo"></div>
+          <input type="text" class="input-class-one">
+          <input type="text" class="input-class-two">
+          <!-- Comment node 3 -->
+      </div>
+
+      <div id="non-unique-classes">
+        <!-- Comment node 1 -->
+        <span class="c1"></span>
+        <!-- Comment node 2 -->
+        <span class="c1"></span>
+        <!-- Comment node 3 -->
+        <span class="c1 c2"></span>
+        <!-- Comment node 4 -->
+        <span class="c1 c2 c3"></span>
+        <!-- Comment node 5 -->
+        <span></span>
+        <!-- Comment node 6 -->
+        <div class="c1"></div>
+        <!-- Comment node 7 -->
+        <div class="c1 c2"></div>
+        <!-- Comment node 8 -->
+        <div class="c3 c2"></div>
+        <!-- Comment node 9 -->
+        <div class="c3 c4"></div>
+        <!-- Comment node 10 -->
+        <div class="c1 c4"></div>
+        <!-- Comment node 11 -->
+        <input type="text" class="input-class">
+        <input type="text" class="input-class">
+        <div></div>
+      </div>
+    `);
+  await TestRunner.evaluateInPagePromise(`
+      function matchingElements(selector)
+      {
+          return document.querySelectorAll(selector).length;
+      }
+  `);
+
+  var nodeQueue = [];
+  ElementsTestRunner.expandElementsTree(enqueueNodes);
+
+  function enqueueNodes() {
+    enqueueNode('', getDocumentElement());
+    dumpNodeData();
+  }
+
+  function dumpNodeData() {
+    var entry = nodeQueue.shift();
+    if (!entry) {
+      TestRunner.completeTest();
+      return;
+    }
+    var cssPath = Components.DOMPresentationUtils.cssPath(entry.node, true);
+    var result = entry.prefix + cssPath;
+    TestRunner.addResult(result.replace(/\n/g, '\\n'));
+    var escapedPath = cssPath.replace(/\\/g, '\\\\');
+    TestRunner.evaluateInPage('matchingElements(\'' + escapedPath + '\')', callback);
+
+    function callback(result) {
+      TestRunner.assertEquals(1, result.value);
+      dumpNodeData();
+    }
+  }
+
+  function getDocumentElement() {
+    var map = TestRunner.domModel._idToDOMNode;
+    for (var id in map) {
+      if (map[id].nodeName() === '#document')
+        return map[id];
+    }
+
+    return null;
+  }
+
+  function enqueueNode(prefix, node) {
+    if (node.nodeType() === Node.ELEMENT_NODE)
+      nodeQueue.push({prefix: prefix, node: node});
+    var children = node.children();
+    for (var i = 0; children && i < children.length; ++i)
+      enqueueNode(prefix + '  ', children[i]);
+  }
+})();
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-hide-html-comments-expected.txt b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-hide-html-comments-expected.txt
index 538878f..8cf2ac0 100644
--- a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-hide-html-comments-expected.txt
+++ b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-hide-html-comments-expected.txt
@@ -1,12 +1,13 @@
 Verifies show/hide HTML comments setting.
+
 HTML comments shown:
   <!-- comment 1 -->
 - <html>
     + <head>…</head>
       <!-- comment 2 -->
-    - <body onload="runTest()">
+    - <body>
         - <p>
-              "\nVerifies show/hide HTML comments setting.\n"
+              "\n      Verifies show/hide HTML comments setting.\n      "
               <span id="inspect"></span>
               <!-- comment 3 -->
           </p>
@@ -16,7 +17,7 @@
 HTML comments hidden:
 - <html>
     + <head>…</head>
-    - <body onload="runTest()">
+    - <body>
         + <p>…</p>
       </body>
   </html>
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-hide-html-comments.html b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-hide-html-comments.html
deleted file mode 100644
index a1d59a9..0000000
--- a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-hide-html-comments.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!-- comment 1 -->
-<html>
-<head>
-<script src="../../inspector/inspector-test.js"></script>
-<script src="../../inspector/elements-test.js"></script>
-<script>
-
-function test() {
-  ElementsTestRunner.nodeWithId('inspect', onNode);
-
-  function onNode(node) {
-    var commentNode = node.nextSibling;
-    ElementsTestRunner.selectNode(commentNode).then(onNodeSelected);
-  }
-
-  function onNodeSelected() {
-    TestRunner.addResult('HTML comments shown:');
-    ElementsTestRunner.dumpElementsTree();
-    Common.settingForTest('showHTMLComments').set(false);
-    TestRunner.addResult('\nHTML comments hidden:');
-    ElementsTestRunner.dumpElementsTree();
-    TestRunner.completeTest();
-  }
-}
-
-</script>
-</head>
-<!-- comment 2 -->
-<body onload="runTest()">
-<p>
-Verifies show/hide HTML comments setting.
-<span id="inspect"></span>
-<!-- comment 3 -->
-</p>
-</body>
-</html>
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-hide-html-comments.js b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-hide-html-comments.js
new file mode 100644
index 0000000..57f4a51
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-hide-html-comments.js
@@ -0,0 +1,42 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+(async function() {
+  TestRunner.addResult(`Verifies show/hide HTML comments setting.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  // Add the full html so that comments can be inserted between head and body
+  await TestRunner.loadHTML(`
+      <!-- comment 1 -->
+      <html>
+      <head>
+      <base href="${TestRunner.url()}">
+      </head>
+      <!-- comment 2 -->
+      <body>
+      <p>
+      Verifies show/hide HTML comments setting.
+      <span id="inspect"></span>
+      <!-- comment 3 -->
+      </p>
+      </body>
+      </html>
+    `);
+
+  ElementsTestRunner.nodeWithId('inspect', onNode);
+
+  function onNode(node) {
+    var commentNode = node.nextSibling;
+    ElementsTestRunner.selectNode(commentNode).then(onNodeSelected);
+  }
+
+  function onNodeSelected() {
+    TestRunner.addResult('HTML comments shown:');
+    ElementsTestRunner.dumpElementsTree();
+    Common.settingForTest('showHTMLComments').set(false);
+    TestRunner.addResult('\nHTML comments hidden:');
+    ElementsTestRunner.dumpElementsTree();
+    TestRunner.completeTest();
+  }
+})();
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-correct-case-expected.txt b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-correct-case-expected.txt
index 8e885d76..6a4331ec 100644
--- a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-correct-case-expected.txt
+++ b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-correct-case-expected.txt
@@ -1,18 +1,12 @@
 Tests that elements panel shows all types of elements in the correct case.
 
- 
   <!DOCTYPE html>
 - <html>
     - <head>
+          <base href="http://127.0.0.1:8000/devtools/elements/">
           <link rel="stylesheet" type="text/css" href="resources/elements-panel-styles.css">
-          <script src="../../inspector/inspector-test.js"></script>
-          <script src="../../inspector/elements-test.js"></script>
-        - <script>
-              function test() {\n  ElementsTestRunner.expandElementsTree(step1);\n\n  function step1() {\n    ElementsTestRunner.dumpElementsTree();\n    TestRunner.completeTest();\n  }\n}\n
-          </script>
       </head>
-    - <body onload="runTest()">
-          <p>\nTests that elements panel shows all types of elements in the correct case.\n</p>
+    - <body>
         - <svg>
               <feComposite></feComposite>
           </svg>
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-correct-case.html b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-correct-case.html
deleted file mode 100644
index 578dea3..0000000
--- a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-correct-case.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<link rel="stylesheet" type="text/css" href="resources/elements-panel-styles.css">
-
-<script src="../../inspector/inspector-test.js"></script>
-<script src="../../inspector/elements-test.js"></script>
-<script>
-function test() {
-  ElementsTestRunner.expandElementsTree(step1);
-
-  function step1() {
-    ElementsTestRunner.dumpElementsTree();
-    TestRunner.completeTest();
-  }
-}
-</script>
-</head>
-<body onload="runTest()">
-<p>
-Tests that elements panel shows all types of elements in the correct case.
-</p>
-<svg>
-    <feComposite></feComposite>
-</svg>
-<svg>
-    <circle></circle>
-</svg>
-<DIv></DIv>
-<DIV></DIV>
-</body>
-</html>
\ No newline at end of file
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-correct-case.js b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-correct-case.js
new file mode 100644
index 0000000..23bb7aac8b
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-correct-case.js
@@ -0,0 +1,29 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+(async function() {
+  TestRunner.addResult(`Tests that elements panel shows all types of elements in the correct case.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <!DOCTYPE html>
+      <svg>
+          <feComposite/>
+      </svg>
+      <svg>
+          <circle/>
+      </svg>
+
+      <DIv></DIv>
+      <DIV></DIV>
+    `);
+  await TestRunner.addStylesheetTag('resources/elements-panel-styles.css');
+
+  ElementsTestRunner.expandElementsTree(step1);
+
+  function step1() {
+    ElementsTestRunner.dumpElementsTree();
+    TestRunner.completeTest();
+  }
+})();
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-rewrite-href-expected.txt b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-rewrite-href-expected.txt
index 016ec4a..49e9a97 100644
--- a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-rewrite-href-expected.txt
+++ b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-rewrite-href-expected.txt
@@ -1,12 +1,7 @@
 Tests that src and href element targets are rewritten properly.
 
-
  javascript:alert('foo') 
 http://127.0.0.1/script.js
 http://127.0.0.1/stylesheet.css
 http://127.0.0.1/target.html
-http://127.0.0.1:8000/bogusSheet1.css
-http://127.0.0.1:8000/devtools/elements/bogusSheet2.css
-http://127.0.0.1:8000/inspector/elements-test.js
-http://127.0.0.1:8000/inspector/inspector-test.js
 
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-rewrite-href.html b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-rewrite-href.js
similarity index 64%
rename from third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-rewrite-href.html
rename to third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-rewrite-href.js
index 7cdfd34..51c927a 100644
--- a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-rewrite-href.html
+++ b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-rewrite-href.js
@@ -1,13 +1,18 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-<html>
-<head>
-<link rel="stylesheet" src="/bogusSheet1.css">
-<link rel="stylesheet" src="bogusSheet2.css">
-<script src="../../inspector/inspector-test.js"></script>
-<script src="../../inspector/elements-test.js"></script>
-<script>
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
 
-function test() {
+(async function() {
+  TestRunner.addResult(`Tests that src and href element targets are rewritten properly.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+      <a style="display:none" href=" javascript:alert('foo') "></a>
+    `);
+
+  await TestRunner.addIframe('resources/elements-panel-rewrite-href-iframe.html');
+
   ElementsTestRunner.expandElementsTree(step1);
 
   function step1() {
@@ -44,17 +49,4 @@
     TestRunner.addResult(outputLines.join('\n'));
     TestRunner.completeTest();
   }
-}
-
-</script>
-</head>
-
-<body>
-<p>
-Tests that src and href element targets are rewritten properly.
-</p>
-
-<a style="display:none" href=" javascript:alert('foo') "></a>
-<iframe src="resources/elements-panel-rewrite-href-iframe.html" onload="runTest()"></iframe>
-</body>
-</html>
+})();
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-search-expected.txt b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-search-expected.txt
index 75585c0..995741c9 100644
--- a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-search-expected.txt
+++ b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-search-expected.txt
@@ -1,9 +1,5 @@
 Tests that elements panel search is returning proper results.
 
-FooBar
-
-Found by selector
- 
 
 Running: testSetUp
 
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-search.html b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-search.js
similarity index 76%
rename from third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-search.html
rename to third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-search.js
index f127afec..800c969 100644
--- a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-search.html
+++ b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-search.js
@@ -1,24 +1,54 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-<html id="documentElement">
-<head>
-<script src="../../inspector/inspector-test.js"></script>
-<script>
-function initializeShadowDOM()
-{
-    var shadow = document.querySelector('#shadow-host').createShadowRoot();
-    var template = document.querySelector('#shadow-dom-template');
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
 
-    // Avoid matching this function
-    shadow.appendChild(template.content.cloneNode(true));
+(async function() {
+  TestRunner.addResult(`Tests that elements panel search is returning proper results.\n`);
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+      <html id="documentElement">
+      <head><base href=${TestRunner.url()}></head>
+      <body>
+      <div>FooBar</div>
+      <input value="InputVal">
+      <div attr="foo"></div>
+      <div id="terminator"></div>
+      <div class="divclass"><span>Found by selector</span></div>
+      <span class="foo koo"></span>
+      <span class="CASELESS"></span>
+      <span data-camel="insenstive"></span>
+      <div id="shadow-host">
+          <div id="shadow-host-content"></div>
+      </div>
+      <template id="shadow-dom-template">
+        <div id="shadow-dom-outer">
+            <content></content>
+        </div>
 
-    var uaShadow = internals.createUserAgentShadowRoot(
-        document.querySelector('#ua-shadow-host'));
-    var uaShadowContent = document.createElement('div');
-    uaShadowContent.id = 'ua-shadow-' + 'content';
-    uaShadow.appendChild(uaShadowContent);
-}
+      </template>
+      <textarea></textarea>
+      <div id="ua-shadow-host"></div>
+      </body>
+      </html>
+    `);
+  await TestRunner.evaluateInPagePromise(`
+      function initializeShadowDOM()
+      {
+          var shadow = document.querySelector('#shadow-host').createShadowRoot();
+          var template = document.querySelector('#shadow-dom-template');
 
-function test() {
+          // Avoid matching this function
+          shadow.appendChild(template.content.cloneNode(true));
+
+          var uaShadow = internals.createUserAgentShadowRoot(
+              document.querySelector('#ua-shadow-host'));
+          var uaShadowContent = document.createElement('div');
+          uaShadowContent.id = 'ua-shadow-' + 'content';
+          uaShadow.appendChild(uaShadowContent);
+      }
+  `);
+
   var omitInnerHTML;
 
   async function searchCallback(next, resultCount) {
@@ -259,34 +289,4 @@
           .then(searchCallback.bind(this, next));
     },
   ]);
-}
-</script>
-</head>
-
-<body onload="runTest()">
-<p>
-Tests that elements panel search is returning proper results.
-</p>
-
-<div>FooBar</div>
-<input value="InputVal">
-<div attr="foo"></div>
-<div id="terminator"></div>
-<div class="divclass"><span>Found by selector</span></div>
-<span class="foo koo"></span>
-<span class="CASELESS"></span>
-<span data-camel="insenstive"></span>
-<div id="shadow-host">
-    <div id="shadow-host-content"></div>
-</div>
-<template id="shadow-dom-template">
-  <div id="shadow-dom-outer">
-      <content></content>
-  </div>
-</div>
-</template>
-<textarea></textarea>
-<div id="ua-shadow-host"></div>
-
-</body>
-</html>
+})();
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-structure-expected.txt b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-structure-expected.txt
index a38b8d9d..cd35df9 100644
--- a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-structure-expected.txt
+++ b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-structure-expected.txt
@@ -1,18 +1,11 @@
 Tests that elements panel shows DOM tree structure.
 
-"Quoted Text". Special characters: ><"'     ​‌‍‎‏ ‪‫‬‭‮­
-“
   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 - <html>
     - <head>
-          <script src="../../inspector/inspector-test.js"></script>
-          <script src="../../inspector/elements-test.js"></script>
-        - <script>
-              \nfunction test() {\n  // Warm up highlighter module.\n  runtime.loadModulePromise('source_frame').then(function() {\n    ElementsTestRunner.expandElementsTree(step1);\n  });\n\n  function step1() {\n    ElementsTestRunner.dumpElementsTree();\n    TestRunner.completeTest();\n  }\n}\n\nfunction prepareTest()\n{\n    document.querySelector("#control-character").textContent = "\ufeff\u0093";\n    runTest();\n}\n\n
-          </script>
+          <base href="http://127.0.0.1:8000/devtools/elements/">
       </head>
-    - <body onload="prepareTest()">
-          <p>\nTests that elements panel shows DOM tree structure.\n</p>
+    - <body>
         - <div id="level1">
             - <div id="level2">
                   ""Quoted Text". Special&nbsp;characters: ><"'&nbsp;&ensp;&emsp;&thinsp;&#8202;&#8203;&zwnj;&zwj;&lrm;&rlm; &#8234;&#8235;&#8236;&#8237;&#8238;&shy;"
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-structure.html b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-structure.html
deleted file mode 100644
index ca39b5c..0000000
--- a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-structure.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-<html>
-<head>
-<script src="../../inspector/inspector-test.js"></script>
-<script src="../../inspector/elements-test.js"></script>
-<script>
-
-function test() {
-  // Warm up highlighter module.
-  runtime.loadModulePromise('source_frame').then(function() {
-    ElementsTestRunner.expandElementsTree(step1);
-  });
-
-  function step1() {
-    ElementsTestRunner.dumpElementsTree();
-    TestRunner.completeTest();
-  }
-}
-
-function prepareTest()
-{
-    document.querySelector("#control-character").textContent = "\ufeff\u0093";
-    runTest();
-}
-
-</script>
-</head>
-
-<body onload="prepareTest()">
-<p>
-Tests that elements panel shows DOM tree structure.
-</p>
-
-<div id="level1">
-    <div id="level2">"Quoted Text". Special&nbsp;characters: &gt;&lt;&quot;&apos;&nbsp;&ensp;&emsp;&thinsp;&#8202;&#8203;&zwnj;&zwj;&lrm;&rlm; &#8234;&#8235;&#8236;&#8237;&#8238;&shy;<div id="level3"></div>
-    </div>
-</div>
-<div id="control-character"></div>
-
-</body>
-</html>
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-structure.js b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-structure.js
new file mode 100644
index 0000000..5e23d11
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-structure.js
@@ -0,0 +1,30 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+(async function() {
+  TestRunner.addResult(`Tests that elements panel shows DOM tree structure.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+      <div id="level1">
+          <div id="level2">&quot;Quoted Text&quot;. Special&#xA0;characters: &gt;&lt;&quot;'&#xA0;&#x2002;&#x2003;&#x2009;&#x200A;&#x200B;&#x200C;&#x200D;&#x200E;&#x200F; &#x202A;&#x202B;&#x202C;&#x202D;&#x202E;&#xAD;<div id="level3"></div>
+          </div>
+      </div>
+      <div id="control-character"></div>
+    `);
+  await TestRunner.evaluateInPagePromise(`
+      document.querySelector("#control-character").textContent = "\ufeff\u0093";
+  `);
+
+  // Warm up highlighter module.
+  runtime.loadModulePromise('source_frame').then(function() {
+    ElementsTestRunner.expandElementsTree(step1);
+  });
+
+  function step1() {
+    ElementsTestRunner.dumpElementsTree();
+    TestRunner.completeTest();
+  }
+})();
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/expand-recursively.html b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/expand-recursively.html
deleted file mode 100644
index 3bd07f3..0000000
--- a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/expand-recursively.html
+++ /dev/null
@@ -1,64 +0,0 @@
-<html>
-<head>
-<script src="../../inspector/inspector-test.js"></script>
-<script src="../../inspector/elements-test.js"></script>
-<script>
-
-function test() {
-  var treeOutline = ElementsTestRunner.firstElementsTreeOutline();
-  ElementsTestRunner.findNode(function() {
-    return false;
-  }, firstStep);
-
-  function firstStep() {
-    TestRunner.addResult('===== Initial state of tree outline =====\n');
-    dump();
-
-    var topNode = treeOutline.rootElement().childAt(0).childAt(1).childAt(1);
-    topNode.expandRecursively();
-    TestRunner.deprecatedRunAfterPendingDispatches(secondStep);
-  };
-
-  function secondStep() {
-    TestRunner.addResult('\n===== State of tree outline after calling .expandRecursively() =====\n');
-    dump();
-
-    TestRunner.completeTest();
-  };
-
-  function dump() {
-    var node = ElementsTestRunner.expandedNodeWithId('depth-1');
-    ElementsTestRunner.dumpElementsTree(node);
-  };
-}
-
-</script>
-</head>
-
-<body onload="runTest()">
-<p>
-Tests that expanding elements recursively works.
-</p>
-
-<div id="depth-1">
-    <div id="depth-2">
-        <div id="depth-3">
-            <div id="depth-4">
-                <div id="depth-5">
-                    <div id="depth-6">
-                        <div id="depth-7">
-                            <div id="depth-8">
-                                <div id="depth-9">
-                                    <div id="depth-10"></div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-</body>
-</html>
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/expand-recursively.js b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/expand-recursively.js
new file mode 100644
index 0000000..28ffbd08
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/expand-recursively.js
@@ -0,0 +1,56 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+(async function() {
+  TestRunner.addResult(`Tests that expanding elements recursively works.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <div id="depth-1">
+          <div id="depth-2">
+              <div id="depth-3">
+                  <div id="depth-4">
+                      <div id="depth-5">
+                          <div id="depth-6">
+                              <div id="depth-7">
+                                  <div id="depth-8">
+                                      <div id="depth-9">
+                                          <div id="depth-10"></div>
+                                      </div>
+                                  </div>
+                              </div>
+                          </div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+    `);
+
+  var treeOutline = ElementsTestRunner.firstElementsTreeOutline();
+  ElementsTestRunner.findNode(function() {
+    return false;
+  }, firstStep);
+
+  function firstStep() {
+    TestRunner.addResult('===== Initial state of tree outline =====\n');
+    dump();
+
+    var topNode = treeOutline.rootElement().childAt(0).childAt(1).childAt(0);
+    topNode.expandRecursively();
+    TestRunner.deprecatedRunAfterPendingDispatches(secondStep);
+  }
+
+  function secondStep() {
+    TestRunner.addResult('\n===== State of tree outline after calling .expandRecursively() =====\n');
+    dump();
+
+    TestRunner.completeTest();
+  }
+
+  function dump() {
+    var node = ElementsTestRunner.expandedNodeWithId('depth-1');
+    ElementsTestRunner.dumpElementsTree(node);
+  }
+})();
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/html-link-import-expected.txt b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/html-link-import-expected.txt
index ce7c9d3..3607826e 100644
--- a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/html-link-import-expected.txt
+++ b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/html-link-import-expected.txt
@@ -1,8 +1,8 @@
-CONSOLE WARNING: Styling master document from stylesheets defined in HTML Imports is deprecated, and is planned to be removed in M65, around March 2018. Please refer to https://goo.gl/EGXzpw for possible migration paths.
 This test verifies that imported document is rendered within the import link.
 
 - <html>
     - <head>
+          <base href="http://127.0.0.1:8000/devtools/elements/">
         - <link rel="import" href="../resources/imported-document.html">
             - #document
                 - <html>
@@ -31,13 +31,8 @@
                       </body>
                   </html>
           </link>
-          <script src="../../inspector/inspector-test.js"></script>
-          <script src="../../inspector/elements-test.js"></script>
-        - <script>
-              \nfunction test() {\n  // Warm up highlighter module.\n  runtime.loadModulePromise('source_frame').then(function() {\n    ElementsTestRunner.expandElementsTree(callback);\n  });\n\n  function callback() {\n    ElementsTestRunner.dumpElementsTree();\n    TestRunner.completeTest();\n  }\n}\n
-          </script>
       </head>
-    - <body onload="runTest()">
+    - <body>
           <p>This test verifies that imported document is rendered within the import link.</p>
       </body>
   </html>
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/html-link-import.html b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/html-link-import.html
deleted file mode 100644
index 2c664482..0000000
--- a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/html-link-import.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<html>
-<head>
-<link rel="import" href="../resources/imported-document.html">
-<script src="../../inspector/inspector-test.js"></script>
-<script src="../../inspector/elements-test.js"></script>
-<script>
-
-function test() {
-  // Warm up highlighter module.
-  runtime.loadModulePromise('source_frame').then(function() {
-    ElementsTestRunner.expandElementsTree(callback);
-  });
-
-  function callback() {
-    ElementsTestRunner.dumpElementsTree();
-    TestRunner.completeTest();
-  }
-}
-</script>
-</head>
-
-<body onload="runTest()">
-
-<p>This test verifies that imported document is rendered within the import link.</p>
-
-</body>
-</html>
-
diff --git a/third_party/WebKit/LayoutTests/http/tests/devtools/elements/html-link-import.js b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/html-link-import.js
new file mode 100644
index 0000000..05bfadec
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/http/tests/devtools/elements/html-link-import.js
@@ -0,0 +1,28 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+(async function() {
+  TestRunner.addResult(`This test verifies that imported document is rendered within the import link.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+
+  await TestRunner.loadHTML(`
+  <head>
+  <link rel="import" href="../resources/imported-document.html">
+  <head>
+  <body>
+  <p>This test verifies that imported document is rendered within the import link.</p>
+  </body>
+  `);
+
+  // Warm up highlighter module.
+  runtime.loadModulePromise('source_frame').then(function() {
+    ElementsTestRunner.expandElementsTree(callback);
+  });
+
+  function callback() {
+    ElementsTestRunner.dumpElementsTree();
+    TestRunner.completeTest();
+  }
+})();
diff --git a/third_party/WebKit/Source/devtools/front_end/sdk/DOMModel.js b/third_party/WebKit/Source/devtools/front_end/sdk/DOMModel.js
index 959deb9..0b7e1632 100644
--- a/third_party/WebKit/Source/devtools/front_end/sdk/DOMModel.js
+++ b/third_party/WebKit/Source/devtools/front_end/sdk/DOMModel.js
@@ -481,7 +481,7 @@
    * @return {!Promise<?Array<!SDK.DOMNode>>}
    */
   async getSubtree(depth) {
-    var response = await this._agent.invoke_requestChildNodes({id: this.id, depth});
+    var response = await this._agent.invoke_requestChildNodes({nodeId: this.id, depth});
     return response[Protocol.Error] ? null : this._children;
   }
 
diff --git a/third_party/WebKit/Source/devtools/front_end/test_runner/TestRunner.js b/third_party/WebKit/Source/devtools/front_end/test_runner/TestRunner.js
index be98ded..01c8a6b 100644
--- a/third_party/WebKit/Source/devtools/front_end/test_runner/TestRunner.js
+++ b/third_party/WebKit/Source/devtools/front_end/test_runner/TestRunner.js
@@ -38,7 +38,7 @@
 
 /**
  * Note: This is only needed to debug a test in release DevTools.
- * Usage: wrap the entire test with debugTest() and use dtrun test --debug-release
+ * Usage: wrap the entire test with debugReleaseTest() and use dtrun test --debug-release
  * @param {!Function} testFunction
  * @return {!Function}
  */
diff --git a/third_party/WebKit/Source/devtools/scripts/migrate_test/migrate_test.js b/third_party/WebKit/Source/devtools/scripts/migrate_test/migrate_test.js
index 532b222..8f4259da 100644
--- a/third_party/WebKit/Source/devtools/scripts/migrate_test/migrate_test.js
+++ b/third_party/WebKit/Source/devtools/scripts/migrate_test/migrate_test.js
@@ -53,6 +53,7 @@
       return line;
     }
   }
+  return '';
 }
 
 function escapeRegExp(str) {