| Index: LayoutTests/inspector/styles/shadow-dom-rules.html
|
| diff --git a/LayoutTests/inspector/styles/host-rules.html b/LayoutTests/inspector/styles/shadow-dom-rules.html
|
| similarity index 52%
|
| copy from LayoutTests/inspector/styles/host-rules.html
|
| copy to LayoutTests/inspector/styles/shadow-dom-rules.html
|
| index 7219f9b99ca832d49cf388ab6166da5979f13e1a..f58ec5bb952afac936208578fd09b8cc135f987c 100644
|
| --- a/LayoutTests/inspector/styles/host-rules.html
|
| +++ b/LayoutTests/inspector/styles/shadow-dom-rules.html
|
| @@ -1,21 +1,14 @@
|
| <html>
|
| <head>
|
| -<style>
|
| -* {
|
| - background-color: papayawhip;
|
| -}
|
| -</style>
|
| <script src="../../http/tests/inspector/inspector-test.js"></script>
|
| <script src="../../http/tests/inspector/elements-test.js"></script>
|
| <script>
|
| +
|
| function createShadowRoot()
|
| {
|
| - var root = host.createShadowRoot();
|
| - root.appendChild(document.createElement('content'));
|
| - var styles = document.createElement('style');
|
| - styles.textContent = '@host { * { border: 1px solid black; background-color: red } } content::-webkit-distributed(div) { font-size: 24px }';
|
| - root.appendChild(styles);
|
| - root.appendChild(document.createElement('content'));
|
| + var template = document.querySelector('#tmpl');
|
| + var root = document.querySelector('#host').webkitCreateShadowRoot();
|
| + root.appendChild(template.content.cloneNode(true));
|
| }
|
|
|
| function test()
|
| @@ -27,7 +20,7 @@ function test()
|
| InspectorTest.evaluateInPage("createShadowRoot()", callback);
|
| function callback()
|
| {
|
| - InspectorTest.selectNodeAndWaitForStyles("host", next);
|
| + InspectorTest.selectNodeAndWaitForStyles("inner", next);
|
| }
|
| },
|
|
|
| @@ -44,9 +37,13 @@ function test()
|
|
|
| <body onload="runTest()">
|
| <p>
|
| -Tests that @host-provided styles are displayed in the Styles pane. <a href="https://bugs.webkit.org/show_bug.cgi?id=112664">Bug 112664</a>
|
| +This test checks that style sheets hosted inside shadow roots
|
| +could be inspected.
|
| </p>
|
| -
|
| -<div id="host" style="background-color: white;">Content</div>
|
| +<div id="host"></div>
|
| +<template id="tmpl">
|
| + <style> .red { color: red; } </style>
|
| + <div id="inner" class="red">hi!</div>
|
| +</template>
|
| </body>
|
| </html>
|
|
|
Chromium Code Reviews
Issue 23629018:
DevTools: show styles for shadow dom elements (Closed)
Base URL: svn://svn.chromium.org/blink/trunk