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

Update the test of ShadowDOM ::distributed() pseudo-element #148

Closed
wants to merge 4 commits into from
Closed

Update the test of ShadowDOM ::distributed() pseudo-element #148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
199ae6c
Update the test of ::distributed() pseudo-element for http://www.w3.o…
Jun 8, 2013
b22ef45
Add the test for Shadow-DOM ::distributed() pseudo-element with Relat…
Jun 8, 2013
fccb1b2
Add the test for ::distributed() pseudo-element with descendant selec…
Jun 8, 2013
7faa5be
Add the test for ::distributed() pseudo-element with the selector whi…
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
4 changes: 2 additions & 2 deletions shadow-dom/resources/bobs_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<li id='li2' title="li2"><a href='#2'>Link 2</a></li>
<li id='li3' class='shadow'><a href='#3'>Link 3 Shadow</a></li>
<li id='li4' class='shadow2'><a href='#4'>Link 4 Shadow 2</a></li>
<li id='li5'><a href='#5'>Link 5</a></li>
<li id='li5'><a id="a5" class="shadow" href='#5'>Link 5</a></li>
<li id='li6' class='shadow'><a href='#5'>Link 6 Shadow</a></li>
</ul>
<div id="divid" class='breaking'>
Expand All @@ -32,4 +32,4 @@
<input type='checkbox' id='chb2'>
</div>
</body>
</html>
</html>
44 changes: 22 additions & 22 deletions shadow-dom/shadow-trees/distributed-pseudo-element/test-001.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@
<head>
<title>Shadow DOM Test: A_04_04_01</title>
<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru">
<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#selecting-nodes-distributed-to-insertion-points">
<link rel="author" title="Tetsuharu OHZEKI" href="mailto:saneyuki.snyk@gmail.com">
<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#distributed-pseudo-element">
<meta name="assert" content="Matching Children, Distributed To Insertion Points">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
Expand All @@ -24,10 +25,6 @@
<script>
var A_04_04_01_T1 = async_test('A_04_04_01_T01');


// Reference combinators are not implemented yet, so the test shouldn't work for now
// See the progress at http://wkb.ug/82169

A_04_04_01_T1.step(function () {
var iframe = document.createElement('iframe');
iframe.src = '../../resources/bobs_page.html';
Expand All @@ -45,29 +42,32 @@
s.appendChild(subdiv1);

var style = d.createElement('style');
style.innerHTML = 'ul.stories/select/li.shadow {display:none}';
style.innerHTML = 'li { display: block; }' +
'::distributed(li.shadow) { display:none; }';
d.head.appendChild(style);

//TODO (sgrekhov). Should we add the test for
//d.querySelector('ul.stories /select/ .shadow')?


//The order of DOM elements should be the following:
//li3, li6 - invisible. Other elements visible
assert_equals(d.querySelector('#li3').offsetTop, 0,
'Point 1: Elements that don\'t mach insertion point criteria participate in distribution');
assert_equals(d.querySelector('#li6').offsetTop, 0,
'Point 2: Elements that don\'t mach insertion point criteria participate in distribution');

var li3 = d.querySelector('#li3');
var li6 = d.querySelector('#li6');
assert_equals(window.getComputedStyle(li3).display, "none",
'Point 1: Elements that don\'t mach insertion point criteria participate in distribution');
assert_equals(window.getComputedStyle(li6).display, "none",
'Point 2: Elements that don\'t mach insertion point criteria participate in distribution');

assert_true(d.querySelector('#li1').offsetTop > 0,
'Point 3: Reference combinators should be a valid insertion point matching criteria, element should be visible');
assert_true(d.querySelector('#li1').offsetTop < d.querySelector('#li2').offsetTop,
'Point 4: Reference combinators should be a valid insertion point matching criteria');
assert_true(d.querySelector('#li2').offsetTop < d.querySelector('#li4').offsetTop,
'Point 5: Reference combinators should be a valid insertion point matching criteria');
assert_true(d.querySelector('#li4').offsetTop < d.querySelector('#li5').offsetTop,
'Point 6: Reference combinators should be a valid insertion point matching criteria');
var li1 = d.querySelector('#li1');
var li2 = d.querySelector('#li2');
var li4 = d.querySelector('#li4');
var li5 = d.querySelector('#li5');
assert_equals(window.getComputedStyle(li1).display, "block",
'Point 3: ::distributed() pseudo-element should be a valid insertion point matching criteria, element should be visible');
assert_equals(window.getComputedStyle(li2).display, "block",
'Point 4: ::distributed() pseudo-element should be a valid insertion point matching criteria, element should be visible');
assert_equals(window.getComputedStyle(li4).display, "block",
'Point 5: ::distributed() pseudo-element should be a valid insertion point matching criteria, element should be visible');
assert_equals(window.getComputedStyle(li5).display, "block",
'Point 6: ::distributed() pseudo-element should be a valid insertion point matching criteria, element should be visible');
} finally {
iframe.parentNode.removeChild(iframe);
}
Expand Down
68 changes: 68 additions & 0 deletions shadow-dom/shadow-trees/distributed-pseudo-element/test-002.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!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: A_04_04_01</title>
<link rel="author" title="Tetsuharu OHZEKI" href="mailto:saneyuki.snyk@gmail.com">
<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#distributed-pseudo-element">
<meta name="assert" content="::distributed() pseudo-element, Relative Selector">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
</head>
<body>
<div id="log"></div>
<script>
var A_04_04_01_T2 = async_test('A_04_04_01_T02');

A_04_04_01_T2.step(function () {
var iframe = document.createElement('iframe');
iframe.src = '../../resources/bobs_page.html';
document.body.appendChild(iframe);

iframe.onload = A_04_04_01_T2.step_func(function () {
try {
var d = iframe.contentDocument;
var ul = d.querySelector('ul.stories');
var s = createSR(ul);

//make shadow subtree
var subdiv1 = d.createElement('div');
subdiv1.innerHTML = '<ul><content select="li"></content></ul>';
s.appendChild(subdiv1);

var style = d.createElement('style');
style.innerHTML = '.shadow { display: block; }' +
'::distributed(>.shadow) { display:none; }';
d.head.appendChild(style);

//The order of DOM elements should be the following:
//li3, li6 - invisible. Other elements visible
var li3 = d.querySelector('#li3');
var li6 = d.querySelector('#li6');
assert_equals(window.getComputedStyle(li3).display, "none",
'Point 1: Elements that don\'t mach insertion point criteria participate in distribution');
assert_equals(window.getComputedStyle(li6).display, "none",
'Point 2: Elements that don\'t mach insertion point criteria participate in distribution');

var a5 = d.querySelector('#a5');
assert_equals(window.getComputedStyle(a5).display, "block",
'Point 3: ::distributed() pseudo-element with relative selector should be a valid insertion point matching criteria, element should be visible');
} finally {
iframe.parentNode.removeChild(iframe);
}
A_04_04_01_T2.done();
});
});
</script>
</body>
</html>
78 changes: 78 additions & 0 deletions shadow-dom/shadow-trees/distributed-pseudo-element/test-003.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<!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: A_04_04_01</title>
<link rel="author" title="Tetsuharu OHZEKI" href="mailto:saneyuki.snyk@gmail.com">
<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#distributed-pseudo-element">
<meta name="assert" content="::distributed() pseudo-element, with Descendant Selector">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
</head>
<body>
<div id="log"></div>
<script>
var A_04_04_01_T3 = async_test('A_04_04_01_T03');

A_04_04_01_T3.step(function () {
var iframe = document.createElement('iframe');
iframe.src = '../../resources/bobs_page.html';
document.body.appendChild(iframe);

iframe.onload = A_04_04_01_T3.step_func(function () {
try {
var d = iframe.contentDocument;

//make shadow tree 1
var ul1 = d.querySelector('ul.stories');
var s1 = createSR(ul1);
var subdiv1 = d.createElement('div');
subdiv1.innerHTML = '<ul><content select="li"></content></ul>';
s1.appendChild(subdiv1);

//make shadow tree 2
var ul2 = d.querySelector('#ul2');
var s2 = createSR(ul2);
var subdiv2 = d.createElement('div');
subdiv2.innerHTML = '<ul><content select="li"></content></ul>';
s2.appendChild(subdiv1);

var style = d.createElement('style');
style.innerHTML = '.shadow { display: block; }' +
'ul.stories ::distributed(.shadow) { display:none; }';
d.head.appendChild(style);

//The order of DOM elements should be the following:
//li3, li6 - invisible. Other elements visible
var li3 = d.querySelector('#li3');
var li6 = d.querySelector('#li6');
assert_equals(window.getComputedStyle(li3).display, "none",
'Point 1: Elements that don\'t mach insertion point criteria participate in distribution');
assert_equals(window.getComputedStyle(li6).display, "none",
'Point 2: Elements that don\'t mach insertion point criteria participate in distribution');

var li13 = d.querySelector('#li13');
var li16 = d.querySelector('#li16');
assert_equals(window.getComputedStyle(li13).display, "block",
'Point 3: ::distributed() pseudo-element with descendant selector should be a valid insertion point matching criteria, element should be visible');
assert_equals(window.getComputedStyle(li16).display, "block",
'Point 4: ::distributed() pseudo-element with descendant selector should be a valid insertion point matching criteria, element should be visible');
} finally {
iframe.parentNode.removeChild(iframe);
}
A_04_04_01_T3.done();
});
});
</script>
</body>
</html>
78 changes: 78 additions & 0 deletions shadow-dom/shadow-trees/distributed-pseudo-element/test-004.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<!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: A_04_04_01</title>
<link rel="author" title="Tetsuharu OHZEKI" href="mailto:saneyuki.snyk@gmail.com">
<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#distributed-pseudo-element">
<meta name="assert" content="::distributed() pseudo-element with the selector which represents an insertion point">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
</head>
<body>
<div id="log"></div>
<script>
var A_04_04_01_T4 = async_test('A_04_04_01_T04');

A_04_04_01_T4.step(function () {
var iframe = document.createElement('iframe');
iframe.src = '../../resources/bobs_page.html';
document.body.appendChild(iframe);

iframe.onload = A_04_04_01_T4.step_func(function () {
try {
var d = iframe.contentDocument;

//make shadow tree 1
var ul1 = d.querySelector('ul.stories');
var s1 = createSR(ul1);
var subdiv1 = d.createElement('div');
subdiv1.innerHTML = '<ul><content class="target" select="li"></content></ul>';
s1.appendChild(subdiv1);

//make shadow tree 2
var ul2 = d.querySelector('#ul2');
var s2 = createSR(ul2);
var subdiv2 = d.createElement('div');
subdiv2.innerHTML = '<ul><content select="li"></content></ul>';
s2.appendChild(subdiv1);

var style = d.createElement('style');
style.innerHTML = '::distributed(.shadow) { display:block; }' +
'.target::distributed(.shadow) { display:none; }';
d.head.appendChild(style);

//The order of DOM elements should be the following:
//li3, li6 - invisible. Other elements visible
var li3 = d.querySelector('#li3');
var li6 = d.querySelector('#li6');
assert_equals(window.getComputedStyle(li3).display, "none",
'Point 1: Elements that don\'t mach insertion point criteria participate in distribution');
assert_equals(window.getComputedStyle(li6).display, "none",
'Point 2: Elements that don\'t mach insertion point criteria participate in distribution');

var li13 = d.querySelector('#li13');
var li16 = d.querySelector('#li16');
assert_equals(window.getComputedStyle(li13).display, "block",
'Point 3: ::distributed() pseudo-element with descendant selector should be a valid insertion point matching criteria, element should be visible');
assert_equals(window.getComputedStyle(li16).display, "block",
'Point 4: ::distributed() pseudo-element with descendant selector should be a valid insertion point matching criteria, element should be visible');
} finally {
iframe.parentNode.removeChild(iframe);
}
A_04_04_01_T4.done();
});
});
</script>
</body>
</html>