<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1110277
-->
<head>
<meta charset="utf-8">
<title>Test for Bug 1110277</title>
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
<style>
.testspan {
color: yellow;
}
.testspan[attributestate],
.testspan[attributestate]::before, .testspan[attributestate]::after {
color: blue;
}
#firstlinetest::first-line {
color: purple;
}
#firstlinetest > .testspan::before {
content: "[*]";
}
#aftertest > .testspan::after {
content: "[*]";
}
</style>
<script type="application/javascript">
/** Test for Bug 1110277 **/
SimpleTest.waitForExplicitFinish();
function run() {
runtest("first line test", "#firstlinetest > .testspan");
runtest("after test", "#aftertest > .testspan");
SimpleTest.finish();
}
function runtest(description, selector) {
var utils = SpecialPowers.getDOMWindowUtils(window);
var span = document.querySelector(selector);
var cs = getComputedStyle(span, "");
var startcolor = cs.color;
var startcount = utils.framesConstructed;
is(startcolor, "rgb(255, 255, 0)", description + ": initial color");
span.setAttribute("attributestate", "true");
var endcolor = cs.color;
var endcount = utils.framesConstructed;
is(endcolor, "rgb(0, 0, 255)", description + ": final color");
is(endcount, startcount,
description + ": should not do frame construction")
}
</script>
</head>
<body onload="run()">
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1110277">Mozilla Bug 1110277</a>
<div id="firstlinetest">
<span class="testspan">This <span style="display:block">is a</span> test.</span>
</div>
<div id="aftertest">
<span class="testspan">This <span style="display:block">is a</span> test.</span>
</div>
<pre id="test">
</pre>
</body>
</html>