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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/css/style-scoped/style-scoped-apply-author-styles.html

Issue 216543002: Revert of Remove applyAuthorStyles flag from ShadowRoot. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 6 years, 9 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/TestExpectations ('k') | LayoutTests/fast/css/style-scoped/style-scoped-apply-author-styles-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-apply-author-styles.html
diff --git a/LayoutTests/fast/css/style-scoped/style-scoped-apply-author-styles.html b/LayoutTests/fast/css/style-scoped/style-scoped-apply-author-styles.html
new file mode 100644
index 0000000000000000000000000000000000000000..4bba31e6346d364bb5a3e4d5d5f96c48f93aea7d
--- /dev/null
+++ b/LayoutTests/fast/css/style-scoped/style-scoped-apply-author-styles.html
@@ -0,0 +1,243 @@
+<!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 borderColor;
+
+function borderColorShouldBe(node, color)
+{
+ borderColor = document.defaultView.getComputedStyle(node, null).getPropertyValue('border-color');
+ shouldBeEqualToString('borderColor', color);
+}
+
+function cleanUp()
+{
+ document.getElementById('sandbox').innerHTML = '';
+}
+
+function testBasic()
+{
+ debug('test a scoped style in document is applied to a node in shadow dom subtree when apply-author-styles is true.');
+ document.getElementById('sandbox').appendChild(
+ createDOM('div', {},
+ createDOM('style', {'scoped': 'scoped'},
+ document.createTextNode('div { border: 1px solid red; }')),
+ createDOM('div', {'id': 'host'},
+ createShadowRoot(
+ createDOM('div', {'id': 'target'})))));
+
+ // before
+ getNodeInTreeOfTrees('host/').applyAuthorStyles = false;
+ borderColorShouldBe(getNodeInTreeOfTrees('host/target'), 'rgb(0, 0, 0)');
+
+ // after
+ getNodeInTreeOfTrees('host/').applyAuthorStyles = true;
+ borderColorShouldBe(getNodeInTreeOfTrees('host/target'), 'rgb(255, 0, 0)');
+
+ cleanUp();
+}
+
+function testEnclosingShadow()
+{
+ debug('test a style in an enclosing shadow dom tree is applied to a node in shadow subtree when apply-author-styles is true.');
+ document.getElementById('sandbox').appendChild(
+ createDOM('div', {'id': 'host'},
+ createShadowRoot(
+ createDOM('style', {},
+ document.createTextNode('div { border: 1px solid red; }')),
+ createDOM('div', {'id': 'enclosed'},
+ createShadowRoot(
+ createDOM('div', {'id': 'target'}))))));
+
+ // before
+ getNodeInTreeOfTrees('host/enclosed/').applyAuthorStyles = false;
+ borderColorShouldBe(getNodeInTreeOfTrees('host/enclosed/target'), 'rgb(0, 0, 0)');
+
+ // after
+ getNodeInTreeOfTrees('host/enclosed/').applyAuthorStyles = true;
+ borderColorShouldBe(getNodeInTreeOfTrees('host/enclosed/target'), 'rgb(255, 0, 0)');
+
+ cleanUp();
+}
+
+function testEnclosingShadowWithScoped()
+{
+ debug('test a scoped style in an enclosing shadow dom tree is applied to a node in shadow subtree when apply-author-styles is true and the node is in the scope.');
+ document.getElementById('sandbox').appendChild(
+ createDOM('div', {'id': 'host'},
+ createShadowRoot(
+ createDOM('div', {},
+ createDOM('style', {'scoped': 'scoped'},
+ document.createTextNode('div { border: 1px solid red; }')),
+ createDOM('div', {'id': 'outerInScope'},
+ createShadowRoot(
+ createDOM('div', {'id': 'targetInScope'})))),
+ createDOM('div', {'id': 'outerOutOfScope'},
+ createShadowRoot(
+ createDOM('div', {'id': 'targetOutOfScope'}))))));
+
+
+ // before
+ getNodeInTreeOfTrees('host/outerInScope/').applyAuthorStyles = false;
+ getNodeInTreeOfTrees('host/outerOutOfScope/').applyAuthorStyles = false;
+
+ borderColorShouldBe(getNodeInTreeOfTrees('host/outerInScope/targetInScope'), 'rgb(0, 0, 0)');
+ borderColorShouldBe(getNodeInTreeOfTrees('host/outerOutOfScope/targetOutOfScope'), 'rgb(0, 0, 0)');
+
+ // after
+ getNodeInTreeOfTrees('host/outerInScope/').applyAuthorStyles = true;
+ getNodeInTreeOfTrees('host/outerOutOfScope/').applyAuthorStyles = true;
+ borderColorShouldBe(getNodeInTreeOfTrees('host/outerInScope/targetInScope'), 'rgb(255, 0, 0)');
+ borderColorShouldBe(getNodeInTreeOfTrees('host/outerOutOfScope/targetOutOfScope'), 'rgb(0, 0, 0)');
+
+ cleanUp();
+}
+
+function testNestedShadow()
+{
+ debug('test styles declared in enclosing shadow trees should be applied to an enclosed shadow tree whose apply-atur-styles is true.');
+ document.getElementById('sandbox').appendChild(
+ createDOM('div',
+ createDOM('style', {'scoped': 'scoped'},
+ document.createTextNode('div { border: 1px solid red; }')),
+ createDOM('div', {'id': 'host'},
+ createShadowRoot(
+ createDOM('style', {},
+ document.createTextNode('div { border: 1px solid blue; }')),
+ createDOM('div', {'id': 'outerMost'},
+ createShadowRoot(
+ createDOM('div', {'id': 'outer'},
+ createShadowRoot(
+ createDOM('div', {'id': 'target'})))))))));
+
+ getNodeInTreeOfTrees('host/').applyAuthorStyles = false;
+ getNodeInTreeOfTrees('host/outerMost/').applyAuthorStyles = false;
+ getNodeInTreeOfTrees('host/outerMost/outer/').applyAuthorStyles = false;
+
+ // No styles should be applied.
+ borderColorShouldBe(getNodeInTreeOfTrees('host/outerMost/outer/target'), 'rgb(0, 0, 0)');
+
+ getNodeInTreeOfTrees('host/outerMost/outer/').applyAuthorStyles = true;
+ // A style in document should be applied.
+ borderColorShouldBe(getNodeInTreeOfTrees('host/outerMost/outer/target'), 'rgb(0, 0, 255)');
+
+ getNodeInTreeOfTrees('host/outerMost/').applyAuthorStyles = true;
+ // Not depend on apply-author-styles flags of parent shadow trees.
+ borderColorShouldBe(getNodeInTreeOfTrees('host/outerMost/outer/target'), 'rgb(0, 0, 255)');
+
+ cleanUp();
+}
+
+function testMultipleShadow()
+{
+ debug('test a style in document is applied to nodes in multiple shadow subtrees when apply-author-styles is true.');
+ document.getElementById('sandbox').appendChild(
+ createDOM('div', {'id': 'host'},
+ createShadowRoot(
+ createDOM('shadow', {}),
+ createDOM('div', {'id': 'oldestShadow'})),
+ createShadowRoot(
+ createDOM('style', {'scoped': 'scoped'},
+ document.createTextNode('div { border: 1px solid blue }')),
+ createDOM('shadow', {}),
+ createDOM('div', {'id': 'olderShadow'})),
+ createShadowRoot(
+ createDOM('shadow', {}),
+ createDOM('div', {'id': 'target'})),
+
+ createDOM('style', {'scoped': 'scoped'},
+ document.createTextNode('div { border: 1px solid red; }')),
+ createDOM('div', {})));
+
+ getNodeInTreeOfTrees('host/').applyAuthorStyles = false;
+ getNodeInTreeOfTrees('host//').applyAuthorStyles = false;
+ getNodeInTreeOfTrees('host///').applyAuthorStyles = false;
+
+ // before
+ borderColorShouldBe(getNodeInTreeOfTrees('host/oldestShadow'), 'rgb(0, 0, 0)');
+ borderColorShouldBe(getNodeInTreeOfTrees('host//olderShadow'), 'rgb(0, 0, 255)');
+ borderColorShouldBe(getNodeInTreeOfTrees('host///target'), 'rgb(0, 0, 0)');
+
+ // document ---+--- oldestShadow
+ // |
+ // +--- olderShadow
+ // |
+ // +--- shadow
+
+ // apply-author-styles affects between shadow and document.
+ getNodeInTreeOfTrees('host///').applyAuthorStyles = true;
+ borderColorShouldBe(getNodeInTreeOfTrees('host/oldestShadow'), 'rgb(0, 0, 0)');
+ borderColorShouldBe(getNodeInTreeOfTrees('host//olderShadow'), 'rgb(0, 0, 255)');
+ borderColorShouldBe(getNodeInTreeOfTrees('host///target'), 'rgb(255, 0, 0)');
+
+ // apply-author-styles affects between older shadow and document.
+ getNodeInTreeOfTrees('host///').applyAuthorStyles = false;
+ getNodeInTreeOfTrees('host//').applyAuthorStyles = true;
+ borderColorShouldBe(getNodeInTreeOfTrees('host/oldestShadow'), 'rgb(0, 0, 0)');
+ borderColorShouldBe(getNodeInTreeOfTrees('host//olderShadow'), 'rgb(0, 0, 255)');
+ borderColorShouldBe(getNodeInTreeOfTrees('host///target'), 'rgb(0, 0, 0)');
+
+ // apply-author-styles affects between oldest shadow and document.
+ getNodeInTreeOfTrees('host//').applyAuthorStyles = false;
+ getNodeInTreeOfTrees('host/').applyAuthorStyles = true;
+ borderColorShouldBe(getNodeInTreeOfTrees('host/oldestShadow'), 'rgb(255, 0, 0)');
+ borderColorShouldBe(getNodeInTreeOfTrees('host//olderShadow'), 'rgb(0, 0, 255)');
+ borderColorShouldBe(getNodeInTreeOfTrees('host///target'), 'rgb(0, 0, 0)');
+
+ cleanUp();
+}
+
+function testOrderOfApplyStyle()
+{
+ debug('test a style is applied in document order.');
+
+ document.getElementById('sandbox').appendChild(
+ createDOM('div', {},
+ createDOM('style', {'scoped': 'scoped'},
+ document.createTextNode('div { border: 1px solid red }')),
+ createDOM('div', {'id': 'host'},
+ createShadowRoot(
+ createDOM('style', {},
+ document.createTextNode('div { border: 1px solid blue; }')),
+ createDOM('div', {'id': 'outerMost'},
+ createShadowRoot(
+ createDOM('style', {},
+ document.createTextNode('div { border: 1px solid green; }')),
+ createDOM('div', {'id': 'outer'},
+ createShadowRoot(
+ createDOM('style', {},
+ document.createTextNode('div { border: 1px solid yellow; }')),
+ createDOM('div', {'id': 'target'})))))))));
+
+ getNodeInTreeOfTrees('host/').applyAuthorStyles = true;
+ getNodeInTreeOfTrees('host/outerMost/').applyAuthorStyles = true;
+ getNodeInTreeOfTrees('host/outerMost/outer/').applyAuthorStyles = true;
+
+ // The last scoped style should be applied.
+ borderColorShouldBe(getNodeInTreeOfTrees('host/outerMost/outer/target'), 'rgb(255, 255, 0)');
+
+ getNodeInTreeOfTrees('host/outerMost/outer/').innerHTML = '<div id="target">target</div>';
+ // The outer's scoped style should be applied.
+ borderColorShouldBe(getNodeInTreeOfTrees('host/outerMost/outer/target'), 'rgb(0, 128, 0)');
+
+ cleanUp();
+}
+
+function runTests() {
+ testBasic();
+ testEnclosingShadow();
+ testEnclosingShadowWithScoped();
+ testNestedShadow();
+ testMultipleShadow();
+ testOrderOfApplyStyle();
+}
+</script>
+</head>
+<body onload="runTests()">
+ <div id='sandbox'></div>
+</body>
+</html>
« no previous file with comments | « LayoutTests/TestExpectations ('k') | LayoutTests/fast/css/style-scoped/style-scoped-apply-author-styles-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698