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

HTMLImports ported to WCT

Browse Source
This commit is contained in:
Daniel Freedman
2015-10-19 11:36:19 -07:00
parent 343c068cb3
commit 4c83dc2a00
19 changed files with 135 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
tests/HTMLImports/html/HTMLImports.html
View File

@@ -11,8 +11,8 @@
<html>
<head>
<title>HTML Imports Test</title>
<script src="../../../src/HTMLImports/HTMLImports.js"></script>
<script src="../../../bower_components/web-component-tester/browser.js"></script>
<script src="../../../src/HTMLImports/HTMLImports.js"></script>
<link rel="import" href="imports/import-1.html">
</head>
<body>

20
tests/HTMLImports/html/HTMLImportsLoaded-native.html
View File

@@ -11,26 +11,22 @@
<html>
<head>
<title>HTMLImportsLoaded, native</title>
<script>
HTMLImports = {
useNative: ('import' in document.createElement('link'))
};
</script>
<script src="../../../src/HTMLImports/base.js"></script>
<script src="../../tools/htmltest.js"></script>
<script src="../../tools/chai/chai.js"></script>
<script>WCT = {waitFor: function(cb){ cb() }}</script>
<script src="../../../bower_components/web-component-tester/browser.js"></script>
<script src="../../../src/HTMLImports/HTMLImports.js"></script>
</head>
<body>
<link rel="import" href="imports/import-1.html">
<script>
if (!HTMLImports.useNative) {
done();
} else {
test('HTMLImportsLoaded fires with native imports', function(done) {
if (!HTMLImports.useNative) {
return done();
}
addEventListener('HTMLImportsLoaded', function(e) {
chai.assert.ok(true, 'HTMLImportsLoaded');
done();
});
}
});
</script>
</body>
</html>

8
tests/HTMLImports/html/base/load-base.html
View File

@@ -31,8 +31,7 @@
window.importError = importError;
})();
</script>
<script src="../../tools/htmltest.js"></script>
<script src="../../tools/chai/chai.js"></script>
<script src="../../../bower_components/web-component-tester/browser.js"></script>
<script src="../../../src/HTMLImports/HTMLImports.js"></script>
<link rel="import" href="imports/load-1.html" onload="importLoaded(event)">
<link rel="import" href="imports/load-2.html" onload="importLoaded(event)">
@@ -43,8 +42,8 @@
<div id="test2" class="blue">Test</div>
<div id="test3" class="image"></div>
<script>
document.addEventListener('HTMLImportsLoaded', function() {
var baseURI = location.href.replace('base/load-base.html', '').replace(location.search, '');
test('imports with base tag', function() {
var baseURI = location.protocol + '//' + location.host + location.pathname.replace('base/load-base.html', '');
chai.assert.equal(document.baseURI, baseURI, 'document.baseURI is correctly modified by base element');
//
chai.assert.equal(loadEvents, 3, 'expected # of load events');
@@ -52,7 +51,6 @@
chai.assert.equal(test1, 'rgb(255, 0, 0)');
var test2 = getComputedStyle(document.querySelector('#test2')).backgroundColor;
chai.assert.equal(test2, 'rgb(0, 0, 255)');
done();
});
</script>
</body>

3
tests/HTMLImports/html/csp.html
View File

@@ -11,8 +11,7 @@
<html>
<head>
<title>parser Test</title>
<script src="../../tools/htmltest.js"></script>
<script src="../../tools/chai/chai.js"></script>
<script src="../../../bower_components/web-component-tester/browser.js"></script>
<script src="../../../src/HTMLImports/HTMLImports.js"></script>
<meta http-equiv='Content-Security-Policy' content="script-src 'self';">

3
tests/HTMLImports/html/csp.js
View File

@@ -8,8 +8,7 @@
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/
addEventListener('HTMLImportsLoaded', function() {
test('imported scripts loaded under CSP', function() {
chai.assert.ok(window.externalScriptParsed1, 'externalScriptParsed1');
chai.assert.ok(window.externalScriptParsed2, 'externalScriptParsed2');
done();
});

14
tests/HTMLImports/html/currentScript.html
View File

@@ -11,18 +11,20 @@
<html>
<head>
<title>_currentScript Test</title>
<script src="../../tools/htmltest.js"></script>
<script src="../../tools/chai/chai.js"></script>
<script>WCT = {waitFor: function(cb){cb()}};</script>
<script src="../../../bower_components/web-component-tester/browser.js"></script>
<script src="../../../src/HTMLImports/HTMLImports.js"></script>
<link rel="import" href="imports/script-1.html">
<script src="imports/current-script.js"></script>
</head>
<body>
<script>
chai.assert.equal(document._currentScript.parentNode, document.body, '_currentScript set in main document');
addEventListener('HTMLImportsLoaded', function() {
chai.assert.equal(window.remoteCurrentScriptExecuted, 2, 'remote script executed from import and main document');
done();
var cs = document._currentScript;
test('currentScript', function() {
chai.assert.equal(cs.parentNode, document.body, '_currentScript set in main document');
addEventListener('HTMLImportsLoaded', function() {
chai.assert.equal(window.remoteCurrentScriptExecuted, 2, 'remote script executed from import and main document');
});
});
</script>
</body>

7
tests/HTMLImports/html/customevent-detail.html
View File

@@ -11,21 +11,18 @@
<html>
<head>
<title>CustomEvent detail test</title>
<script src="../../tools/htmltest.js"></script>
<script src="../../tools/chai/chai.js"></script>
<script src="../../../bower_components/web-component-tester/browser.js"></script>
<script src="../../../src/HTMLImports/HTMLImports.js"></script>
</head>
<body>
<script>
addEventListener('HTMLImportsLoaded', function() {
test('CustomEvent detail', function(done) {
var eventName = 'some-event';
var eventDetail = 'some-detail';
document.body.addEventListener(eventName, function(evt) {
chai.assert.equal(evt.detail, eventDetail, 'expected CustomEvent detail');
done();
});
var evt = new CustomEvent(eventName, {detail: eventDetail});
document.body.dispatchEvent(evt);
});

6
tests/HTMLImports/html/dedupe.html
View File

@@ -11,8 +11,7 @@
<html>
<head>
<title>HTML dedupe Test</title>
<script src="../../tools/htmltest.js"></script>
<script src="../../tools/chai/chai.js"></script>
<script src="../../../bower_components/web-component-tester/browser.js"></script>
<script src="../../../src/HTMLImports/HTMLImports.js"></script>
<link rel="import" href="imports/dedupe.html">
<script>
@@ -27,9 +26,8 @@
</head>
<body>
<script>
addEventListener('HTMLImportsLoaded', function() {
test('imports deduped', function() {
chai.assert.equal(dedupe, 1, 'import loaded');
done();
});
</script>
</body>

29
tests/HTMLImports/html/dynamic-all-imports-detail.html
View File

@@ -11,8 +11,15 @@
<html>
<head>
<title>HTML Imports Dynamic</title>
<script src="../../tools/htmltest.js"></script>
<script src="../../tools/chai/chai.js"></script>
<script>
var ready;
WCT = {
waitFor: function(cb) {
ready = cb;
}
};
</script>
<script src="../../../bower_components/web-component-tester/browser.js"></script>
<script src="../../../src/HTMLImports/HTMLImports.js"></script>
</head>
<body>
@@ -33,15 +40,19 @@
chai.assert.ok(e.target.import);
});
}
HTMLImports.whenReady(function(detail) {
chai.assert.equal(detail.allImports.length, 2);
chai.assert.equal(detail.loadedImports.length, 2);
ready();
});
});
chai.expect(detail.allImports[0].href).to.contain('imports/load-1.html');
chai.expect(detail.allImports[1].href).to.contain('imports/load-2.html');
test('HTMLImports whenready detail', function(done) {
HTMLImports.whenReady(function(detail) {
chai.assert.equal(detail.allImports.length, 2);
chai.assert.equal(detail.loadedImports.length, 2);
done();
});
chai.expect(detail.allImports[0].href).to.contain('imports/load-1.html');
chai.expect(detail.allImports[1].href).to.contain('imports/load-2.html');
done()
});
});
</script>

31
tests/HTMLImports/html/dynamic-errors-detail.html
View File

@@ -11,8 +11,15 @@
<html>
<head>
<title>HTML Imports Dynamic</title>
<script src="../../tools/htmltest.js"></script>
<script src="../../tools/chai/chai.js"></script>
<script>
var ready;
WCT = {
waitFor: function(cb) {
ready = cb;
}
};
</script>
<script src="../../../bower_components/web-component-tester/browser.js"></script>
<script src="../../../src/HTMLImports/HTMLImports.js"></script>
</head>
<body>
@@ -33,16 +40,20 @@
chai.assert.ok(e.target.import);
});
}
HTMLImports.whenReady(function(detail) {
chai.assert.equal(detail.allImports.length, 2);
chai.assert.equal(detail.errorImports.length, 1);
chai.assert.equal(detail.loadedImports.length, 1);
ready();
});
});
var errorImport = detail.errorImports[0];
chai.expect(errorImport.href).to.contain('imports/load-does-not-exist.html');
test('HTMLImports whenready errors', function(done) {
HTMLImports.whenReady(function(detail) {
chai.assert.equal(detail.allImports.length, 2);
chai.assert.equal(detail.errorImports.length, 1);
chai.assert.equal(detail.loadedImports.length, 1);
done();
});
var errorImport = detail.errorImports[0];
chai.expect(errorImport.href).to.contain('imports/load-does-not-exist.html');
done();
});
});
</script>

25
tests/HTMLImports/html/dynamic-loaded-detail.html
View File

@@ -11,13 +11,13 @@
<html>
<head>
<title>HTML Imports Dynamic</title>
<script src="../../tools/htmltest.js"></script>
<script src="../../tools/chai/chai.js"></script>
<script src="../../../bower_components/web-component-tester/browser.js"></script>
<script src="../../../src/HTMLImports/HTMLImports.js"></script>
</head>
<body>
<script>
var loads = 0;
document.addEventListener('DOMContentLoaded', function() {
// some time later
setTimeout(function() {
@@ -26,23 +26,24 @@
'<link rel="import" href="imports/load-2.html">';
document.body.appendChild(div);
var ports = document.querySelectorAll('link[rel=import]');
var loads = 0;
for (var i=0, l=ports.length, n; (i<l) && (n=ports[i]); i++) {
n.addEventListener('load', function(e) {
loads++;
chai.assert.ok(e.target.import);
});
}
HTMLImports.whenReady(function(detail) {
chai.assert.equal(detail.allImports.length, 2);
chai.assert.equal(detail.errorImports.length, 0);
chai.assert.equal(detail.loadedImports.length, 2);
});
});
chai.expect(detail.loadedImports[0].href).to.contain('imports/load-1.html');
chai.expect(detail.loadedImports[1].href).to.contain('imports/load-2.html');
test('dynamic loaded details', function(done) {
HTMLImports.whenReady(function(detail) {
chai.assert.equal(detail.allImports.length, 2);
chai.assert.equal(detail.errorImports.length, 0);
chai.assert.equal(detail.loadedImports.length, 2);
done();
});
chai.expect(detail.loadedImports[0].href).to.contain('imports/load-1.html');
chai.expect(detail.loadedImports[1].href).to.contain('imports/load-2.html');
done();
});
});
</script>

35
tests/HTMLImports/html/dynamic.html
View File

@@ -11,34 +11,35 @@
<html>
<head>
<title>HTML Imports Dynamic</title>
<script src="../../tools/htmltest.js"></script>
<script src="../../tools/chai/chai.js"></script>
<script src="../../../bower_components/web-component-tester/browser.js"></script>
<script src="../../../src/HTMLImports/HTMLImports.js"></script>
</head>
<body>
<script>
document.addEventListener('DOMContentLoaded', function() {
// some time later
setTimeout(function() {
var div = document.createElement('div');
div.innerHTML = '<link rel="import" href="imports/load-1.html">' +
'<link rel="import" href="imports/load-2.html">';
<script>
var loads = 0;
document.addEventListener('DOMContentLoaded', function() {
// some time later
setTimeout(function() {
var div = document.createElement('div');
div.innerHTML = '<link rel="import" href="imports/load-1.html">' +
'<link rel="import" href="imports/load-2.html">';
document.body.appendChild(div);
var ports = document.querySelectorAll('link[rel=import]');
var loads = 0;
for (var i=0, l=ports.length, n; (i<l) && (n=ports[i]); i++) {
n.addEventListener('load', function(e) {
loads++;
chai.assert.ok(e.target.import);
});
}
HTMLImports.whenReady(function() {
chai.assert.equal(loads, 2);
done();
});
});
});
</script>
});
test('dynamic imports', function(done) {
// wait a bit for the imports to load, or not
setTimeout(function() {
chai.assert.equal(loads, 2);
done();
}, 1000);
});
</script>
</body>
</html>

19
tests/HTMLImports/html/encoding.html
View File

@@ -12,26 +12,17 @@
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../tools/htmltest.js"></script>
<script src="../../tools/chai/chai.js"></script>
<script src="../../../bower_components/web-component-tester/browser.js"></script>
<script src="../../../src/HTMLImports/HTMLImports.js"></script>
<link rel="import" href="imports/encoding-import.html">
</head>
<body>
<span></span>
<span id="encodingtarget"></span>
<script>
function test() {
run();
var span = document.querySelector('span');
test('charset is correct', function() {
var span = document.getElementById('encodingtarget');
chai.assert.equal(span.textContent, 'Róbert Viðar Bjarnason');
done();
}
if (HTMLImports.ready) {
test();
} else {
addEventListener('HTMLImportsLoaded', test);
}
});
</script>
</body>
</html>

6
tests/HTMLImports/html/imports/encoding-import.html
View File

@@ -8,8 +8,6 @@
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<script>
function run() {
var span = document.querySelector('span');
span.textContent = 'Róbert Viðar Bjarnason';
};
var span = document.getElementById('encodingtarget');
span.textContent = 'Róbert Viðar Bjarnason';
</script>

5
tests/HTMLImports/html/load-404.html
View File

@@ -12,11 +12,11 @@
<head>
<title>load ready 404 test</title>
<script>
WCT = {waitFor: function(cb){cb()}};
</script>
<script src="../../../bower_components/web-component-tester/browser.js"></script>
<script src="../../../src/HTMLImports/HTMLImports.js"></script>
<script>
WCT.waitFor = function(){};
var errors = 0;
function errorHandler() {
errors++;
@@ -29,9 +29,7 @@
<body>
<script>
test('loaded - 404', function(done) {
var loaded = false;
addEventListener('HTMLImportsLoaded', function() {
loaded = true;
check();
});
@@ -42,7 +40,6 @@
function check() {
clearTimeout(timeout);
chai.assert.ok(loaded, '404\'d imports are loaded');
chai.assert.equal(document.querySelector('link').import, null, '404\'d link.import is null');
chai.assert.equal(errors, 2, '404\'d generate error event');
done();

7
tests/HTMLImports/html/load-loop.html
View File

@@ -11,16 +11,15 @@
<html>
<head>
<title>load loop Test</title>
<script src="../../tools/htmltest.js"></script>
<script src="../../tools/chai/chai.js"></script>
<script src="../../../bower_components/web-component-tester/browser.js"></script>
<script src="../../../src/HTMLImports/HTMLImports.js"></script>
<script>var loaded = [];</script>
<link rel="import" href="imports/load-a.html">
</head>
<body>
<script>
document.addEventListener('HTMLImportsLoaded', function() {
test('load loop', function() {
chai.assert.deepEqual(loaded, ['a', 'b', 'c', 'd']);
done();
});
</script>
</body>

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

@@ -62,11 +62,12 @@
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)');
if (!HTMLImports.useNative) {
// links with type attr are not imported
chai.assert.notEqual(computedStyle('.link-typed').backgroundColor, 'rgb(0, 0, 128)');
}
// styles with type attr are not imported
chai.assert.equal(computedStyle('.style-typed').backgroundColor, 'rgba(0, 0, 0, 0)');
chai.assert.notEqual(computedStyle('.style-typed').backgroundColor, 'rgb(255, 0, 0)');
done();
});

10
tests/HTMLImports/html/style-paths.html
View File

@@ -38,9 +38,13 @@
chai.assert.match(getComputedStyle(image).backgroundImage, new RegExp(a.href), 'url in style applied');
if (!HTMLImports.useNative) {
var style = document.querySelector('style');
chai.assert.ok(style.sheet);
chai.assert.equal(style.sheet.cssRules[2].href,
var styles = document.querySelectorAll('style');
var fontStyle = [].filter.call(styles, function(s) {
return s.textContent.indexOf('Source+Code+Pro') > -1;
})[0];
assert.ok(fontStyle);
chai.assert.ok(fontStyle.sheet);
chai.assert.equal(fontStyle.sheet.cssRules[2].href,
'http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,600,800|Source+Code+Pro',
'@import url() form rule has proper url')
}

28
tests/HTMLImports/runner.html
View File

@@ -12,15 +12,15 @@
<meta charset="utf-8">
<!-- HTMLImports -->
<script src="../../src/HTMLImports/HTMLImports.js"></script>
<script>
window.WCT = {
WCT = {
waitFor: function(callback) {
this.HTMLImports.whenReady(callback);
}
};
</script>
<script src="../../bower_components/web-component-tester/browser.js"></script>
<script src="../../src/HTMLImports/HTMLImports.js"></script>
<script>
var suites = [
'html/HTMLImports.html',
@@ -29,18 +29,18 @@
'html/style-paths.html',
'html/load.html',
'html/load-404.html',
// 'html/load-loop.html',
// 'html/base/load-base.html',
// 'html/currentScript.html',
// 'html/dedupe.html',
// 'html/dynamic.html',
// 'html/dynamic-all-imports-detail.html',
// 'html/dynamic-errors-detail.html',
// 'html/dynamic-loaded-detail.html',
// 'html/csp.html',
// 'html/customevent-detail.html',
// 'html/encoding.html',
// 'html/HTMLImportsLoaded-native.html',
'html/load-loop.html',
'html/base/load-base.html',
'html/currentScript.html',
'html/dedupe.html',
'html/dynamic.html',
'html/dynamic-all-imports-detail.html',
'html/dynamic-errors-detail.html',
'html/dynamic-loaded-detail.html',
'html/csp.html',
'html/customevent-detail.html',
'html/encoding.html',
'html/HTMLImportsLoaded-native.html',
];
// NOTE: The MO polyfill does not function on disconnected documents
// like html imports so dynamic elements in imports are not supported.