mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-01-07 11:56:51 +00:00
ede8c44ef2
This excludes dom/, otherwise the file size is too large for phabricator to handle. This is an autogenerated commit to handle scripts loading mochitest harness files, in the simple case where the script src is on the same line as the tag. This was generated with https://bug1544322.bmoattachments.org/attachment.cgi?id=9058170 using the `--part 2` argument. Differential Revision: https://phabricator.services.mozilla.com/D27456 --HG-- extra : moz-landing-system : lando
119 lines
3.7 KiB
HTML
119 lines
3.7 KiB
HTML
<html>
|
|
<!--
|
|
https://bugzilla.mozilla.org/show_bug.cgi?id=783213
|
|
-->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Test for the :active and :hover quirk</title>
|
|
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
|
|
<style type="text/css">
|
|
/* Should apply to all elements: */
|
|
#content :hover:first-of-type {
|
|
color: rgb(255, 0, 0);
|
|
}
|
|
#content :-moz-any(:hover) {
|
|
text-transform: lowercase;
|
|
}
|
|
#content :hover::after {
|
|
content: "any element";
|
|
}
|
|
|
|
#content :hover:first-of-type .child::after {
|
|
content: "any child";
|
|
}
|
|
|
|
#content .parent .child::after {
|
|
content: "wrong" !important;
|
|
}
|
|
|
|
#content .parent:hover .child::after {
|
|
content: "any child" !important;
|
|
}
|
|
|
|
/* Should apply only to links: */
|
|
#content :hover {
|
|
color: rgb(0, 255, 0) !important;
|
|
text-transform: uppercase !important;
|
|
}
|
|
#content :hover .child::after {
|
|
content: "link child" !important;
|
|
}
|
|
|
|
#dynamic-test {
|
|
width: 100px;
|
|
height: 100px;
|
|
background: green;
|
|
}
|
|
|
|
#dynamic-test > * {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: red;
|
|
}
|
|
|
|
#dynamic-test:hover > * {
|
|
background: rgb(0, 255, 0);
|
|
}
|
|
</style>
|
|
<script src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
<script src="/tests/SimpleTest/EventUtils.js"></script>
|
|
<script type="application/javascript">
|
|
/** Test for the :active and :hover quirk **/
|
|
function test(element, isLink) {
|
|
if (!isLink)
|
|
var styles = {color: "rgb(255, 0, 0)", textTransform: "lowercase",
|
|
childContent: '"any child"'};
|
|
else
|
|
var styles = {color: "rgb(0, 255, 0)", textTransform: "uppercase",
|
|
childContent: '"link child"'};
|
|
|
|
// Trigger the :hover pseudo-class.
|
|
synthesizeMouseAtCenter(element, {type: "mousemove"});
|
|
|
|
var computedStyle = getComputedStyle(element);
|
|
is(computedStyle.color, styles.color, "Unexpected color value");
|
|
is(computedStyle.textTransform, styles.textTransform,
|
|
"Unexpected text-transform value");
|
|
|
|
computedStyle = getComputedStyle(element, "::after");
|
|
is(computedStyle.content, '"any element"',
|
|
"Unexpected pseudo-element content");
|
|
|
|
computedStyle = getComputedStyle(
|
|
element.getElementsByClassName("child")[0], "::after");
|
|
is(computedStyle.content, styles.childContent,
|
|
"Unexpected pseudo-element content for child");
|
|
}
|
|
|
|
SimpleTest.waitForExplicitFinish();
|
|
SimpleTest.waitForFocus(function() {
|
|
test(document.getElementById("span"), false);
|
|
test(document.getElementById("label"), false);
|
|
test(document.getElementById("link"), true);
|
|
test(document.getElementById("div"), false);
|
|
// Dynamic change test.
|
|
// Trigger the :hover pseudo-class.
|
|
synthesizeMouseAtCenter(document.getElementById('dynamic-test'), {type: "mousemove"});
|
|
is(getComputedStyle(document.getElementById('should-be-green-on-hover')).backgroundColor,
|
|
"rgb(0, 255, 0)",
|
|
"Dynamic change should invalidate properly");
|
|
SimpleTest.finish();
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=783213">Mozilla Bug 783213</a>
|
|
<p id="display"></p>
|
|
<div id="dynamic-test">
|
|
<div id="should-be-green-on-hover"></div>
|
|
</div>
|
|
<div id="content">
|
|
<span id="span">Span<span class="child"></span></span><br>
|
|
<label id="label">Label<span class="child"></span></label><br>
|
|
<a id="link" href="#">Link<span class="child"></span></a><br>
|
|
<div id="div" class="parent">Div <span><span class="child"></span></span></div><br>
|
|
</div>
|
|
<pre id="test"></pre>
|
|
</body>
|
|
</html>
|