Merge pull request #151 from samthor/css-escape

implement CSS.escape

Author: samthor

src/polyfills.js

@@ -36,8 +36,49 @@
    * @return {string} escaped string
    */
   function escape(str) {
-    // TODO(samthor): Implement escape().
-    return '' + str;
+    if (str === undefined) {
+      throw new TypeError("Failed to execute 'escape' on 'CSS': 1 argument required, " +
+          "but only 0 present.");
+    }
+
+    str = '' + str;
+    var len = str.length;
+    var escaped = '';
+
+    // This follows the algorithm at-
+    //   https://drafts.csswg.org/cssom/#serialize-an-identifier
+
+    if (str == '-') {
+      return '\\-';  // special-case single dash
+    }
+
+    for (var i = 0; i < len; ++i) {
+      var code = str.charCodeAt(i);
+      if (code == 0) {
+        escaped += '\uFFFD';
+      } else if (code == 0x007f || (code >= 0x001 && code <= 0x001f)) {
+        // https://drafts.csswg.org/cssom/#escape-a-character-as-code-point
+        excaped += '\\' + code.toString(16) + ' ';
+      } else if (code >= 0x0080 || code == 0x002d || code == 0x005f ||
+          (code >= 0x0041 && code <= 0x005a) ||
+          (code >= 0x0061 && code <= 0x007a)) {
+        // the character itself
+        escaped += str.charAt(i);
+      } else if (code >= 0x0030 && code <= 0x0039) {
+        if (i == 0) {
+          escaped += '\\' + code.toString(16) + ' ';  // initial number as code point
+        } else if (i == 1 && str.charCodeAt(0) == 0x002d) {
+          escaped += '\\' + code.toString(16) + ' ';  // dash (0x002d) then number as code point
+        } else {
+          escaped += str.charAt(i);  // the character itself
+        }
+      } else {
+        // https://drafts.csswg.org/cssom/#escape-a-character
+        escaped += '\\' + str.charAt(i);
+      }
+    }
+
+    return escaped;
   }
 
   if (!scope.CSS) {

test/js/escape.js

@@ -15,7 +15,34 @@
 suite('CSS.escape polyfill', function() {
   var escape = typedOM.internal.escape;
 
-  test('Test simple escapes', function() {
-    assert.equal('test', escape('test'));
+  test('Test invalid usage', function() {
+    assert.throws(function() {
+      CSS.escape();
+    }, TypeError);
+    assert.equal('null', CSS.escape(null));
+    assert.equal('\\[object\\ Object\\]', CSS.escape({}));
   });
-});
+
+  test('Test escaping', function() {
+    assert.equal('', escape(''));
+
+    assert.equal('\\-', escape('-'), 'escaped single dash');
+    assert.equal('-\\30 ', escape('-0'), 'escaped number after dash');
+    assert.equal('-\\31 abc', escape('-1abc'), 'escaped number and string after dash');
+    assert.equal('\\32 abc', escape('2abc'), 'escaped initial number');
+    assert.equal('abc3', escape('abc3'), 'trailing number not escaped');
+
+    assert.equal('abc\\ def', escape('abc def'), 'escaped space');
+
+    assert.equal('long\\`string', escape('long`string'), 'escaped non-word char');
+
+    assert.equal('√π', escape('√π'), 'high code point not escaped');
+  });
+
+  test('Test CSS strings', function() {
+    assert.equal('border-radius', escape('border-radius'));
+    assert.equal('-webkit-transform', escape('-webkit-transform'));
+    assert.equal('\\30 \\ 4px\\ 8px\\ rgba\\(255\\,\\ 255\\,\\ 255\\,\\ 0\\.25\\)',
+        escape('0 4px 8px rgba(255, 255, 255, 0.25)'));
+  });
+});