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

shadow-dom: Added tests that checks matching order of CSS rules with @host #189

Merged
merged 3 commits into from
Jun 10, 2013
Merged

shadow-dom: Added tests that checks matching order of CSS rules with @host #189

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5316d49
shadow-dom: Added tests that checks matching order of CSS rules with …
summerwind Jun 8, 2013
c63d671
Fixed indent style and performance improvement #189
summerwind Jun 9, 2013
3f892ae
shadow-dom: Fixed the title of test #189
summerwind Jun 9, 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
66 changes: 66 additions & 0 deletions shadow-dom/styles/at-host-at-rule/matching-order-of-css-rules-001.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<!DOCTYPE html>
<!--
Distributed under both the W3C Test Suite License [1] and the W3C
3-clause BSD License [2]. To contribute to a W3C Test Suite, see the
policies and contribution forms [3].

[1] http://www.w3.org/Consortium/Legal/2008/04-testsuite-license
[2] http://www.w3.org/Consortium/Legal/2008/03-bsd-license
[3] http://www.w3.org/2004/10/27-testcases
-->
<html>
<head>
<title>Shadow DOM Test: The matching order of CSS rules for @host @-rule</title>
Copy link
Member

Choose a reason for hiding this comment

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

You should use a term of specificity rather than order here.

<link rel="author" title="Moto Ishizawa" href="mailto:summerwind.jp@gmail.com">
<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#host-at-rule">
<meta name="assert" content="@host @-rule: Test the matching order of CSS rules for @host">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<style>
#test-id { display: block; }
.test-class { display: block; }
li { display: block; }
</style>
</head>
<body>
<div id="log"></div>
<script>
test(unit(function (ctx) {
var d = newRenderedHTMLDocument(ctx);

d.body.innerHTML =
'<ul id="host">' +
'<li>1</li>' +
'<li id="test-id">2</li>' +
'<li class="test-class">3</li>' +
'<li id="test-id" class="test-class">4</li>' +
'<li style="display: block;">5</li>' +
'</ul>';

var host = d.querySelector('#host');
var s = createSR(host);

var div = d.createElement('div');
div.innerHTML = '' +
'<div id="shDiv"><span>Div in the Shadow tree</span></div>' +
'<ul><content></content></ul>';
s.appendChild(div);

var style = d.createElement('style');
style.innerHTML = '';
Copy link
Contributor

Choose a reason for hiding this comment

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

Indentation is weird, and this should use textContent

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thank you for your review.
Fixed in c63d671.

style.innerHTML += '@host {';
Copy link
Member

Choose a reason for hiding this comment

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

Could you avoid the repetition of style.innerHTML += ' ....' here?
Could you fix the indents of some lines?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oops. I forgot to fix this code.
Fixed in c63d671.

style.innerHTML += 'li { display: none; }';
style.innerHTML += '}';
s.appendChild(style);

var li_list = d.querySelectorAll('#host li');
assert_equals(li_list[0].offsetHeight, 0, 'Point 1: @host rules applies');
assert_equals(li_list[1].offsetHeight, 0, 'Point 2: @host rules applies');
assert_equals(li_list[2].offsetHeight, 0, 'Point 3: @host rules applies');
assert_equals(li_list[3].offsetHeight, 0, 'Point 4: @host rules applies');
assert_not_equals(li_list[4].offsetHeight, 0, 'Point 5: style attribute value applies');
}), 'Only the last "li" element of shadow trees is displayed');
</script>
</body>
Copy link
Member

Choose a reason for hiding this comment

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

You might want to add a new line at the end of file.