55 lines
1.1 KiB
HTML
55 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<body>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<div id="target"></div>
|
|
<style>
|
|
#target {
|
|
color: red;
|
|
background-color: black;
|
|
width: 100px;
|
|
height: 100px;
|
|
display: none;
|
|
}
|
|
@media (hover) {
|
|
#target {
|
|
color: green;
|
|
}
|
|
}
|
|
@media (hover: hover) {
|
|
#target {
|
|
background-color: blue;
|
|
}
|
|
}
|
|
@media (hover: on-demand) {
|
|
#target {
|
|
width: 10px;
|
|
}
|
|
}
|
|
@media (hover: none) {
|
|
#target {
|
|
height: 10px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
description("Test the hover media feature to guard style rules.")
|
|
|
|
var target = document.getElementById('target');
|
|
|
|
function displayProperty(property) {
|
|
var testString = 'getComputedStyle(target)["' + property + '"]';
|
|
debug(testString + " = " + eval(testString));
|
|
}
|
|
|
|
displayProperty("color");
|
|
displayProperty("background-color");
|
|
displayProperty("width");
|
|
displayProperty("height");
|
|
</script>
|
|
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</body>
|
|
</html>
|