Commit 9056282a authored by Erik Luo's avatar Erik Luo Committed by Commit Bot

DevTools: migrate styles-3, styles-4, and most of styles-2 tests

Bug: 667560
Change-Id: I99f69cf7105902a4f8c0bac38442ff058182338a
Reviewed-on: https://chromium-review.googlesource.com/804675
Commit-Queue: Erik Luo <luoe@chromium.org>
Reviewed-by: default avatarWill Chen <chenwilliam@chromium.org>
Cr-Commit-Position: refs/heads/master@{#521443}
parent 5e196a51
......@@ -6253,8 +6253,8 @@ 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-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-2/add-import-rule.js [ Failure ]
crbug.com/591099 http/tests/devtools/elements/styles-3/style-rule-from-imported-stylesheet.js [ Failure ]
crbug.com/591099 http/tests/devtools/elements/styles-3/styles-add-new-rule-tab.js [ Failure Pass ]
crbug.com/591099 http/tests/devtools/elements/styles-3/styles-add-new-rule.js [ Failure Pass ]
crbug.com/591099 http/tests/devtools/elements/styles-3/styles-change-node-while-editing.js [ Failure ]
......
......@@ -234,7 +234,7 @@ crbug.com/516319 [ Win ] http/tests/fetch/ [ Slow ]
crbug.com/459009 crypto/subtle/ [ Slow ]
crbug.com/528419 http/tests/devtools/elements/styles-2/pseudo-elements.html [ Slow ]
crbug.com/528419 http/tests/devtools/elements/styles-2/pseudo-elements.js [ Slow ]
crbug.com/529345 [ Win10 ] paint/masks/fieldset-mask.html [ Slow ]
crbug.com/552556 [ Win Linux ] virtual/threaded/fast/scroll-behavior/overflow-scroll-root-frame-animates.html [ Slow ]
......
Tests that adding an @import with data URI does not lead to stylesheet collection crbug.com/644719
== Matched rules before @import added ==
[expanded]
element.style { ()
[expanded]
span { (add-import-rule.html:4 -> add-import-rule.html:4:14)
span { (<style>…</style>)
color: red;
......
<!DOCTYPE html>
<script src="../../../inspector/inspector-test.js"></script>
<script src="../../../inspector/elements-test.js"></script>
<style>span { color: 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(`Tests that adding an @import with data URI does not lead to stylesheet collection crbug.com/644719\n`);
await TestRunner.loadModule('elements_test_runner');
await TestRunner.showPanel('elements');
await TestRunner.loadHTML(`
<!DOCTYPE html>
<style>span { color: red }</style>
<span id="styled-span"></span>
`);
var nodeId;
var sheetId;
......@@ -30,7 +38,4 @@ function test() {
ElementsTestRunner.dumpSelectedElementStyles(true);
TestRunner.completeTest();
}
}
</script>
<body onload="runTest()">
<span id="styled-span"></span>
})();
Tests that forced element state is reflected in the DOM tree and Styles pane.
Test text
DIV with :hover and :active
[expanded]
element.style { ()
[expanded]
div:active, a:active { (force-pseudo-state.html:12 -> force-pseudo-state.html:12:23)
div:active, a:active { (<style>…</style>)
font-weight: bold;
[expanded]
div:hover, a:hover { (force-pseudo-state.html:4 -> force-pseudo-state.html:4:21)
div:hover, a:hover { (<style>…</style>)
color: red;
[expanded]
......@@ -25,8 +24,7 @@ Style Attribute { ()
- <html> [subtreeMarkerCount:1]
+ <head>…</head>
- <body id="mainBody" class="main1 main2 mainpage" onload="runTest()" style="font-weight: normal; width: 85%; background-image: url(bar.png)"> [subtreeMarkerCount:1]
<p>\nTests that forced element state is reflected in the DOM tree and Styles pane.\n</p>
- <body id="mainBody" class="main1 main2 mainpage" style="font-weight: normal; width: 85%; background-image: url(bar.png)"> [subtreeMarkerCount:1]
<div id="div">Test text</div> [markers:[pseudo-state-marker=hover,active], subtreeMarkerCount:1]
</body>
</html>
......@@ -36,11 +34,11 @@ DIV with :active and :focus
element.style { ()
[expanded]
div:active, a:active { (force-pseudo-state.html:12 -> force-pseudo-state.html:12:23)
div:active, a:active { (<style>…</style>)
font-weight: bold;
[expanded]
div:focus, a:focus { (force-pseudo-state.html:8 -> force-pseudo-state.html:8:21)
div:focus, a:focus { (<style>…</style>)
border: 1px solid green;
border-top-color: green;
border-top-style: solid;
......@@ -78,8 +76,7 @@ Style Attribute { ()
- <html> [subtreeMarkerCount:1]
+ <head>…</head>
- <body id="mainBody" class="main1 main2 mainpage" onload="runTest()" style="font-weight: normal; width: 85%; background-image: url(bar.png)"> [subtreeMarkerCount:1]
<p>\nTests that forced element state is reflected in the DOM tree and Styles pane.\n</p>
- <body id="mainBody" class="main1 main2 mainpage" style="font-weight: normal; width: 85%; background-image: url(bar.png)"> [subtreeMarkerCount:1]
<div id="div">Test text</div> [markers:[pseudo-state-marker=active,focus], subtreeMarkerCount:1]
</body>
</html>
......@@ -99,8 +96,7 @@ Style Attribute { ()
- <html>
+ <head>…</head>
- <body id="mainBody" class="main1 main2 mainpage" onload="runTest()" style="font-weight: normal; width: 85%; background-image: url(bar.png)">
<p>\nTests that forced element state is reflected in the DOM tree and Styles pane.\n</p>
- <body id="mainBody" class="main1 main2 mainpage" style="font-weight: normal; width: 85%; background-image: url(bar.png)">
<div id="div">Test text</div>
</body>
</html>
......
<html>
<head>
<style>
div:hover, a:hover {
color: red;
}
// 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.
div:focus, a:focus {
border: 1px solid green;
}
(async function() {
TestRunner.addResult(`Tests that forced element state is reflected in the DOM tree and Styles pane.\n`);
await TestRunner.loadModule('elements_test_runner');
await TestRunner.showPanel('elements');
await TestRunner.loadHTML(`
<head>
<style>
div:hover, a:hover {
color: red;
}
div:active, a:active {
font-weight: bold;
}
div:focus, a:focus {
border: 1px solid green;
}
</style>
<script src="../../../inspector/inspector-test.js"></script>
<script src="../../../inspector/elements-test.js"></script>
<script>
div:active, a:active {
font-weight: bold;
}
</style>
</head>
<body id="mainBody" class="main1 main2 mainpage" style="font-weight: normal; width: 85%; background-image: url(bar.png)">
<div id="div">Test text</div>
</body>
`);
function test() {
ElementsTestRunner.nodeWithId('div', foundDiv);
var divNode;
......@@ -67,13 +76,4 @@ function test() {
dumpData();
TestRunner.completeTest();
}
}
</script>
</head>
<body id="mainBody" class="main1 main2 mainpage" onload="runTest()" style="font-weight: normal; width: 85%; background-image: url(bar.png)">
<p>
Tests that forced element state is reflected in the DOM tree and Styles pane.
</p>
<div id="div">Test text</div>
</body>
</html>
})();
......@@ -25,24 +25,24 @@ element.style { ()
======== Pseudo ::before element ========
[expanded]
[$#inspected:before, $].some-other-selector { (pseudo-elements.html:4 -> pseudo-elements.html:4:42)
[$#inspected:before, $].some-other-selector { (<style>…</style>)
content: "BEFORE";
======== Pseudo ::after element ========
[expanded]
[$#inspected:after$] { (pseudo-elements.html:8 -> pseudo-elements.html:8:19)
[$#inspected:after$] { (<style>…</style>)
content: "AFTER";
Running: dumpBeforeStyles
[expanded]
[$#inspected:before, $].some-other-selector { (pseudo-elements.html:4 -> pseudo-elements.html:4:42)
[$#inspected:before, $].some-other-selector { (<style>…</style>)
content: "BEFORE";
Running: dumpAfterStyles
[expanded]
[$#inspected:after$] { (pseudo-elements.html:8 -> pseudo-elements.html:8:19)
[$#inspected:after$] { (<style>…</style>)
content: "AFTER";
......
<html>
<head>
<style>
#inspected:before, .some-other-selector {
content: "BEFORE";
}
#inspected:after {
content: "AFTER";
}
</style>
<style>
#empty::before {
content: "EmptyBefore";
}
#empty::after {
content: "EmptyAfter";
}
</style>
<script src="../../../inspector/inspector-test.js"></script>
<script src="../../../inspector/elements-test.js"></script>
<script>
function removeLastRule()
{
document.styleSheets[0].deleteRule(document.styleSheets[0].cssRules.length - 1);
}
function addAfterRule()
{
document.styleSheets[0].addRule("#inspected:after", "content: \"AFTER\"");
}
function addBeforeRule()
{
document.styleSheets[0].addRule("#inspected:before", "content: \"BEFORE\"");
}
function modifyTextContent()
{
document.getElementById("inspected").textContent = "bar";
}
function clearTextContent()
{
document.getElementById("inspected").textContent = "";
}
function removeNode()
{
document.getElementById("inspected").remove();
}
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 pseudo elements and their styles are handled properly.\n`);
await TestRunner.loadModule('elements_test_runner');
await TestRunner.showPanel('elements');
await TestRunner.loadHTML(`
<style>
#inspected:before, .some-other-selector {
content: "BEFORE";
}
#inspected:after {
content: "AFTER";
}
</style>
<style>
#empty::before {
content: "EmptyBefore";
}
#empty::after {
content: "EmptyAfter";
}
</style>
<div id="container">
<div id="inspected">Text</div>
<div id="empty"></div>
</div>
`);
await TestRunner.evaluateInPagePromise(`
function removeLastRule()
{
document.styleSheets[0].deleteRule(document.styleSheets[0].cssRules.length - 1);
}
function addAfterRule()
{
document.styleSheets[0].addRule("#inspected:after", "content: \\"AFTER\\"");
}
function addBeforeRule()
{
document.styleSheets[0].addRule("#inspected:before", "content: \\"BEFORE\\"");
}
function modifyTextContent()
{
document.getElementById("inspected").textContent = "bar";
}
function clearTextContent()
{
document.getElementById("inspected").textContent = "";
}
function removeNode()
{
document.getElementById("inspected").remove();
}
`);
var containerNode;
var inspectedNode;
......@@ -157,20 +166,4 @@ function test() {
callback();
}
}
}
</script>
</head>
<body onload="runTest()">
<p>
Tests that pseudo elements and their styles are handled properly.
</p>
<div id="container">
<div id="inspected">Text</div>
<div id="empty"></div>
</div>
</body>
</html>
})();
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.
Tests that rules from imported stylesheets are correctly shown and are editable in inspector.
Rules before toggling:
Rules before toggling:
[expanded]
element.style { ()
......
<html>
<head>
<link rel="import" href="../styles/resources/imported-stylesheet.html"/>
<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 rules from imported stylesheets are correctly shown and are editable in inspector.\n`);
await TestRunner.loadModule('elements_test_runner');
await TestRunner.showPanel('elements');
await TestRunner.loadHTML(`
<div id="square" class="square"></div>
`);
await TestRunner.addHTMLImport('../styles/resources/imported-stylesheet.html');
function test() {
ElementsTestRunner.selectNodeAndWaitForStyles('square', step1);
function step1() {
......@@ -20,12 +26,4 @@ function test() {
ElementsTestRunner.dumpSelectedElementStyles(true, false, true);
TestRunner.completeTest();
}
}
</script>
</head>
<body onload="runTest()">
<p>Tests that rules from imported stylesheets are correctly shown and are editable in inspector.</p>
<div id="square" class="square"></div>
</body>
</html>
})();
<!DOCTYPE html>
<html>
<head>
<script src="../../../inspector/inspector-test.js"></script>
<script src="../../../inspector/elements-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.
<script>
(async function() {
TestRunner.addResult(
`Tests that disabling shorthand removes the "overriden" mark from the UA shorthand it overrides.\n`);
await TestRunner.loadModule('elements_test_runner');
await TestRunner.showPanel('elements');
await TestRunner.loadHTML(`
<body id="body-id" style="margin: 10px">
`);
function test() {
ElementsTestRunner.selectNodeAndWaitForStyles('body-id', step1);
function step1() {
......@@ -28,14 +32,4 @@ function test() {
ElementsTestRunner.dumpSelectedElementStyles(true, false, true);
TestRunner.completeTest();
}
}
</script>
</head>
<body onload="runTest()" id="body-id" style="margin: 10px">
<p>
Tests that disabling shorthand removes the "overriden" mark from the UA shorthand it overrides.
</p>
</body>
</html>
})();
Verify that inline style sourceMappingURL is resolved properly.
.red,body{color:red}body{background-color:red}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1peGluLmxlc3MiLCJ0ZXN0Lmxlc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsS0NJQSxLREhFLE1BQUEsSUNHRixLQUVFLGlCQUFBIn0=*/
[expanded]
element.style { ()
......
<html>
<head>
<script src="../../../inspector/inspector-test.js"></script>
<script src="../../../inspector/elements-test.js"></script>
<script>
function embedInlineStyleSheet()
{
var style = document.createElement("style");
style.type = "text/css";
style.textContent = document.querySelector(".stylesheet-text").textContent;
document.head.appendChild(style);
}
function test() {
SDK.targetManager.addModelListener(SDK.CSSModel, SDK.CSSModel.Events.StyleSheetAdded, function() {});
TestRunner.evaluateInPage('embedInlineStyleSheet()', onEvaluated);
function onEvaluated() {
ElementsTestRunner.selectNodeAndWaitForStyles('inspect', onSelected);
}
function onSelected() {
ElementsTestRunner.dumpSelectedElementStyles(true, false, false);
TestRunner.completeTest();
}
};
</script>
</head>
<body id="inspect" onload="runTest()">
<p>Verify that inline style sourceMappingURL is resolved properly.</p>
<pre class="stylesheet-text">.red,body{color:red}body{background-color:red}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1peGluLmxlc3MiLCJ0ZXN0Lmxlc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsS0NJQSxLREhFLE1BQUEsSUNHRixLQUVFLGlCQUFBIn0=*/</pre>
</body>
</html>
// 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(`Verify that inline style sourceMappingURL is resolved properly.\n`);
await TestRunner.loadModule('elements_test_runner');
await TestRunner.showPanel('elements');
await TestRunner.loadHTML(`
<body id="inspect">
<pre class="stylesheet-text">.red,body{color:red}body{background-color:red}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1peGluLmxlc3MiLCJ0ZXN0Lmxlc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsS0NJQSxLREhFLE1BQUEsSUNHRixLQUVFLGlCQUFBIn0=*/</pre>
</body>
`);
await TestRunner.evaluateInPagePromise(`
function embedInlineStyleSheet()
{
var style = document.createElement("style");
style.type = "text/css";
style.textContent = document.querySelector(".stylesheet-text").textContent;
document.head.appendChild(style);
}
`);
SDK.targetManager.addModelListener(SDK.CSSModel, SDK.CSSModel.Events.StyleSheetAdded, function() {});
TestRunner.evaluateInPage('embedInlineStyleSheet()', onEvaluated);
function onEvaluated() {
ElementsTestRunner.selectNodeAndWaitForStyles('inspect', onSelected);
}
function onSelected() {
ElementsTestRunner.dumpSelectedElementStyles(true, false, false);
TestRunner.completeTest();
}
})();
<style>
body {
color: green;
}
/*# sourceURL=inlineStyleSheet.css */
</style>
<script>
function addInlineStyleSheet()
{
var styleElement = document.createElement("style");
styleElement.textContent = "body { color: black; }\n/*# sourceURL=css/addedInlineStylesheet.css */";
document.head.appendChild(styleElement);
}
function addInlineStyleSheetNonRelative()
{
var styleElement = document.createElement("style");
styleElement.textContent = "body { color: red; }\n/*# sourceURL=css/nonRelativeInlineStylesheet.css */";
document.head.appendChild(styleElement);
}
function addInlineStyleSheetMultiple()
{
var styleElement = document.createElement("style");
styleElement.textContent = "\n/*# sourceURL=1.css */\nbody { color: red; }\n/*# sourceURL=2.css*/\n/*# sourceURL=css/addedInlineStylesheetMultiple.css */";
document.head.appendChild(styleElement);
}
function addInlineStyleSheetDeprecated()
{
var styleElement = document.createElement("style");
styleElement.textContent = "body { color: black; }\n/*@ sourceURL=css/addedInlineStylesheetDeprecated.css */";
document.head.appendChild(styleElement);
}
</script>
\ No newline at end of file
Tests that InspectorCSSAgent API methods work as expected.
H1
Running: test_styles
......
<html>
// 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 InspectorCSSAgent API methods work as expected.\n`);
await TestRunner.loadModule('elements_test_runner');
await TestRunner.showPanel('elements');
await TestRunner.loadHTML(`
<head>
<link rel="stylesheet" href="resources/styles-new-API.css">
<style>
<script src="../../../inspector/inspector-test.js"></script>
<script src="../../../inspector/elements-test.js"></script>
<script>
/* An inline stylesheet */
body.mainpage {
text-decoration: none; /* at least one valid property is necessary for WebCore to match a rule */
;badproperty: 1badvalue1;
}
body.mainpage {
prop1: val1;
prop2: val2;
}
body:hover {
color: #CDE;
}
</style>
</head>
<body id="mainBody" class="main1 main2 mainpage" style="font-weight: normal; width: 85%; background-image: url(bar.png)">
<table width="50%" id="thetable">
</table>
<h1 id="toggle">H1</h1>
</body>
`);
function test() {
var bodyId;
TestRunner.runTestSuite([
function test_styles(next) {
......@@ -184,35 +210,4 @@ function test() {
next();
},
]);
}
</script>
<style>
/* An inline stylesheet */
body.mainpage {
text-decoration: none; /* at least one valid property is necessary for WebCore to match a rule */
;badproperty: 1badvalue1;
}
body.mainpage {
prop1: val1;
prop2: val2;
}
body:hover {
color: #CDE;
}
</style>
</head>
<body id="mainBody" class="main1 main2 mainpage" onload="runTest()" style="font-weight: normal; width: 85%; background-image: url(bar.png)">
<p>
Tests that InspectorCSSAgent API methods work as expected.
</p>
<table width="50%" id="thetable">
</table>
<h1 id="toggle">H1</h1>
</body>
</html>
})();
<html>
<head>
<script type="text/javascript" src="../../../inspector/inspector-test.js"></script>
<script type="text/javascript" src="../../../inspector/debugger-test.js"></script>
<link rel="stylesheet">
<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 addStyleSheet()
{
var link = document.querySelector("link");
link.setAttribute("href", "./resources/styles-rerequest-sourcemap-on-watchdog.css");
}
(async function() {
TestRunner.addResult(
`Verifies that the sourceMap is in fact re-requested from network as SASS watchdog updates the CSS file.\n`);
await TestRunner.loadModule('sources_test_runner');
await TestRunner.showPanel('sources');
await TestRunner.showPanel('elements');
await TestRunner.loadHTML(`<link rel="stylesheet">`);
await TestRunner.evaluateInPagePromise(`
function addStyleSheet()
{
var link = document.querySelector("link");
link.setAttribute("href", "./resources/styles-rerequest-sourcemap-on-watchdog.css");
}
`);
function test() {
TestRunner.cssModel.sourceMapManager().addEventListener(
SDK.SourceMapManager.Events.SourceMapAttached, onInitialSourceMap);
......@@ -32,11 +37,4 @@ function test() {
TestRunner.addResult('SourceMap successfully re-requested.');
TestRunner.completeTest();
}
}
</script>
</head>
<body onLoad="runTest();">
<p>Verifies that the sourceMap is in fact re-requested from network as SASS watchdog updates the CSS file.</p>
</body>
</html>
})();
<html>
<head>
// 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 proper data and start/end offset positions are reported for CSS style declarations and properties.\n`);
await TestRunner.loadModule('elements_test_runner');
await TestRunner.showPanel('elements');
await TestRunner.loadHTML(`
<head>
<link rel="stylesheet" href="../styles/resources/styles-source-offsets.css">
<style>
<script src="../../../inspector/inspector-test.js"></script>
<script src="../../../inspector/elements-test.js"></script>
<script>
body.mainpage {
text-decoration: none; /* at least one valid property is necessary for WebCore to match a rule */
badproperty: 1badvalue1;
}
</style>
</head>
<body id="mainBody" class="main1 main2 mainpage" style="font-weight: normal; width: 80%">
</body>
`);
function test() {
function dumpStyleData(ruleOrStyle) {
var isRule = !!(ruleOrStyle.style);
var style;
......@@ -53,24 +68,4 @@ function test() {
dumpStyleData(response.inlineStyle);
TestRunner.completeTest();
}
}
</script>
<style>
body.mainpage {
text-decoration: none; /* at least one valid property is necessary for WebCore to match a rule */
badproperty: 1badvalue1;
}
</style>
</head>
<body id="mainBody" class="main1 main2 mainpage" onload="runTest()" style="font-weight: normal; width: 80%">
<p>
Tests that proper data and start/end offset positions are reported for CSS style declarations and properties.
</p>
</body>
</html>
})();
<html>
<head>
<script src="../../../inspector/inspector-test.js"></script>
<script src="../../../inspector/debugger-test.js"></script>
<style>
body {
color: green;
}
// 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.
/*# sourceURL=inlineStyleSheet.css */
</style>
<script>
function addInlineStyleSheet()
{
var styleElement = document.createElement("style");
styleElement.textContent = "body { color: black; }\n/*# sourceURL=css/addedInlineStylesheet.css */";
document.head.appendChild(styleElement);
}
(async function() {
TestRunner.addResult(`Tests that stylesheets with sourceURL comment are shown in the Sources panel.\n`);
await TestRunner.loadModule('sources_test_runner');
await TestRunner.showPanel('sources');
await TestRunner.showPanel('elements');
await TestRunner.navigatePromise('resources/stylesheet-source-url-comment.html');
function addInlineStyleSheetNonRelative()
{
var styleElement = document.createElement("style");
styleElement.textContent = "body { color: red; }\n/*# sourceURL=css/nonRelativeInlineStylesheet.css */";
document.head.appendChild(styleElement);
}
function addInlineStyleSheetMultiple()
{
var styleElement = document.createElement("style");
styleElement.textContent = "\n/*# sourceURL=1.css */\nbody { color: red; }\n/*# sourceURL=2.css*/\n/*# sourceURL=css/addedInlineStylesheetMultiple.css */";
document.head.appendChild(styleElement);
}
function addInlineStyleSheetDeprecated()
{
var styleElement = document.createElement("style");
styleElement.textContent = "body { color: black; }\n/*@ sourceURL=css/addedInlineStylesheetDeprecated.css */";
document.head.appendChild(styleElement);
}
function test() {
function forEachHeaderMatchingURL(url, handler) {
var headers = TestRunner.cssModel.styleSheetHeaders();
for (var i = 0; i < headers.length; ++i) {
......@@ -109,13 +79,4 @@ function test() {
}
}
]);
};
</script>
</head>
<body onload="runTest()">
<p>Tests that stylesheets with sourceURL comment are shown in the Sources panel.</p>
</body>
</html>
})();
<!DOCTYPE html>
<!-- Test for crbug.com/789263 -->
<style>
** { }
@supports (display: flex) { }
</style>
<script src="../../../inspector/inspector-test.js"></script>
<script>
function test() {
TestRunner.completeTest();
}
</script>
<body onload="runTest()">
This test passes if it doesn't crash.
</body>
// 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 crash. crbug.com/789263\n`);
await TestRunner.showPanel('elements');
await TestRunner.loadHTML(`
<!DOCTYPE html>
<style>
** { }
@supports (display: flex) { }
</style>
This test passes if it doesn't crash.
`);
TestRunner.completeTest();
})();
......@@ -560,6 +560,24 @@ TestRunner.addStylesheetTag = function(path) {
})();
`);
};
/**
* @param {string} path
* @return {!Promise<*>}
*/
TestRunner.addHTMLImport = function(path) {
return TestRunner.evaluateInPageAsync(`
(function(){
var link = document.createElement('link');
link.rel = 'import';
link.href = '${path}';
var promise = new Promise(r => link.onload = r);
document.body.append(link);
return promise;
})();
`);
};
/**
* @param {string} path
* @param {!Object|undefined} options
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment