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

nested shadow dom test #143

Closed
wants to merge 15 commits into from
Closed

nested shadow dom test #143

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
9229d5a
nested shadow dom test
Jun 8, 2013
2fe5ed3
do not inherit stylesheets from out of nested shadow-dom
thujikun Jun 8, 2013
fc1684a
add author and help metadata and fix title
thujikun Jun 8, 2013
e232ff3
change test name
thujikun Jun 8, 2013
9f723f9
change file name
thujikun Jun 8, 2013
5380535
fix color mistake
thujikun Jun 8, 2013
8126d09
Add inherit style case and not inherit style case
thujikun Jun 8, 2013
313f88d
add applyAuthorStyle attribute test and add metadata
thujikun Jun 8, 2013
9c30ca6
fix link author
thujikun Jun 8, 2013
2ecf3a5
change test name and description
thujikun Jun 8, 2013
730fba3
change test name and description
thujikun Jun 8, 2013
db060be
Add applyAuthorStyle test because existing Test is terrible
thujikun Jun 8, 2013
14d2bce
Add resetStyleInheritance Test and change test name
thujikun Jun 8, 2013
23f52db
change test name
thujikun Jun 8, 2013
cf46862
Remove close tag of <link>
thujikun 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
51 changes: 51 additions & 0 deletions .../elements-and-dom-objects/shadowroot-object/shadowroot-attributes/apply-author-style.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE HTML>
<html>
<head>
<title>ShadowRoot Object: Apply author style</title>
<link rel="author" title="thujikun" href="mailto:tsuji.0107@gmail.com">
<link rel="help" href="http://www.w3.org/TR/shadow-dom/">
<meta name="assert" content="ShadowRoot Object: attribute bool applyAuthorStyles attribute. If true, the author styles are applied">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../../testcommon.js"></script>
</head>
<body>
<h1>ShadowRoot Object: Apply author style</h1>

<style>
#shadow {
display: none;
}
</style>
<div id="wrap"></div>
<template id="shadow-template">
<style>
#shadow {
width: 100px;
height: 100px;
background: #ff0000;
}
</style>
<div id="shadow">
</div>
</template>

<div id="log"></div>

<script>
test(function() {
var wrap = document.getElementById('wrap'),
shadowRoot = createSR(wrap),
shadow = document.getElementById('shadow-template').content,
getComputedStyle = document.defaultView.getComputedStyle;

shadowRoot.applyAuthorStyle = true;

shadowRoot.appendChild(shadow);

assert_equals(getComputedStyle(shadowRoot.querySelector('#shadow')).display, 'none');

}, 'apply author style to shadow dom');
</script>
</body>
</html>
51 changes: 51 additions & 0 deletions ...ts-and-dom-objects/shadowroot-object/shadowroot-attributes/do-not-apply-author-style.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE HTML>
<html>
<head>
<title>ShadowRoot Object: Don`t apply author style</title>
<link rel="author" title="thujikun" href="mailto:tsuji.0107@gmail.com">
<link rel="help" href="http://www.w3.org/TR/shadow-dom/">
<meta name="assert" content="ShadowRoot Object: attribute bool applyAuthorStyles attribute. If true, the author styles are not applied">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../../testcommon.js"></script>
</head>
<body>
<h1>ShadowRoot Object: Don`t apply author style</h1>

<style>
#shadow {
display: none;
}
</style>
<div id="wrap"></div>
<template id="shadow-template">
<style>
#shadow {
width: 100px;
height: 100px;
background: #00ff00;
}
</style>
<div id="shadow">
</div>
</template>

<div id="log"></div>

<script>
test(function() {
var wrap = document.getElementById('wrap'),
shadowRoot = createSR(wrap),
shadow = document.getElementById('shadow-template').content,
getComputedStyle = document.defaultView.getComputedStyle;

shadowRoot.applyAuthorStyle = false;

shadowRoot.appendChild(shadow);

assert_equals(getComputedStyle(shadowRoot.querySelector('#shadow')).display, 'block');

}, 'apply author style to shadow dom');
</script>
</body>
</html>
43 changes: 43 additions & 0 deletions ...d-dom-objects/shadowroot-object/shadowroot-attributes/do-not-reset-style-inheritance.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE HTML>
<html>
<head>
<title>ShadowRoot Object: Don't reset style inheritance</title>
<link rel="author" title="thujikun" href="mailto:tsuji.0107@gmail.com">
<link rel="help" href="http://www.w3.org/TR/shadow-dom/">
<meta name="assert" content="ShadowRoot Object: attribute bool resetStyleInheritance. If true, the properties don`t continue to inherit CSS styles">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../../testcommon.js"></script>
</head>
<body>
<h1>ShadowRoot Object: Don`t reset style inheritance</h1>

<style>
#wrap {
font-size: 50px;
}
</style>
<div id="wrap"></div>
<template id="shadow-template">
<div id="shadow">
</div>
</template>

<div id="log"></div>
<script>
test(function() {
var wrap = document.getElementById('wrap'),
shadowRoot = createSR(wrap),
shadow = document.getElementById('shadow-template').content,
getComputedStyle = document.defaultView.getComputedStyle;

shadowRoot.appendChild(shadow);

shadowRoot.resetStyleInheritance = false;

assert_equals(getComputedStyle(shadowRoot.querySelector('#shadow')).fontSize, '50px');

}, 'reset style inheritance');
</script>
</body>
</html>
43 changes: 43 additions & 0 deletions ...ents-and-dom-objects/shadowroot-object/shadowroot-attributes/reset-style-inheritance.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE HTML>
<html>
<head>
<title>ShadowRoot Object: Reset style inheritance</title>
<link rel="author" title="thujikun" href="mailto:tsuji.0107@gmail.com">
<link rel="help" href="http://www.w3.org/TR/shadow-dom/">
<meta name="assert" content="ShadowRoot Object: attribute bool resetStyleInheritance. If true, the properties don`t continue to inherit CSS styles">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../../testcommon.js"></script>
</head>
<body>
<h1>ShadowRoot Object: Reset style inheritance</h1>

<style>
#wrap {
font-size: 50px;
}
</style>
<div id="wrap"></div>
<template id="shadow-template">
<div id="shadow">
</div>
</template>

<div id="log"></div>
<script>
test(function() {
var wrap = document.getElementById('wrap'),
shadowRoot = createSR(wrap),
shadow = document.getElementById('shadow-template').content,
getComputedStyle = document.defaultView.getComputedStyle;

shadowRoot.appendChild(shadow);

shadowRoot.resetStyleInheritance = true;

assert_not_equals(getComputedStyle(shadowRoot.querySelector('#shadow')).fontSize, '50px');

}, 'reset style inheritance');
</script>
</body>
</html>
80 changes: 80 additions & 0 deletions shadow-dom/shadow-trees/nested-shadow-trees/apply-author-style.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Nested tree: Apply author style</title>
<link rel="author" title="thujikun" href="mailto:tsuji.0107@gmail.com">
<link rel="help" href="http://www.w3.org/TR/shadow-dom/">
<meta name="assert" content="Nested tree: attribute bool applyAuthorStyles attribute. If true, the author styles are applied">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
</head>
<body>
<h1>Nested tree: Apply author style</h1>

<style>
#level2-red {
width: 100px;
height: 100px;
background: #ff0000;
}
</style>
<div id="level0"></div>

<div id="log"></div>
<template id="level1-template">
<style>
#level2-blue {
width: 100px;
height: 100px;
background: #0000ff;
}
</style>

<div id="level1">
<div id="level2-root"></div>
</div>

</template>
<template id="level2-template">
<style>
#level2-green {
width: 100px;
height: 100px;
background: #00ff00;
}
</style>
<div id="level2-red">
</div>
<div id="level2-blue">
</div>
<div id="level2-green">
</div>
</template>
<script>
test(function() {
var level0 = document.getElementById('level0'),
shadowLevel1 = createSR(level0),
shadowLevel2,
level1 = document.getElementById('level1-template').content,
level2 = document.getElementById('level2-template').content,
getComputedStyle = document.defaultView.getComputedStyle;

shadowLevel1.applyAuthorStyle = true;

shadowLevel1.appendChild(level1);

shadowLevel2 = shadowLevel1.getElementById('level2-root').webkitCreateShadowRoot();

shadowLevel2.applyAuthorStyle = true;

shadowLevel2.appendChild(level2);

assert_equals(getComputedStyle(shadowLevel2.querySelector('#level2-red')).backgroundColor, 'rgb(255, 0, 0)');
assert_equals(getComputedStyle(shadowLevel2.querySelector('#level2-blue')).backgroundColor, 'rgb(0, 0, 255)');
assert_equals(getComputedStyle(shadowLevel2.querySelector('#level2-green')).backgroundColor, 'rgb(0, 255, 0)');

}, 'apply author style on nested tree');
</script>
</body>
</html>
48 changes: 48 additions & 0 deletions shadow-dom/shadow-trees/nested-shadow-trees/cannot-access-from-external-dom.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Nested tree: nested shadow tree cannot be accessed from external dom</title>
<link rel="author" title="thujikun" href="tsuji.0107@gmail.com">
<link rel="help" href="http://www.w3.org/TR/shadow-dom/">
<meta name="assert" content="Nested tree: cannot be accessed from external dom. if true, not be accessed">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
</head>
<body>
<h1>Nested tree: nested shadow tree cannot be accessed from external dom</h1>
<div id="level0"></div>
<div id="log"></div>
<template id="level1-template">
<div id="level1">
<div id="level2-root"></div>
</div>

</template>
<template id="level2-template">
<div id="level2">
</div>
</template>
<script>
test(function() {
var level0 = document.getElementById('level0'),
shadowLevel1 = createSR(level0),
shadowLevel2,
level1 = document.getElementById('level1-template').content,
level2 = document.getElementById('level2-template').content;

shadowLevel1.appendChild(level1);

shadowLevel2 = createSR(shadowLevel1.getElementById('level2-root'));

shadowLevel2.appendChild(level2);

assert_equals(level0.querySelector('#level1'), null);
assert_equals(level0.querySelector('#level2'), null);
assert_equals(shadowLevel1.querySelector('#level2'), null);
assert_not_equals(shadowLevel1.querySelector('#level1'), null);
assert_not_equals(shadowLevel2.querySelector('#level2'), null);
}, 'nested shadow tree cannot be accessed from external dom');
</script>
</body>
</html>
76 changes: 76 additions & 0 deletions shadow-dom/shadow-trees/nested-shadow-trees/do-not-apply-author-style.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Nested tree: Don`t apply author style</title>
<link rel="author" title="thujikun" href="mailto:tsuji.0107@gmail.com">
<link rel="help" href="http://www.w3.org/TR/shadow-dom/">
<meta name="assert" content="Nested tree: attribute bool applyAuthorStyle attribute. If true, the author styles are not applied">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
</head>
<body>
<h1>Nested tree: Don`t apply author style</h1>

<style>
#level2-red {
width: 100px;
height: 100px;
background: #ff0000;
}
</style>
<div id="level0"></div>

<div id="log"></div>
<template id="level1-template">
<style>
#level2-blue {
width: 100px;
height: 100px;
background: #0000ff;
}
</style>

<div id="level1">
<div id="level2-root"></div>
</div>

</template>
<template id="level2-template">
<style>
#level2-green {
width: 100px;
height: 100px;
background: #00ff00;
}
</style>
<div id="level2-red">
</div>
<div id="level2-blue">
</div>
<div id="level2-green">
</div>
</template>
<script>
test(function() {
var level0 = document.getElementById('level0'),
shadowLevel1 = createSR(level0),
shadowLevel2,
level1 = document.getElementById('level1-template').content,
level2 = document.getElementById('level2-template').content,
getComputedStyle = document.defaultView.getComputedStyle;

shadowLevel1.appendChild(level1);

shadowLevel2 = shadowLevel1.getElementById('level2-root').webkitCreateShadowRoot();

shadowLevel2.appendChild(level2);

assert_not_equals(getComputedStyle(shadowLevel2.querySelector('#level2-red')).backgroundColor, 'rgb(255, 0, 0)');
assert_not_equals(getComputedStyle(shadowLevel2.querySelector('#level2-blue')).backgroundColor, 'rgb(0, 0, 255)');
assert_equals(getComputedStyle(shadowLevel2.querySelector('#level2-green')).backgroundColor, 'rgb(0, 255, 0)');

}, 'do not apply author style on nested tree');
</script>
</body>
</html>
Loading