<!DOCTYPE HTML>
<html>
<!--
Test that css-logic handles media-queries correctly
-->
<head>
<meta charset="utf-8">
<title>Test css-logic media-queries</title>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
<style>
div {
width: 1000px;
height: 100px;
background-color: #f00;
}
@media screen and (min-width: 1px) {
div {
width: 200px;
}
}
</style>
</head>
<body>
<div></div>
<script type="application/javascript;version=1.8">
window.onload = function() {
var { classes: Cc, utils: Cu, interfaces: Ci } = Components;
const DOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"]
.getService(Ci.inIDOMUtils);
var {require} = Cu.import("resource://devtools/shared/Loader.jsm", {});
var Services = require("Services");
const {CssLogic} = require("devtools/server/css-logic");
SimpleTest.waitForExplicitFinish();
let div = document.querySelector("div");
let cssLogic = new CssLogic(DOMUtils.isInheritedProperty);
cssLogic.highlight(div);
cssLogic.processMatchedSelectors();
let _strings = Services.strings
.createBundle("chrome://devtools-shared/locale/styleinspector.properties");
let inline = _strings.GetStringFromName("rule.sourceInline");
let source1 = inline + ":12";
let source2 = inline + ":19 @media screen and (min-width: 1px)";
is(cssLogic._matchedRules[0][0].source, source1,
"rule.source gives correct output for rule 1");
is(cssLogic._matchedRules[1][0].source, source2,
"rule.source gives correct output for rule 2");
SimpleTest.finish();
}
</script>
</body>
</html>