[atoms] Fixing getText atom for capitalized text to better match what…

… a user sees.

CSS specifiaton leaves the "word" meaning undefined, https://drafts.csswg.org/css-text/#text-transform-property reads "For capitalize, what constitutes a “word“ is UA-dependent; [UAX29] is suggested (but not required) for determining such word boundaries."

getText atom was initially developed with Firefox behaviour in mind. But today it's the only browser that shows "Bla-bla-BLA", other browsers (Chrome, IE, Safari) consider "-" as a word boundary.

javascript/atoms/dom.js

@@ -1176,8 +1176,8 @@ bot.dom.appendVisibleTextLinesFromTextNode_ = function(textNode, lines,
   }
 
   if (textTransform == 'capitalize') {
-    text = text.replace(/(^|\s)(\S)/g, function() {
-      return arguments[1] + arguments[2].toUpperCase();
+    text = text.replace(/\b(\S)/g, function() {
+      return arguments[1].toUpperCase();
     });
   } else if (textTransform == 'uppercase') {
     text = text.toUpperCase();

javascript/atoms/test/text_test.html

@@ -257,7 +257,7 @@
 
     function testGetVisibleTextShouldHandleTextTransformProperty() {
       var text = getVisibleTextByElementId("capitalized");
-      assertEquals("Hello, World! Bla-bla-BLA", text);
+      assertEquals("Hello, World! Bla-Bla-BLA", text);
       text = getVisibleTextByElementId("lowercased");
       assertEquals("hello, world! bla-bla-bla", text);
       text = getVisibleTextByElementId("uppercased");
@@ -398,9 +398,9 @@
   <span id="zerowidth">This line has a bunch of ze&#8203;ro-width&lrm; characters&rlm; in it.</span>
 
   <div>
-    <a id="capitalized" style="text-transform: capitalize">Hello, world! bla-bla-BLA</a><br/>
+    <a id="capitalized" style="text-transform: capitalize">hello, world! bla-bla-BLA</a><br/>
     <a id="lowercased" style="text-transform: lowercase">Hello, world! bla-bla-BLA</a><br/>
-    <a id="uppercased" style="text-transform: uppercase">Hello, world! bla-bla-BLA</a><br/>
+    <a id="uppercased" style="text-transform: uppercase">hello, world! bla-bla-BLA</a><br/>
   </div>
 
 </body>