Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(575)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/css/style-scoped/style-scoped-change-scoped-in-shadow.html

Issue 324593003: Revert of Remove scoped styles. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 6 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « LayoutTests/fast/css/style-scoped/style-scoped-basic-expected.txt ('k') | LayoutTests/fast/css/style-scoped/style-scoped-change-scoped-in-shadow-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/fast/css/style-scoped/style-scoped-change-scoped-in-shadow.html
diff --git a/LayoutTests/fast/css/style-scoped/style-scoped-change-scoped-in-shadow.html b/LayoutTests/fast/css/style-scoped/style-scoped-change-scoped-in-shadow.html
new file mode 100644
index 0000000000000000000000000000000000000000..13d1123efec64bb472f773b0133d5865b161a036
--- /dev/null
+++ b/LayoutTests/fast/css/style-scoped/style-scoped-change-scoped-in-shadow.html
@@ -0,0 +1,304 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../../resources/js-test.js"></script>
+<script src="../../dom/shadow/resources/shadow-dom.js"></script>
+<script>
+shouldBeDefined("window.internals");
+
+var textColor;
+
+function shouldHaveTextColor(node, col)
+{
+ textColor = document.defaultView.getComputedStyle(node, null).getPropertyValue('color');
+ shouldBeEqualToString('textColor', col);
+}
+
+function cleanUp()
+{
+ document.getElementById('sandbox').innerHTML = '';
+}
+
+function testScopedStyle()
+{
+ debug('test a scoped style in shadow tree.');
+ document.getElementById('sandbox').appendChild(
+ createDOM('div', {'id': 'host'},
+ createShadowRoot(
+ createDOM('div', {},
+ createDOM('style', {'scoped': 'scoped'},
+ document.createTextNode('div { color: red; }')),
+ createDOM('div', {'id': 'E'})),
+ createDOM('div', {'id': 'F'}))));
+
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)');
+ cleanUp();
+}
+
+function testStyle()
+{
+ debug('test a style in shadow tree.');
+ document.getElementById('sandbox').appendChild(
+ createDOM('div', {'id': 'host'},
+ createShadowRoot(
+ createDOM('div', {},
+ createDOM('div', {'id': 'E'},
+ createDOM('style', {},
+ document.createTextNode('div { color: red; }')))),
+ createDOM('div', {'id': 'F'}))));
+
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(255, 0, 0)');
+ cleanUp();
+}
+
+function testStyleWithMultipleShadowRoots()
+{
+ debug('test styles in multiple shadow trees.');
+
+ document.getElementById('sandbox').appendChild(
+ createDOM('div', {'id': 'host'},
+ createShadowRoot(
+ createDOM('div', {},
+ createDOM('style', {},
+ document.createTextNode('div { color: red; }')),
+ createDOM('div', {'id': 'E'})),
+ createDOM('div', {'id': 'F'})),
+
+ createShadowRoot(
+ createDOM('div', {},
+ createDOM('style', {'scoped': 'scoped'},
+ document.createTextNode('div { color: blue; }')),
+ createDOM('shadow', {}),
+ createDOM('div', {'id': 'G'})))));
+
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(255, 0, 0)');
+ shouldHaveTextColor(getNodeInTreeOfTrees('host//G'), 'rgb(0, 0, 255)');
+ cleanUp();
+}
+
+function testScopedStyleWithNestedShadowRoots()
+{
+ debug('test a scoped style in nested shadow tree.');
+ document.getElementById('sandbox').appendChild(
+ createDOM('div', {'id': 'host'},
+ createShadowRoot(
+ createDOM('div', {},
+ createDOM('style', {'scoped': 'scoped'},
+ document.createTextNode('div { color: red; }')),
+ createDOM('div', {'id': 'E'},
+ createShadowRoot(
+ createDOM('div', {},
+ createDOM('style', {'scoped': 'scoped'},
+ document.createTextNode('div { color: blue; }')),
+ createDOM('div', {'id': 'G'})),
+ createDOM('div', {'id': 'H'})))),
+ createDOM('div', {'id': 'F'}))));
+
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)');
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/E/G'), 'rgb(0, 0, 255)');
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/E/H'), 'rgb(255, 0, 0)');
+ cleanUp();
+}
+
+function testStyleWithNestedShadowRoots()
+{
+ debug('test a style in nested shadow tree.');
+ document.getElementById('sandbox').appendChild(
+ createDOM('div', {'id': 'host'},
+ createShadowRoot(
+ createDOM('div', {},
+ createDOM('style', {},
+ document.createTextNode('div { color: red; }')),
+ createDOM('div', {'id': 'E'},
+ createShadowRoot(
+ createDOM('div', {},
+ createDOM('style', {},
+ document.createTextNode('div { color: blue; }')),
+ createDOM('div', {'id': 'G'})),
+ createDOM('div', {'id': 'H'})))),
+ createDOM('div', {'id': 'F'}))));
+
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(255, 0, 0)');
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/E/G'), 'rgb(0, 0, 255)');
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/E/H'), 'rgb(0, 0, 255)');
+ cleanUp();
+}
+
+function testChangeScopedAttributeOnline()
+{
+ debug('test changing scoped attribute online.');
+ document.getElementById('sandbox').appendChild(
+ createDOM('div', {'id': 'host'},
+ createShadowRoot(
+ createDOM('div', {},
+ createDOM('style', {'id': 'style-in-shadow', 'scoped': 'scoped'},
+ document.createTextNode('div { color: red; }')),
+ createDOM('div', {'id': 'E'})),
+ createDOM('div', {'id': 'F'}))));
+
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)');
+ document.body.offsetLeft;
+
+ // changing from scoped to scoped.
+ getNodeInTreeOfTrees('host/style-in-shadow').setAttribute('scoped', 'scoped');
+
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)');
+
+ // removing scoped.
+ getNodeInTreeOfTrees('host/style-in-shadow').removeAttribute('scoped');
+
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(255, 0, 0)');
+
+ // changing from not scoped to scoped.
+ getNodeInTreeOfTrees('host/style-in-shadow').setAttribute('scoped', 'scoped');
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)');
+ cleanUp();
+}
+
+function testRemoveScopedStyle()
+{
+ debug('test removing a scoped style from shadow tree.');
+ document.getElementById('sandbox').appendChild(
+ createDOM('div', {'id': 'host'},
+ createShadowRoot(
+ createDOM('div', {},
+ createDOM('style', {'id': 'style-in-shadow', 'scoped': 'scoped'},
+ document.createTextNode('div { color: red; }')),
+ createDOM('div', {'id': 'E'})),
+ createDOM('div', {'id': 'F'}))));
+
+ // before
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)');
+
+ var styleInShadow = getNodeInTreeOfTrees('host/style-in-shadow');
+ styleInShadow.parentNode.removeChild(styleInShadow);
+
+ // after
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(0, 0, 0)');
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)');
+ cleanUp();
+}
+
+function testRemoveStyle()
+{
+ debug('test removing a style from shadow tree.');
+ document.getElementById('sandbox').appendChild(
+ createDOM('div', {'id': 'host'},
+ createShadowRoot(
+ createDOM('div', {},
+ createDOM('style', {'id': 'style-in-shadow'},
+ document.createTextNode('div { color: red; }')),
+ createDOM('div', {'id': 'E'})),
+ createDOM('div', {'id': 'F'}))));
+
+ // before
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(255, 0, 0)');
+
+ var styleInShadow = getNodeInTreeOfTrees('host/style-in-shadow');
+ styleInShadow.parentNode.removeChild(styleInShadow);
+
+ // after
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(0, 0, 0)');
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)');
+ cleanUp();
+}
+
+function testInsertScopedStyle()
+{
+ debug('test inserting a scoped style into shadow tree.');
+ document.getElementById('sandbox').appendChild(
+ createDOM('div', {'id': 'host'},
+ createShadowRoot(
+ createDOM('div', {'id': 'D'},
+ createDOM('div', {'id': 'E'})),
+ createDOM('div', {'id': 'F'}))));
+
+ var style = document.createElement('style');
+ style.innerHTML = 'div { color: red; }';
+ style.setAttribute('scoped', 'scoped');
+ getNodeInTreeOfTrees('host/D').appendChild(style);
+
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)');
+ cleanUp();
+}
+
+function testInsertStyle()
+{
+ debug('test inserting a style into shadow tree.');
+ document.getElementById('sandbox').appendChild(
+ createDOM('div', {'id': 'host'},
+ createShadowRoot(
+ createDOM('div', {'id': 'D'},
+ createDOM('div', {'id': 'E'})),
+ createDOM('div', {'id': 'F'}))));
+
+ var style = document.createElement('style');
+ style.innerHTML = 'div { color: red; }';
+ getNodeInTreeOfTrees('host/D').appendChild(style);
+
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(255, 0, 0)');
+ cleanUp();
+}
+
+function testChangeScopedAttributeOffline()
+{
+ debug('test re-inserting a style after changing scoped attribute offline.');
+ document.getElementById('sandbox').appendChild(
+ createDOM('div', {'id': 'host'},
+ createShadowRoot(
+ createDOM('div', {'id': 'D'},
+ createDOM('style', {'id': 'style-in-shadow', 'scoped': 'scoped'},
+ document.createTextNode('div { color: red; }')),
+ createDOM('div', {'id': 'E'})),
+ createDOM('div', {'id': 'F'}))));
+
+ var style = getNodeInTreeOfTrees('host/style-in-shadow');
+ style.parentNode.removeChild(style);
+ style.removeAttribute('scoped');
+ getNodeInTreeOfTrees('host/D').appendChild(style);
+
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(255, 0, 0)');
+
+ style.parentNode.removeChild(style);
+ style.setAttribute('scoped', 'scoped');
+ getNodeInTreeOfTrees('host/D').appendChild(style);
+
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');
+ shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)');
+ cleanUp();
+}
+
+function runTests()
+{
+ testScopedStyle();
+ testStyle();
+ testStyleWithMultipleShadowRoots();
+ testScopedStyleWithNestedShadowRoots();
+ testStyleWithNestedShadowRoots();
+ testChangeScopedAttributeOnline();
+ testRemoveScopedStyle();
+ testRemoveStyle();
+ testInsertScopedStyle();
+ testInsertStyle();
+ testChangeScopedAttributeOffline();
+}
+</script>
+</head>
+<body onload="runTests()">
+ <div id='sandbox'></div>
+</body>
+</html>
« no previous file with comments | « LayoutTests/fast/css/style-scoped/style-scoped-basic-expected.txt ('k') | LayoutTests/fast/css/style-scoped/style-scoped-change-scoped-in-shadow-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698