layout/style/test/test_rule_insertion.html
author Daniel Holbert <dholbert@cs.stanford.edu>
Wed, 04 Jun 2014 21:07:07 -0700
changeset 207050 8137176a31734f39f120dab27b7ddad578c8deab
parent 160456 cfb005bc3debb8dd99e4eb13eda14ce22c9525d4
child 210374 34456c194587a91b78be70d4b567ce2adf21b24c
permissions -rw-r--r--
Bug 864005: Remove mentions of & checks for 'layout.css.supports-rule.enabled' pref. r=heycam r=khuey

<!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();
runTest();
</script>
</body>
</html>