The Tor Browser: comparison layout/style/test/test_rule

--1:000000000000
+:ffb9a9463641
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=816720
+-->
+<head>
+<title>Test for Bug 816720</title>
+<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+<style type="text/css" id="style"></style>
+</head>
+<body>
+<pre id="test"></pre>
+<p><span id=control-serif>........</span></p>
+<p><span id=control-monospace>........</span></p>
+<p><span id=test-font>........</span></p>
+<style id=other-styles>
+#test { font-size: 16px; animation: test 1s both }
+#control-serif { font: 16px serif }
+#test-font { font: 16px UnlikelyFontName, serif }
+</style>
+<script type="application/javascript">
+// Monospace fonts available on all the platforms we're testing on.
+//
+// XXX Once bug 817220 is fixed we could instead use the value of
+// font.name.monospace.x-western as the monospace font to use.
+var MONOSPACE_FONTS = [
+"Courier",
+"Courier New",
+"Monaco",
+"DejaVu Sans Mono",
+"Droid Sans Mono"
+];
+var test = document.getElementById("test");
+var controlSerif = document.getElementById("control-serif");
+var controlMonospace = document.getElementById("control-monospace");
+var testFont = document.getElementById("test-font");
+var otherStyles = document.getElementById("other-styles");
+otherStyles.sheet.insertRule("#control-monospace { font: 16px " +
+MONOSPACE_FONTS + ", serif }", 0);
+var monospaceWidth = controlMonospace.getBoundingClientRect().width;
+var serifWidth = controlSerif.getBoundingClientRect().width;
+// [at-rule type, passing condition, failing condition]
+var outerRuleInfo = [
+["@media", "all", "not all"],
+["@-moz-document", "url-prefix('')", "url-prefix('zzz')"],
+["@supports", "(color: green)", "(unknown: unknown)"]
+];
+// [rule, function to test whether the rule was successfully inserted and applied]
+var innerRuleInfo = [
+["#test { text-decoration: underline; }",
+function(aApplied, aParent, aException) {
+return !aException &&
+window.getComputedStyle(test, "").textDecoration ==
+(aApplied ? "underline" : "none");
+}],
+["@page { margin: 4cm; }",
+function(aApplied, aParent, aException) {
+// just test whether it threw
+return !aException;
+}],
+["@keyframes test { from { font-size: 100px; } to { font-size: 100px; } }",
+function(aApplied, aParent, aException) {
+return !aException &&
+window.getComputedStyle(test, "").fontSize ==
+(aApplied ? "100px" : "16px")
+}],
+["@font-face { font-family: UnlikelyFontName; src: " +
+MONOSPACE_FONTS.map(function(s) { return "local('" + s + "')" }).join(", ") + "; }",
+function(aApplied, aParent, aException) {
+var width = testFont.getBoundingClientRect().width;
+if (aException) {
+return false;
+}
+if (navigator.oscpu.match(/Linux/) ||
+navigator.oscpu.match(/Android/) ||
+SpecialPowers.Services.appinfo.name == "B2G") {
+return true;
+}
+return Math.abs(width - (aApplied ? monospaceWidth : serifWidth)) <= 1; // bug 769194 prevents local()
+// fonts working on Android
+}],
+["@charset 'UTF-8';",
+function(aApplied, aParent, aException) {
+// just test whether it threw
+return aParent instanceof CSSRule ? aException : !aException;
+}],
+["@import url(nothing.css);",
+function(aApplied, aParent, aException) {
+// just test whether it threw
+return aParent instanceof CSSRule ? aException : !aException;
+}],
+["@namespace test url(http://example.org);",
+function(aApplied, aParent, aException) {
+// just test whether it threw
+return aParent instanceof CSSRule ? aException : !aException;
+}],
+];
+function runTest()
+{
+// First, assert that our assumed available fonts are indeed available
+// and have expected metrics.
+ok(monospaceWidth > 0, "monospace text has width");
+ok(serifWidth > 0, "serif text has width");
+ok(Math.abs(monospaceWidth - serifWidth) > 1, "monospace and serif text have sufficiently different widths");
+// And that the #test-font element starts off using the "serif" font.
+var initialFontTestWidth = testFont.getBoundingClientRect().width;
+is(initialFontTestWidth, serifWidth);
+// We construct a style sheet with zero, one or two levels of conditional
+// grouping rules (taken from outerRuleInfo), with one of the inner rules
+// at the deepest level.
+var style = document.getElementById("style");
+// For each of the outer rule types...
+for (var outerRule1 = 0; outerRule1 < outerRuleInfo.length; outerRule1++) {
+// For each of { 0 = don't create an outer rule,
+//               1 = create an outer rule with a passing condition,
+//               2 = create an outer rule with a failing condition }...
+for (var outerRuleCondition1 = 0; outerRuleCondition1 <= 2; outerRuleCondition1++) {
+// For each of the outer rule types again...
+for (var outerRule2 = 0; outerRule2 < outerRuleInfo.length; outerRule2++) {
+// For each of { 0 = don't create an outer rule,
+//               1 = create an outer rule with a passing condition,
+//               2 = create an outer rule with a failing condition } again...
+for (var outerRuleCondition2 = 0; outerRuleCondition2 <= 2; outerRuleCondition2++) {
+// For each of the inner rule types...
+for (var innerRule = 0; innerRule < innerRuleInfo.length; innerRule++) {
+// Clear rules
+var object = style.sheet;
+while (object.cssRules.length) {
+object.deleteRule(0);
+}
+// We'll record whether the inner rule should have been applied,
+// according to whether we put passing or failing conditional
+// grouping rules around it.
+var applied = true;
+if (outerRuleCondition1) {
+// Create an outer conditional rule.
+object.insertRule([outerRuleInfo[outerRule1][0],
+outerRuleInfo[outerRule1][outerRuleCondition1],
+"{}"].join(" "), 0);
+object = object.cssRules[0];
+if (outerRuleCondition1 == 2) {
+// If we used a failing condition, we don't expect the inner
+// rule to be applied.
+applied = false;
+}
+}
+if (outerRuleCondition2) {
+// Create another outer conditional rule as a child of the first
+// outer conditional rule (or the style sheet, if we didn't create
+// a first outer conditional rule).
+object.insertRule([outerRuleInfo[outerRule2][0],
+outerRuleInfo[outerRule2][outerRuleCondition2],
+"{}"].join(" "), 0);
+object = object.cssRules[0];
+if (outerRuleCondition2 == 2) {
+// If we used a failing condition, we don't expect the inner
+// rule to be applied.
+applied = false;
+}
+}
+var outer = object instanceof CSSRule ? object.cssText : "style sheet";
+var inner = innerRuleInfo[innerRule][0];
+// Insert the inner rule.
+var exception = null;
+try {
+object.insertRule(inner, 0);
+} catch (e) {
+exception = e;
+}
+ok(innerRuleInfo[innerRule][1](applied, object, exception),
+"<" + [outerRule1, outerRuleCondition1, outerRule2,
+outerRuleCondition2, innerRule].join(",") + "> " +
+"inserting " + inner + " into " + outer.replace(/ *\n */g, ' '));
+}
+}
+}
+}
+}
+SimpleTest.finish();
+}
+SimpleTest.waitForExplicitFinish();
+SpecialPowers.pushPrefEnv({ "set": [["layout.css.supports-rule.enabled", true]] }, runTest);
+</script>
+</body>
+</html>

The Tor Browser / file comparison

comparison: layout/style/test/test_rule_insertion.html

layout/style/test/test_rule_insertion.html