Bug 966166 - Part 6: Tests for @counter-style. r=jfkthame, r=davidb
authorXidorn Quan <quanxunzhen@gmail.com>
Wed, 11 Jun 2014 21:14:00 -0400
changeset 188456 34456c194587
parent 188455 6576396848f1
child 188457 e931f9e105f0
push id26956
push userkwierso@gmail.com
push dateFri, 13 Jun 2014 00:23:52 +0000
treeherdermozilla-central@adcf3f05f813 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjfkthame, davidb
bugs966166
milestone33.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 966166 - Part 6: Tests for @counter-style. r=jfkthame, r=davidb
accessible/tests/mochitest/name.js
accessible/tests/mochitest/name/a11y.ini
accessible/tests/mochitest/name/test_counterstyle.html
layout/reftests/counter-style/dependent-builtin-ref.html
layout/reftests/counter-style/dependent-builtin.html
layout/reftests/counter-style/descriptor-fallback-invalid-ref.html
layout/reftests/counter-style/descriptor-fallback-invalid.html
layout/reftests/counter-style/descriptor-fallback-ref.html
layout/reftests/counter-style/descriptor-fallback.html
layout/reftests/counter-style/descriptor-negative-invalid-ref.html
layout/reftests/counter-style/descriptor-negative-invalid.html
layout/reftests/counter-style/descriptor-negative-ref.html
layout/reftests/counter-style/descriptor-negative.html
layout/reftests/counter-style/descriptor-pad-invalid-ref.html
layout/reftests/counter-style/descriptor-pad-invalid.html
layout/reftests/counter-style/descriptor-pad-ref.html
layout/reftests/counter-style/descriptor-pad.html
layout/reftests/counter-style/descriptor-prefix-invalid-ref.html
layout/reftests/counter-style/descriptor-prefix-invalid.html
layout/reftests/counter-style/descriptor-prefix-ref.html
layout/reftests/counter-style/descriptor-prefix.html
layout/reftests/counter-style/descriptor-range-invalid-ref.html
layout/reftests/counter-style/descriptor-range-invalid.html
layout/reftests/counter-style/descriptor-range-ref.html
layout/reftests/counter-style/descriptor-range.html
layout/reftests/counter-style/descriptor-suffix-invalid-ref.html
layout/reftests/counter-style/descriptor-suffix-invalid.html
layout/reftests/counter-style/descriptor-suffix-ref.html
layout/reftests/counter-style/descriptor-suffix.html
layout/reftests/counter-style/descriptor-symbols-invalid-ref.html
layout/reftests/counter-style/descriptor-symbols-invalid.html
layout/reftests/counter-style/descriptor-symbols-ref.html
layout/reftests/counter-style/descriptor-symbols.html
layout/reftests/counter-style/name-case-sensitivity-ref.html
layout/reftests/counter-style/name-case-sensitivity.html
layout/reftests/counter-style/redefine-attr-mapping-ref.html
layout/reftests/counter-style/redefine-attr-mapping.html
layout/reftests/counter-style/redefine-builtin-ref.html
layout/reftests/counter-style/redefine-builtin.html
layout/reftests/counter-style/ref-common.css
layout/reftests/counter-style/reftest.list
layout/reftests/counter-style/system-additive-invalid.html
layout/reftests/counter-style/system-additive-ref.html
layout/reftests/counter-style/system-additive.html
layout/reftests/counter-style/system-alphabetic-invalid.html
layout/reftests/counter-style/system-alphabetic-ref.html
layout/reftests/counter-style/system-alphabetic.html
layout/reftests/counter-style/system-common-invalid-ref.html
layout/reftests/counter-style/system-common-invalid2-ref.html
layout/reftests/counter-style/system-cyclic-invalid.html
layout/reftests/counter-style/system-cyclic-ref.html
layout/reftests/counter-style/system-cyclic.html
layout/reftests/counter-style/system-extends-invalid-ref.html
layout/reftests/counter-style/system-extends-invalid.html
layout/reftests/counter-style/system-extends-ref.html
layout/reftests/counter-style/system-extends.html
layout/reftests/counter-style/system-fixed-invalid.html
layout/reftests/counter-style/system-fixed-ref.html
layout/reftests/counter-style/system-fixed.html
layout/reftests/counter-style/system-numeric-invalid.html
layout/reftests/counter-style/system-numeric-ref.html
layout/reftests/counter-style/system-numeric.html
layout/reftests/counter-style/system-symbolic-invalid.html
layout/reftests/counter-style/system-symbolic-ref.html
layout/reftests/counter-style/system-symbolic.html
layout/reftests/counter-style/test-common.css
layout/reftests/reftest.list
layout/style/test/mochitest.ini
layout/style/test/test_counter_descriptor_storage.html
layout/style/test/test_counter_style.html
layout/style/test/test_rule_insertion.html
--- a/accessible/tests/mochitest/name.js
+++ b/accessible/tests/mochitest/name.js
@@ -1,22 +1,23 @@
 /**
  * Test accessible name for the given accessible identifier.
  */
-function testName(aAccOrElmOrID, aName, aMsg)
+function testName(aAccOrElmOrID, aName, aMsg, aTodo)
 {
   var msg = aMsg ? aMsg : "";
 
   var acc = getAccessible(aAccOrElmOrID);
   if (!acc)
     return;
 
+  var func = aTodo ? todo_is : is;
   var txtID = prettyName(aAccOrElmOrID);
   try {
-    is(acc.name, aName, msg + "Wrong name of the accessible for " + txtID);
+    func(acc.name, aName, msg + "Wrong name of the accessible for " + txtID);
   } catch (e) {
     ok(false, msg + "Can't get name of the accessible for " + txtID);
   }
   return acc;
 }
 
 /**
  * Test accessible description for the given accessible.
--- a/accessible/tests/mochitest/name/a11y.ini
+++ b/accessible/tests/mochitest/name/a11y.ini
@@ -1,15 +1,16 @@
 [DEFAULT]
 support-files =
   general.css
   general.xbl
   markup.js
   markuprules.xml
 
 [test_browserui.xul]
+[test_counterstyle.html]
 [test_general.html]
 [test_general.xul]
 [test_link.html]
 [test_list.html]
 [test_markup.html]
 [test_svg.html]
 [test_tree.xul]
new file mode 100644
--- /dev/null
+++ b/accessible/tests/mochitest/name/test_counterstyle.html
@@ -0,0 +1,153 @@
+<html>
+
+<head>
+  <title>nsIAccessible::name calculation for @counter-style</title>
+  <link rel="stylesheet" type="text/css"
+        href="chrome://mochikit/content/tests/SimpleTest/test.css" />
+
+  <script type="application/javascript"
+          src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+
+  <script type="application/javascript"
+          src="../common.js"></script>
+  <script type="application/javascript"
+          src="../name.js"></script>
+
+  <style id="counterstyles" type="text/css">
+    @counter-style system-alphabetic {
+      system: alphabetic;
+      symbols: x y z;
+    }
+    @counter-style system-cyclic {
+      system: cyclic;
+      symbols: x y z;
+    }
+    @counter-style system-numeric {
+      system: numeric;
+      symbols: x y z;
+    }
+    @counter-style speak-as-bullets {
+      system: extends decimal;
+      speak-as: bullets;
+    }
+    @counter-style speak-as-numbers {
+      system: extends system-alphabetic;
+      speak-as: numbers;
+    }
+    @counter-style speak-as-words {
+      system: additive;
+      additive-symbols: 20 "twenty ", 9 "nine", 7 "seven", 1 "one";
+      speak-as: words;
+    }
+    @counter-style speak-as-spell-out {
+      system: extends system-alphabetic;
+      speak-as: spell-out;
+    }
+    @counter-style speak-as-other {
+      system: extends decimal;
+      speak-as: speak-as-words;
+    }
+    @counter-style speak-as-loop {
+      system: extends upper-latin;
+      speak-as: speak-as-loop0;
+    }
+    @counter-style speak-as-loop0 {
+      system: extends disc;
+      speak-as: speak-as-loop1;
+    }
+    @counter-style speak-as-loop1 {
+      system: extends decimal;
+      speak-as: speak-as-loop0;
+    }
+    @counter-style speak-as-extended0 {
+      system: extends decimal;
+      speak-as: speak-as-extended1;
+    }
+    @counter-style speak-as-extended1 {
+      system: extends speak-as-extended0;
+      speak-as: disc;
+    }
+    @counter-style speak-as-extended2 {
+      system: extends decimal;
+      speak-as: speak-as-extended3;
+    }
+    @counter-style speak-as-extended3 {
+      system: extends speak-as-extended2;
+    }
+  </style>
+
+  <script type="application/javascript">
+
+    function doTest()
+    {
+      function testRule(aRule, aNames, aTodo)
+      {
+        testName(aRule + "-1", aNames[0], null, aTodo);
+        testName(aRule + "-7", aNames[1], null, aTodo);
+        testName(aRule + "-29", aNames[2], null, aTodo);
+      }
+
+      var spellOutNames = ["X. 1", "Y X. 7", "Y Z Y. 29"];
+      var bulletsNames = [kDiscBulletText + "1",
+                          kDiscBulletText + "7",
+                          kDiscBulletText + "29"];
+      var numbersNames = ["1. 1", "7. 7", "29. 29"];
+      var wordsNames = ["one. 1", "seven. 7", "twenty nine. 29"];
+
+      testRule("system-alphabetic", spellOutNames, true); // bug 1024178
+      testRule("system-cyclic", bulletsNames);
+      testRule("system-numeric", numbersNames);
+
+      testRule("speak-as-bullets", bulletsNames);
+      testRule("speak-as-numbers", numbersNames);
+      testRule("speak-as-words", wordsNames);
+      testRule("speak-as-spell-out", spellOutNames, true); // bug 1024178
+      testRule("speak-as-other", wordsNames);
+
+      testRule("speak-as-loop", bulletsNames);
+      testRule("speak-as-loop0", bulletsNames);
+      testRule("speak-as-loop1", numbersNames);
+
+      testRule("speak-as-extended0", bulletsNames);
+      testRule("speak-as-extended1", bulletsNames);
+      testRule("speak-as-extended2", numbersNames);
+      testRule("speak-as-extended3", numbersNames);
+
+      SimpleTest.finish();
+    }
+
+    SimpleTest.waitForExplicitFinish();
+    addA11yLoadEvent(doTest);
+  </script>
+
+</head>
+
+<body>
+
+  <a target="_blank"
+     href="https://bugzilla.mozilla.org/show_bug.cgi?id=966166"
+     title="Bug 966166 - Implement @counter-style rule">
+    Bug 966166
+  </a>
+
+  <ol id="list"></ol>
+
+  <script type="application/javascript">
+    var list = getNode("list");
+    var rules = getNode("counterstyles").sheet.cssRules;
+    var values = [1, 7, 29];
+    for (var i = 0; i < rules.length; i++) {
+      var rule = rules[i];
+      for (var j = 0; j < values.length; j++) {
+        var item = document.createElement("li");
+        item.id = rule.name + '-' + values[j];
+        item.value = values[j];
+        item.textContent = values[j];
+        item.setAttribute("style", "list-style-type: " + rule.name);
+        list.appendChild(item);
+      }
+    }
+  </script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/dependent-builtin-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="ref-common.css">
+<div>&#x4e00;&#x5343;&#x3001;</div>
+<div>&#x4e00;&#x5343;&#x96f6;&#x4e00;&#x3001;</div>
+<div>&#x4e00;&#x5343;&#x96f6;&#x4e8c;&#x3001;</div>
+<div>&#x4e00;&#x5343;&#x96f6;&#x4e09;&#x3001;</div>
+<div>&#x4e00;&#x5343;&#x96f6;&#x56db;&#x3001;</div>
+<div>&#x4e00;&#x3007;&#x3007;&#x4e94;&#x3001;</div>
+<div>&#x4e00;&#x3007;&#x3007;&#x516d;&#x3001;</div>
+<div>&#x4e00;&#x3007;&#x3007;&#x4e03;&#x3001;</div>
+<div>&#x4e00;&#x3007;&#x3007;&#x516b;&#x3001;</div>
+<div>&#x4e00;&#x3007;&#x3007;&#x4e5d;&#x3001;</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/dependent-builtin.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    system: extends simp-chinese-informal;
+    range: 1000 1004;
+  }
+</style>
+<ol start="1000" style="list-style-type: a">
+  <li><li><li><li><li>
+  <li><li><li><li><li>
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-fallback-invalid-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="ref-common.css">
+<div>00.&nbsp;</div>
+<div>A.&nbsp;</div>
+<div>B.&nbsp;</div>
+<div>C.&nbsp;</div>
+<div>D.&nbsp;</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-fallback-invalid.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    system: extends upper-alpha;
+    fallback: decimal-leading-zero;
+    fallback: decimal cjk-decimal;
+    fallback: "*";
+  }
+</style>
+<ol start="0" style="list-style-type: a">
+  <li><li><li><li><li>
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-fallback-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="ref-common.css">
+<!-- list-style-type: a -->
+<div>a.&nbsp;</div>
+<div>b.&nbsp;</div>
+<div>c.&nbsp;</div>
+<div>d.&nbsp;</div>
+<div>e.&nbsp;</div>
+<div>f.&nbsp;</div>
+<div>7.&nbsp;</div>
+<div>8.&nbsp;</div>
+<div>9.&nbsp;</div>
+<!-- list-style-type: b -->
+<div>a.&nbsp;</div>
+<div>b.&nbsp;</div>
+<div>c.&nbsp;</div>
+<div>d.&nbsp;</div>
+<div>e.&nbsp;</div>
+<div>f.&nbsp;</div>
+<div>7.&nbsp;</div>
+<div>8.&nbsp;</div>
+<div>9.&nbsp;</div>
+<!-- list-style-type: c -->
+<div>a.&nbsp;</div>
+<div>b.&nbsp;</div>
+<div>c.&nbsp;</div>
+<div>d.&nbsp;</div>
+<div>e.&nbsp;</div>
+<div>f.&nbsp;</div>
+<div>g.&nbsp;</div>
+<div>h.&nbsp;</div>
+<div>i.&nbsp;</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-fallback.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    system: fixed;
+    symbols: a b c;
+    fallback: b;
+  }
+  @counter-style b {
+    system: fixed 4;
+    symbols: d e f;
+    fallback: a;
+  }
+  @counter-style c {
+    system: fixed 7;
+    symbols: g h i;
+    fallback: a;
+  }
+</style>
+<ol style="list-style-type: a">
+  <li><li><li>
+  <li><li><li>
+  <li><li><li>
+</ol>
+<ol style="list-style-type: b">
+  <li><li><li>
+  <li><li><li>
+  <li><li><li>
+</ol>
+<ol style="list-style-type: c">
+  <li><li><li>
+  <li><li><li>
+  <li><li><li>
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-negative-invalid-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="ref-common.css">
+<div>!2.&nbsp;</div>
+<div>!1.&nbsp;</div>
+<div>0.&nbsp;</div>
+<div>1.&nbsp;</div>
+<div>2.&nbsp;</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-negative-invalid.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    system: extends decimal;
+    negative: '!';
+    negative: 0;
+    negative: ~;
+    negative: '(' 'x' ')';
+  }
+</style>
+<ol start="-2" style="list-style-type: a">
+  <li><li><li><li><li>
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-negative-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="ref-common.css">
+<!-- list-style-type: a -->
+<div>&#x207B;2.&nbsp;</div>
+<div>&#x207B;1.&nbsp;</div>
+<div>0.&nbsp;</div>
+<div>1.&nbsp;</div>
+<div>2.&nbsp;</div>
+<!-- list-style-type: b -->
+<div>(2).&nbsp;</div>
+<div>(1).&nbsp;</div>
+<div>0.&nbsp;</div>
+<div>1.&nbsp;</div>
+<div>2.&nbsp;</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-negative.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    system: extends decimal;
+    negative: \207B;
+  }
+  @counter-style b {
+    system: extends decimal;
+    negative: '(' ')';
+  }
+</style>
+<ol start="-2" style="list-style-type: a">
+  <li><li><li><li><li>
+</ol>
+<ol start="-2" style="list-style-type: b">
+  <li><li><li><li><li>
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-pad-invalid-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="ref-common.css">
+<div>001.&nbsp;</div>
+<div>002.&nbsp;</div>
+<div>003.&nbsp;</div>
+<div>004.&nbsp;</div>
+<div>005.&nbsp;</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-pad-invalid.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    system: extends decimal;
+    pad: 3 "0";
+    pad: -1 "X";
+    pad: "#";
+    pad: 2 0;
+  }
+</style>
+<ol style="list-style-type: a">
+  <li><li><li><li><li>
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-pad-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="ref-common.css">
+<!-- list-style-type: a -->
+<div>-III.&nbsp;</div>
+<div>-*II.&nbsp;</div>
+<div>-**I.&nbsp;</div>
+<div>0.&nbsp;</div>
+<div>**I.&nbsp;</div>
+<div>*II.&nbsp;</div>
+<div>III.&nbsp;</div>
+<div>*IV.&nbsp;</div>
+<div>**V.&nbsp;</div>
+<div>6.&nbsp;</div>
+<!-- list-style-type: b -->
+<div>(002).&nbsp;</div>
+<div>(001).&nbsp;</div>
+<div>000.&nbsp;</div>
+<div>001.&nbsp;</div>
+<div>002.&nbsp;</div>
+<!-- list-style-type: c -->
+<div>ooa&#x0304;</div>
+<div>ooa&#x0301;</div>
+<div>oa&#x0304;a&#x0301;</div>
+<div>oa&#x030c;a&#x0300;</div>
+<div>a&#x0304;a&#x0301;a&#x030c;</div>
+<div>a&#x0300;a&#x0304;a&#x0301;</div>
+<!-- list-style-type: d -->
+<div>001.&nbsp;</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-pad.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    system: extends upper-roman;
+    range: infinite 5;
+    pad: 3 '*';
+  }
+  @counter-style b {
+    system: extends decimal;
+    negative: '(' ')';
+    pad: 3 '0';
+  }
+  @counter-style c {
+    system: alphabetic;
+    symbols: a\0304  a\0301  a\030c  a\0300;
+    pad: 3 o;
+    suffix: '';
+  }
+  @counter-style d {
+    system: extends decimal;
+    pad: '0' 3;
+  }
+</style>
+<ol start="-3" style="list-style-type: a">
+  <li><li><li><li><li>
+  <li><li><li><li><li>
+</ol>
+<ol start="-2" style="list-style-type: b">
+  <li><li><li><li><li>
+</ol>
+<ol style="list-style-type: c">
+  <li><li>
+  <li value="6"><li value="16">
+  <li value="27"><li value="70">
+</ol>
+<ol style="list-style-type: d">
+  <li>
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-prefix-invalid-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="ref-common.css">
+<div>#-2.&nbsp;</div>
+<div>#-1.&nbsp;</div>
+<div>#0.&nbsp;</div>
+<div>#1.&nbsp;</div>
+<div>#2.&nbsp;</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-prefix-invalid.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    system: extends decimal;
+    prefix: "#";
+    prefix: *;
+    prefix: 0;
+    prefix: '$' '$';
+  }
+</style>
+<ol start="-2" style="list-style-type: a">
+  <li><li><li><li><li>
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-prefix-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="ref-common.css">
+<!-- ol -->
+<div>Appendix -2.&nbsp;</div>
+<div>Appendix -1.&nbsp;</div>
+<div>Appendix 0.&nbsp;</div>
+<div>Appendix I.&nbsp;</div>
+<div>Appendix II.&nbsp;</div>
+<!-- section -->
+<p>-2</p>
+<p>-1</p>
+<p>0</p>
+<p>I</p>
+<p>II</p>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-prefix.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    system: extends upper-roman;
+    prefix: "Appendix ";
+  }
+  section {
+    counter-reset: p -3;
+  }
+  p {
+    counter-increment: p;
+  }
+  p::before {
+    content: counter(p, a);
+  }
+</style>
+<ol start="-2" style="list-style-type: a">
+  <li><li><li><li><li>
+</ol>
+<section>
+  <p><p><p><p><p>
+</section>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-range-invalid-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="ref-common.css">
+<div>a.&nbsp;</div>
+<div>b.&nbsp;</div>
+<div>3.&nbsp;</div>
+<div>4.&nbsp;</div>
+<div>5.&nbsp;</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-range-invalid.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    system: extends lower-alpha;
+    range: 1 2;
+    range: 1;
+    range: 3 1;
+    range: xx yy;
+  }
+</style>
+<ol style="list-style-type: a">
+  <li><li><li><li><li>
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-range-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="ref-common.css">
+<div>-III.&nbsp;</div>
+<div>-2.&nbsp;</div>
+<div>-I.&nbsp;</div>
+<div>0.&nbsp;</div>
+<div>I.&nbsp;</div>
+<div>II.&nbsp;</div>
+<div>3.&nbsp;</div>
+<div>IV.&nbsp;</div>
+<div>5.&nbsp;</div>
+<div>6.&nbsp;</div>
+<div>VII.&nbsp;</div>
+<div>VIII.&nbsp;</div>
+<div>IX.&nbsp;</div>
+<div>10.&nbsp;</div>
+<div>XI.&nbsp;</div>
+<div>MMMCMXCIX.&nbsp;</div>
+<div>MMMM.&nbsp;</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-range.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    system: extends upper-roman;
+    range: infinite -3, -1 2, 4 4, 7 9, 11 infinite;
+  }
+</style>
+<ol start="-3" style="list-style-type: a">
+  <li><li><li><li><li>
+  <li><li><li><li><li>
+  <li><li><li><li><li>
+  <li value="3999"><li>
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-suffix-invalid-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="ref-common.css">
+<div>-2,</div>
+<div>-1,</div>
+<div>0,</div>
+<div>1,</div>
+<div>2,</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-suffix-invalid.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    system: extends decimal;
+    suffix: ',';
+    suffix: *;
+    suffix: 0;
+    suffix: '$' '$';
+  }
+</style>
+<ol start="-2" style="list-style-type: a">
+  <li><li><li><li><li>
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-suffix-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<style type="text/css">
+  div {
+    padding: 0; margin: 0;
+    line-height: 150%;
+  }
+</style>
+<!-- list-style-type: a -->
+<div>-2,-2</div>
+<div>-1,-1</div>
+<div>0,0</div>
+<div>1,1</div>
+<div>2,2</div>
+<!-- list-style-type: b -->
+<div>-2&#x3001;-2</div>
+<div>-1&#x3001;-1</div>
+<div>0&#x3001;0</div>
+<div>1&#x3001;1</div>
+<div>2&#x3001;2</div>
+<!-- section -->
+<div>-2</div>
+<div>-1</div>
+<div>0</div>
+<div>1</div>
+<div>2</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-suffix.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<style type="text/css">
+  @counter-style a {
+    system: extends decimal;
+    suffix: ",";
+  }
+  @counter-style b {
+    system: extends decimal;
+    suffix: \3001;
+  }
+  ol {
+    list-style-position: inside;
+  }
+  ol, section, p {
+    padding: 0; margin: 0;
+    line-height: 150%;
+  }
+  section {
+    counter-reset: p -3;
+  }
+  p {
+    counter-increment: p;
+  }
+  p::before {
+    content: counter(p, a);
+  }
+</style>
+<ol start="-2" style="list-style-type: a">
+  <li>-2<li>-1<li>0<li>1<li>2
+</ol>
+<ol start="-2" style="list-style-type: b">
+  <li>-2<li>-1<li>0<li>1<li>2
+</ol>
+<section>
+  <p><p><p><p><p>
+</section>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-symbols-invalid-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="ref-common.css">
+<!-- list-style-type: a -->
+<div>a.&nbsp;</div>
+<div>b.&nbsp;</div>
+<div>c.&nbsp;</div>
+<div>4.&nbsp;</div>
+<div>5.&nbsp;</div>
+<!-- list-style-type: b -->
+<div>a.&nbsp;</div>
+<div>b.&nbsp;</div>
+<div>c.&nbsp;</div>
+<div>ca.&nbsp;</div>
+<div>cb.&nbsp;</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-symbols-invalid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    system: fixed;
+    symbols: a b c;
+    symbols: 0 1 2;
+  }
+  @counter-style b {
+    system: additive;
+    additive-symbols: 3 c, 2 b, 1 a;
+    additive-symbols: 1 x, 2 y, 3 z;
+    additive-symbols: x, y, z;
+    additive-symbols: 1, 2, 3;
+  }
+</style>
+<ol style="list-style-type: a">
+  <li><li><li><li><li>
+</ol>
+<ol style="list-style-type: b">
+  <li><li><li><li><li>
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-symbols-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="ref-common.css">
+<!-- list-style-type: a -->
+<div>a.&nbsp;</div>
+<div>b.&nbsp;</div>
+<div>c.&nbsp;</div>
+<!-- list-style-type: b -->
+<div>a.&nbsp;</div>
+<div>b.&nbsp;</div>
+<div>c.&nbsp;</div>
+<div>d.&nbsp;</div>
+<div>e.&nbsp;</div>
+<div>f.&nbsp;</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/descriptor-symbols.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    system: fixed;
+    symbols: a "b" \63;
+  }
+  @counter-style b {
+    system: additive;
+    additive-symbols: \66  6, 'e' 5, d 4, 3 \63, 2 "b", 1 a;
+  }
+</style>
+<ol style="list-style-type: a">
+  <li><li><li>
+</ol>
+<ol style="list-style-type: b">
+  <li><li><li><li><li><li>
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/name-case-sensitivity-ref.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<style type="text/css">
+  ol, div, p {
+    padding: 0; margin: 0;
+    line-height: 150%;
+  }
+  ol {
+    list-style-position: inside;
+  }
+  li, div, p {
+    float: left;
+  }
+  @counter-style decimal-leading-zero {
+    system: extends decimal;
+    pad: 3 '0';
+  }
+  @counter-style custom-style {
+    system: cyclic;
+    symbols: \2023;
+  }
+</style>
+
+<!-- list-style -->
+<ol><li style="list-style: hiragana inside;"></li></ol>
+<ol><li style="list-style: decimal-leading-zero inside;"></li></ol>
+<ol><li style="list-style: custom-style inside;"></li></ol>
+<ol><li style="list-style: decimal inside;"></li></ol>
+
+<!-- list-style-type -->
+<ol><li style="list-style-type: hiragana;"></li></ol>
+<ol><li style="list-style-type: decimal-leading-zero;"></li></ol>
+<ol><li style="list-style-type: custom-style;"></li></ol>
+<ol><li style="list-style-type: decimal;"></li></ol>
+
+<!-- counter() -->
+<style type="text/css">
+  #counter { counter-reset: a 1; }
+  #counter-a::before { content: counter(a, hiragana); }
+  #counter-b::before { content: counter(a, decimal-leading-zero); }
+  #counter-c::before { content: counter(a, custom-style); }
+  #counter-d::before { content: counter(a, decimal); }
+</style>
+<div id="counter">
+  <p id="counter-a"></p>
+  <p id="counter-b"></p>
+  <p id="counter-c"></p>
+  <p id="counter-d"></p>
+</div>
+
+<!-- counters() -->
+<style type="text/css">
+  #counters { counter-reset: a 1; }
+  #counters-a::before { content: counters(a, '', hiragana); }
+  #counters-b::before { content: counters(a, '', decimal-leading-zero); }
+  #counters-c::before { content: counters(a, '', custom-style); }
+  #counters-d::before { content: counters(a, '', decimal); }
+</style>
+<div id="counters">
+  <p id="counters-a"></p>
+  <p id="counters-b"></p>
+  <p id="counters-c"></p>
+  <p id="counters-d"></p>
+</div>
+
+<style type="text/css">
+  @counter-style a { system: extends hiragana; }
+  @counter-style b { system: extends decimal-leading-zero; }
+  @counter-style c { system: extends custom-style; }
+  @counter-style d { system: extends decimal; }
+</style>
+<ol><li style="list-style-type: a;"></li></ol>
+<ol><li style="list-style-type: b;"></li></ol>
+<ol><li style="list-style-type: c;"></li></ol>
+<ol><li style="list-style-type: d;"></li></ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/name-case-sensitivity.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<style type="text/css">
+  ol, div, p {
+    padding: 0; margin: 0;
+    line-height: 150%;
+  }
+  ol {
+    list-style-position: inside;
+  }
+  li, div, p {
+    float: left;
+  }
+  @counter-style decimal-leading-zero {
+    system: extends decimal;
+    pad: 3 '0';
+  }
+  @counter-style custom-style {
+    system: cyclic;
+    symbols: \2023;
+  }
+</style>
+
+<!-- list-style -->
+<ol><li style="list-style: Hiragana inside;"></li></ol>
+<ol><li style="list-style: Decimal-Leading-Zero inside;"></li></ol>
+<ol><li style="list-style: custom-style inside;"></li></ol>
+<ol><li style="list-style: Custom-Style inside;"></li></ol>
+
+<!-- list-style-type -->
+<ol><li style="list-style-type: Hiragana;"></li></ol>
+<ol><li style="list-style-type: Decimal-Leading-Zero;"></li></ol>
+<ol><li style="list-style-type: custom-style;"></li></ol>
+<ol><li style="list-style-type: Custom-Style;"></li></ol>
+
+<!-- counter() -->
+<style type="text/css">
+  #counter { counter-reset: a 1; }
+  #counter-a::before { content: counter(a, Hiragana); }
+  #counter-b::before { content: counter(a, Decimal-leading-Zero); }
+  #counter-c::before { content: counter(a, custom-style); }
+  #counter-d::before { content: counter(a, Custom-Style); }
+</style>
+<div id="counter">
+  <p id="counter-a"></p>
+  <p id="counter-b"></p>
+  <p id="counter-c"></p>
+  <p id="counter-d"></p>
+</div>
+
+<!-- counters() -->
+<style type="text/css">
+  #counters { counter-reset: a 1; }
+  #counters-a::before { content: counters(a, '', Hiragana); }
+  #counters-b::before { content: counters(a, '', Decimal-leading-Zero); }
+  #counters-c::before { content: counters(a, '', custom-style); }
+  #counters-d::before { content: counters(a, '', Custom-Style); }
+</style>
+<div id="counters">
+  <p id="counters-a"></p>
+  <p id="counters-b"></p>
+  <p id="counters-c"></p>
+  <p id="counters-d"></p>
+</div>
+
+<style type="text/css">
+  @counter-style a { system: extends HiRaGaNa; }
+  @counter-style b { system: extends Decimal-leading-ZERO; }
+  @counter-style c { system: extends custom-style; }
+  @counter-style d { system: extends Custom-Style; }
+</style>
+<ol><li style="list-style-type: a;"></li></ol>
+<ol><li style="list-style-type: b;"></li></ol>
+<ol><li style="list-style-type: c;"></li></ol>
+<ol><li style="list-style-type: d;"></li></ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/redefine-attr-mapping-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style triangle {
+    system: cyclic;
+    symbols: \2023;
+    suffix: "";
+  }
+  .triangle { list-style-type: triangle; }
+  .hiragana { list-style-type: hiragana; }
+  .katakana { list-style-type: katakana; }
+  .hiragana-iroha { list-style-type: hiragana-iroha; }
+  .katakana-iroha { list-style-type: katakana-iroha; }
+</style>
+<ul class="triangle"><li></ul>
+<ul class="triangle"><li></ul>
+<ul class="triangle"><li></ul>
+<ul class="triangle"><li></ul>
+<ul class="triangle"><li></ul>
+<ul class="hiragana"><li></ul>
+<ul class="katakana"><li></ul>
+<ul class="hiragana-iroha"><li></ul>
+<ul class="katakana-iroha"><li></ul>
+<ul class="hiragana"><li></ul>
+<ul class="katakana"><li></ul>
+<ul class="hiragana-iroha"><li></ul>
+<ul class="katakana-iroha"><li></ul>
+
+<ol><li></ol>
+<ol class="triangle"><li></ol>
+<ol class="triangle"><li></ol>
+<ol class="triangle"><li></ol>
+<ol class="triangle"><li></ol>
+<ol class="hiragana"><li></ol>
+<ol class="katakana"><li></ol>
+<ol class="hiragana-iroha"><li></ol>
+<ol class="katakana-iroha"><li></ol>
+<ol class="hiragana"><li></ol>
+<ol class="katakana"><li></ol>
+<ol class="hiragana-iroha"><li></ol>
+<ol class="katakana-iroha"><li></ol>
+
+<ul>
+  <li class="triangle">
+  <li class="triangle">
+  <li class="triangle">
+  <li class="triangle">
+  <li class="hiragana">
+  <li class="katakana">
+  <li class="hiragana-iroha">
+  <li class="katakana-iroha">
+</ul>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/redefine-attr-mapping.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style triangle {
+    system: cyclic;
+    symbols: \2023;
+    suffix: "";
+  }
+  @counter-style disc {
+    system: extends triangle;
+  }
+  @counter-style circle {
+    system: extends triangle;
+  }
+  @counter-style square {
+    system: extends triangle;
+  }
+  @counter-style lower-roman {
+    system: extends hiragana;
+  }
+  @counter-style upper-roman {
+    system: extends katakana;
+  }
+  @counter-style lower-alpha {
+    system: extends hiragana-iroha;
+  }
+  @counter-style upper-alpha {
+    system: extends katakana-iroha;
+  }
+</style>
+<ul><li></ul>
+<ul type="disc"><li></ul>
+<ul type="circle"><li></ul>
+<ul type="round"><li></ul>
+<ul type="square"><li></ul>
+<ul type="i"><li></ul>
+<ul type="I"><li></ul>
+<ul type="a"><li></ul>
+<ul type="A"><li></ul>
+<ul type="lower-roman"><li></ul>
+<ul type="upper-roman"><li></ul>
+<ul type="lower-alpha"><li></ul>
+<ul type="upper-alpha"><li></ul>
+
+<ol><li></ol>
+<ol type="disc"><li></ol>
+<ol type="circle"><li></ol>
+<ol type="round"><li></ol>
+<ol type="square"><li></ol>
+<ol type="i"><li></ol>
+<ol type="I"><li></ol>
+<ol type="a"><li></ol>
+<ol type="A"><li></ol>
+<ol type="lower-roman"><li></ol>
+<ol type="upper-roman"><li></ol>
+<ol type="lower-alpha"><li></ol>
+<ol type="upper-alpha"><li></ol>
+
+<ul>
+  <li type="disc">
+  <li type="circle">
+  <li type="round">
+  <li type="square">
+  <li type="i">
+  <li type="I">
+  <li type="a">
+  <li type="A">
+</ul>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/redefine-builtin-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<ol>
+  <li style="list-style-type: none">foo
+  <li style="list-style-type: decimal">bar
+  <li style="list-style-type: cjk-decimal">
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/redefine-builtin.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style none {
+    system: extends lower-roman;
+  }
+  @counter-style decimal {
+    system: extends upper-roman;
+  }
+  @counter-style hebrew {
+    system: extends cjk-decimal;
+  }
+</style>
+<ol>
+  <li style="list-style-type: none">foo
+  <li style="list-style-type: decimal">bar
+  <li style="list-style-type: hebrew">
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/ref-common.css
@@ -0,0 +1,13 @@
+body {
+  /* to match ua.css, see bug 1020143 */
+  -moz-font-feature-settings: "tnum";
+  font-feature-settings: "tnum";
+}
+div, p {
+  padding: 0; margin: 0;
+  line-height: 150%;
+  float: left;
+}
+p {
+  padding-right: .5em;
+}
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/reftest.list
@@ -0,0 +1,32 @@
+== system-cyclic.html     system-cyclic-ref.html
+== system-fixed.html      system-fixed-ref.html
+== system-symbolic.html   system-symbolic-ref.html
+== system-alphabetic.html system-alphabetic-ref.html
+== system-numeric.html    system-numeric-ref.html
+== system-additive.html   system-additive-ref.html
+== system-extends.html    system-extends-ref.html
+== system-cyclic-invalid.html     system-common-invalid-ref.html
+== system-fixed-invalid.html      system-common-invalid2-ref.html
+== system-symbolic-invalid.html   system-common-invalid-ref.html
+== system-alphabetic-invalid.html system-common-invalid2-ref.html
+== system-numeric-invalid.html    system-common-invalid2-ref.html
+== system-additive-invalid.html   system-common-invalid-ref.html
+== system-extends-invalid.html    system-extends-invalid-ref.html
+== descriptor-negative.html descriptor-negative-ref.html
+== descriptor-prefix.html   descriptor-prefix-ref.html
+fails-if(B2G) == descriptor-suffix.html   descriptor-suffix-ref.html # B2G kerning
+== descriptor-range.html    descriptor-range-ref.html
+== descriptor-pad.html      descriptor-pad-ref.html
+== descriptor-fallback.html descriptor-fallback-ref.html
+== descriptor-symbols.html  descriptor-symbols-ref.html
+== descriptor-negative-invalid.html descriptor-negative-invalid-ref.html
+== descriptor-prefix-invalid.html   descriptor-prefix-invalid-ref.html
+== descriptor-suffix-invalid.html   descriptor-suffix-invalid-ref.html
+== descriptor-range-invalid.html    descriptor-range-invalid-ref.html
+== descriptor-pad-invalid.html      descriptor-pad-invalid-ref.html
+== descriptor-fallback.html         descriptor-fallback-ref.html
+== descriptor-symbols-invalid.html  descriptor-symbols-invalid-ref.html
+== name-case-sensitivity.html       name-case-sensitivity-ref.html
+== dependent-builtin.html           dependent-builtin-ref.html
+== redefine-builtin.html            redefine-builtin-ref.html
+== redefine-attr-mapping.html       redefine-attr-mapping-ref.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/system-additive-invalid.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    system: additive;
+    suffix: ":";
+  }
+</style>
+<ol start="-2" style="list-style-type: a">
+  <li>foo<li>bar<li>foo<li>bar
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/system-additive-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="ref-common.css">
+<!-- list-style-type: a -->
+<div>-2</div>
+<div>-1</div>
+<div>0</div>
+<div>&#x2680;</div>
+<div>&#x2681;</div>
+<div>&#x2682;</div>
+<div>&#x2683;</div>
+<div>&#x2684;</div>
+<div>&#x2685;</div>
+<div>&#x2685;&#x2680;</div>
+<div>&#x2685;&#x2683;</div>
+<div>&#x2685;&#x2684;</div>
+<div>&#x2685;&#x2685;</div>
+<div>&#x2685;&#x2685;&#x2680;</div>
+<div><script type="text/javascript">
+  document.write(Array(61).join('&#x2685;'));
+</script></div>
+<div>1000</div>
+<!-- list-style-type: b -->
+<div>-2</div>
+<div>-1</div>
+<div>&#x2637;</div>
+<div>&#x2636;</div>
+<div>&#x2635;</div>
+<!-- list-style-type: c -->
+<div>1.&nbsp;</div>
+<div>b.&nbsp;</div>
+<div>a.&nbsp;</div>
+<div>4.&nbsp;</div>
+<div>ab.&nbsp;</div>
+<!-- list-style-type: d -->
+<div><script type="text/javascript">
+  document.write(Array(61).join('&#x10300;'));
+</script>.&nbsp;</div>
+<div>100.&nbsp;</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/system-additive.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    system: additive;
+    additive-symbols: 6 \2685, 5 \2684, 4 \2683, 3 \2682, 2 \2681, 1 \2680;
+    suffix: "";
+  }
+  @counter-style b {
+    system: additive;
+    additive-symbols: 7 \2630, 6 \2631, 5 \2632, 4 \2633, 3 \2634, 2 \2635, 1 \2636, 0 \2637;
+    suffix: "";
+  }
+  @counter-style c {
+    system: additive;
+    additive-symbols: 3 "a", 2 "b";
+  }
+  @counter-style d {
+    system: additive;
+    additive-symbols: 1 \10300;
+  }
+</style>
+<ol start="-2" style="list-style-type: a">
+  <li><li><li><li><li>
+  <li><li><li><li><li>
+  <li value="10"><li><li><li>
+  <li value="360"><!-- 60 code points -->
+  <li value="1000"><!-- too long -->
+</ol>
+<ol start="-2" style="list-style-type: b">
+  <li><li><li><li><li>
+</ol>
+<ol style="list-style-type: c">
+  <li><li><li><li><li>
+</ol>
+<ol style="list-style-type: d">
+  <li value="60"><!-- 60 code points -->
+  <li value="100"><!-- too long -->
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/system-alphabetic-invalid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    system: alphabetic;
+    suffix: ":";
+  }
+  @counter-style b {
+    system: alphabetic;
+    symbols: A;
+    suffix: ":";
+  }
+</style>
+<ol start="-2" style="list-style-type: a">
+  <li>foo<li>bar<li>foo<li>bar
+</ol>
+<ol start="-2" style="list-style-type: b">
+  <li>foo<li>bar<li>foo<li>bar
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/system-alphabetic-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="ref-common.css">
+<div>-2</div>
+<div>-1</div>
+<div>0</div>
+<div>&#x26AA;</div>
+<div>&#x26AB;</div>
+<div>&#x26AA;&#x26AA;</div>
+<div>&#x26AA;&#x26AB;</div>
+<div>&#x26AB;&#x26AA;</div>
+<div>&#x26AB;&#x26AB;</div>
+<div>&#x26AA;&#x26AA;&#x26AA;</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/system-alphabetic.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    system: alphabetic;
+    symbols: \26AA  \26AB;
+    suffix: '';
+  }
+</style>
+<ol start="-2" style="list-style-type: a">
+  <li><li><li><li><li>
+  <li><li><li><li><li>
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/system-common-invalid-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<ol start="-2" style="list-style-type: decimal">
+  <li>foo<li>bar<li>foo<li>bar
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/system-common-invalid2-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<ol start="-2" style="list-style-type: decimal">
+  <li>foo<li>bar<li>foo<li>bar
+</ol>
+<ol start="-2" style="list-style-type: decimal">
+  <li>foo<li>bar<li>foo<li>bar
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/system-cyclic-invalid.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    system: cyclic;
+    suffix: ":";
+  }
+</style>
+<ol start="-2" style="list-style-type: a">
+  <li>foo<li>bar<li>foo<li>bar
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/system-cyclic-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="ref-common.css">
+<!-- list-style-type: a -->
+<div>&#x2023;</div>
+<div>&#x2023;</div>
+<div>&#x2023;</div>
+<div>&#x2023;</div>
+<div>&#x2023;</div>
+<!-- list-style-type: b -->
+<div>&#x2021;</div>
+<div>&#x2020;</div>
+<div>&#x2021;</div>
+<div>&#x2020;</div>
+<div>&#x2021;</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/system-cyclic.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    system: cyclic;
+    symbols: \2023;
+    suffix: "";
+  }
+  @counter-style b {
+    system: cyclic;
+    symbols: \2020  \2021;
+    suffix: "";
+  }
+</style>
+<ol start="-2" style="list-style-type: a">
+  <li><li><li><li><li>
+</ol>
+<ol start="-2" style="list-style-type: b">
+  <li><li><li><li><li>
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/system-extends-invalid-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<link rel="stylesheet" href="ref-common.css">
+<style type="text/css">
+  ol {
+    list-style: decimal inside;
+  }
+</style>
+<div>a1b</div>
+<div>2b</div>
+<div>c3.&nbsp;</div>
+<div>d4.&nbsp;</div>
+<div>e5.&nbsp;</div>
+<ol start="6">
+  <li>foo<li>bar
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/system-extends-invalid.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    system: extends b;
+    prefix: a;
+  }
+  @counter-style b {
+    system: extends c;
+    suffix: b;
+  }
+  @counter-style c {
+    system: extends b;
+    pad: 2 c;
+  }
+  @counter-style d {
+    system: extends d;
+    prefix: d;
+  }
+  @counter-style e {
+    system: extends unknown;
+    prefix: e;
+  }
+  @counter-style f {
+    system: extends decimal;
+    symbols: a;
+  }
+  @counter-style g {
+    system: extends decimal;
+    additive-symbols: 1 a;
+  }
+</style>
+<ol>
+  <li style="list-style-type: a;">
+  <li style="list-style-type: b;">
+  <li style="list-style-type: c;">
+  <li style="list-style-type: d;">
+  <li style="list-style-type: e;">
+  <li style="list-style-type: f;">foo
+  <li style="list-style-type: g;">bar
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/system-extends-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="ref-common.css">
+<!-- list-style-type: a -->
+<div>Chapter -2.&nbsp;</div>
+<div>Chapter -1.&nbsp;</div>
+<div>Chapter 0.&nbsp;</div>
+<div>Chapter I.&nbsp;</div>
+<div>Chapter II.&nbsp;</div>
+<div>Chapter III.&nbsp;</div>
+<div>Chapter IV.&nbsp;</div>
+<div>Chapter V.&nbsp;</div>
+<div>Chapter 6.&nbsp;</div>
+<div>Chapter 7.&nbsp;</div>
+<!-- list-style-type: b -->
+<div>Section -2.&nbsp;</div>
+<div>Section -1.&nbsp;</div>
+<div>Section 0.&nbsp;</div>
+<div>Section I.&nbsp;</div>
+<div>Section II.&nbsp;</div>
+<div>Section III.&nbsp;</div>
+<div>Section IV.&nbsp;</div>
+<div>Section V.&nbsp;</div>
+<div>Section VI.&nbsp;</div>
+<div>Section 7.&nbsp;</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/system-extends.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    system: extends upper-roman;
+    prefix: "Chapter ";
+    range: 1 5;
+  }
+  @counter-style b {
+    system: extends a;
+    prefix: "Section ";
+    range: 1 6;
+  }
+</style>
+<ol start="-2" style="list-style-type: a">
+  <li><li><li><li><li>
+  <li><li><li><li><li>
+</ol>
+<ol start="-2" style="list-style-type: b">
+  <li><li><li><li><li>
+  <li><li><li><li><li>
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/system-fixed-invalid.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    system: fixed;
+    suffix: ":";
+  }
+  @counter-style b {
+    system: fixed invalid;
+    suffix: ":";
+  }
+</style>
+<ol start="-2" style="list-style-type: a">
+  <li>foo<li>bar<li>foo<li>bar
+</ol>
+<ol start="-2" style="list-style-type: b">
+  <li>foo<li>bar<li>foo<li>bar
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/system-fixed-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="ref-common.css">
+<!-- list-style-type: a -->
+<div>-2:</div>
+<div>-1:</div>
+<div>0:</div>
+<div>&#x25F0;:</div>
+<div>&#x25F1;:</div>
+<div>&#x25F2;:</div>
+<div>&#x25F3;:</div>
+<div>5:</div>
+<div>6:</div>
+<div>7:</div>
+<!-- list-style-type: b -->
+<div>-2:</div>
+<div>&#x25F4;:</div>
+<div>&#x25F5;:</div>
+<div>&#x25F6;:</div>
+<div>&#x25F7;:</div>
+<div>3:</div>
+<div>4:</div>
+<div>5:</div>
+<div>6:</div>
+<div>7:</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/system-fixed.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    system: fixed;
+    symbols: \25F0  \25F1  \25F2  \25F3;
+    suffix: ':';
+  }
+  @counter-style b {
+    system: fixed -1;
+    symbols: \25F4  \25F5  \25F6  \25F7;
+    suffix: ':';
+  }
+</style>
+<ol start="-2" style="list-style-type: a">
+  <li><li><li><li><li>
+  <li><li><li><li><li>
+</ol>
+<ol start="-2" style="list-style-type: b">
+  <li><li><li><li><li>
+  <li><li><li><li><li>
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/system-numeric-invalid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    system: numeric;
+    suffix: ":";
+  }
+  @counter-style b {
+    system: numeric;
+    symbols: A;
+    suffix: ":";
+  }
+</style>
+<ol start="-2" style="list-style-type: a">
+  <li>foo<li>bar<li>foo<li>bar
+</ol>
+<ol start="-2" style="list-style-type: b">
+  <li>foo<li>bar<li>foo<li>bar
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/system-numeric-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="ref-common.css">
+<div>-11.&nbsp;</div>
+<div>-10.&nbsp;</div>
+<div>-2.&nbsp;</div>
+<div>-1.&nbsp;</div>
+<div>0.&nbsp;</div>
+<div>1.&nbsp;</div>
+<div>2.&nbsp;</div>
+<div>10.&nbsp;</div>
+<div>11.&nbsp;</div>
+<div>12.&nbsp;</div>
+<div>10201.&nbsp;</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/system-numeric.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    system: numeric;
+    symbols: '0' '1' '2';
+  }
+</style>
+<ol start="-4" style="list-style-type: a">
+  <li><li><li><li><li>
+  <li><li><li><li><li>
+  <li value="100">
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/system-symbolic-invalid.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    system: symbolic;
+    suffix: ":";
+  }
+</style>
+<ol start="-2" style="list-style-type: a">
+  <li>foo<li>bar<li>foo<li>bar
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/system-symbolic-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="ref-common.css">
+<!-- list-style-type: a -->
+<div>-2</div>
+<div>-1</div>
+<div>0</div>
+<div>*</div>
+<div>&#x2051;</div>
+<div>&#x2020;</div>
+<div>&#x2021;</div>
+<div>**</div>
+<div>&#x2051;&#x2051;</div>
+<div>&#x2020;&#x2020;</div>
+<div><script type="text/javascript">
+  document.write(Array(61).join('&#x2021;'));
+</script></div>
+<div>1000</div>
+<!-- list-style-type: b -->
+<div><script type="text/javascript">
+  document.write(Array(61).join('&#x10300;'));
+</script>.&nbsp;</div>
+<div>100.&nbsp;</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/system-symbolic.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="test-common.css">
+<style type="text/css">
+  @counter-style a {
+    /* system: symbolic; */
+    symbols: '*' \2051  \2020  \2021;
+    suffix: '';
+  }
+  @counter-style b {
+    symbols: \10300;
+  }
+</style>
+<ol start="-2" style="list-style-type: a">
+  <li><li><li><li><li>
+  <li><li><li><li><li>
+  <li value="240"><!-- 60 code points -->
+  <li value="1000"><!-- too long -->
+</ol>
+<ol style="list-style-type: b">
+  <li value="60"><!-- 60 code points -->
+  <li value="100"><!-- too long -->
+</ol>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/counter-style/test-common.css
@@ -0,0 +1,19 @@
+body {
+  /* to match ua.css, see bug 1020143 */
+  -moz-font-feature-settings: "tnum";
+  font-feature-settings: "tnum";
+}
+ol, ul, section, p {
+  padding: 0; margin: 0;
+  line-height: 150%;
+}
+ol, ul {
+  list-style-position: inside;
+}
+li, p {
+  float: left;
+  padding: 0;
+}
+p {
+  padding-right: .5em;
+}
--- a/layout/reftests/reftest.list
+++ b/layout/reftests/reftest.list
@@ -135,16 +135,19 @@ include cssom/reftest.list
 include columns/reftest.list
 
 # content/
 include ../../content/test/reftest/reftest.list
 
 # counters/
 include counters/reftest.list
 
+# counter-style/
+include counter-style/reftest.list
+
 # datalist
 include datalist/reftest.list
 
 # dom/
 include dom/reftest.list
 
 # generated-content/
 include generated-content/reftest.list
--- a/layout/style/test/mochitest.ini
+++ b/layout/style/test/mochitest.ini
@@ -228,9 +228,11 @@ skip-if = buildapp == 'b2g' || toolkit =
 [test_load_events_on_stylesheets.html]
 [test_page_parser.html]
 [test_bug732153.html]
 [test_bug732209.html]
 support-files = bug732209-css.sjs
 [test_bug795520.html]
 [test_background_blend_mode.html]
 [test_property_database.html]
+[test_counter_style.html]
+[test_counter_descriptor_storage.html]
 
new file mode 100644
--- /dev/null
+++ b/layout/style/test/test_counter_descriptor_storage.html
@@ -0,0 +1,267 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test for parsing, storage and serialization of CSS @counter-style descriptor values</title>
+  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=966166">Mozilla Bug 966166</a>
+<div id="display"></div>
+<pre id="test">
+<script type="application/javascript">
+var gStyleElement = document.createElement("style");
+gStyleElement.setAttribute("type", "text/css");
+document.getElementsByTagName("head")[0].appendChild(gStyleElement);
+var gSheet = gStyleElement.sheet;
+gSheet.insertRule(
+  "@counter-style test { system: extends decimal }", 0);
+var gRule = gSheet.cssRules[0];
+
+function set_rule(ruleText) {
+  gSheet.deleteRule(0);
+  gSheet.insertRule("@counter-style test { " + ruleText + " }", 0);
+  gRule = gSheet.cssRules[0];
+}
+
+function run_tests(tests) {
+  for (var desc in tests) {
+    var items = tests[desc];
+    for (var i in items) {
+      var item = items[i];
+      var ref = item[0];
+      if (ref === null) {
+        ref = gRule[desc];
+      }
+      for (var j in item) {
+        if (item[j] !== null) {
+          gRule[desc] = item[j];
+          is(gRule[desc], ref,
+             "setting '" + item[j] + "' on '" + desc + "'");
+        }
+      }
+    }
+  }
+}
+
+function test_system_dep_desc() {
+  // for system requires at least one symbol
+  var oneSymbolTests = [
+    [null, "", "0"],
+    ["x y", "x   y"],
+    ["\"x\"", "'x'"],
+    ["\\-", "\\2D"],
+    ["\\*", "\\2A"],
+  ];
+  // for system requires at least two symbols
+  var twoSymbolsTests = [
+    [null, "", "0", "x", "\"x\""],
+    ["x y", "x   y"],
+    ["\"x\" \"y\"", "'x' 'y'"],
+  ];
+  var info = [
+    {
+      system: "cyclic", 
+      base: "symbols: x",
+      base_tests: {
+        system: "cyclic",
+        symbols: "x"
+      },
+      tests: {
+        system: [
+          [null, "", "symbolic"],
+          ["cyclic", "Cyclic"],
+        ],
+        symbols: oneSymbolTests
+      }
+    },
+    {
+      system: "fixed",
+      base: "symbols: x",
+      base_tests: {
+        system: "fixed 1",
+        symbols: "x"
+      },
+      tests: {
+        system: [
+          [null, "", "symbolic"],
+          ["fixed 0"],
+          ["fixed 1", "fixed", "FixeD"],
+          ["fixed -1"],
+          [null, "fixed a", "fixed \"0\"", "fixed 0 1"],
+        ],
+        symbols: oneSymbolTests
+      }
+    },
+    {
+      system: "symbolic",
+      base: "symbols: x",
+      base_tests: {
+        system: "symbolic",
+        symbols: "x"
+      },
+      tests: {
+        system: [
+          [null, "", "cyclic"],
+          ["symbolic", "SymBolic"],
+        ],
+        symbols: oneSymbolTests
+      }
+    },
+    {
+      system: "alphabetic",
+      base: "symbols: x y",
+      base_tests: {
+        system: "alphabetic",
+        symbols: "x y"
+      },
+      tests: {
+        system: [
+          [null, "", "cyclic"],
+          ["alphabetic", "AlphaBetic"],
+        ],
+        symbols: twoSymbolsTests
+      }
+    },
+    {
+      system: "numeric",
+      base: "symbols: x y",
+      base_tests: {
+        system: "numeric",
+        symbols: "x y"
+      },
+      tests: {
+        system: [
+          [null, "", "cyclic"],
+          ["numeric", "NumEric"],
+        ],
+        symbols: twoSymbolsTests
+      }
+    },
+    {
+      system: "additive",
+      base: "additive-symbols: 0 x",
+      base_tests: {
+        system: "additive",
+        additiveSymbols: "0 x"
+      },
+      tests: {
+        system: [
+          [null, "", "cyclic"],
+        ],
+        additiveSymbols: [
+          [null, "", "x", "0", "\"x\"", "1 x, 0", "0 x, 1 y"],
+          ["0 x", "x 0"],
+          ["1 y, 0 x", "y 1, 0 x", "1 y, x 0", "y 1, x 0"],
+          ["1 \"0\"", "\"0\" 1", "1 '0'"],
+        ]
+      }
+    },
+    {
+      system: "extends decimal",
+      base: "",
+      base_tests: {
+        system: "extends decimal",
+        symbols: "",
+        additiveSymbols: ""
+      },
+      tests: {
+        system: [
+          [null, "extends", "fixed", "cyclic"],
+          ["extends cjk-decimal", "ExTends cjk-decimal", "extends CJK-decimal"],
+        ],
+        symbols: [
+          [null, "x", "x y"],
+        ],
+        additiveSymbols: [
+          [null, "0 x", "1 y, 0 x"],
+        ]
+      }
+    }
+  ];
+  for (var i = 0; i < info.length; i++) {
+    var item = info[i];
+    set_rule("system: " + item.system + "; " + item.base);
+    for (var desc in item.base_tests) {
+      is(gRule[desc], item.base_tests[desc],
+         "checking base value of '" + desc + "' " +
+         "for system '" + item.system + "'");
+    }
+    run_tests(item.tests);
+  }
+}
+
+function test_system_indep_desc() {
+  var tests = {
+    name: [
+      [null, "", "-", " ", "a b"],
+      [null, "decimal", "none", "Decimal", "NONE"],
+      ["cjk-decimal", "CJK-Decimal", "cjk-Decimal"],
+      ["X"],
+      ["x", "\\78"],
+      ["\\-", "\\2D"],
+    ],
+    negative: [
+      [null, "-", "", "0", "a b c"],
+      ["\"-\"", "'-'", "\"\\2D\""],
+      ["\\-", "\\2D"],
+      ["a b"],
+      ["\"(\" \")\"", "'(' ')'"],
+    ],
+    prefix: [
+      [null, "0", "-", " ", "a b"],
+      ["a"],
+      ["\"a\""],
+    ],
+    suffix: [
+      [null, "0", "-", " ", "a b"],
+      ["a"],
+      ["\"a\""],
+    ],
+    range: [
+      ["auto", "auTO"],
+      ["infinite infinite", "INFinite inFinite"],
+      ["0 infinite", "0 INFINITE"],
+      ["infinite 100"],
+      ["1 1"],
+      ["0 100", "0   100"],
+      ["0 100, 2 300, -1 1, infinite -100"],
+      [null, "0", "0 a", "a 0"],
+      [null, "1 -1", "1 -1, 0 100", "-1 1, 100 0"],
+    ],
+    pad: [
+      ["0 \"\"", "\"\" 0"],
+      ["1 a", "a 1", "1    a", "\\61  1"],
+      [null, "0", "\"\"", "0 0", "a a", "0 a a"],
+    ],
+    fallback: [
+      [null, "", "-", "0", "a b"],
+      ["a"],
+      ["A"],
+      ["decimal", "Decimal"],
+    ],
+    speakAs: [
+      [null, "", "-", "0", "a b"],
+      ["auto", "AuTo"],
+      ["bullets", "BULLETs"],
+      ["numbers", "NumBers"],
+      ["words", "WordS"],
+      // Currently spell-out is not supported, so it should be treated
+      // as an invalid value.
+      [null, "spell-out", "Spell-Out"],
+      ["a"],
+      ["A"],
+      ["decimal", "Decimal"],
+    ],
+  };
+  set_rule("system: extends decimal");
+  run_tests(tests);
+}
+
+test_system_dep_desc();
+test_system_indep_desc();
+
+</script>
+</pre>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/style/test/test_counter_style.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Test for css3-counter-style (Bug 966166)</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">
+    #ol_test, #ol_ref {
+      display: inline-block;
+      list-style-position: inside;
+    }
+    #ol_test { list-style-type: test; }
+    #ol_ref { list-style-type: ref; }
+    #div_test, #div_ref {
+      display: inline-block;
+      counter-reset: a -1;
+    }
+    #div_test::before { content: counter(a, test); }
+    #div_ref::before { content: counter(a, ref); }
+  </style>
+  <style type="text/css" id="counter">
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=966166">Mozilla Bug 966166</a>
+<div id="display"></div>
+<ol id="ol_test" start="-1"><li></li></ol><br>
+<ol id="ol_ref" start="-1"><li></li></ol><br>
+<div id="div_test"></div><br>
+<div id="div_ref"></div><br>
+<pre id="test">
+<script type="application/javascript">
+var gOlTest = document.getElementById("ol_test"),
+    gOlRef = document.getElementById("ol_ref"),
+    gDivTest = document.getElementById("div_test"),
+    gDivRef = document.getElementById("div_ref"),
+    gCounterSheet = document.getElementById("counter").sheet;
+
+var testRule, refRule;
+
+var basicStyle = "system: extends decimal; range: infinite infinite; ";
+var info = [
+  ["system",
+   "system: fixed -1; symbols: xxx;",
+   "system: fixed; symbols: xxx;"],
+  ["system",
+   "system: extends decimal;",
+   "system: extends cjk-ideographic;"],
+  ["negative", "", "negative: '((' '))';"],
+  ["negative", "", "negative: '---';"],
+  ["prefix", "", "prefix: '###';"],
+  ["suffix", "", "suffix: '###';"],
+  ["range",
+   "fallback: cjk-ideographic;",
+   "fallback: cjk-ideographic; range: 10 infinite;"],
+  ["pad", "", "pad: 10 '0';"],
+  ["fallback",
+   "range: 0 infinite;",
+   "range: 0 infinite; fallback: cjk-ideographic;"],
+  ["symbols",
+   "system: symbolic; symbols: '1';",
+   "system: symbolic; symbols: '111';"],
+  ["additiveSymbols",
+   "system: additive; additive-symbols: 1 '1';",
+   "system: additive; additive-symbols: 1 '111';"],
+];
+
+// force a reflow before test to eliminate bug 994418
+gOlTest.getBoundingClientRect().width;
+
+for (var i in info) {
+  var item = info[i];
+  var desc = item[0],
+      testStyle = item[1],
+      refStyle = item[2];
+  var isFix = (desc == "prefix" || desc == "suffix");
+
+  while (gCounterSheet.cssRules.length > 0) {
+    gCounterSheet.deleteRule(0);
+  }
+  gCounterSheet.insertRule("@counter-style test { " +
+    basicStyle + testStyle + "}", 0);
+  gCounterSheet.insertRule("@counter-style ref { " +
+    basicStyle + refStyle + "}", 1);
+  testRule = gCounterSheet.cssRules[0];
+  refRule = gCounterSheet.cssRules[1];
+
+  var olTestWidth = gOlTest.getBoundingClientRect().width;
+  var olRefWidth = gOlRef.getBoundingClientRect().width;
+  ok(olTestWidth > 0, "test ol has width");
+  ok(olRefWidth > 0, "ref ol has width");
+  ok(olTestWidth != olRefWidth,
+     "OLs have different width " +
+     "for rule '" + testStyle + "' and '" + refStyle + "'");
+
+  var divTestWidth = gDivTest.getBoundingClientRect().width;
+  var divRefWidth = gDivRef.getBoundingClientRect().width;
+  if (!isFix) {
+    ok(divTestWidth > 0, "test div has width");
+    ok(divRefWidth > 0, "ref div has width");
+    ok(divTestWidth != divRefWidth,
+       "DIVs have different width" +
+       "for rule '" + testStyle + "' and '" + refStyle + "'");
+  }
+
+  ok(testRule[desc] != refRule[desc],
+     "rules have different values for desciptor '" + desc + "'");
+  testRule[desc] = refRule[desc];
+
+  var olNewWidth = gOlTest.getBoundingClientRect().width;
+  var divNewWidth = gDivTest.getBoundingClientRect().width;
+  is(olNewWidth, olRefWidth);
+  if (!isFix) {
+    is(divNewWidth, divRefWidth);
+  }
+}
+</script>
+</pre>
+</body>
+</html>
--- a/layout/style/test/test_rule_insertion.html
+++ b/layout/style/test/test_rule_insertion.html
@@ -18,16 +18,26 @@ https://bugzilla.mozilla.org/show_bug.cg
 <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>
 
+<p><span id=control-decimal></span></p>
+<p><span id=control-cjk-decimal></span></p>
+<p><span id=test-counter-style></span></p>
+
+<style>
+  #control-decimal::before { content: counter(a, decimal); }
+  #control-cjk-decimal::before { content: counter(a, cjk-decimal); }
+  #test-counter-style::before { content: counter(a, unlikely-counter-style); }
+</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",
@@ -44,16 +54,23 @@ var testFont = document.getElementById("
 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;
 
+var controlDecimal = document.getElementById("control-decimal");
+var controlCJKDecimal = document.getElementById("control-cjk-decimal");
+var testCounterStyle = document.getElementById("test-counter-style");
+
+var decimalWidth = controlDecimal.getBoundingClientRect().width;
+var cjkDecimalWidth = controlCJKDecimal.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]
@@ -100,30 +117,45 @@ var innerRuleInfo = [
      // 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;
    }],
+  ["@counter-style unlikely-counter-style { system: extends cjk-decimal; }",
+   function (aApplied, aParent, aException) {
+     var width = testCounterStyle.getBoundingClientRect().width;
+     if (aException) {
+       return false;
+     }
+     return width == (aApplied ? cjkDecimalWidth : decimalWidth);
+   }],
 ];
 
 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);
 
+  ok(decimalWidth > 0, "decimal counter has width");
+  ok(cjkDecimalWidth > 0, "cjk-decimal counter has width");
+  ok(decimalWidth != cjkDecimalWidth, "decimal and cjk-decimal counter have different width")
+
+  var initialCounterStyleWidth = testCounterStyle.getBoundingClientRect().width;
+  is(initialCounterStyleWidth, decimalWidth);
+
   // 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,