Notes on Google Chrome Compatiblity

November 19, 2008 Chad Woolley

Pivot Jonathan and I were recently working on support for Google Chrome in Pivotal Tracker. Tracker’s extensive JsUnit test suite made this a lot easier.

Here’s some quick notes I took on the issues we ran into.

Don’t try to directly mock the ‘reset’ method on a Form Element

This was the original mocking code in one of our JsUnit tests:

var resetCalled = false;
widget._uploadForm.reset = function() { resetCalled = true; };

This permanently blew away the “reset” method, so it was undefined when called in a subsequent. To fix it, we did this in our form builder method:

var element = Element.create("form");
element.nativeReset = element.reset;
element.reset = function() { element.nativeReset() };

Hash keys sort differently

We had a testHash.keys() being compared to a hardcoded array. Chrome sorted the keys differently (apparently non-deterministically, so we had to do an explicit sort:

assertArrayEquals(['10001', '10002', '10003', 'endOfList'].sort(), $H(itemListWidget.draggables).keys().sort());

It wasn’t good to depend on the keys order in the first place, but it worked under IE, Firefox, and Safari.

The same hash sorting bug bit us in a much more obscure way. There was some threading test code that simulated timeouts/concurrency using a mock clock. Previously, the test code was dependent on the order in which the functions were added to a hash the mock “clock”. This broke with a different hash sorting order. We had to simulate some additional “ticks” to make the test pass.

Mozilla, but not Gecko

The browser string returned for Chrome by one of our utility functions, BrowserDetect.browser(), is “Mozilla”. However, for some of our simulated keypress events in tests, the “Gecko” version did not work.

Specifically, we had to use “KeyboardEvent” instead of “KeyEvents”, and “initKeyboardEvent” instead of “initKeyEvent”. See the table in this mozilla doc page.

Here’s the code we used to handle both cases:

evt = document.createEvent('KeyboardEvent');
if (typeof(evt.initKeyboardEvent) != 'undefined') {
  evt.initKeyboardEvent(eventName, true, true, window, false, false, false, false, options.keyCode, options.keyCode);
} else {
  evt.initKeyEvent(eventName, true, true, window, false, false, false, false, options.keyCode, options.keyCode);
}

The UserAgent (request.user_agent) returns

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.19 (KHTML, like Gecko) Chrome/0.3.154.9 Safari/525.19

The ‘sort’ function does not preserve order of equivalent elements

The following page outputs ‘ACBD’ under Chrome:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<a href="#" onclick="alert(doSort()); return false;">Sort</a>
<script type="text/javascript">
  function doSort() {
    var myArray = [
      {id: "A", sortVal: 0},
      {id: "B", sortVal: 1},
      {id: "C", sortVal: 1},
      {id: "D", sortVal: 2}
    ];
    var sorted = myArray.sort(function(a,b) {return a.sortVal - b.sortVal});
    return sorted[0].id + sorted[1].id + sorted[2].id + sorted[3].id;
  }
</script>
</body>
</html>

About the Author

Biography

More Content by Chad Woolley
Previous
Why I test.
Why I test.

This is a cross post from my personal blog, because I'd like to hear from other Pivots about why they test....

Next
Plaxo
Plaxo

Joseph Smarr from Plaxo discusses the rise of the Social Web and the sites and tools that enable it.

How do you measure digital transformation?

Take the Benchmark