1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
|
<!DOCTYPE HTML>
<html>
<head>
<title>Test InspectorUtils.getRuleIndex</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
<style>
@property --color {
syntax: "*";
inherits: false;
}
html {
background: gold;
&:hover {
background: yellow;
}
& body {
color: tomato;
&:focus-visible {
outline: 1px solid cyan;
}
}
}
@keyframes anim {
0% {
color: blue;
}
100% {
color: green;
}
}
</style>
</head>
<body>
<code>InspectorUtils.getRuleIndex</code>
<script>
"use strict";
/** Test for InspectorUtils.getCSSRegisteredProperties **/
const { Assert } = SpecialPowers.ChromeUtils.importESModule(
"resource://testing-common/Assert.sys.mjs"
);
const InspectorUtils = SpecialPowers.InspectorUtils;
const stylesheet = document.styleSheets[1];
const stylesheetRules = stylesheet.cssRules;
let rule = stylesheetRules[0];
is(rule.name, "--color", "Expected @property rule");
Assert.deepEqual(InspectorUtils.getRuleIndex(rule), [0]);
rule = stylesheetRules[1];
is(rule.selectorText, "html", "Expected htlm rule");
Assert.deepEqual(InspectorUtils.getRuleIndex(rule), [1]);
rule = stylesheetRules[1].cssRules[0];
is(rule.selectorText, "&:hover", "Expected nested &:hover rule");
Assert.deepEqual(InspectorUtils.getRuleIndex(rule), [1, 0]);
rule = stylesheetRules[1].cssRules[1];
is(rule.selectorText, "& body", "Expected nested & body rule");
Assert.deepEqual(InspectorUtils.getRuleIndex(rule), [1, 1]);
rule = stylesheetRules[1].cssRules[1].cssRules[0];
is(rule.selectorText, "&:focus-visible", "Expected nested &:focus-visible rule");
Assert.deepEqual(InspectorUtils.getRuleIndex(rule), [1, 1, 0]);
rule = stylesheetRules[2];
is(rule.name, "anim", "Expected @keyframes rule");
Assert.deepEqual(InspectorUtils.getRuleIndex(rule), [2]);
rule = stylesheetRules[2].cssRules[0];
is(rule.keyText, "0%", "Expected 0% keyframe rule");
Assert.deepEqual(InspectorUtils.getRuleIndex(rule), [2, 0]);
rule = stylesheetRules[2].cssRules[1];
is(rule.keyText, "100%", "Expected 100% keyframe rule");
Assert.deepEqual(InspectorUtils.getRuleIndex(rule), [2, 1]);
</script>
</pre>
</body>
</html>
|