tenfourfox/layout/reftests/dom/xbl-children-3.xhtml
Cameron Kaiser c9b2922b70 hello FPR
2017-04-19 00:56:45 -07:00

62 lines
2.5 KiB
HTML

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:xbl="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
class="reftest-wait">
<head>
<xbl:bindings xmlns="http://www.mozilla.org/xbl">
<binding id="base">
<content>
<html:div style="border: solid red">
<children />
</html:div>
</content>
<implementation>
<property name="foo" onget="return 42" />
</implementation>
</binding>
<binding id="derived" extends="#base">
<content>
<html:div style="border: dashed green">
<children includes="span" />
</html:div>
</content>
</binding>
<binding id="nochildren">
<content>
PASS
</content>
</binding>
</xbl:bindings>
</head>
<body>
<!-- Control case: our (only) child matches the children element. -->
<div id="first" style="-moz-binding: url(#derived)"><span style="color: green">should be green in a green border</span></div>
<!-- Make sure we ignore xul:template and xul:observes elements! -->
<div style="-moz-binding: url(#derived)"><xul:template /><xul:observes /><span style="color: green">should be green in a green border</span></div>
<!-- Case where our (only) child doesn't match any children elements. -->
<div id="second" style="-moz-binding: url(#derived)"><div>Should be uncolored with no border</div></div>
<!-- But make sure the binding was still applied! -->
<div id="output" />
<script>
var $ = document.getElementById.bind(document);
// Note: Done in an onload handler because binding instantiation is
// asynchronous.
onload = function() {
$('output').textContent =
($('first').foo === 42) + ", " + ($('first').foo === $('second').foo);
document.documentElement.removeAttribute('class');
}
</script>
<!-- Case where one of our children matches but the other one doesn't. -->
<div id="third" style="-moz-binding: url(#derived)"><span>In a span</span><div>Should be uncolored with no border</div></div>
<!-- Control case with no <children> in the binding. -->
<div style="-moz-binding: url(#nochildren)" />
<!-- Case where we have a child but no <children> in the binding. -->
<div style="-moz-binding: url(#nochildren)"><span style="color: green">PASS</span></div>
<!-- But we must ignore xul:template and xul:observes elements! -->
<div style="-moz-binding: url(#nochildren)"><xul:template /><xul:observes /></div>
</body>
</html>