mirror of
https://github.com/Polymer/polymer.git
synced 2025-02-25 18:55:30 -06:00
Fixes styling tests related to using HTML Imports
* [styling-scoped.html] remove test for <link rel="import" type="css"> as this is no longer supported * [custom-style-async.html] convert test that used importHref to use dynamic import
This commit is contained in:
Steven Orvell
31
test/unit/custom-style-async-import.js
Normal file
31
test/unit/custom-style-async-import.js
Normal file
@@ -0,0 +1,31 @@
|
||||
import { Polymer } from '../../lib/legacy/polymer-fn.js';
|
||||
|
||||
const $_documentContainer = document.createElement('div');
|
||||
|
||||
$_documentContainer.innerHTML = `<custom-style>
|
||||
<style is="custom-style">
|
||||
html {
|
||||
--cs-blue: {
|
||||
border : 8px solid blue;
|
||||
};
|
||||
}
|
||||
</style>
|
||||
</custom-style>
|
||||
<dom-module id="x-client">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: inline-block;
|
||||
border : 4px solid red;
|
||||
@apply (--cs-blue);
|
||||
}
|
||||
</style>
|
||||
x-client
|
||||
</template>
|
||||
</dom-module>`;
|
||||
|
||||
document.body.appendChild($_documentContainer);
|
||||
|
||||
Polymer({
|
||||
is: 'x-client'
|
||||
});
|
||||
@@ -48,7 +48,7 @@ import { afterNextRender } from '../../lib/utils/render-status.js';
|
||||
suite('async global custom-style', function() {
|
||||
|
||||
test('async loaded custom-style applies', function(done) {
|
||||
host.importHref('custom-style-async-import.html', function() {
|
||||
import('custom-style-async-import.js').then(() => {
|
||||
afterNextRender(null, function() {
|
||||
assertComputed(host.$.client, '8px');
|
||||
done();
|
||||
|
||||
@@ -1,119 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2017 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>
|
||||
<meta charset="utf-8">
|
||||
<script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
||||
<script src="wct-browser-config.js"></script>
|
||||
<script src="../../node_modules/wct-browser-legacy/browser.js"></script>
|
||||
<script type="module" src="../../polymer-legacy.js"></script>
|
||||
<script type="module" src="./styling-import-shared-styles.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<dom-module id="x-include-module">
|
||||
<template>
|
||||
<style include="shared-styles"></style>
|
||||
<div id="one"></div>
|
||||
<div id="two"></div>
|
||||
<div id="three"></div>
|
||||
</template>
|
||||
<script type="module">
|
||||
import './styling-import-shared-styles.js';
|
||||
import { Polymer } from '../../lib/legacy/polymer-fn.js';
|
||||
Polymer({ is: 'x-include-module'});
|
||||
</script>
|
||||
</dom-module>
|
||||
|
||||
<dom-module id="x-include-import">
|
||||
<link rel="import" type="css" href="styling-import1.css">
|
||||
<link rel="import" type="css" href="styling-import2.css">
|
||||
<template>
|
||||
<style>
|
||||
#three {
|
||||
border: 3px solid tomato;
|
||||
}
|
||||
</style>
|
||||
<div id="one"></div>
|
||||
<div id="two"></div>
|
||||
<div id="three"></div>
|
||||
</template>
|
||||
<script type="module">
|
||||
import './styling-import-shared-styles.js';
|
||||
import { Polymer } from '../../lib/legacy/polymer-fn.js';
|
||||
Polymer({ is: 'x-include-import'});
|
||||
</script>
|
||||
</dom-module>
|
||||
|
||||
<dom-module id="x-import-order">
|
||||
<link rel="import" type="css" href="styling-import2.css">
|
||||
<template>
|
||||
<style>
|
||||
#two {
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<div id="two"></div>
|
||||
</template>
|
||||
<script type="module">
|
||||
import './styling-import-shared-styles.js';
|
||||
import { Polymer } from '../../lib/legacy/polymer-fn.js';
|
||||
Polymer({is: 'x-import-order'});
|
||||
</script>
|
||||
</dom-module>
|
||||
|
||||
|
||||
<script type="module">
|
||||
import './styling-import-shared-styles.js';
|
||||
import { flush } from '../../lib/utils/flush.js';
|
||||
suite('style-imports', function() {
|
||||
|
||||
function assertComputed(element, value) {
|
||||
var computed = getComputedStyle(element);
|
||||
assert.equal(computed['border-top-width'], value, 'computed style incorrect');
|
||||
}
|
||||
|
||||
test('styles included via link rel="import" type="css"', function() {
|
||||
var el = document.createElement('x-include-import');
|
||||
document.body.appendChild(el);
|
||||
flush();
|
||||
assertComputed(el.$.one, '1px');
|
||||
assertComputed(el.$.two, '2px');
|
||||
assertComputed(el.$.three, '3px');
|
||||
assertComputed(el, '0px', 'style outside template not ignored');
|
||||
document.body.removeChild(el);
|
||||
|
||||
});
|
||||
|
||||
test('styles included via include that loads via link rel="import" type="css"', function() {
|
||||
var el = document.createElement('x-include-module');
|
||||
document.body.appendChild(el);
|
||||
flush();
|
||||
assertComputed(el.$.one, '1px');
|
||||
assertComputed(el.$.two, '2px');
|
||||
assertComputed(el.$.three, '3px');
|
||||
assertComputed(el, '0px', 'style outside template not ignored');
|
||||
document.body.removeChild(el);
|
||||
|
||||
});
|
||||
|
||||
test('styles included via link rel="import" type="css" are overridden by styles in template', function() {
|
||||
var el = document.createElement('x-import-order');
|
||||
document.body.appendChild(el);
|
||||
flush();
|
||||
assertComputed(el.$.two, '1px');
|
||||
document.body.removeChild(el);
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,12 +0,0 @@
|
||||
/*
|
||||
@license
|
||||
Copyright (c) 2017 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
|
||||
*/
|
||||
#one {
|
||||
border: 1px solid orange;
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
/*
|
||||
@license
|
||||
Copyright (c) 2017 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
|
||||
*/
|
||||
#two {
|
||||
display: block;
|
||||
border: 2px solid brown;
|
||||
}
|
||||
@@ -687,19 +687,6 @@ customElements.define(XInterleaved.is, XInterleaved);
|
||||
</script>
|
||||
</dom-module>
|
||||
|
||||
<dom-module id="x-only-link-style">
|
||||
<link rel="import" type="css" href="styling-import-host.css">
|
||||
<link rel="import" type="css" href="styling-import-host2.css">
|
||||
<template></template>
|
||||
<script type="module">
|
||||
import { PolymerElement } from '../../polymer-element.js';
|
||||
class XOnlyLink extends PolymerElement {
|
||||
static get is() { return 'x-only-link-style'; }
|
||||
}
|
||||
customElements.define(XOnlyLink.is, XOnlyLink);
|
||||
</script>
|
||||
</dom-module>
|
||||
|
||||
<dom-module id="double-shared-style">
|
||||
<template>
|
||||
<style>
|
||||
@@ -1006,12 +993,6 @@ suite('scoped-styling', function() {
|
||||
assertComputed(e, '5px', 'padding-top');
|
||||
});
|
||||
|
||||
test('elements without styles work', function() {
|
||||
var e = document.createElement('x-only-link-style');
|
||||
document.body.appendChild(e);
|
||||
assertComputed(e, '2px');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
suite('double including style sheets', function() {
|
||||
|
||||
Reference in New Issue
Block a user