jlengrand/webcomponentsjs
1
0
Fork 0
mirror of https://github.com/jlengrand/webcomponentsjs.git synced 2026-03-10 08:51:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #361 from webcomponents/fix-357

Browse Source 
Fixes #357
This commit is contained in:
Steve Orvell
2015-07-24 17:14:24 -07:00
parent 5608af3b74 925f78379d
commit 89c993a510
15 changed files with 206 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/CustomElements/boot.js
View File

@@ -43,6 +43,7 @@ if (useNative) {
// imports
var upgradeDocumentTree = scope.upgradeDocumentTree;
var upgradeDocument = scope.upgradeDocument;
// ShadowDOM polyfill wraps elements but some elements like `document`
// cannot be wrapped so we help the polyfill by wrapping some elements.
@@ -57,18 +58,18 @@ if (!window.wrap) {
}
}
// eagarly upgrade imported documents
if (window.HTMLImports) {
window.HTMLImports.__importsParsingHook = function(elt) {
upgradeDocument(wrap(elt.import));
};
}
// bootstrap parsing
function bootstrap() {
// parse document
// one more upgrade to catch out of order registrations
upgradeDocumentTree(window.wrap(document));
// install upgrade hook if HTMLImports are available
if (window.HTMLImports) {
window.HTMLImports.__importsParsingHook = function(elt) {
upgradeDocumentTree(window.wrap(elt.import));
//CustomElements.parser.parse(elt.import);
};
}
// set internal 'ready' flag, now document.registerElement will trigger
// synchronous upgrades
window.CustomElements.ready = true;

1
src/CustomElements/observe.js
View File

@@ -300,6 +300,7 @@ if (originalCreateShadowRoot) {
// exports
scope.watchShadow = watchShadow;
scope.upgradeDocumentTree = upgradeDocumentTree;
scope.upgradeDocument = upgradeDocument;
scope.upgradeSubtree = addedSubtree;
scope.upgradeAll = addedNode;
scope.attached = attached;

2
src/HTMLImports/importer.js
View File

@@ -84,7 +84,7 @@ var importer = {
}
// don't store import record until we're actually loaded
// store document resource
elt.import = doc;
elt.__doc = doc;
}
parser.parseNext();
},

16
src/HTMLImports/parser.js
View File

@@ -32,8 +32,8 @@ var importParser = {
// parse selectors for import document elements
importsSelectors: [
IMPORT_SELECTOR,
'link[rel=stylesheet]',
'style',
'link[rel=stylesheet]:not([type])',
'style:not([type])',
'script:not([type])',
'script[type="application/javascript"]',
'script[type="text/javascript"]'
@@ -107,9 +107,7 @@ var importParser = {
},
parseImport: function(elt) {
// TODO(sorvell): consider if there's a better way to do this;
// expose an imports parsing hook; this is needed, for example, by the
// CustomElements polyfill.
elt.import = elt.__doc;
if (window.HTMLImports.__importsParsingHook) {
window.HTMLImports.__importsParsingHook(elt);
}
@@ -178,6 +176,10 @@ var importParser = {
trackElement: function(elt, callback) {
var self = this;
var done = function(e) {
// make sure we don't get multiple load/error signals (FF seems to do
// this sometimes when <style> elments change)
elt.removeEventListener('load', done);
elt.removeEventListener('error', done);
if (callback) {
callback(e);
}
@@ -256,7 +258,7 @@ var importParser = {
for (var i=0, l=nodes.length, p=0, n; (i<l) && (n=nodes[i]); i++) {
if (!this.isParsed(n)) {
if (this.hasResource(n)) {
return nodeIsImport(n) ? this.nextToParseInDoc(n.import, n) : n;
return nodeIsImport(n) ? this.nextToParseInDoc(n.__doc, n) : n;
} else {
return;
}
@@ -288,7 +290,7 @@ var importParser = {
},
hasResource: function(node) {
if (nodeIsImport(node) && (node.import === undefined)) {
if (nodeIsImport(node) && (node.__doc === undefined)) {
return false;
}
return true;

13
tests/HTMLImports/html/imports/sheet4.css Normal file
View File

@@ -0,0 +1,13 @@
/**
* @license
* Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/
.link-typed {
background-color: navy;
}

6
tests/HTMLImports/html/imports/style-elements-import.html
View File

@@ -21,4 +21,10 @@
.styled {
background: red;
}
</style>
<style type="foo">
.style-typed {
background: red;
}
</style>

2
tests/HTMLImports/html/imports/style-links-import.html
View File

@@ -10,3 +10,5 @@
<link rel="stylesheet" href="sheet3.css">
<link rel="stylesheet" href="sheet1.css">
<link rel="stylesheet" href="sheet2.css">
<link rel="stylesheet" type="foo" href="sheet4.css">

8
tests/HTMLImports/html/style-links.html
View File

@@ -37,6 +37,10 @@
<div class="styled">red?</div>
<div class="overridden-style">black?</div>
<div class="link-typed">red?</div>
<div class="style-typed">red?</div>
<script>
addEventListener('HTMLImportsLoaded', function() {
@@ -59,6 +63,10 @@
chai.assert.equal(computedStyle('.styled').backgroundColor, 'rgb(255, 0, 0)');
// styles in style are applied in the correct order and overriddable
chai.assert.equal(computedStyle('.overridden-style').backgroundColor, 'rgb(0, 0, 0)');
// links with type attr are not imported
chai.assert.equal(computedStyle('.link-typed').backgroundColor, 'rgba(0, 0, 0, 0)');
// styles with type attr are not imported
chai.assert.equal(computedStyle('.style-typed').backgroundColor, 'rgba(0, 0, 0, 0)');
done();

32
tests/WebComponents/html/a1-define.html Normal file
View File

@@ -0,0 +1,32 @@
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<script>
(function() {
window.a1DocsList = [];
var p = Object.create(HTMLElement.prototype);
p.createdCallback = function() {
a1DocsList.push(this.ownerDocument.baseURI.split('/').pop());
this.isA1 = true;
}
document.registerElement('a-1', {prototype: p});
var p2 = Object.create(HTMLStyleElement.prototype);
p2.createdCallback = function() {
window.styleAppliedToDocument = Boolean(this.__appliedElement);
}
document.registerElement('special-style', {prototype: p2, extends: 'style'});
})();
</script>

11
tests/WebComponents/html/a1-import.html Normal file
View File

@@ -0,0 +1,11 @@
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="a1-define.html">
<link rel="import" href="a1-reference.html">

12
tests/WebComponents/html/a1-instance.html Normal file
View File

@@ -0,0 +1,12 @@
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<a-1></a-1>
<style is="special-style"></style>

18
tests/WebComponents/html/a1-reference.html Normal file
View File

@@ -0,0 +1,18 @@
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="a1-instance.html">
<a-1></a-1>
<script>
// can reference upgraded instance in previous import when this script runs
var l = document._currentScript.ownerDocument.querySelector('link');
var a1 = l.import.querySelector('a-1');
window.a1 = a1;
window.isA1Upgraded = a1.isA1;
</script>

44
tests/WebComponents/html/ce-import-upgrade-async.html Normal file
View File

@@ -0,0 +1,44 @@
<!doctype html>
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title></title>
<meta charset="UTF-8">
<script src="../../tools/chai/chai.js"></script>
<script src="../../tools/htmltest.js"></script>
<script src="../../../webcomponents-lite.js"></script>
</head>
<body>
<script>
var assert = chai.assert;
function testImports() {
// import upgraded
assert.ok(a1);
assert.isTrue(isA1Upgraded);
// order expected
assert.deepEqual(a1DocsList, ['a1-instance.html', 'a1-reference.html']);
// style applied at upgrade time
assert.isTrue(styleAppliedToDocument);
done();
}
// be async
setTimeout(function() {
var l = document.createElement('link');
l.rel = 'import';
l.href = 'a1-import.html';
l.addEventListener('load', testImports);
document.head.appendChild(l);
});
</script>
</body>
</html>

39
tests/WebComponents/html/ce-import-upgrade.html Normal file
View File

@@ -0,0 +1,39 @@
<!doctype html>
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title></title>
<meta charset="UTF-8">
<script src="../../tools/chai/chai.js"></script>
<script src="../../tools/htmltest.js"></script>
<script src="../../../webcomponents-lite.js"></script>
<link rel="import" href="a1-import.html">
</head>
<body>
<script>
var assert = chai.assert;
function testImports() {
// import upgraded
assert.ok(a1);
assert.isTrue(isA1Upgraded);
// order expected
assert.deepEqual(a1DocsList, ['a1-instance.html', 'a1-reference.html']);
// style applied at upgrade time
assert.isTrue(styleAppliedToDocument);
done();
}
addEventListener('WebComponentsReady', testImports);
</script>
</body>
</html>

2
tests/WebComponents/tests.js
View File

@@ -22,6 +22,8 @@ htmlSuite('integration', function() {
htmlTest('html/ce-upgradedocumenttree.html');
htmlTest('html/ce-import.html?wc-shadow');
htmlTest('html/ce-upgrade-order.html');
htmlTest('html/ce-import-upgrade.html');
htmlTest('html/ce-import-upgrade-async.html');
});
htmlSuite('Library Cooperation', function() {