FLUID-3953: Almost all image reorderer unit tests are failing: IE 9

Description

Almost all of the Image Reorderer unit tests are failing in Win7 of IE9.

The failing tests all have errors like.

1.Died on test #1: Problem in document structure - picked up element [object HTMLDivElement] for id gallery:::gallery-thumbs::: without this id - most likely the element has a name which conflicts with this id

Steps to reproduce:

1) Run the image reorderer unit tests
http://build.fluidproject.org/infusion/tests/component-tests/reorderer/html/ImageReorderer-test.html

Environments

IE9 (Win 7)

Attachments

Comments

• Justin Obara commented 2010-12-18T13:15:29.527-0500

  "Screen shot" shows some of the failing tests

• Harris Wong commented 2011-05-10T14:16:03.313-0400

  Another screen shot of the ImageReorderer. The error message is a bit different than the Dec 18, 2010's screen shot.

• Harris Wong commented 2011-05-16T16:08:01.778-0400

  Bug Parade Infusion

• Harris Wong commented 2011-05-20T15:53:45.000-0400

  On IE9, if an element has both attribute "id" and "rsf:id", then IE9 overwrites "id" to "rsf:id". Causing a "not found" for "id".

• Harris Wong commented 2011-05-20T15:56:55.546-0400

  Added unit tests for IE9 and attributes with both "id" and "rsf:id", https://github.com/harriswong/infusion/tree/FLUID-3953

• Harris Wong commented 2011-05-26T10:54:09.751-0400

  Seems to be related to document mode in IE9. If we switch Ducument Mode to IE8 and below, the tests will pass.

• Harris Wong commented 2011-05-26T15:25:38.405-0400

  ==== Brief ====
  It seems like rsf:id + IE9 Document mode is the cause of this problem. The details on the differences between IE8 and IE9 that causes this failure are uncertain. I have tried using different doctypes, and the result is not consistent. I have also tried using HTML5's doctype, still no luck.

  ==== Steps to Reproduce ====
  1. create an HTML page that loads jquery.js and fluid.js
  2. create 2 divs,
  <div id="test-no-rsf-id">No rsf:id</div>
  <div id="test-with-rsf-id" rsf:id="apple">with rsf:id</div>
  3. run fluid.jById('test-with-rsf-id'); on IE9, it will fail.
  4. run fluid.jById('test-no-rsf-id'); on IE9, it should pass.

  ==== More Details ====
  If we run document.getElementById('test-with-rsf-id').getAttribute('id'), it will return null.
  If we try to get the list of attributes,
  document.getElementById('test-with-rsf-id').attributes[0].name --> 'rsf:id'
  document.getElementById('test-with-rsf-id').attributes[1].name --> 'rsf:id'
  It seems like the attribute "id" is overwrote by rsf:id in IE9's DOM. Where as in FF and Chrome, it's
  document.getElementById('test-with-rsf-id').attributes[0].name --> 'id'
  document.getElementById('test-with-rsf-id').attributes[1].name --> 'rsf:id'
  Note: This is true even without both jQuery and Fluid libraries.

  ==== Unit test ====
  I have added a unit test for this, https://github.com/harriswong/infusion/commit/c254cc75d213b534f3898e07c96525e590d84339

  ==== Suggested Fix ====
  There are a few options to address this problem:
  1. Remove rsf:id, since image reorderer doesn't need rsf:id.
  2. Add meta-data to force IE9 to use other document mode. <meta http-equiv="X-UA-Compatible" content="IE=xxx" >, http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx
  3. This could be an IE9 bug since it makes no sense to overwrite the "id" attribute with our custom attribute "rsf:id". We may want to mark this test case as "expected to fail with IE9" and wait till it's fixed, then re-test it again.

  ==== Additional info ====
  Posted a thread in MSDN, http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/dca80bb2-20b2-4029-8600-cd363cc64ddd

• Justin Obara commented 2011-05-30T09:12:44.685-0400

  Antranig has made a pull request for a potential fix.
  https://github.com/fluid-project/infusion/pull/57

• Justin Obara commented 2011-06-02T16:13:32.329-0400

  Pushed antranig's fix at ca843c2cffac362c095ffdf00f8e6529336b9a6d