зеркало из https://github.com/mozilla/gecko-dev.git
100 строки
3.5 KiB
HTML
100 строки
3.5 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<!--
|
|
https://bugzilla.mozilla.org/show_bug.cgi?id=1111633
|
|
-->
|
|
<head>
|
|
<title>Test template element in stale document.</title>
|
|
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
|
|
<style>
|
|
:unresolved {
|
|
color: rgb(0, 0, 255);
|
|
background-color: rgb(0, 0, 255);
|
|
}
|
|
|
|
x-foo { color: rgb(255, 0, 0); }
|
|
|
|
[is="x-del"]:not(:unresolved) { color: rgb(255, 0, 0); }
|
|
|
|
[is="x-bar"]:not(:unresolved) { color: rgb(255, 0, 0); }
|
|
|
|
[is="x-bar"]:unresolved { background-color: rgb(255, 0, 0); }
|
|
|
|
x-baz:not(:unresolved) {
|
|
color: rgb(255, 0, 0);
|
|
background-color: rgb(255, 0, 0);
|
|
}
|
|
|
|
span { color: rgb(0,255,0); }
|
|
|
|
x-foo:unresolved + span { color: rgb(255,0,0); }
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1111633">Bug 1111633</a>
|
|
<div id="container"></div>
|
|
<x-foo id="foo"></x-foo>
|
|
<span id="span1">This text should be green</span>
|
|
<span id="bar" is="x-bar"></span>
|
|
<x-baz id="baz"></x-baz>
|
|
<span id="del" is="x-del"></span>
|
|
<script>
|
|
|
|
// Before registerElement
|
|
var foo = document.querySelector('#foo');
|
|
is(getComputedStyle(foo).color, "rgb(0, 0, 255)", "foo - color");
|
|
is(getComputedStyle(foo).backgroundColor, "rgb(0, 0, 255)", "foo - backgroundColor");
|
|
|
|
var bar = document.querySelector('#bar');
|
|
is(getComputedStyle(bar).color, "rgb(0, 0, 255)", "bar - color");
|
|
is(getComputedStyle(bar).backgroundColor, "rgb(255, 0, 0)", "bar - backgroundColor");
|
|
|
|
var baz = document.querySelector('#baz');
|
|
is(getComputedStyle(baz).color, "rgb(0, 0, 255)", "baz - color");
|
|
is(getComputedStyle(baz).backgroundColor, "rgb(0, 0, 255)", "baz - backgroundColor");
|
|
|
|
var span1 = document.querySelector('#span1');
|
|
is(getComputedStyle(span1).color, "rgb(255, 0, 0)", "span1 - color");
|
|
|
|
var Foo = document.registerElement('x-foo', { prototype: Object.create(HTMLElement.prototype) });
|
|
|
|
var Bar = document.registerElement('x-bar', { extends: 'span', prototype: Object.create(HTMLSpanElement.prototype) });
|
|
|
|
var Baz = document.registerElement('x-baz', { prototype: Object.create(HTMLElement.prototype) });
|
|
|
|
// After registerElement
|
|
is(getComputedStyle(foo).color, "rgb(255, 0, 0)",
|
|
"foo - color (after registerElement)");
|
|
|
|
is(getComputedStyle(bar).color,
|
|
"rgb(255, 0, 0)", "bar - color (after registerElement)");
|
|
|
|
is(getComputedStyle(baz).color,
|
|
"rgb(255, 0, 0)", "baz - color (after registerElement)");
|
|
is(getComputedStyle(baz).backgroundColor,
|
|
"rgb(255, 0, 0)", "baz - backgroundColor (after registerElement)");
|
|
|
|
is(getComputedStyle(span1).color, "rgb(0, 255, 0)", "span1 - color (after registerElement)");
|
|
|
|
// After tree removal
|
|
var del = document.querySelector('#del');
|
|
is(getComputedStyle(del).color, "rgb(0, 0, 255)", "del - color");
|
|
var par = del.parentNode;
|
|
par.removeChild(del);
|
|
// Changing is attribute after creation should not change the type
|
|
// of a custom element, even if the element was removed and re-append to the tree.
|
|
del.setAttribute("is", "foobar");
|
|
par.appendChild(del);
|
|
is(getComputedStyle(del).color, "rgb(0, 0, 255)", "del - color (after reappend)");
|
|
var Del = document.registerElement('x-del', { extends: 'span', prototype: Object.create(HTMLSpanElement.prototype) });
|
|
// [is="x-del"] will not match any longer so the rule of span will apply
|
|
is(getComputedStyle(del).color, "rgb(0, 255, 0)", "del - color (after registerElement)");
|
|
// but the element should have been upgraded:
|
|
ok(del instanceof Del, "element was upgraded correctly after changing |is|");
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|