Skip to content

GitLab

T
tangled
Commit 610d82c6 authored by Erik Luo's avatar Erik Luo Committed by Commit Bot
Browse files
Options

DevTools: migrate Elements edit, shadow, and most root level tests 

Bug: 667560
Change-Id: Id0d481cde735bffe33504486f1378a5f9fbaaec4
Reviewed-on: https://chromium-review.googlesource.com/807401
Commit-Queue: Erik Luo <luoe@chromium.org>
Reviewed-by: default avatarWill Chen <chenwilliam@chromium.org>
Cr-Commit-Position: refs/heads/master@{#521824}
parent 446da8a7
Hide whitespace changes
Inline Side-by-side
Showing with 334 additions and 353 deletions
third_party/WebKit/LayoutTests/FlagExpectations/enable-blink-features=LayoutNG
View file @ 610d82c6
...@@ -6244,7 +6244,7 @@ crbug.com/591099 http/tests/devtools/console/shadow-element.js [ Crash Timeout ] ...@@ -6244,7 +6244,7 @@ crbug.com/591099 http/tests/devtools/console/shadow-element.js [ Crash Timeout ]
crbug.com/591099 http/tests/devtools/editor/text-editor-ctrl-d-1.js [ Crash Timeout ] crbug.com/591099 http/tests/devtools/editor/text-editor-ctrl-d-1.js [ Crash Timeout ]
crbug.com/591099 http/tests/devtools/editor/text-editor-ctrl-d-2.js [ Pass Timeout ] crbug.com/591099 http/tests/devtools/editor/text-editor-ctrl-d-2.js [ Pass Timeout ]
crbug.com/591099 http/tests/devtools/elements/edit/edit-dom-actions-1.js [ Crash Pass Timeout ] crbug.com/591099 http/tests/devtools/elements/edit/edit-dom-actions-1.js [ Crash Pass Timeout ]
crbug.com/591099 http/tests/devtools/elements/edit/edit-dom-actions-4.html [ Timeout ] crbug.com/591099 http/tests/devtools/elements/edit/edit-dom-actions-4.js [ 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-restore-selection-when-node-comes-later.js [ Failure ]
crbug.com/591099 http/tests/devtools/elements/event-listener-sidebar-jquery1.js [ Failure ] 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-jquery2.js [ Failure ]
......
third_party/WebKit/LayoutTests/http/tests/devtools/elements/edit/edit-dom-actions-4-expected.txt
View file @ 610d82c6
Tests that user can mutate DOM by means of elements panel. Tests that user can mutate DOM by means of elements panel.
A#nbsp;B#ensp;C#emsp;D#thinsp;E#zwnj;F#zwj;G#rlm;H#lrm;I
Running: testSetUp Running: testSetUp
......
third_party/WebKit/LayoutTests/http/tests/devtools/elements/edit/edit-dom-actions-4.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/edit/edit-dom-actions-4.js
View file @ 610d82c6
<html> // Copyright 2017 The Chromium Authors. All rights reserved.
<head> // Use of this source code is governed by a BSD-style license that can be
<script src="../../../inspector/inspector-test.js"></script> // found in the LICENSE file.
<script src="../../../inspector/elements-test.js"></script>
<script src="../../resources/edit-dom-test.js"></script> (async function() {
<script> TestRunner.addResult(`Tests that user can mutate DOM by means of elements panel.\n`);
await TestRunner.loadModule('elements_test_runner');
await TestRunner.showPanel('elements');
await TestRunner.loadHTML(`
<div>
<div id="testEditInvisibleCharsAsHTML">
<div id="node-with-invisible-chars">A&#xA0;B&#x2002;C&#x2003;D&#x2009;E&#x200C;F&#x200D;G&#x200F;H&#x200E;I</div>
</div>
<div id="testEditScript">
<script id="node-to-edit-script">
var i = 0;
var j = 5;
for (; i < j; ++i) {
// Do nothing.
}
</script>
</div>
<div id="testEditSVG">
<svg id="node-to-edit-svg-attribute" xmlns:xlink="test" width="100">
</svg>
</div>
</div>
`);
function test() {
// Save time on style updates. // Save time on style updates.
Elements.StylesSidebarPane.prototype.update = function() {}; Elements.StylesSidebarPane.prototype.update = function() {};
Elements.MetricsSidebarPane.prototype.update = function() {}; Elements.MetricsSidebarPane.prototype.update = function() {};
...@@ -23,7 +48,9 @@ function test() { ...@@ -23,7 +48,9 @@ function test() {
var treeOutline = ElementsTestRunner.firstElementsTreeOutline(); var treeOutline = ElementsTestRunner.firstElementsTreeOutline();
var treeElement = treeOutline.findTreeElement(node); var treeElement = treeOutline.findTreeElement(node);
treeOutline.toggleEditAsHTML(node); treeOutline.toggleEditAsHTML(node);
TestRunner.deprecatedRunAfterPendingDispatches(step2); TestRunner.deprecatedRunAfterPendingDispatches(() => {
self.runtime.extension(UI.TextEditorFactory).instance().then(step2);
});
function step2() { function step2() {
var editor = treeElement._editing.editor; var editor = treeElement._editing.editor;
...@@ -33,7 +60,7 @@ function test() { ...@@ -33,7 +60,7 @@ function test() {
event.isMetaOrCtrlForTest = true; event.isMetaOrCtrlForTest = true;
editor.widget().element.dispatchEvent(event); editor.widget().element.dispatchEvent(event);
TestRunner.deprecatedRunAfterPendingDispatches( TestRunner.deprecatedRunAfterPendingDispatches(
ElementsTestRunner.expandElementsTree.bind(InspectorTest, done)); ElementsTestRunner.expandElementsTree.bind(ElementsTestRunner, done));
} }
} }
}, },
...@@ -63,42 +90,9 @@ function test() { ...@@ -63,42 +90,9 @@ function test() {
event.isMetaOrCtrlForTest = true; event.isMetaOrCtrlForTest = true;
treeElement._editing.editor.widget().element.dispatchEvent(event); treeElement._editing.editor.widget().element.dispatchEvent(event);
TestRunner.deprecatedRunAfterPendingDispatches( TestRunner.deprecatedRunAfterPendingDispatches(
ElementsTestRunner.expandElementsTree.bind(InspectorTest, done)); ElementsTestRunner.expandElementsTree.bind(ElementsTestRunner, done));
} }
} }
} }
]); ]);
} })();
</script>
</head>
<body onload="runTest()">
<p>
Tests that user can mutate DOM by means of elements panel.
</p>
<div>
<div id="testEditInvisibleCharsAsHTML">
<div id="node-with-invisible-chars">A&nbsp;B&ensp;C&emsp;D&thinsp;E&zwnj;F&zwj;G&rlm;H&lrm;I</div>
</div>
<div id="testEditScript">
<script id="node-to-edit-script">
var i = 0;
var j = 5;
for (; i < j; ++i) {
// Do nothing.
}
</script>
</div>
<div id="testEditSVG">
<svg id="node-to-edit-svg-attribute" xmlns:xlink="test" width="100">
</svg>
</div>
</div>
</body>
</html>
third_party/WebKit/LayoutTests/http/tests/devtools/elements/edit/shadow-dom-modify-chardata-expected.txt
View file @ 610d82c6
Tests that elements panel updates shadow dom tree structure upon typing. Tests that elements panel updates shadow dom tree structure upon typing.
Running: testDumpInitial Running: testDumpInitial
========= Original ======== ========= Original ========
- <div id="container"> - <div id="container">
......
third_party/WebKit/LayoutTests/http/tests/devtools/elements/edit/shadow-dom-modify-chardata.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/edit/shadow-dom-modify-chardata.js
View file @ 610d82c6
<html> // Copyright 2017 The Chromium Authors. All rights reserved.
<head> // Use of this source code is governed by a BSD-style license that can be
<script src="../../../inspector/inspector-test.js"></script> // found in the LICENSE file.
<script src="../../../inspector/elements-test.js"></script>
<script> (async function() {
TestRunner.addResult(`Tests that elements panel updates shadow dom tree structure upon typing.\n`);
function typeText() await TestRunner.loadModule('elements_test_runner');
{ await TestRunner.showPanel('elements');
var input = document.getElementById("input1"); await TestRunner.loadHTML(`
input.focus(); <div id="container"><input type="text" id="input1"></div>
eventSender.keyDown("B"); <script>
eventSender.keyDown("a"); function typeText()
eventSender.keyDown("r"); {
} var input = document.getElementById("input1");
input.focus();
eventSender.keyDown("B");
eventSender.keyDown("a");
eventSender.keyDown("r");
}
</script>
`);
function test() {
var containerNode; var containerNode;
Common.settingForTest('showUAShadowDOM').set(true); Common.settingForTest('showUAShadowDOM').set(true);
TestRunner.runTestSuite([ TestRunner.runTestSuite([
...@@ -37,17 +43,4 @@ function test() { ...@@ -37,17 +43,4 @@ function test() {
} }
} }
]); ]);
} })();
</script>
</head>
<body onload="runTest()">
<p>
Tests that elements panel updates shadow dom tree structure upon typing.
</p>
<div id="container"><input type="text" id="input1"></div>
</body>
</html>
third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-reload-assert-expected.txt
View file @ 610d82c6
Tests that the inspected page does not crash in a debug build when reloading a page containing shadow DOM with open inspector. Bug 84154. Tests that the inspected page does not crash in a debug build when reloading a page containing shadow DOM with open inspector. Bug 84154. https://bugs.webkit.org/show_bug.cgi?id=84154
Page reloaded. Page reloaded.
third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-reload-assert.html deleted 100644 → 0
View file @ 446da8a7
<!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() {
ElementsTestRunner.expandElementsTree(step1);
function step1() {
TestRunner.reloadPage(step2);
}
function step2() {
TestRunner.completeTest();
}
}
</script>
</head>
<body onload="runTest()">
<p>
Tests that the inspected page does not crash in a debug build when reloading a page containing shadow DOM with open inspector. <a href="https://bugs.webkit.org/show_bug.cgi?id=84154">Bug 84154</a>.
</p>
<input type="radio">
</body>
</html>
third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-reload-assert.js 0 → 100644
View file @ 610d82c6
// 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 in a debug build when reloading a page containing shadow DOM with open inspector. Bug 84154. https://bugs.webkit.org/show_bug.cgi?id=84154\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">
<p>
Tests that the inspected page does not crash in a debug build when reloading a page containing shadow DOM with open inspector. <a href="https://bugs.webkit.org/show_bug.cgi?id=84154">Bug 84154</a>.
</p>
<input type="radio">
`);
ElementsTestRunner.expandElementsTree(step1);
function step1() {
TestRunner.reloadPage(step2);
}
function step2() {
TestRunner.completeTest();
}
})();
third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-selection-after-delete.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-selection-after-delete.js
View file @ 610d82c6
<html> // Copyright 2017 The Chromium Authors. All rights reserved.
<head> // Use of this source code is governed by a BSD-style license that can be
<script src="../../inspector/inspector-test.js"></script> // found in the LICENSE file.
<script src="../../inspector/elements-test.js"></script>
<script> (async function() {
TestRunner.addResult(`Tests that elements panel correctly updates selection on node removal.\n`);
function prepareTestTree() await TestRunner.loadModule('elements_test_runner');
{ await TestRunner.showPanel('elements');
var template = document.querySelector("#testTree"); await TestRunner.loadHTML(`
var testTreeContainer = document.querySelector("#testTreeContainer"); <head>
testTreeContainer.textContent = ""; <script>
testTreeContainer.appendChild(document.importNode(template.content, true)); function prepareTestTree()
} {
var template = document.querySelector("#testTree");
function test() { var testTreeContainer = document.querySelector("#testTreeContainer");
testTreeContainer.textContent = "";
testTreeContainer.appendChild(document.importNode(template.content, true));
}
</script>
</head>
<body>
<template id="testTree">
<div class="left">
<div class="child1">
</div>
<div class="child2">
<div class="child5">
</div>
<div class="child6">
</div>
<div class="child7">
</div>
<div class="child8">
</div>
</div>
<div class="child3">
</div>
</div>
</template>
<div id="testTreeContainer">
</div>
</body>
`);
function selectNode(className, callback) { function selectNode(className, callback) {
var selector = '#testTreeContainer .' + className; var selector = '#testTreeContainer .' + className;
ElementsTestRunner.querySelector(selector, gotNode); ElementsTestRunner.querySelector(selector, gotNode);
...@@ -136,31 +165,4 @@ function test() { ...@@ -136,31 +165,4 @@ function test() {
} }
}, },
]); ]);
} })();
</script>
</head>
<body onload="runTest()">
<p>Tests that elements panel correctly updates selection on node removal.</p>
<template id="testTree">
<div class="left">
<div class="child1">
</div>
<div class="child2">
<div class="child5">
</div>
<div class="child6">
</div>
<div class="child7">
</div>
<div class="child8">
</div>
</div>
<div class="child3">
</div>
</div>
</template>
<div id="testTreeContainer">
</div>
</body>
</html>
third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-selection-on-refresh.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/elements-panel-selection-on-refresh.js
View file @ 610d82c6
<html> // Copyright 2017 The Chromium Authors. All rights reserved.
<head> // Use of this source code is governed by a BSD-style license that can be
<script src="../../inspector/inspector-test.js"></script> // found in the LICENSE file.
<script src="../../inspector/elements-test.js"></script>
<script> (async function() {
TestRunner.addResult(`Tests that elements panel preserves selected node on page refresh.\n`);
await TestRunner.loadModule('elements_test_runner');
await TestRunner.showPanel('elements');
await TestRunner.navigatePromise('resources/elements-panel-selection-on-refresh.html');
function test() {
ElementsTestRunner.selectNodeWithId('test-topic', step1); ElementsTestRunner.selectNodeWithId('test-topic', step1);
function step1() { function step1() {
...@@ -22,15 +25,4 @@ function test() { ...@@ -22,15 +25,4 @@ function test() {
TestRunner.addResult('Selected element should be \'P\', was: \'' + nodeName + '\''); TestRunner.addResult('Selected element should be \'P\', was: \'' + nodeName + '\'');
TestRunner.completeTest(); TestRunner.completeTest();
} }
} })();
</script>
</head>
<body onload="runTest()">
<p id="test-topic">
Tests that elements panel preserves selected node on page refresh.
</p>
</body>
</html>
third_party/WebKit/LayoutTests/http/tests/devtools/elements/iframe-load-event-expected.txt
View file @ 610d82c6
Tests that iframe content is available after iframe's load event fired. See bug 76552. Tests that iframe content is available after iframe's load event fired. See http://webkit.org/b/76552
After frame navigate After frame navigate
- <html> - <html>
- <head> - <head>
<script src="../../inspector/inspector-test.js"></script> <base href="http://127.0.0.1:8000/devtools/elements/">
<script src="../../inspector/elements-test.js"></script>
<script src="resources/iframe-load-event-iframe.js"></script>
</head> </head>
- <body> - <body>
- <p> - <iframe src="resources/iframe-load-event-iframe-2.html" id="myframe" name>
"\nTests that iframe content is available after iframe's load event fired. See "
<a href="http://webkit.org/b/76552">bug 76552</a>
".\n"
</p>
- <iframe id="myframe" src="resources/iframe-load-event-iframe-2.html" onload="runTest()">
- #document - #document
- <html> - <html>
<head></head> <head></head>
......
third_party/WebKit/LayoutTests/http/tests/devtools/elements/iframe-load-event.html deleted 100644 → 0
View file @ 446da8a7
<html>
<head>
<script src="../../inspector/inspector-test.js"></script>
<script src="../../inspector/elements-test.js"></script>
<script src="resources/iframe-load-event-iframe.js"></script>
</head>
<body>
<p>
Tests that iframe content is available after iframe's load event fired. See <a href="http://webkit.org/b/76552">bug 76552</a>.
</p>
<iframe id="myframe" src="resources/iframe-load-event-iframe-1.html" onload="runTest()"></iframe>
</body>
</html>
third_party/WebKit/LayoutTests/http/tests/devtools/elements/iframe-load-event.js 0 → 100644
View file @ 610d82c6
// 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 iframe content is available after iframe's load event fired. See http://webkit.org/b/76552\n`);
await TestRunner.loadModule('elements_test_runner');
await TestRunner.showPanel('elements');
await TestRunner.loadHTML(``);
await TestRunner.addIframe('resources/iframe-load-event-iframe-1.html', {id: 'myframe'});
ElementsTestRunner.expandElementsTree(step1);
async function step1()
{
await TestRunner.evaluateInPageAsync(`
(function(){
document.getElementById("myframe").src = "resources/iframe-load-event-iframe-2.html";
return new Promise((resolve) => document.getElementById("myframe").onload = resolve);
})();
`);
ElementsTestRunner.expandElementsTree(step2);
}
function step2()
{
TestRunner.addResult("\n\nAfter frame navigate");
ElementsTestRunner.dumpElementsTree();
TestRunner.completeTest();
}
})();
third_party/WebKit/LayoutTests/http/tests/devtools/elements/resources/elements-panel-shadow-selection-on-refresh.html 0 → 100644
View file @ 610d82c6
<span id="hostElement"></span><span id="closedHostElement"></span>
<script src="elements-panel-shadow-selection-on-refresh.js"></script>
<script>
var root = document.getElementById("hostElement").createShadowRoot();
root.innerHTML = "<input type='text'>";
var closedRoot = document.getElementById("closedHostElement").attachShadow({mode: 'closed'});
closedRoot.innerHTML = "<button></button>";
</script>
\ No newline at end of file
third_party/WebKit/LayoutTests/http/tests/devtools/elements/resources/iframe-load-event-iframe.js deleted 100644 → 0
View file @ 446da8a7
function loadSecondIFrame()
{
document.getElementById("myframe").src = "resources/iframe-load-event-iframe-2.html";
return new Promise((resolve) => document.getElementById("myframe").onload = resolve);
}
function test()
{
InspectorTest.expandElementsTree(step1);
function step1()
{
InspectorTest.evaluateInPageAsync("loadSecondIFrame()").then(() => InspectorTest.expandElementsTree(step2));
}
function step2()
{
InspectorTest.addResult("\n\nAfter frame navigate");
InspectorTest.dumpElementsTree();
InspectorTest.completeTest();
}
}
third_party/WebKit/LayoutTests/http/tests/devtools/elements/shadow/elements-panel-shadow-selection-on-refresh-1.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/shadow/elements-panel-shadow-selection-on-refresh-1.js
View file @ 610d82c6
<html> // Copyright 2017 The Chromium Authors. All rights reserved.
<head> // Use of this source code is governed by a BSD-style license that can be
<script src="../../../inspector/inspector-test.js"></script> // found in the LICENSE file.
<script src="../../../inspector/elements-test.js"></script>
<script src="../../resources/elements-panel-shadow-selection-on-refresh.js"></script> (async function() {
<script> TestRunner.addResult(`Tests that elements panel preserves selected shadow DOM node on page refresh.\n`);
await TestRunner.loadModule('elements_test_runner');
await TestRunner.showPanel('elements');
await TestRunner.navigatePromise('../resources/elements-panel-shadow-selection-on-refresh.html');
function test() {
TestRunner.runTestSuite([ TestRunner.runTestSuite([
function setup(next) { function setup(next) {
Common.settingForTest('showUAShadowDOM').set(true); Common.settingForTest('showUAShadowDOM').set(true);
...@@ -28,21 +30,4 @@ function test() { ...@@ -28,21 +30,4 @@ function test() {
function isClosedShadowRoot(node) { function isClosedShadowRoot(node) {
return node && node.shadowRootType() === SDK.DOMNode.ShadowRootTypes.Closed; return node && node.shadowRootType() === SDK.DOMNode.ShadowRootTypes.Closed;
} }
} })();
</script>
</head>
<body onload="runTest()">
<p>
Tests that elements panel preserves selected shadow DOM node on page refresh.
</p>
<span id="hostElement"></span><span id="closedHostElement"></span>
<script>
var root = document.getElementById("hostElement").createShadowRoot();
root.innerHTML = "<input type='text'>";
var closedRoot = document.getElementById("closedHostElement").attachShadow({mode: 'closed'});
closedRoot.innerHTML = "<button></button>";
</script>
</body>
</html>
third_party/WebKit/LayoutTests/http/tests/devtools/elements/shadow/elements-panel-shadow-selection-on-refresh-2.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/shadow/elements-panel-shadow-selection-on-refresh-2.js
View file @ 610d82c6
<html> // Copyright 2017 The Chromium Authors. All rights reserved.
<head> // Use of this source code is governed by a BSD-style license that can be
<script src="../../../inspector/inspector-test.js"></script> // found in the LICENSE file.
<script src="../../../inspector/elements-test.js"></script>
<script src="../../resources/elements-panel-shadow-selection-on-refresh.js"></script> (async function() {
<script> TestRunner.addResult(`Tests that elements panel preserves selected shadow DOM node on page refresh.\n`);
await TestRunner.loadModule('elements_test_runner');
await TestRunner.showPanel('elements');
await TestRunner.navigatePromise('../resources/elements-panel-shadow-selection-on-refresh.html');
function test() {
TestRunner.runTestSuite([ TestRunner.runTestSuite([
function setup(next) { function setup(next) {
Common.settingForTest('showUAShadowDOM').set(true); Common.settingForTest('showUAShadowDOM').set(true);
...@@ -32,21 +34,4 @@ function test() { ...@@ -32,21 +34,4 @@ function test() {
function isOpenShadowRootChild(node) { function isOpenShadowRootChild(node) {
return isOpenShadowRoot(node.parentNode); return isOpenShadowRoot(node.parentNode);
} }
} })();
</script>
</head>
<body onload="runTest()">
<p>
Tests that elements panel preserves selected shadow DOM node on page refresh.
</p>
<span id="hostElement"></span><span id="closedHostElement"></span>
<script>
var root = document.getElementById("hostElement").createShadowRoot();
root.innerHTML = "<input type='text'>";
var closedRoot = document.getElementById("closedHostElement").attachShadow({mode: 'closed'});
closedRoot.innerHTML = "<button></button>";
</script>
</body>
</html>
third_party/WebKit/LayoutTests/http/tests/devtools/elements/shadow/elements-panel-shadow-selection-on-refresh-3.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/shadow/elements-panel-shadow-selection-on-refresh-3.js
View file @ 610d82c6
<html> // Copyright 2017 The Chromium Authors. All rights reserved.
<head> // Use of this source code is governed by a BSD-style license that can be
<script src="../../../inspector/inspector-test.js"></script> // found in the LICENSE file.
<script src="../../../inspector/elements-test.js"></script>
<script src="../../resources/elements-panel-shadow-selection-on-refresh.js"></script> (async function() {
<script> TestRunner.addResult(`Tests that elements panel preserves selected shadow DOM node on page refresh.\n`);
await TestRunner.loadModule('elements_test_runner');
function test() { await TestRunner.showPanel('elements');
await TestRunner.navigatePromise('../resources/elements-panel-shadow-selection-on-refresh.html');
TestRunner.runTestSuite([ TestRunner.runTestSuite([
function setup(next) { function setup(next) {
Common.settingForTest('showUAShadowDOM').set(true); Common.settingForTest('showUAShadowDOM').set(true);
...@@ -36,21 +39,4 @@ function test() { ...@@ -36,21 +39,4 @@ function test() {
function isUserAgentShadowRootChild(node) { function isUserAgentShadowRootChild(node) {
return isUserAgentShadowRoot(node.parentNode); return isUserAgentShadowRoot(node.parentNode);
} }
} })();
</script>
</head>
<body onload="runTest()">
<p>
Tests that elements panel preserves selected shadow DOM node on page refresh.
</p>
<span id="hostElement"></span><span id="closedHostElement"></span>
<script>
var root = document.getElementById("hostElement").createShadowRoot();
root.innerHTML = "<input type='text'>";
var closedRoot = document.getElementById("closedHostElement").attachShadow({mode: 'closed'});
closedRoot.innerHTML = "<button></button>";
</script>
</body>
</html>
third_party/WebKit/LayoutTests/http/tests/devtools/elements/shadow/shadow-host-display-modes-expected.txt
View file @ 610d82c6
Tests that distributed nodes and their updates are correctly shown in different shadow host display modes. Tests that distributed nodes and their updates are correctly shown in different shadow host display modes.
oldest distributed text
========= Original ======== ========= Original ========
- <div id="shadowHost"> - <div id="shadowHost">
<div class="distributeMeToYoungest original">\n youngest distributed text\n </div> <div class="distributeMeToYoungest original">\n youngest distributed text\n </div>
......
third_party/WebKit/LayoutTests/http/tests/devtools/elements/shadow/shadow-host-display-modes.html → third_party/WebKit/LayoutTests/http/tests/devtools/elements/shadow/shadow-host-display-modes.js
View file @ 610d82c6
<html> // Copyright 2017 The Chromium Authors. All rights reserved.
<head> // Use of this source code is governed by a BSD-style license that can be
<script src="../../../inspector/inspector-test.js"></script> // found in the LICENSE file.
<script src="../../../inspector/elements-test.js"></script>
<script> (async function() {
function createShadowRootFromTemplate(root, selector, templateId) TestRunner.addResult(
{ `Tests that distributed nodes and their updates are correctly shown in different shadow host display modes.\n`);
var shadowHost = root.querySelector(selector); await TestRunner.loadModule('elements_test_runner');
var shadowRoot = shadowHost.createShadowRoot(); await TestRunner.showPanel('elements');
var template = document.querySelector(templateId); await TestRunner.loadHTML(`
var clone = document.importNode(template.content, true); <template id="youngestShadowRootTemplate">
shadowRoot.appendChild(clone); <div class="youngestShadowMain">
return shadowHost; <shadow></shadow>
} <content select=".distributeMeToYoungest"><div id="fallbackYoungest"></div></content>
<div class="innerShadowHost">
function initOldestShadowRoot() <content in-youngest-shadow-root="" select=".distributeMeToInner"></content>
{ </div>
createShadowRootFromTemplate(document, "#shadowHost", "#oldestShadowRootTemplate"); </div>
} </template>
<template id="oldestShadowRootTemplate">
function initYoungestShadowRoot() <div class="oldestShadowMain">
{ <content select=".distributeMeToOldest"><div id="fallbackOldest"></div></content>
createShadowRootFromTemplate(document, "#shadowHost", "#youngestShadowRootTemplate"); </div>
} </template>
<template id="innerShadowRootTemplate">
function initInnerShadowRoot() <div class="innerShadowMain">
{ <content in-inner-shadow-root="" select=".distributeMeToInner"></content>
var shadowHost = document.querySelector("#shadowHost"); </div>
var innerShadowHost = createShadowRootFromTemplate(shadowHost.shadowRoot, ".innerShadowHost", "#innerShadowRootTemplate"); </template>
innerShadowHost.id = "innerShadowHost"; <div id="shadowHost">
} <div class="distributeMeToYoungest original">
youngest distributed text
var lastDistributedNodeId = 0; </div>
<div class="distributeMeToOldest original">
function addDistributedNode(oldest) oldest distributed text
{ </div>
var node = document.createElement("div"); <div class="distributeMeToInner original">
node.classList.add(oldest ? "distributeMeToOldest" : "distributeMeToYoungest"); oldest distributed text
node.classList.add("distributeMeAsWell_" + (++lastDistributedNodeId)); </div>
var shadowHost = document.querySelector("#shadowHost"); <div class="distributeMeToInner original2">
shadowHost.appendChild(node); oldest distributed text
} </div>
</div>
function addDistributedNodeToOldest() `);
{ await TestRunner.evaluateInPagePromise(`
addDistributedNode(true); function createShadowRootFromTemplate(root, selector, templateId)
} {
var shadowHost = root.querySelector(selector);
function test() { var shadowRoot = shadowHost.createShadowRoot();
var template = document.querySelector(templateId);
var clone = document.importNode(template.content, true);
shadowRoot.appendChild(clone);
return shadowHost;
}
function initOldestShadowRoot()
{
createShadowRootFromTemplate(document, "#shadowHost", "#oldestShadowRootTemplate");
}
function initYoungestShadowRoot()
{
createShadowRootFromTemplate(document, "#shadowHost", "#youngestShadowRootTemplate");
}
function initInnerShadowRoot()
{
var shadowHost = document.querySelector("#shadowHost");
var innerShadowHost = createShadowRootFromTemplate(shadowHost.shadowRoot, ".innerShadowHost", "#innerShadowRootTemplate");
innerShadowHost.id = "innerShadowHost";
}
var lastDistributedNodeId = 0;
function addDistributedNode(oldest)
{
var node = document.createElement("div");
node.classList.add(oldest ? "distributeMeToOldest" : "distributeMeToYoungest");
node.classList.add("distributeMeAsWell_" + (++lastDistributedNodeId));
var shadowHost = document.querySelector("#shadowHost");
shadowHost.appendChild(node);
}
function addDistributedNodeToOldest()
{
addDistributedNode(true);
}
`);
var shadowHostNode; var shadowHostNode;
var treeOutline; var treeOutline;
var shadowHostTreeElement; var shadowHostTreeElement;
...@@ -101,43 +141,4 @@ function test() { ...@@ -101,43 +141,4 @@ function test() {
next(); next();
} }
} }
} })();
</script>
</head>
<body onload="runTest()">
<p>Tests that distributed nodes and their updates are correctly shown in different shadow host display modes.</p>
<template id="youngestShadowRootTemplate">
<div class="youngestShadowMain">
<shadow></shadow>
<content select=".distributeMeToYoungest"><div id="fallbackYoungest"></div></content>
<div class="innerShadowHost">
<content in-youngest-shadow-root select=".distributeMeToInner"></content>
</div>
</div>
</template>
<template id="oldestShadowRootTemplate">
<div class="oldestShadowMain">
<content select=".distributeMeToOldest"><div id="fallbackOldest"></div></content>
</div>
</template>
<template id="innerShadowRootTemplate">
<div class="innerShadowMain">
<content in-inner-shadow-root select=".distributeMeToInner"></content>
</div>
</template>
<div id="shadowHost">
<div class="distributeMeToYoungest original">
youngest distributed text
</div>
<div class="distributeMeToOldest original">
oldest distributed text
</div>
<div class="distributeMeToInner original">
oldest distributed text
</div>
<div class="distributeMeToInner original2">
oldest distributed text
</div>
</div>
</body>
</html>
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