DevTools: migrate styles-1 tests in Elements

Migrate the easily migratable tests in styles-1.

Bug: 667560
Cq-Include-Trybots: master.tryserver.chromium.linux:linux_mojo
Change-Id: I1e73e502bbd637585d7cc34eaebac73a5cf21094
Reviewed-on: https://chromium-review.googlesource.com/802542Reviewed-by: Will Chen <chenwilliam@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Commit-Position: refs/heads/master@{#521035}

third_party/WebKit/LayoutTests/FlagExpectations/enable-blink-features=LayoutNG

@@ -6279,7 +6279,7 @@ crbug.com/591099 http/tests/devtools/elements/highlight/highlight-node-scaled-an
 crbug.com/591099 http/tests/devtools/elements/highlight/highlight-node-scaled.js [ Failure ]
 crbug.com/591099 http/tests/devtools/elements/highlight/highlight-node-scroll.js [ Failure ]
 crbug.com/591099 http/tests/devtools/elements/highlight/highlight-node.js [ Failure ]
-crbug.com/591099 http/tests/devtools/elements/styles-1/color-aware-property-value-edit.html [ Failure ]
+crbug.com/591099 http/tests/devtools/elements/styles-1/color-aware-property-value-edit.js [ Failure ]
 crbug.com/591099 http/tests/devtools/elements/styles-2/add-import-rule.html [ Failure ]
 crbug.com/591099 http/tests/devtools/elements/styles-3/style-rule-from-imported-stylesheet.html [ Failure ]
 crbug.com/591099 http/tests/devtools/elements/styles-3/styles-add-new-rule-tab.js [ Failure Pass ]

third_party/WebKit/LayoutTests/FlagExpectations/enable-features=NetworkService

@@ -192,7 +192,7 @@ crbug.com/764474 plugins/plugin-document-back-forward.html [ Crash Failure Timeo
 # DevTools crbug.com/783982
 crbug.com/783982 http/tests/devtools/startup/console/console-uncaught-promise-no-inspector.html [ Failure ]
 crbug.com/783982 http/tests/devtools/elements/styles-2/property-ui-location.html [ Failure ]
-crbug.com/783982 http/tests/devtools/elements/styles-1/empty-background-url.html [ Failure ]
+crbug.com/783982 http/tests/devtools/elements/styles-1/empty-background-url.js [ Failure ]
 
 # http/tests/fetch
 crbug.com/778721 http/tests/fetch/serviceworker-proxied/thorough/auth-base-https-other-https.html [ Pass Failure Timeout ]

third_party/WebKit/LayoutTests/SlowTests

@@ -148,8 +148,8 @@ crbug.com/451577 http/tests/devtools/resource-tree/resource-tree-crafted-frame-a
 crbug.com/451577 virtual/mojo-loading/http/tests/devtools/resource-tree/resource-tree-crafted-frame-add.js [ Slow ]
 crbug.com/451577 http/tests/devtools/resource-tree/resource-tree-frame-in-crafted-frame.js [ Slow ]
 crbug.com/451577 virtual/mojo-loading/http/tests/devtools/resource-tree/resource-tree-frame-in-crafted-frame.js [ Slow ]
-crbug.com/510337 http/tests/devtools/elements/styles-1/edit-value-url-with-color.html [ Slow ]
-crbug.com/667560 virtual/mojo-loading/http/tests/devtools/elements/styles-1/edit-value-url-with-color.html [ Slow ]
+crbug.com/510337 http/tests/devtools/elements/styles-1/edit-value-url-with-color.js [ Slow ]
+crbug.com/667560 virtual/mojo-loading/http/tests/devtools/elements/styles-1/edit-value-url-with-color.js [ Slow ]
 crbug.com/451577 [ Mac ] http/tests/devtools/extensions/extensions-reload.html [ Slow ]
 crbug.com/451577 [ Mac ] http/tests/devtools/extensions/extensions-resources.html [ Slow ]
 crbug.com/451577 [ Win10 ] http/tests/devtools/extensions/extensions-sidebar.html [ Slow ]

third_party/WebKit/LayoutTests/TestExpectations

@@ -2731,8 +2731,8 @@ crbug.com/595993 virtual/outofblink-cors/external/wpt/service-workers/service-wo
 
 crbug.com/619427 [ Mac Linux ] fast/overflow/overflow-height-float-not-removed-crash3.html [ Pass Failure ]
 
-crbug.com/667371 http/tests/devtools/elements/styles-1/color-aware-property-value-edit.html [ Pass Failure ]
-crbug.com/667560 virtual/mojo-loading/http/tests/devtools/elements/styles-1/color-aware-property-value-edit.html [ Pass Failure ]
+crbug.com/667371 http/tests/devtools/elements/styles-1/color-aware-property-value-edit.js [ Pass Failure ]
+crbug.com/667560 virtual/mojo-loading/http/tests/devtools/elements/styles-1/color-aware-property-value-edit.js [ Pass Failure ]
 
 # [css-ui] Imported tests from W3C suite.
 crbug.com/669473 external/wpt/css/css-ui/box-sizing-014.html [ Failure ]

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/add-new-rule-inline-style-csp-expected.txt

 Tests that adding a new rule does not crash the renderer and modifying an inline style does not report errors when forbidden by Content-Security-Policy.
 
-Text
 
 Running: testSetUp
 

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/add-new-rule-inline-style-csp.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/add-new-rule-inline-style-csp.js

-<html>
-<head>
-<meta http-equiv="Content-Security-Policy" content="style-src https://*:443 'unsafe-eval'">
-<script src="../../../inspector/inspector-test.js"></script>
-<script src="../../../inspector/elements-test.js"></script>
-<script>
-
-function test() {
+// 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 adding a new rule does not crash the renderer and modifying an inline style does not report errors when forbidden by Content-Security-Policy.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <div id="inspected">Text</div>
+    `);
+
   var nodeId;
   var rule;
   var matchedStyles;
@@ -106,16 +111,4 @@ function test() {
     for (var i = 0; i < allProperties.length; ++i)
       TestRunner.addResult(allProperties[i].text);
   }
-}
-</script>
-</head>
-
-<body onload="runTest()">
-<p>
-Tests that adding a new rule does not crash the renderer and modifying an inline style does not report errors when forbidden by Content-Security-Policy.
-</p>
-
-<div id="inspected">Text</div>
-
-</body>
-</html>
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/add-new-rule-invalid-selector-expected.txt

 Tests that adding a new rule with invalid selector works as expected.
 
-Text
 
 Running: init
 

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/add-new-rule-invalid-selector.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/add-new-rule-invalid-selector.js

-<html>
-<head>
-<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.
+
+(async function() {
+  TestRunner.addResult(`Tests that adding a new rule with invalid selector works as expected.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <div id="inspected">Text</div>
+    `);
 
-function test() {
   TestRunner.runTestSuite([
     function init(next) {
       ElementsTestRunner.selectNodeAndWaitForStyles('inspected', next);
@@ -19,17 +24,4 @@ function test() {
       }
     }
   ]);
-}
-
-</script>
-</head>
-
-<body onload="runTest()">
-<p>
-Tests that adding a new rule with invalid selector works as expected.
-</p>
-
-<div id="inspected">Text</div>
-
-</body>
-</html>
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/add-new-rule-keyboard-expected.txt

 Tests that adding a new rule works properly with user input.
 
-Text
 Is editing? true
 [expanded] 
 element.style { ()

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/add-new-rule-keyboard.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/add-new-rule-keyboard.js

-<html>
-<head>
-<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.
+
+(async function() {
+  TestRunner.addResult(`Tests that adding a new rule works properly with user input.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <div id="inspected">Text</div>
+    `);
 
-function test() {
   ElementsTestRunner.selectNodeAndWaitForStyles('inspected', next);
 
   async function next() {
     await Elements.StylesSidebarPane._instance._createNewRuleInViaInspectorStyleSheet();
-    eventSender.keyDown("Tab");
-    await TestRunner.addSnifferPromise(Elements.StylePropertiesSection.prototype, "_editingSelectorCommittedForTest");
+    eventSender.keyDown('Tab');
+    await TestRunner.addSnifferPromise(Elements.StylePropertiesSection.prototype, '_editingSelectorCommittedForTest');
 
-    TestRunner.addResult("Is editing? " + UI.isEditing());
+    TestRunner.addResult('Is editing? ' + UI.isEditing());
     ElementsTestRunner.dumpSelectedElementStyles(true, false, true);
 
 
     TestRunner.completeTest();
   }
-}
-
-</script>
-</head>
-
-<body onload="runTest()">
-<p>
-Tests that adding a new rule works properly with user input.
-</p>
-
-<div id="inspected">Text</div>
-
-</body>
-</html>
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/add-new-rule-with-style-after-body-expected.txt

-Tests that adding a new rule works when there is a STYLE element after BODY. TIMEOUT SHOULD NOT OCCUR! Bug 111299
+Tests that adding a new rule works when there is a STYLE element after BODY. TIMEOUT SHOULD NOT OCCUR! Bug 111299 https://bugs.webkit.org/show_bug.cgi?id=111299
 
-Text
 After adding new rule:
 [expanded] 
 element.style { ()

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/add-new-rule-with-style-after-body.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/add-new-rule-with-style-after-body.js

-<html>
-<head>
-<script src="../../../inspector/inspector-test.js"></script>
-<script src="../../../inspector/elements-test.js"></script>
-<script>
-function addStyle()
-{
-    var style = document.createElement("style");
-    document.documentElement.appendChild(style);
-    style.sheet.insertRule("foo {display: none;}", 0);
-}
-
-function test() {
+// 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 adding a new rule works when there is a STYLE element after BODY. TIMEOUT SHOULD NOT OCCUR! Bug 111299 https://bugs.webkit.org/show_bug.cgi?id=111299\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <p>
+      Tests that adding a new rule works when there is a STYLE element after BODY. TIMEOUT SHOULD NOT OCCUR! <a href="https://bugs.webkit.org/show_bug.cgi?id=111299">Bug 111299</a>
+      </p>
+
+      <div id="inspected" style="font-size: 12px">Text</div>
+    `);
+  await TestRunner.evaluateInPagePromise(`
+      function addStyle()
+      {
+          var style = document.createElement("style");
+          document.documentElement.appendChild(style);
+          style.sheet.insertRule("foo {display: none;}", 0);
+      }
+  `);
+
   TestRunner.cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetAdded, stylesheetAdded);
   TestRunner.evaluateInPage('addStyle()');
 
@@ -42,17 +54,4 @@ function test() {
     ElementsTestRunner.dumpSelectedElementStyles(true, false, true);
     TestRunner.completeTest();
   }
-}
-
-</script>
-</head>
-
-<body onload="runTest()">
-<p>
-Tests that adding a new rule works when there is a STYLE element after BODY. TIMEOUT SHOULD NOT OCCUR! <a href="https://bugs.webkit.org/show_bug.cgi?id=111299">Bug 111299</a>
-</p>
-
-<div id="inspected" style="font-size: 12px">Text</div>
-
-</body>
-</html>
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/background-parsing-crash-expected.txt

 This test passes if it doesn't ASSERT.
+
+

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/background-parsing-crash.html

-<html>
-<head>
-<style>
-.absent {
-    background: #fff url(foo.png) no-repeat left 4px;
-}
-
-body {
-    background: #fff;
-}
-</style>
-<script src="../../../inspector/inspector-test.js"></script>
-<script>
-function test() {
-  TestRunner.completeTest();
-}
-</script>
-</head>
-<body onload="runTest()">
-This test passes if it doesn't ASSERT.
-</body>
-</html>

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/background-parsing-crash.js

+// 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 passes if it doesn't ASSERT.\n`);
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <style>
+      .absent {
+          background: #fff url(foo.png) no-repeat left 4px;
+      }
+
+      body {
+          background: #fff;
+      }
+      </style>
+    `);
+
+  TestRunner.completeTest();
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/cached-sync-computed-styles-expected.txt

 Tests that computed styles are cached across synchronous requests.
 
-Test
 # of backend calls sent [2 requests]: 1
 # of backend calls sent [style update + another request]: 2
 

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/cached-sync-computed-styles.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/cached-sync-computed-styles.js

-<html>
-<head>
-<style id="style">
-#inspected {
-    background-color: green;
-}
-</style>
-<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.
+
+(async function() {
+  TestRunner.addResult(`Tests that computed styles are cached across synchronous requests.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <style>
+      #inspected {
+          background-color: green;
+      }
+      </style>
+      <div>
+        <div id="inspected">Test</div>
+      </div>
+    `);
+  await TestRunner.evaluateInPagePromise(`
+      function updateStyle()
+      {
+          document.getElementById("style").textContent = "#inspected { color: red }";
+      }
+  `);
 
-function updateStyle()
-{
-    document.getElementById("style").textContent = "#inspected { color: red }";
-}
-
-function test() {
   ElementsTestRunner.nodeWithId('inspected', step1);
   var backendCallCount = 0;
   var nodeId;
@@ -45,18 +53,4 @@ function test() {
       TestRunner.completeTest();
     }
   }
-}
-</script>
-</head>
-
-<body onload="runTest()">
-<p>
-Tests that computed styles are cached across synchronous requests.
-</p>
-
-<div>
-  <div id="inspected">Test</div>
-</div>
-
-</body>
-</html>
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/case-sensitive-suggestions.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/case-sensitive-suggestions.js

-<html>
-<head>
-<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.
+
+(async function() {
+  TestRunner.addResult(`Tests that text prompt suggestions' casing follows that of the user input.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
 
-function test() {
   var prompt = new Elements.StylesSidebarPane.CSSPropertyPrompt(SDK.cssMetadata().allProperties(), [], null, true);
 
   TestRunner.runTestSuite([
@@ -59,13 +61,4 @@ function test() {
       callback();
     }
   }
-}
-</script>
-</head>
-
-<body onload="runTest()">
-<p>
-Tests that text prompt suggestions' casing follows that of the user input.
-</p>
-</body>
-</html>
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/color-aware-property-value-edit-expected.txt

 Tests that property value being edited uses the user-specified color format.
 
-inspected1
-inspected2
 
 Running: init
 
@@ -30,5 +28,5 @@ Running: editHexAsRGB
 rgb(255, 255, 238)
 
 Running: editNewProperty
-alicebluehsl(120, 100%, 25%)
+hsl(120, 100%, 25%)
 

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/color-aware-property-value-edit.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/color-aware-property-value-edit.js

-<html>
-<head>
-<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.
+
+(async function() {
+  TestRunner.addResult(`Tests that property value being edited uses the user-specified color format.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <div id="inspected1" style="border: 1px solid red">inspected1</div>
+      <div id="inspected2" style="color: #ffffee">inspected2</div>
+    `);
 
-function test() {
   TestRunner.runTestSuite([
     function init(next) {
       ElementsTestRunner.selectNodeAndWaitForStyles('inspected1', next);
@@ -81,18 +87,4 @@ function test() {
       next();
     }
   }
-}
-
-</script>
-</head>
-
-<body onload="runTest()">
-<p>
-Tests that property value being edited uses the user-specified color format.
-</p>
-
-<div id="inspected1" style="border: 1px solid red">inspected1</div>
-<div id="inspected2" style="color: #ffffee">inspected2</div>
-
-</body>
-</html>
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/color-nicknames-lowercase.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/color-nicknames-lowercase.js

-<html>
-<head>
-<script src="../../../inspector/inspector-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.
+
+(async function() {
+  TestRunner.addResult(`Tests that all color nicknames are lowercase to facilitate lookup\n`);
+  await TestRunner.showPanel('elements');
 
-function test() {
   var badNames = [];
   for (var nickname in Common.Color.Nicknames) {
     if (nickname.toLowerCase() !== nickname)
@@ -16,11 +18,4 @@ function test() {
     TestRunner.addResult('Non-lowercase color nicknames: ' + badNames.join(', '));
 
   TestRunner.completeTest();
-}
-
-</script>
-</head>
-<body onload="runTest()">
-<p>Tests that all color nicknames are lowercase to facilitate lookup</p>
-</body>
-</html>
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/color-swatch-expected.txt

 The patch verifies that color swatch functions properly in matched and computed styles. crbug.com/461363
 
-Inspected div
 
 Running: selectNode
 

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/color-swatch.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/color-swatch.js

-<html>
-<head>
-<script src="../../../inspector/inspector-test.js"></script>
-<script src="../../../inspector/elements-test.js"></script>
-<style>
-#inspected {
-    color: red;
-    --variable: red;
-}
-</style>
-<script>
-function test() {
+// 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(
+      `The patch verifies that color swatch functions properly in matched and computed styles. crbug.com/461363\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <style>
+      #inspected {
+          color: red;
+          --variable: red;
+      }
+      </style>
+      <div id="inspected">Inspected div</div>
+    `);
+
   TestRunner.runTestSuite([
     function selectNode(next) {
       ElementsTestRunner.selectNodeAndWaitForStylesWithComputed('inspected', next);
@@ -57,14 +64,4 @@ function test() {
   function popoverVisible() {
     return !!document.body.querySelector('* /deep/ .spectrum-color');
   }
-}
-</script>
-</head>
-
-<body onload="runTest()">
-<p>The patch verifies that color swatch functions properly in matched and computed styles. crbug.com/461363</p>
-
-<div id="inspected">Inspected div</div>
-
-</body>
-</html>
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/commit-selector-expected.txt

-Tests that renaming a selector updates element styles. Bug 70018.
+Tests that renaming a selector updates element styles. Bug 70018. https://bugs.webkit.org/show_bug.cgi?id=70018
 
-Text
 === Before selector modification ===
 [expanded] 
 element.style { ()
     color: red;
 
 [expanded] 
-#inspected { (commit-selector.html:4 -> commit-selector.html:4:13)
+#inspected { (<style>…</style>)
 /-- overloaded --/     color: green;
 
 [expanded] 
@@ -20,7 +19,7 @@ element.style { ()
     color: red;
 
 [expanded] 
-hr, #inspected { (commit-selector.html:4 -> commit-selector.html:4:17)
+hr, #inspected { (<style>…</style>)
 /-- overloaded --/     color: green;
 
 [expanded] 
@@ -33,7 +32,7 @@ element.style { ()
     color: red;
 
 [expanded] [no-affect] 
-#inspectedChanged { (commit-selector.html:4 -> commit-selector.html:4:20)
+#inspectedChanged { (<style>…</style>)
     color: green;
 
 [expanded] 

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/commit-selector-mark-matching.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/commit-selector-mark-matching.js

-<html>
-<head>
-<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.
+
+(async function() {
+  TestRunner.addResult(
+      `Tests that matching selectors are marked properly after new rule creation and selector change.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <div id="inspected"></div>
+    `);
 
-function test() {
   var nodeId;
   var stylesPane;
 
@@ -42,17 +48,4 @@ function test() {
       }
     }
   ]);
-}
-
-</script>
-</head>
-
-<body onload="runTest()">
-<p>
-Tests that matching selectors are marked properly after new rule creation and selector change.
-</p>
-
-<div id="inspected"></div>
-
-</body>
-</html>
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/commit-selector.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/commit-selector.js

-<html>
-<head>
-<style>
-#inspected {
-  color: green;
-}
-</style>
-<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.
+
+(async function() {
+  TestRunner.addResult(
+      `Tests that renaming a selector updates element styles. Bug 70018. https://bugs.webkit.org/show_bug.cgi?id=70018\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <style>
+      #inspected {
+        color: green;
+      }
+      </style>
+      <p>
+      Tests that renaming a selector updates element styles. <a href="https://bugs.webkit.org/show_bug.cgi?id=70018">Bug 70018</a>.
+      </p>
+
+      <div id="inspected" style="color: red">Text</div>
+      <div id="other"></div>
+    `);
 
-function test() {
   ElementsTestRunner.selectNodeAndWaitForStyles('inspected', step1);
 
   function step1() {
@@ -37,18 +48,4 @@ function test() {
     ElementsTestRunner.dumpSelectedElementStyles(true);
     TestRunner.completeTest();
   }
-}
-
-</script>
-</head>
-
-<body onload="runTest()">
-<p>
-Tests that renaming a selector updates element styles. <a href="https://bugs.webkit.org/show_bug.cgi?id=70018">Bug 70018</a>.
-</p>
-
-<div id="inspected" style="color: red">Text</div>
-<div id="other"></div>
-
-</body>
-</html>
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/css-live-edit.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/css-live-edit.js

-<html>
-<head>
-<script src="../../../inspector/inspector-test.js"></script>
-<script src="../../../inspector/elements-test.js"></script>
-<script src="../../../inspector/live-edit-test.js"></script>
-<script src="../../../inspector/debugger-test.js"></script>
-<link rel="stylesheet" href="../styles/resources/css-live-edit.css">
-<div id=foo></div>
-<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.
+
+(async function() {
+  TestRunner.addResult(`Tests that styles are updated when live-editing css resource.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.loadModule('sources_test_runner');
+  await TestRunner.showPanel('sources');
+  await TestRunner.loadHTML(`
+      <div id="foo"></div>
+    `);
+  await TestRunner.addStylesheetTag('../styles/resources/css-live-edit.css');
 
-function test() {
   TestRunner.runTestSuite([function testLiveEdit(next) {
     SourcesTestRunner.showScriptSource('css-live-edit.css', didShowResource);
 
@@ -26,14 +29,4 @@ function test() {
       next();
     }
   }]);
-};
-
-</script>
-
-</head>
-
-<body onload="runTest()">
-<p>Tests that styles are updated when live-editing css resource.</p>
-
-</body>
-</html>
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/css-outline.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/css-outline.js

-<html>
-<head>
-<script src="../../../inspector/inspector-test.js"></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.
+
+(async function() {
+  TestRunner.addResult(`The test verifies the CSS outline functionality.\n`);
+  await TestRunner.loadModule('formatter');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
 <style id="styler">
 @import url("some-url-to-load-css.css") print;
 @charset "ISO-8859-15";
@@ -51,18 +57,18 @@ svg|a {
     }
 }
 </style>
-<script>
-
-function initialize_Formatter() {
-    InspectorTest.preloadModule('formatter');
-}
+    `);
+  await TestRunner.evaluateInPagePromise(`
+      function initialize_Formatter() {
+          InspectorTest.preloadModule('formatter');
+      }
 
-function getCSS()
-{
-    return document.querySelector("#styler").textContent;
-}
+      function getCSS()
+      {
+          return document.querySelector("#styler").textContent;
+      }
+  `);
 
-function test() {
   function onRulesParsed(isLastChunk, rules) {
     for (var i = 0; i < rules.length; ++i)
       TestRunner.addObject(rules[i]);
@@ -75,13 +81,4 @@ function test() {
   }
 
   TestRunner.evaluateInPage('getCSS()', onStyleFetched);
-}
-
-</script>
-
-</head>
-
-<body onload="runTest()">
-<p>The test verifies the CSS outline functionality.</p>
-</body>
-</html>
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/cssom-media-insert-crash-expected.txt

-Tests that the inspected page does not crash after inspecting element with CSSOM added rules. Bug 373508
-Inspecting this element crashes DevTools
+Tests that the inspected page does not crash after inspecting element with CSSOM added rules. Bug 373508 crbug.com/373508
+
 [expanded] 
 element.style { ()
 
@@ -9,7 +9,7 @@ element.style { ()
     background: red;
 
 [expanded] 
-div { (cssom-media-ins…-crash.html:18 -> cssom-media-insert-crash.html:18:6)
+div { (<style>…</style>)
     border: 1px solid black;
 /-- overloaded --/     background-color: white;
     padding: 20px;

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/cssom-media-insert-crash.html

-<html>
-<head>
-<script src="../../../inspector/inspector-test.js"></script>
-<script src="../../../inspector/elements-test.js"></script>
-<script>
-
-function test() {
-  ElementsTestRunner.selectNodeAndWaitForStyles('box', step1);
-
-  function step1() {
-    ElementsTestRunner.dumpSelectedElementStyles(true, false, true, false);
-    TestRunner.completeTest();
-  }
-}
-
-</script>
-<style>
-div {
-    border: 1px solid black;
-    background-color: white;
-    padding: 20px;
-}
-</style>
-</head>
-
-<body onload="runTest()">
-Tests that the inspected page does not crash after inspecting element with CSSOM added rules. <a href="http://crbug.com/373508">Bug 373508</a>
-<div id="box">Inspecting this element crashes DevTools</div>
-<script>
-var lastSheet = document.styleSheets[document.styleSheets.length - 1];
-var mediaIndex = lastSheet.insertRule('@media all { }', lastSheet.cssRules.length);
-var mediaRule = lastSheet.cssRules[mediaIndex];
-mediaRule.insertRule('#box { background: red; color: white; }', mediaRule.cssRules.length);
-</script>
-</body>
-</html>

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/cssom-media-insert-crash.js

+// 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 the inspected page does not crash after inspecting element with CSSOM added rules. Bug 373508 crbug.com/373508\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <style>
+      div {
+          border: 1px solid black;
+          background-color: white;
+          padding: 20px;
+      }
+      </style>
+      Tests that the inspected page does not crash after inspecting element with CSSOM added rules. <a href="http://crbug.com/373508">Bug 373508</a>
+      <div id="box">Inspecting this element crashes DevTools</div>
+    `);
+  await TestRunner.evaluateInPagePromise(`
+      var lastSheet = document.styleSheets[document.styleSheets.length - 1];
+      var mediaIndex = lastSheet.insertRule('@media all { }', lastSheet.cssRules.length);
+      var mediaRule = lastSheet.cssRules[mediaIndex];
+      mediaRule.insertRule('#box { background: red; color: white; }', mediaRule.cssRules.length);
+    `);
+
+  ElementsTestRunner.selectNodeAndWaitForStyles('box', step1);
+
+  function step1() {
+    ElementsTestRunner.dumpSelectedElementStyles(true, false, true, false);
+    TestRunner.completeTest();
+  }
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/disable-property-workingcopy-update.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/disable-property-workingcopy-update.js

-<html>
-<head>
-<link rel="stylesheet" href="../styles/resources/disable-property-workingcopy-update.css">
-<script src="../../../inspector/inspector-test.js"></script>
-<script src="../../../inspector/debugger-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.
+
+(async function() {
+  TestRunner.addResult(
+      `Tests that style property disablement is propagated into the stylesheet UISourceCode working copy.\n`);
+  await TestRunner.loadModule('sources_test_runner');
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('sources');
+  await TestRunner.loadHTML(`
+      <div id="inspected">
+      </div>
+    `);
+  await TestRunner.addStylesheetTag('../styles/resources/disable-property-workingcopy-update.css');
 
-function test() {
   var cssSourceFrame;
   Bindings.StylesSourceMapping.MinorChangeUpdateTimeoutMs = 10;
 
@@ -65,17 +72,4 @@ function test() {
         next();
     }
   }
-}
-</script>
-</head>
-
-<body onload="runTest()">
-<p>
-Tests that style property disablement is propagated into the stylesheet UISourceCode working copy.
-</p>
-
-<div id="inspected">
-</div>
-
-</body>
-</html>
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/dynamic-style-tag-expected.txt

@@ -22,7 +22,7 @@ Stylesheet added:
   - hasSourceURL: false
   - contents: 
 /* comment */.inline-style-added-by-parser {
-   color: red;
+    color: red;
 }
 
 Stylesheet added:
@@ -41,7 +41,7 @@ Stylesheet added:
   - hasSourceURL: true
   - contents: 
 .inline-style-added-by-parser-with-source-url {
-   color: green;
+    color: green;
 }
 /*# sourceURL=inlineStyleAddedByParser.css*/
 
@@ -78,7 +78,7 @@ element.style { ()
 /-- overloaded --/     color: green;
 
 [expanded] 
-.inline-style-added-by-parser { (dynamic-style-tag.html:6 -> dynamic-style-tag.html:6:45)
+.inline-style-added-by-parser { (dynamic-style-tag.html:3 -> dynamic-style-tag.html:3:45)
 /-- overloaded --/     color: red;
 
 [expanded] 

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/dynamic-style-tag.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/dynamic-style-tag.js

-<html>
-<head>
-<script src="../../../inspector/inspector-test.js"></script>
-<script src="../../../inspector/elements-test.js"></script>
-<style>
-/* comment */.inline-style-added-by-parser {
-   color: red;
-}
-</style>
-<style>
-.inline-style-added-by-parser-with-source-url {
-   color: green;
-}
-/*# sourceURL=inlineStyleAddedByParser.css*/
-</style>
-<script>
-document.write("<style>\n.inline-style-added-by-parser-in-document-write {\n   color: blue;\n}\n</style>");
-document.write("<style>\n.inline-style-added-by-document-write-with-source-url {\n   color: yellow;\n}\n/*# sourceURL=inlineStyleAddedByDocumentWrite.css*/\n</style>");
-addStyleElement(".inline-style-created-by-script {\n   color: orange;\n}");
-addStyleElement(".inline-style-created-by-script-with-source-url {\n   color: grey;\n}\n/*# sourceURL=inlineStyleCreatedByScript.css*/");
+// 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 addStyleElement(styleContent)
-{
-    var styleElement = document.createElement("style");
-    styleElement.textContent = styleContent;
-    document.head.appendChild(styleElement);
-}
+(async function() {
+  TestRunner.addResult(
+      `Tests that different types of inline styles are correctly disambiguated and their sourceURL is correct.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.navigatePromise('resources/dynamic-style-tag.html');
 
-function test() {
   ElementsTestRunner.selectNodeAndWaitForStyles('inspected', step1);
 
   async function step1() {
@@ -44,12 +26,4 @@ function test() {
     ElementsTestRunner.dumpSelectedElementStyles(true, false, true);
     TestRunner.completeTest();
   }
-}
-</script>
-</head>
-<body onload="runTest()">
-<p>Tests that different types of inline styles are correctly disambiguated and their sourceURL is correct.
-<div id="inspected" style="color:red" class="inline-style-added-by-parser inline-style-added-by-parser-with-source-url inline-style-added-by-parser-in-document-write inline-style-added-by-document-write-with-source-url inline-style-created-by-script inline-style-created-by-script-with-source-url"></div>
-</body>
-</html>
-
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/edit-inspector-stylesheet-expected.txt

 Tests that adding a new rule creates inspector stylesheet resource and allows its live editing.
 
-Text
 Inspector stylesheet URL: inspector-stylesheet
 Inspector stylesheet content:
 #inspected {}

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/edit-inspector-stylesheet.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/edit-inspector-stylesheet.js

-<html>
-<head>
-<script src="../../../inspector/inspector-test.js"></script>
-<script src="../../../inspector/elements-test.js"></script>
-<script src="../../../inspector/debugger-test.js"></script>
-<script>
-
-function test() {
+// 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 adding a new rule creates inspector stylesheet resource and allows its live editing.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.loadModule('sources_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <div id="inspected">Text</div>
+    `);
+
   ElementsTestRunner.selectNodeAndWaitForStyles('inspected', onStylesSelected);
 
   function onStylesSelected(node) {
@@ -48,16 +54,4 @@ function test() {
     }
     return result;
   }
-}
-</script>
-</head>
-
-<body onload="runTest()">
-<p>
-Tests that adding a new rule creates inspector stylesheet resource and allows its live editing.
-</p>
-
-<div id="inspected">Text</div>
-
-</body>
-</html>
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/edit-media-text-expected.txt

 Tests that editing media text updates element styles.
 
-Text
 === Before media text modification ===
 [expanded] 
 element.style { ()
@@ -8,12 +7,12 @@ element.style { ()
 
 [expanded] 
 @media screen and (max-device-width: 100000px)
-#inspected { (edit-media-text.html:8 -> edit-media-text.html:8:17)
+#inspected { (<style>…</style>)
 /-- overloaded --/     color: blue;
 
 [expanded] 
 @media screen and (max-device-width: 100000px)
-#inspected { (edit-media-text.html:5 -> edit-media-text.html:5:17)
+#inspected { (<style>…</style>)
 /-- overloaded --/     color: green;
 
 [expanded] 
@@ -27,12 +26,12 @@ element.style { ()
 
 [expanded] 
 @media screen and (max-device-width: 99999px)
-#inspected { (edit-media-text.html:8 -> edit-media-text.html:8:17)
+#inspected { (<style>…</style>)
 /-- overloaded --/     color: blue;
 
 [expanded] 
 @media screen and (max-device-width: 99999px)
-#inspected { (edit-media-text.html:5 -> edit-media-text.html:5:17)
+#inspected { (<style>…</style>)
 /-- overloaded --/     color: green;
 
 [expanded] 
@@ -45,11 +44,11 @@ element.style { ()
     color: red;
 
 [expanded] 
-#inspected { (edit-media-text.html:8 -> edit-media-text.html:8:17)
+#inspected { (<style>…</style>)
 /-- overloaded --/     color: blue;
 
 [expanded] 
-#inspected { (edit-media-text.html:5 -> edit-media-text.html:5:17)
+#inspected { (<style>…</style>)
 /-- overloaded --/     color: green;
 
 [expanded] 

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/edit-media-text.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/edit-media-text.js

-<html>
-<head>
-<style>
-@media screen and (max-device-width: 100000px) {
-    #inspected {
-        color: green;
-    }
-    #inspected {
-        color: blue;
-    }
-}
-@media screen and (max-device-width: 200000px) {
-    #other {
-        color: green;
-    }
-}
-</style>
-<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.
+
+(async function() {
+  TestRunner.addResult(`Tests that editing media text updates element styles.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <style>
+      @media screen and (max-device-width: 100000px) {
+          #inspected {
+              color: green;
+          }
+          #inspected {
+              color: blue;
+          }
+      }
+      @media screen and (max-device-width: 200000px) {
+          #other {
+              color: green;
+          }
+      }
+      </style>
+      <div id="inspected" style="color: red">Text</div>
+      <div id="other"></div>
+    `);
 
-function test() {
   ElementsTestRunner.selectNodeAndWaitForStyles('inspected', step1);
 
   function step1() {
@@ -49,18 +55,4 @@ function test() {
     ElementsTestRunner.dumpSelectedElementStyles(true);
     TestRunner.completeTest();
   }
-}
-
-</script>
-</head>
-
-<body onload="runTest()">
-<p>
-Tests that editing media text updates element styles.
-</p>
-
-<div id="inspected" style="color: red">Text</div>
-<div id="other"></div>
-
-</body>
-</html>
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/edit-name-with-trimmed-value.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/edit-name-with-trimmed-value.js

-<html>
-<head>
-<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.
+
+(async function() {
+  TestRunner.addResult(
+      `Tests that editing a CSS property name in the Styles pane retains its original, non-trimmed value text.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <div id="inspected" style="background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)">
+
+
+
+      </div>
+    `);
 
-function test() {
   ElementsTestRunner.selectNodeAndWaitForStyles('inspected', step1);
 
   function step1() {
@@ -24,17 +34,4 @@ function test() {
     TestRunner.addResult(treeElement.valueElement.textContent);
     TestRunner.completeTest();
   }
-}
-
-</script>
-</head>
-
-<body onload="runTest()">
-<p>
-Tests that editing a CSS property name in the Styles pane retains its original, non-trimmed value text.
-</p>
-
-<div id="inspected" style="background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)" />
-
-</body>
-</html>
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/edit-resource-referred-by-multiple-styletags-expected.txt

 Tests that editing sourcecode which is referred by multiple stylesheets (via sourceURL comment) updates all stylesheets.
 
-Inspected node
-
 Headers count: 3
 
 Running: Make edits with Sources Panel
 Both headers and uiSourceCode content:
 div{color:EDITED;}
-
+      
 
 Running: Make edits via css model
 Both headers and uiSourceCode content:

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/edit-resource-referred-by-multiple-styletags.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/edit-resource-referred-by-multiple-styletags.js

-<html>
-<head>
-<script src="../../../inspector/inspector-test.js"></script>
-<script src="../../../inspector/elements-test.js"></script>
-<script src="../../../inspector/debugger-test.js"></script>
-<script src="../../../inspector/live-edit-test.js"></script>
-<script src="../../../inspector/bindings/bindings-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.
+
+(async function() {
+  TestRunner.addResult(
+      `Tests that editing sourcecode which is referred by multiple stylesheets (via sourceURL comment) updates all stylesheets.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.loadModule('sources_test_runner');
+  await TestRunner.loadModule('bindings_test_runner');
+  await TestRunner.showPanel('sources');
+  await TestRunner.loadHTML(`
+      <div id="inspected">Inspected node</div>
+
+      <style>div{color:red;}
+      /*# sourceURL=stylesheet.css */
+      </style>
+
+      <template id="template">
+      <style>div{color:red;}
+      /*# sourceURL=stylesheet.css */
+      </style>
+      <p>Hi! I'm ShadowDOM v1!</p>
+      </template>
+    `);
 
-function prepareTest()
-{
-    runTest();
-}
-
-async function test() {
   await BindingsTestRunner.attachShadowDOM('shadow1', '#template'),
       await BindingsTestRunner.attachFrame('frame', './resources/frame.html');
   var uiSourceCode = await TestRunner.waitForUISourceCode('stylesheet.css');
@@ -46,26 +57,4 @@ async function test() {
     TestRunner.addResult('Both headers and uiSourceCode content:');
     TestRunner.addResult(dedup.firstValue());
   }
-}
-</script>
-</head>
-<body onload="prepareTest()">
-<p>
-Tests that editing sourcecode which is referred by multiple stylesheets (via sourceURL comment) updates all stylesheets.
-</p>
-
-<div id="inspected">Inspected node</div>
-
-<style>div{color:red;}
-/*# sourceURL=stylesheet.css */
-</style>
-
-<template id='template'>
-<style>div{color:red;}
-/*# sourceURL=stylesheet.css */
-</style>
-<p>Hi! I'm ShadowDOM v1!</p>
-</template>
-
-</body>
-</html>
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/edit-value-inside-property.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/edit-value-inside-property.js

-<html>
-<head>
-<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.
+
+(async function() {
+  TestRunner.addResult(`Verifies that property value editing triggers style update in rendering engine.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <div id="inspected" style="font-size: 19px"></div>
+    `);
 
-function test() {
   ElementsTestRunner.selectNodeAndWaitForStyles('inspected', testEmulateKeypress);
 
   function testEmulateKeypress() {
@@ -38,17 +43,4 @@ function test() {
     TestRunner.addResult('font-size: ' + inlineStyleResult.inlineStyle.getPropertyValue('font-size'));
     TestRunner.completeTest();
   }
-}
-
-</script>
-</head>
-
-<body onload="runTest()">
-<p>
-Verifies that property value editing triggers style update in rendering engine.
-</p>
-
-<div id="inspected" style="font-size: 19px"></div>
-
-</body>
-</html>
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/edit-value-url-with-color-expected.txt

 Tests that colors are not re-formatted inside url(...) when editing property values.
 
-"white" background
-"url( white )" background
-"url(white.png)" background
-"url(../foo/white.png)" background
-"green url(white)" background
-"url(white) green" background
-"url(white) green, url(green)" background
-"url(white), url(green)" background
-"hsl(0, 50%, 50%) url(white)" background
-"url(white) hsl(0, 50%, 50%)" background
-"url(../black/white.png)" background
 rgb(255, 255, 255)
 url( white )
 url(white.png)

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/edit-value-url-with-color.html

-<html>
-<head>
-<script src="../../../inspector/inspector-test.js"></script>
-<script src="../../../inspector/elements-test.js"></script>
-<script>
-
-function test() {
-  var maxIndex = 11;
-  var idIndex = 1;
-
-  Common.Color.detectColorFormat = function() {
-    return Common.Color.Format.RGB;
-  };
-
-  selectDivAndEditValue();
-
-  function selectDivAndEditValue() {
-    ElementsTestRunner.selectNodeAndWaitForStyles('inspected' + idIndex++, editCallback);
-  }
-
-  function editCallback() {
-    var treeElement = ElementsTestRunner.getMatchedStylePropertyTreeItem('background');
-    treeElement.startEditing(treeElement.valueElement);
-    TestRunner.addResult(treeElement.valueElement.textContent);
-    if (idIndex <= maxIndex)
-      selectDivAndEditValue();
-    else
-      TestRunner.completeTest();
-  }
-}
-
-</script>
-</head>
-
-<body onload="runTest()">
-<p>
-Tests that colors are not re-formatted inside url(...) when editing property values.
-</p>
-
-<div id="inspected1" style="background: white">"white" background</div>
-<div id="inspected2" style="background: url( white )">"url( white )" background</div>
-<div id="inspected3" style="background: url(white.png)">"url(white.png)" background</div>
-<div id="inspected4" style="background: url(../foo/white.png)">"url(../foo/white.png)" background</div>
-<div id="inspected5" style="background: green url(white)">"green url(white)" background</div>
-<div id="inspected6" style="background: url(white) green">"url(white) green" background</div>
-<div id="inspected7" style="background: url(white) green, url(green)">"url(white) green, url(green)" background</div>
-<div id="inspected8" style="background: url(white), url(green)">"url(white), url(green)" background</div>
-<div id="inspected9" style="background: hsl(0, 50%, 50%) url(white)">"hsl(0, 50%, 50%) url(white)" background</div>
-<div id="inspected10" style="background: url(white) hsl(0, 50%, 50%)">"url(white) hsl(0, 50%, 50%)" background</div>
-<div id="inspected11" style="background: url(../black/white.png)">"url(../black/white.png)" background</div>
-
-</body>
-</html>

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/edit-value-url-with-color.js

+// 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 colors are not re-formatted inside url(...) when editing property values.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <div id="inspected1" style="background: white">&quot;white&quot; background</div>
+      <div id="inspected2" style="background: url( white )">&quot;url( white )&quot; background</div>
+      <div id="inspected3" style="background: url(white.png)">&quot;url(white.png)&quot; background</div>
+      <div id="inspected4" style="background: url(../foo/white.png)">&quot;url(../foo/white.png)&quot; background</div>
+      <div id="inspected5" style="background: green url(white)">&quot;green url(white)&quot; background</div>
+      <div id="inspected6" style="background: url(white) green">&quot;url(white) green&quot; background</div>
+      <div id="inspected7" style="background: url(white) green, url(green)">&quot;url(white) green, url(green)&quot; background</div>
+      <div id="inspected8" style="background: url(white), url(green)">&quot;url(white), url(green)&quot; background</div>
+      <div id="inspected9" style="background: hsl(0, 50%, 50%) url(white)">&quot;hsl(0, 50%, 50%) url(white)&quot; background</div>
+      <div id="inspected10" style="background: url(white) hsl(0, 50%, 50%)">&quot;url(white) hsl(0, 50%, 50%)&quot; background</div>
+      <div id="inspected11" style="background: url(../black/white.png)">&quot;url(../black/white.png)&quot; background</div>
+    `);
+
+  var maxIndex = 11;
+  var idIndex = 1;
+
+  Common.Color.detectColorFormat = function() {
+    return Common.Color.Format.RGB;
+  };
+
+  selectDivAndEditValue();
+
+  function selectDivAndEditValue() {
+    ElementsTestRunner.selectNodeAndWaitForStyles('inspected' + idIndex++, editCallback);
+  }
+
+  function editCallback() {
+    var treeElement = ElementsTestRunner.getMatchedStylePropertyTreeItem('background');
+    treeElement.startEditing(treeElement.valueElement);
+    TestRunner.addResult(treeElement.valueElement.textContent);
+    if (idIndex <= maxIndex)
+      selectDivAndEditValue();
+    else
+      TestRunner.completeTest();
+  }
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/edit-value-with-trimmed-url-expected.txt

-Tests that editing a CSS property value in the Styles pane restores the original, non-trimmed value text. Bug 107936.
+Tests that editing a CSS property value in the Styles pane restores the original, non-trimmed value text. Bug 107936. https://bugs.webkit.org/show_bug.cgi?id=107936
 
 Viewing 'background' value in Styles:
 transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFW…9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC) repeat-y 50% top

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/edit-value-with-trimmed-url.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/edit-value-with-trimmed-url.js

-<html>
-<head>
-<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.
+
+(async function() {
+  TestRunner.addResult(
+      `Tests that editing a CSS property value in the Styles pane restores the original, non-trimmed value text. Bug 107936. https://bugs.webkit.org/show_bug.cgi?id=107936\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <p>
+      Tests that editing a CSS property value in the Styles pane restores the original, non-trimmed value text. <a href="https://bugs.webkit.org/show_bug.cgi?id=107936">Bug 107936</a>.
+      </p>
+
+      <div id="inspected" style="background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC) repeat-y 50% top">
+
+
+
+      </div>
+    `);
 
-function test() {
   ElementsTestRunner.selectNodeAndWaitForStyles('inspected', step1);
 
   function step1() {
@@ -17,17 +31,4 @@ function test() {
     TestRunner.addResult(treeElement.valueElement.textContent);
     TestRunner.completeTest();
   }
-}
-
-</script>
-</head>
-
-<body onload="runTest()">
-<p>
-Tests that editing a CSS property value in the Styles pane restores the original, non-trimmed value text. <a href="https://bugs.webkit.org/show_bug.cgi?id=107936">Bug 107936</a>.
-</p>
-
-<div id="inspected" style="background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC) repeat-y 50% top" />
-
-</body>
-</html>
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/empty-background-url-expected.txt

@@ -4,7 +4,7 @@ Tests that empty url in the property value does not break inspector.
 element.style { ()
 
 [expanded] 
-#inspected { (empty-background-url.css:1 -> empty-background-url.css:1:13)
+#inspected { (<style>…</style>)
     background-image: url();
 
 [expanded] 

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/empty-background-url.html

-<html>
-<head>
-<script src="../../../inspector/inspector-test.js"></script>
-<script src="../../../inspector/elements-test.js"></script>
-<link rel="stylesheet" href="../styles/resources/empty-background-url.css">
-<script>
-function test() {
-  ElementsTestRunner.selectNodeAndWaitForStylesWithComputed('inspected', step1);
-
-  function step1() {
-    ElementsTestRunner.dumpSelectedElementStyles(true, false);
-    TestRunner.completeTest();
-  }
-}
-</script>
-</head>
-<body onload="runTest()">
-<p>Tests that empty url in the property value does not break inspector.</p>
-<div id="inspected"></div>
-</body>
-</html>

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/empty-background-url.js

+// 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 empty url in the property value does not break inspector.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <style>
+        #inspected {
+            background-image: url();
+        }
+      </style>
+      <div id="inspected"></div>
+    `);
+
+  ElementsTestRunner.selectNodeAndWaitForStylesWithComputed('inspected', step1);
+
+  function step1() {
+    ElementsTestRunner.dumpSelectedElementStyles(true, false);
+    TestRunner.completeTest();
+  }
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/filter-matched-styles.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/filter-matched-styles.js

-<html>
-<head>
-<script src="../../../inspector/inspector-test.js"></script>
-<script src="../../../inspector/elements-test.js"></script>
-<style>
-.mydiv {
-    border: 1px solid black;
-    padding: 10px 10px 10px 10px;
-}
+// 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.
 
-#inspected {
-    border-size: 2px;
-}
+(async function() {
+  TestRunner.addResult(`Verifies that filtering in StylesSidebarPane works as expected.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <style>
+      .mydiv {
+          border: 1px solid black;
+          padding: 10px 10px 10px 10px;
+      }
+
+      #inspected {
+          border-size: 2px;
+      }
+
+      </style>
+      <div style="margin: 1px;" class="mydiv" id="inspected"></div>
+    `);
 
-</style>
-<script>
-function test() {
   TestRunner.runTestSuite([
     function selectInitialNode(next) {
       ElementsTestRunner.selectNodeAndWaitForStyles('inspected', next);
@@ -38,11 +44,4 @@ function test() {
       next();
     }
   ]);
-}
-</script>
-</head>
-<body onload="runTest()">
-<p>Verifies that filtering in StylesSidebarPane works as expected.</p>
-<div style="margin: 1px;" class="mydiv" id="inspected"></div>
-</body>
-</html>
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-1/resources/dynamic-style-tag.html

+<head>
+<style>
+/* comment */.inline-style-added-by-parser {
+    color: red;
+}
+</style>
+<style>
+.inline-style-added-by-parser-with-source-url {
+    color: green;
+}
+/*# sourceURL=inlineStyleAddedByParser.css*/
+</style>
+<script>
+    document.write("<style>\n.inline-style-added-by-parser-in-document-write {\n   color: blue;\n}\n</style>");
+    document.write("<style>\n.inline-style-added-by-document-write-with-source-url {\n   color: yellow;\n}\n/*# sourceURL=inlineStyleAddedByDocumentWrite.css*/\n</style>");
+    addStyleElement(".inline-style-created-by-script {\n   color: orange;\n}");
+    addStyleElement(".inline-style-created-by-script-with-source-url {\n   color: grey;\n}\n/*# sourceURL=inlineStyleCreatedByScript.css*/");
+
+    function addStyleElement(styleContent)
+    {
+        var styleElement = document.createElement("style");
+        styleElement.textContent = styleContent;
+        document.head.appendChild(styleElement);
+    }
+</script>
+</head>
+<div id="inspected" style="color:red" class="inline-style-added-by-parser inline-style-added-by-parser-with-source-url inline-style-added-by-parser-in-document-write inline-style-added-by-document-write-with-source-url inline-style-created-by-script inline-style-created-by-script-with-source-url"></div>
\ No newline at end of file