jlengrand/webcomponentsjs
1
0
Fork 0
mirror of https://github.com/jlengrand/webcomponentsjs.git synced 2026-05-18 00:41:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

almost everything works!

Browse Source
This commit is contained in:
Daniel Freedman
2015-10-19 15:08:51 -07:00
parent ce326086d0
commit 3d56bb676c
41 changed files with 316 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
tests/ShadowCSS/html/before-content.html
View File

@@ -11,8 +11,7 @@
<html>
<head>
<title>content in :before pseudo-class</title>
<script src="../../tools/chai/chai.js"></script>
<script src="../../tools/htmltest.js"></script>
<script src="../../../../web-component-tester/browser.js"></script>
<script src="../../../webcomponents.js"></script>
<script src="register.js"></script>
@@ -52,7 +51,7 @@
<script>
register('x-test', '', HTMLElement.prototype);
document.addEventListener('WebComponentsReady', function() {
test('before content', function(done) {
setTimeout(function() {
var root = document.querySelector('x-test').shadowRoot;
function testContent(node, contentRe) {

6
tests/ShadowCSS/html/colon-host.html
View File

@@ -12,8 +12,7 @@
<head>
<meta name="viewport" content="initial-scale=1.0">
<title>Using :host styling</title>
<script src="../../tools/chai/chai.js"></script>
<script src="../../tools/htmltest.js"></script>
<script src="../../../../web-component-tester/browser.js"></script>
<script src="../../../webcomponents.js"></script>
<script src="register.js"></script>
@@ -175,7 +174,7 @@
</div>
<script>
document.addEventListener('WebComponentsReady', function() {
test(':host', function() {
var foo = document.querySelector('x-foo');
chai.assert.equal(getComputedStyle(foo).backgroundColor, 'rgb(255, 0, 0)',
':host styles matching * are applied (backgroundColor)');
@@ -274,7 +273,6 @@
chai.assert.equal(aStyle.fontStyle, 'italic',
':host:pseudoclass styles are shimmed (font-style)');
done();
});
</script>
</body>

6
tests/ShadowCSS/html/combinators-shadow.html
View File

@@ -12,8 +12,7 @@
<head>
<meta name="viewport" content="initial-scale=1.0">
<title>Using combinators styling</title>
<script src="../../tools/chai/chai.js"></script>
<script src="../../tools/htmltest.js"></script>
<script src="../../../../web-component-tester/browser.js"></script>
<script src="../../../webcomponents.js"></script>
<script src="register.js"></script>
@@ -76,7 +75,7 @@
<x-foo></x-foo>
<script>
document.addEventListener('WebComponentsReady', function() {
test('combinators shadow', function() {
var foo = document.querySelector('x-foo');
var xBarRoot = foo.shadowRoot.querySelector('x-bar').shadowRoot;
var bar = xBarRoot.querySelector('.bar');
@@ -119,7 +118,6 @@
chai.assert.equal(getComputedStyle(zotDiv).backgroundColor, 'rgb(0, 0, 255)',
'combinators applied via stylesheet in main document');
}
done();
});
</script>
</body>

6
tests/ShadowCSS/html/combinators.html
View File

@@ -12,8 +12,7 @@
<head>
<meta name="viewport" content="initial-scale=1.0">
<title>Using combinators styling</title>
<script src="../../tools/chai/chai.js"></script>
<script src="../../tools/htmltest.js"></script>
<script src="../../../../web-component-tester/browser.js"></script>
<script src="../../../webcomponents.js"></script>
<script src="register.js"></script>
@@ -71,7 +70,7 @@
<x-foo></x-foo>
<script>
document.addEventListener('WebComponentsReady', function() {
test('combinators', function() {
var foo = document.querySelector('x-foo');
var xBarRoot = foo.shadowRoot.querySelector('x-bar').shadowRoot;
var bar = xBarRoot.querySelector('.bar');
@@ -107,7 +106,6 @@
chai.assert.equal(getComputedStyle(zotDiv).backgroundColor, 'rgb(0, 0, 255)',
'combinators applied via stylesheet in main document');
}
done();
});
</script>
</body>

10
tests/ShadowCSS/html/compressed.html
View File

@@ -12,8 +12,7 @@
<head>
<meta name="viewport" content="initial-scale=1.0">
<title>Using compressed stylesheet</title>
<script src="../../tools/chai/chai.js"></script>
<script src="../../tools/htmltest.js"></script>
<script src="../../../../web-component-tester/browser.js"></script>
<script src="../../../webcomponents.js" shadow></script>
<script src="register.js"></script>
@@ -35,11 +34,10 @@
<x-test></x-test>
<script>
document.addEventListener('WebComponentsReady', function() {
test('compressed', function() {
var sheet = document.querySelector('[shim-shadowdom-css]');
//chai.assert.notMatch(sheet.textContent, /polyfill-next-selector/, 'polyfill rules properly replaced');
//chai.assert.notMatch(sheet.textContent, /-shadowcsshost/, 'polyfill rules properly replaced');
done();
chai.assert.notMatch(sheet.textContent, /polyfill-next-selector/, 'polyfill rules properly replaced');
chai.assert.notMatch(sheet.textContent, /-shadowcsshost/, 'polyfill rules properly replaced');
});
</script>
</body>

5
tests/ShadowCSS/html/css-animation.html
View File

@@ -11,8 +11,7 @@
<html>
<head>
<title>polyfill rule</title>
<script src="../../tools/chai/chai.js"></script>
<script src="../../tools/htmltest.js"></script>
<script src="../../../../web-component-tester/browser.js"></script>
<script src="../../../webcomponents.js" shadow></script>
<script src="register.js"></script>
@@ -61,7 +60,7 @@
</template>
<script>
XAnimate = register('x-animate', '', HTMLElement.prototype);
addEventListener('WebComponentsReady', function() {
test('css animation', function(done) {
setTimeout(function() {
var x = document.querySelector('x-animate');
var a = x.shadowRoot.querySelector('.animate');

5
tests/ShadowCSS/html/polyfill-directive.html
View File

@@ -11,8 +11,7 @@
<html>
<head>
<title>polyfill directive</title>
<script src="../../tools/chai/chai.js"></script>
<script src="../../tools/htmltest.js"></script>
<script src="../../../../web-component-tester/browser.js"></script>
<script src="../../../webcomponents.js" shadow></script>
<script src="register.js"></script>
@@ -96,7 +95,7 @@
XBar = register('x-bar', 'x-foo', HTMLElement.prototype);
XAuto = register('x-auto', '', HTMLElement.prototype);
document.addEventListener('WebComponentsReady', function() {
test('polyfill directive', function(done) {
setTimeout(function() {
// x-foo
var n = document.querySelector('x-foo');

6
tests/ShadowCSS/html/polyfill-rule.html
View File

@@ -11,8 +11,7 @@
<html>
<head>
<title>polyfill rule</title>
<script src="../../tools/chai/chai.js"></script>
<script src="../../tools/htmltest.js"></script>
<script src="../../../../web-component-tester/browser.js"></script>
<script src="../../../webcomponents.js" shadow></script>
<script src="register.js"></script>
@@ -55,7 +54,7 @@
<script>
XFoo = register('x-foo', '', HTMLElement.prototype);
document.addEventListener('WebComponentsReady', function() {
test('polyfill rule', function() {
var foo = document.querySelector('x-foo');
var zonkStyle = getComputedStyle(foo.querySelector('.zonk'));
chai.assert.equal(zonkStyle.backgroundColor,
@@ -69,7 +68,6 @@
'rgb(0, 0, 0)', 'polyfill-unscoped-rule single quote');
chai.assert.equal(unscopedStyle.paddingTop,
'20px', 'polyfill-unscoped-rule double quote');
done();
});
</script>

5
tests/ShadowCSS/html/pseudo-scoping-strict.html
View File

@@ -11,8 +11,7 @@
<html>
<head>
<title>Psuedo scoped styling</title>
<script src="../../tools/chai/chai.js"></script>
<script src="../../tools/htmltest.js"></script>
<script src="../../../../web-component-tester/browser.js"></script>
<script src="../../../webcomponents.js" shadow></script>
<script src="register.js"></script>
@@ -85,7 +84,7 @@
register('x-foo', '', HTMLElement.prototype);
register('x-button', 'button', HTMLButtonElement.prototype, ['x-button']);
document.addEventListener('WebComponentsReady', function() {
test('Psuedo scoped styling strict', function(done) {
setTimeout(function() {
var foo = document.querySelector('x-foo');
var fooDiv = foo.shadowRoot.querySelector('div');

5
tests/ShadowCSS/html/pseudo-scoping.html
View File

@@ -11,8 +11,7 @@
<html>
<head>
<title>Psuedo scoped styling</title>
<script src="../../tools/chai/chai.js"></script>
<script src="../../tools/htmltest.js"></script>
<script src="../../../../web-component-tester/browser.js"></script>
<script src="../../../webcomponents.js" shadow></script>
<script src="register.js"></script>
@@ -74,7 +73,7 @@
register('x-foo', '', HTMLElement.prototype);
register('x-button', 'button', HTMLButtonElement.prototype, ['x-button']);
document.addEventListener('WebComponentsReady', function() {
test('Psuedo scoped styling', function(done) {
setTimeout(function() {
var foo = document.querySelector('x-foo');
var fooDiv = foo.shadowRoot.querySelector('div');

5
tests/ShadowCSS/html/style-import-base-tag.html
View File

@@ -18,8 +18,7 @@
var wcjs = location.href.match(/^.*webcomponentsjs\//);
base.href = wcjs ? wcjs[0] : '/';
</script>
<script src="tests/tools/chai/chai.js"></script>
<script src="tests/tools/htmltest.js"></script>
<script src="/components/web-component-tester/browser.js"></script>
<script src="webcomponents.js" shadow></script>
<link rel="stylesheet" href="tests/ShadowCSS/html/imports/style-import-base-tag.css" shim-shadowdom>
@@ -28,7 +27,7 @@
<div id="test1" class="red">red</div>
<script>
var link = document.querySelector('link[rel=stylesheet]');
document.addEventListener('WebComponentsReady', function() {
test('style import base tag', function(done) {
function getComputed(selector) {
return getComputedStyle(document.querySelector(selector));
}

6
tests/ShadowCSS/html/style-import.html
View File

@@ -11,8 +11,7 @@
<html>
<head>
<title>Imports style loading</title>
<script src="../../tools/chai/chai.js"></script>
<script src="../../tools/htmltest.js"></script>
<script src="../../../../web-component-tester/browser.js"></script>
<script src="../../../webcomponents.js" shadow></script>
<link rel="import" href="imports/style-import.html">
@@ -22,7 +21,7 @@
<div id="test2" class="blue">blue</div>
<div id="test3" class="image"></div>
<script>
document.addEventListener('WebComponentsReady', function() {
test('style import', function() {
function getComputed(selector) {
return getComputedStyle(document.querySelector(selector));
}
@@ -30,7 +29,6 @@
chai.assert.equal(getComputed('#test1').backgroundColor, 'rgb(255, 0, 0)', 'shimmed imported style is loaded');
chai.assert.equal(getComputed('#test2').backgroundColor, 'rgb(0, 0, 255)', 'shimmed imported sheet is loaded');
chai.assert.ok(getComputed('#test3').backgroundImage, 'shimmed imported style path is correct');
done();
});
</script>
</body>