Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Reftests for Shadow DOM styles applyAuthorStyles flag. #173

Closed
wants to merge 5 commits into from
Closed

Reftests for Shadow DOM styles applyAuthorStyles flag. #173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
394cebb
shadow dom styles test file -applyAuthorStyles
yoshi6jp Jun 8, 2013
d6a6106
fixed typo mail and success is green , fails is red
yoshi6jp Jun 8, 2013
6cf4c03
fixed if true is fail then color is red
yoshi6jp Jun 8, 2013
9dc5b88
add pass and fail text
yoshi6jp Jun 8, 2013
d1e123b
fix ref file
yoshi6jp Jun 8, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions shadow-dom/styles/apply-author-styles-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shadow DOM Test: Styles applyAuthorStyles</title>
<link rel="author" title="Yoshiharu Kamata" href="mailto:yoshi6jp@gmail.com" />
<style type="text/css">
div.box{
border: 1px solid green;
color: green;
}
</style>
</head>
<body>
<div id="valDefault">
<div>
<div class="box"><span>[PASS]</span>This is the shadow tree. (applyAuthorStyles = default)</div>
</div>
</div>
<div id="valTrue">
<div>
<div class="box"><span>[PASS]</span>This is the shadow tree. (applyAuthorStyles = true)</div>
</div>
</div>
<div id="valFalse">
<div>
<div class="box"><span>[PASS]</span>This is the shadow tree. (applyAuthorStyles = false)</div>
</div>
</div>
</body>
</html>
73 changes: 73 additions & 0 deletions shadow-dom/styles/apply-author-styles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shadow DOM Test: Styles applyAuthorStyles</title>
<link rel="reference" href="apply-author-styles-ref.html" />
<link rel="author" title="Yoshiharu Kamata" href="mailto:yoshi6jp@gmail.com"/>
<link rel="help" href="https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#styles">
<script type="text/javascript" src="../testcommon.js"></script>
<meta name="assert" content="
To enforce upper-boundary encapsulation, CSS rules declared in an enclosing tree must not apply in a shadow tree, except when the apply-author-styles flag is set for this tree. The flag signals that the rules declared in the enclosing trees are applicable in the shadow tree.
" />
<style type="text/css">
div.fail {
border: 1px solid red !important;
color: red !important;
}
span.fail {
display: inline !important;
color: red !important;
}
div.fail span.pass{
display: none !important;
}
div.pass {
border: 1px solid green !important;
color: green !important;
}
div.pass span.pass {
display: inline !important;
color: green !important;
}
div.pass span.fail {
display: none !important;
}
</style>
</head>
<body>
<div id="valDefault">
</div>
<div id="valTrue">
</div>
<div id="valFalse">
</div>
<script type="text/javascript">
var sDefault = createSR(valDefault);
var divDefault = document.createElement("div");
divDefault.innerHTML = '<div class="fail" style="border:1px solid green; color: green;">'+
'<span class="pass" style="display: inline; color: green;">[PASS]</span>' +
'<span class="fail" style="display: none;">[FAIL]</span>' +
'This is the shadow tree. (applyAuthorStyles = default)</div>';
sDefault.appendChild(divDefault);

var sTrue = createSR(valTrue);
sTrue.applyAuthorStyles = true; // set applyAuthorStylse -> true
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need a comment here. It's obvious.

var divTrue = document.createElement("div");
divTrue.innerHTML = '<div class="pass" style="border:1px solid red; color: red;">'+
'<span class="pass" style="display: none;">[PASS]</span>' +
'<span class="fail" style="color: red;">[FAIL]</span>' +
'This is the shadow tree. (applyAuthorStyles = true)</div>';
sTrue.appendChild(divTrue);

var sFalse = createSR(valFalse);
sFalse.applyAuthorStyles = false; // set applyAuthorStyles -> false
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ditto.

var divFalse = document.createElement("div");
divFalse.innerHTML = '<div class="fail" style="border:1px solid green; color: green;">'+
'<span class="pass" style="display: inline; color: green;">[PASS]</span>' +
'<span class="fail" style="display: none;">[FAIL]</span>' +
'This is the shadow tree. (applyAuthorStyles = false)</div>';
sFalse.appendChild(divFalse);
</script>
</body>
</html>