alloy-js-test-san 0.1.0

data/test/regression/prototype/unit/tests/dom_test.js

@@ -0,0 +1,1493 @@
+var getInnerHTML = function(id) {
+  return $(id).innerHTML.toString().toLowerCase().gsub(/[\r\n\t]/, '');
+};
+var createParagraph = function(text) {
+  var p = document.createElement('p');
+  p.appendChild(document.createTextNode(text));
+  return p;
+}
+
+new Test.Unit.Runner({
+  setup: function() {
+    if (documentViewportProperties) return;
+    // Based on properties check from http://www.quirksmode.org/viewport/compatibility.html
+    documentViewportProperties = {
+      properties : [
+        'self.pageXOffset', 'self.pageYOffset',
+        'self.screenX', 'self.screenY',
+        'self.innerHeight', 'self.innerWidth',
+        'self.outerHeight', 'self.outerWidth',
+        'self.screen.height', 'self.screen.width',
+        'self.screen.availHeight', 'self.screen.availWidth',
+        'self.screen.availTop', 'self.screen.availLeft',
+        'self.screen.Top', 'self.screen.Left', 
+        'self.screenTop', 'self.screenLeft',
+        'document.body.clientHeight', 'document.body.clientWidth',
+        'document.body.scrollHeight', 'document.body.scrollWidth',
+        'document.body.scrollLeft', 'document.body.scrollTop',
+        'document.body.offsetHeight', 'document.body.offsetWidth',
+        'document.body.offsetTop', 'document.body.offsetLeft'
+      ].inject([], function(properties, prop) {
+        if(!self.screen && prop.include('self.screen')) return;
+        if (!document.body && prop.include('document.body')) return;
+        properties.push(prop);
+        if (prop.include('.body') && document.documentElement)
+          properties.push(prop.sub('.body', '.documentElement'));
+        return properties;
+      }),
+
+      inspect : function() {
+        var props = [];
+        this.properties.each(function(prop) {
+          if (eval(prop)) props[prop] = eval(prop);
+        }, this);
+        return props;
+      }
+    };
+  },
+
+  testDollarFunction: function() {
+    this.assertUndefined($());
+    
+    this.assertNull(document.getElementById('noWayThisIDExists'));
+    this.assertNull($('noWayThisIDExists'));
+    
+    this.assertIdentical(document.getElementById('testdiv'), $('testdiv'));
+    this.assertEnumEqual([ $('testdiv'), $('container') ], $('testdiv', 'container'));
+    this.assertEnumEqual([ $('testdiv'), undefined, $('container') ],
+      $('testdiv', 'noWayThisIDExists', 'container'));
+    var elt = $('testdiv');
+    this.assertIdentical(elt, $(elt));
+    this.assertRespondsTo('hide', elt);
+    this.assertRespondsTo('childOf', elt);
+  },
+  
+  testGetElementsByClassName: function() {
+    if (document.getElementsByClassName.toString().include('[native code]')) {
+      this.info("browser uses native getElementsByClassName; skipping tests");
+      return;
+    } 
+
+    
+    var div = $('class_names'), list = $('class_names_ul');
+    
+    this.assertElementsMatch(document.getElementsByClassName('A'), 'p.A', 'ul#class_names_ul.A', 'li.A.C');
+    
+    
+    var isElementPrototypeSupported = (function(){
+      var el = document.createElement('div');
+      var result = typeof el.show != 'undefined';
+      el = null;
+      return result;
+    })();
+    
+    if (!isElementPrototypeSupported)
+      this.assertUndefined(document.getElementById('unextended').show);
+    
+    this.assertElementsMatch(div.getElementsByClassName('B'), 'ul#class_names_ul.A.B', 'div.B.C.D');
+    this.assertElementsMatch(div.getElementsByClassName('D C B'), 'div.B.C.D');
+    this.assertElementsMatch(div.getElementsByClassName(' D\nC\tB '), 'div.B.C.D');
+    this.assertElementsMatch(div.getElementsByClassName($w('D C B')));
+    this.assertElementsMatch(list.getElementsByClassName('A'), 'li.A.C');
+    this.assertElementsMatch(list.getElementsByClassName(' A '), 'li.A.C');
+    this.assertElementsMatch(list.getElementsByClassName('C A'), 'li.A.C');
+    this.assertElementsMatch(list.getElementsByClassName("C\nA "), 'li.A.C');
+    this.assertElementsMatch(list.getElementsByClassName('B'));
+    this.assertElementsMatch(list.getElementsByClassName('1'), 'li.1');
+    this.assertElementsMatch(list.getElementsByClassName([1]), 'li.1');
+    this.assertElementsMatch(list.getElementsByClassName(['1 junk']));
+    this.assertElementsMatch(list.getElementsByClassName(''));
+    this.assertElementsMatch(list.getElementsByClassName(' '));
+    this.assertElementsMatch(list.getElementsByClassName(['']));
+    this.assertElementsMatch(list.getElementsByClassName([' ', '']));
+    this.assertElementsMatch(list.getElementsByClassName({}));
+    
+    // those lookups shouldn't have extended all nodes in document
+    if (!isElementPrototypeSupported) 
+      this.assertUndefined(document.getElementById('unextended')['show']);
+  },
+
+  testElementInsertWithHTML: function() {
+    Element.insert('insertions-main', {before:'<p><em>before</em> text</p><p>more testing</p>'});
+    this.assert(getInnerHTML('insertions-container').startsWith('<p><em>before</em> text</p><p>more testing</p>'));
+    Element.insert('insertions-main', {after:'<p><em>after</em> text</p><p>more testing</p>'});
+    this.assert(getInnerHTML('insertions-container').endsWith('<p><em>after</em> text</p><p>more testing</p>'));
+    Element.insert('insertions-main', {top:'<p><em>top</em> text.</p><p>more testing</p>'});
+    this.assert(getInnerHTML('insertions-main').startsWith('<p><em>top</em> text.</p><p>more testing</p>'));
+    Element.insert('insertions-main', {bottom:'<p><em>bottom</em> text.</p><p>more testing</p>'});
+    this.assert(getInnerHTML('insertions-main').endsWith('<p><em>bottom</em> text.</p><p>more testing</p>'));
+  },
+
+  testElementInsertWithDOMNode: function() {
+    Element.insert('insertions-node-main', {before: createParagraph('node before')});
+    this.assert(getInnerHTML('insertions-node-container').startsWith('<p>node before</p>'));
+    Element.insert('insertions-node-main', {after: createParagraph('node after')});
+    this.assert(getInnerHTML('insertions-node-container').endsWith('<p>node after</p>'));
+    Element.insert('insertions-node-main', {top:createParagraph('node top')});
+    this.assert(getInnerHTML('insertions-node-main').startsWith('<p>node top</p>'));
+    Element.insert('insertions-node-main', {bottom:createParagraph('node bottom')});
+    this.assert(getInnerHTML('insertions-node-main').endsWith('<p>node bottom</p>'));
+    this.assertEqual($('insertions-node-main'), $('insertions-node-main').insert(document.createElement('p')));
+  },
+  
+  testElementInsertWithToElementMethod: function() {
+    Element.insert('insertions-node-main', {toElement: createParagraph.curry('toElement') });
+    this.assert(getInnerHTML('insertions-node-main').endsWith('<p>toelement</p>'));
+    Element.insert('insertions-node-main', {bottom: {toElement: createParagraph.curry('bottom toElement') }});
+    this.assert(getInnerHTML('insertions-node-main').endsWith('<p>bottom toelement</p>'));
+  },
+  
+  testElementInsertWithToHTMLMethod: function() {
+    Element.insert('insertions-node-main', {toHTML: function() { return '<p>toHTML</p>'} });
+    this.assert(getInnerHTML('insertions-node-main').endsWith('<p>tohtml</p>'));
+    Element.insert('insertions-node-main', {bottom: {toHTML: function() { return '<p>bottom toHTML</p>'} }});
+    this.assert(getInnerHTML('insertions-node-main').endsWith('<p>bottom tohtml</p>'));
+  },
+  
+  testElementInsertWithNonString: function() {
+    Element.insert('insertions-main', {bottom:3});
+    this.assert(getInnerHTML('insertions-main').endsWith('3'));
+  },
+
+  testElementInsertInTables: function() {
+    Element.insert('second_row', {after:'<tr id="third_row"><td>Third Row</td></tr>'});
+    this.assert($('second_row').descendantOf('table'));
+    
+    $('a_cell').insert({top:'hello world'});
+    this.assert($('a_cell').innerHTML.startsWith('hello world'));
+    $('a_cell').insert({after:'<td>hi planet</td>'});
+    this.assertEqual('hi planet', $('a_cell').next().innerHTML);
+    $('table_for_insertions').insert('<tr><td>a cell!</td></tr>');
+    this.assert($('table_for_insertions').innerHTML.gsub('\r\n', '').toLowerCase().include('<tr><td>a cell!</td></tr>'));
+    $('row_1').insert({after:'<tr></tr><tr></tr><tr><td>last</td></tr>'});
+    this.assertEqual('last', $A($('table_for_row_insertions').getElementsByTagName('tr')).last().lastChild.innerHTML);
+  },
+  
+  testElementInsertInSelect: function() {
+    var selectTop = $('select_for_insert_top'), selectBottom = $('select_for_insert_bottom');
+    selectBottom.insert('<option value="33">option 33</option><option selected="selected">option 45</option>');
+    this.assertEqual('option 45', selectBottom.getValue());
+    selectTop.insert({top:'<option value="A">option A</option><option value="B" selected="selected">option B</option>'});
+    this.assertEqual(4, selectTop.options.length);
+  },
+      
+  testElementMethodInsert: function() {
+    $('element-insertions-main').insert({before:'some text before'});
+    this.assert(getInnerHTML('element-insertions-container').startsWith('some text before'));
+    $('element-insertions-main').insert({after:'some text after'});
+    this.assert(getInnerHTML('element-insertions-container').endsWith('some text after'));
+    $('element-insertions-main').insert({top:'some text top'});
+    this.assert(getInnerHTML('element-insertions-main').startsWith('some text top'));
+    $('element-insertions-main').insert({bottom:'some text bottom'});
+    this.assert(getInnerHTML('element-insertions-main').endsWith('some text bottom'));
+    
+    $('element-insertions-main').insert('some more text at the bottom');
+    this.assert(getInnerHTML('element-insertions-main').endsWith('some more text at the bottom'));
+    
+    $('element-insertions-main').insert({TOP:'some text uppercase top'});
+    this.assert(getInnerHTML('element-insertions-main').startsWith('some text uppercase top'));
+    
+    $('element-insertions-multiple-main').insert({
+      top:'1', bottom:2, before: new Element('p').update('3'), after:'4'
+    });
+    this.assert(getInnerHTML('element-insertions-multiple-main').startsWith('1'));
+    this.assert(getInnerHTML('element-insertions-multiple-main').endsWith('2'));
+    this.assert(getInnerHTML('element-insertions-multiple-container').startsWith('<p>3</p>'));
+    this.assert(getInnerHTML('element-insertions-multiple-container').endsWith('4'));
+    
+    $('element-insertions-main').update('test');
+    $('element-insertions-main').insert(null);
+    $('element-insertions-main').insert({bottom:null});
+    this.assertEqual('test', getInnerHTML('element-insertions-main'));
+    $('element-insertions-main').insert(1337);
+    this.assertEqual('test1337', getInnerHTML('element-insertions-main'));
+  },
+  
+  testNewElementInsert: function() {
+    var container = new Element('div'), element = new Element('div');
+    container.insert(element);
+    
+    element.insert({ before: '<p>a paragraph</p>' });
+    this.assertEqual('<p>a paragraph</p><div></div>', getInnerHTML(container));
+    element.insert({ after: 'some text' });
+    this.assertEqual('<p>a paragraph</p><div></div>some text', getInnerHTML(container));
+    
+    element.insert({ top: '<p>a paragraph</p>' });
+    this.assertEqual('<p>a paragraph</p>', getInnerHTML(element));
+    element.insert('some text');
+    this.assertEqual('<p>a paragraph</p>some text', getInnerHTML(element));
+  },
+  
+  testInsertionBackwardsCompatibility: function() {
+    new Insertion.Before('element-insertions-main', 'some backward-compatibility testing before');
+    this.assert(getInnerHTML('element-insertions-container').include('some backward-compatibility testing before'));
+    new Insertion.After('element-insertions-main', 'some backward-compatibility testing after');
+    this.assert(getInnerHTML('element-insertions-container').include('some backward-compatibility testing after'));
+    new Insertion.Top('element-insertions-main', 'some backward-compatibility testing top');
+    this.assert(getInnerHTML('element-insertions-main').startsWith('some backward-compatibility testing top'));
+    new Insertion.Bottom('element-insertions-main', 'some backward-compatibility testing bottom');
+    this.assert(getInnerHTML('element-insertions-main').endsWith('some backward-compatibility testing bottom'));
+  },
+  
+  testElementWrap: function() {
+    var element = $('wrap'), parent = document.createElement('div');
+    element.wrap();
+    this.assert(getInnerHTML('wrap-container').startsWith('<div><p'));
+    element.wrap('div');
+    this.assert(getInnerHTML('wrap-container').startsWith('<div><div><p'));
+    
+    element.wrap(parent);
+    this.assert(Object.isFunction(parent.setStyle));
+    this.assert(getInnerHTML('wrap-container').startsWith('<div><div><div><p'));
+    
+    element.wrap('div', {className: 'wrapper'});
+    this.assert(element.up().hasClassName('wrapper'));      
+    element.wrap({className: 'other-wrapper'});
+    this.assert(element.up().hasClassName('other-wrapper'));
+    element.wrap(new Element('div'), {className: 'yet-other-wrapper'});
+    this.assert(element.up().hasClassName('yet-other-wrapper'));
+    
+    var orphan = new Element('p'), div = new Element('div');
+    orphan.wrap(div);
+    this.assertEqual(orphan.parentNode, div);
+  },
+  
+  testElementWrapReturnsWrapper: function() {
+    var element = new Element("div");
+    var wrapper = element.wrap("div");
+    this.assertNotEqual(element, wrapper);
+    this.assertEqual(element.up(), wrapper);
+  },
+  
+  testElementVisible: function(){
+    this.assertNotEqual('none', $('test-visible').style.display);
+    this.assertEqual('none', $('test-hidden').style.display);
+  },
+  
+  testElementToggle: function(){
+    $('test-toggle-visible').toggle();
+    this.assert(!$('test-toggle-visible').visible());
+    $('test-toggle-visible').toggle();
+    this.assert($('test-toggle-visible').visible());
+    $('test-toggle-hidden').toggle();
+    this.assert($('test-toggle-hidden').visible());
+    $('test-toggle-hidden').toggle();
+    this.assert(!$('test-toggle-hidden').visible());
+  },
+  
+  testElementShow: function(){
+    $('test-show-visible').show();
+    this.assert($('test-show-visible').visible());
+    $('test-show-hidden').show();
+    this.assert($('test-show-hidden').visible());
+  },
+  
+  testElementHide: function(){
+    $('test-hide-visible').hide();
+    this.assert(!$('test-hide-visible').visible());
+    $('test-hide-hidden').hide();
+    this.assert(!$('test-hide-hidden').visible());
+  }, 
+  
+  testElementRemove: function(){
+    $('removable').remove();
+    this.assert($('removable-container').empty());
+  },  
+   
+  testElementUpdate: function() {
+    $('testdiv').update('hello from div!');
+    this.assertEqual('hello from div!', $('testdiv').innerHTML);
+    
+    Element.update('testdiv', 'another hello from div!');
+    this.assertEqual('another hello from div!', $('testdiv').innerHTML);
+    
+    Element.update('testdiv', 123);
+    this.assertEqual('123', $('testdiv').innerHTML);
+    
+    Element.update('testdiv');
+    this.assertEqual('', $('testdiv').innerHTML);
+    
+    Element.update('testdiv', '&nbsp;');
+    this.assert(!$('testdiv').innerHTML.empty());
+  },
+
+  testElementUpdateWithScript: function() {
+    $('testdiv').update('hello from div!<script>\ntestVar="hello!";\n</'+'script>');
+    this.assertEqual('hello from div!',$('testdiv').innerHTML);
+    this.wait(100,function(){
+      this.assertEqual('hello!',testVar);
+      
+      Element.update('testdiv','another hello from div!\n<script>testVar="another hello!"</'+'script>\nhere it goes');
+      
+      // note: IE normalizes whitespace (like line breaks) to single spaces, thus the match test
+      this.assertMatch(/^another hello from div!\s+here it goes$/,$('testdiv').innerHTML);
+      this.wait(100,function(){
+        this.assertEqual('another hello!',testVar);
+        
+        Element.update('testdiv','a\n<script>testVar="a"\ntestVar="b"</'+'script>');
+        this.wait(100,function(){
+          this.assertEqual('b', testVar);
+          
+          Element.update('testdiv',
+            'x<script>testVar2="a"</'+'script>\nblah\n'+
+            'x<script>testVar2="b"</'+'script>');
+          this.wait(100,function(){
+            this.assertEqual('b', testVar2);
+          });
+        });
+      });
+    });
+  },
+  
+  testElementUpdateInTableRow: function() {
+    $('second_row').update('<td id="i_am_a_td">test</td>');
+    this.assertEqual('test',$('i_am_a_td').innerHTML);
+
+    Element.update('second_row','<td id="i_am_a_td">another <span>test</span></td>');
+    this.assertEqual('another <span>test</span>',$('i_am_a_td').innerHTML.toLowerCase());
+  },
+  
+  testElementUpdateInTableCell: function() {
+    Element.update('a_cell','another <span>test</span>');
+    this.assertEqual('another <span>test</span>',$('a_cell').innerHTML.toLowerCase());
+  },
+  
+  testElementUpdateInTable: function() {
+    Element.update('table','<tr><td>boo!</td></tr>');
+    this.assertMatch(/^<tr>\s*<td>boo!<\/td><\/tr>$/,$('table').innerHTML.toLowerCase());
+  },
+  
+  testElementUpdateInSelect: function() {
+    var select = $('select_for_update');
+    select.update('<option value="3">option 3</option><option selected="selected">option 4</option>');
+    this.assertEqual('option 4', select.getValue());
+  },
+
+  testElementUpdateWithDOMNode: function() {
+    $('testdiv').update(new Element('div').insert('bla'));
+    this.assertEqual('<div>bla</div>', getInnerHTML('testdiv'));
+  },
+  
+  testElementUpdateWithToElementMethod: function() {
+    $('testdiv').update({toElement: createParagraph.curry('foo')});
+    this.assertEqual('<p>foo</p>', getInnerHTML('testdiv'));
+  },
+  
+  testElementUpdateWithToHTMLMethod: function() {
+    $('testdiv').update({toHTML: function() { return 'hello world' }});
+    this.assertEqual('hello world', getInnerHTML('testdiv'));
+  },
+  
+  testElementUpdateScriptElement: function() {
+    var el = new Element('script', {
+      type: 'text/javascript'
+    });
+    this.assertNothingRaised(function(){
+      el.update('(function(){})');
+    })
+  },
+  
+  testElementReplace: function() {
+    $('testdiv-replace-1').replace('hello from div!');
+    this.assertEqual('hello from div!', $('testdiv-replace-container-1').innerHTML);
+    
+    $('testdiv-replace-2').replace(123);
+    this.assertEqual('123', $('testdiv-replace-container-2').innerHTML);
+    
+    $('testdiv-replace-3').replace();
+    this.assertEqual('', $('testdiv-replace-container-3').innerHTML);
+    
+    $('testrow-replace').replace('<tr><td>hello</td></tr>');
+    this.assert(getInnerHTML('testrow-replace-container').include('<tr><td>hello</td></tr>'));
+    
+    $('testoption-replace').replace('<option>hello</option>');
+    this.assert($('testoption-replace-container').innerHTML.include('hello'));
+    
+    Element.replace('testinput-replace', '<p>hello world</p>');
+    this.assertEqual('<p>hello world</p>', getInnerHTML('testform-replace'));
+
+    Element.replace('testform-replace', '<form></form>');
+    this.assertEqual('<p>some text</p><form></form><p>some text</p>', getInnerHTML('testform-replace-container'));
+  },
+  
+  testElementReplaceWithScript: function() {
+    $('testdiv-replace-4').replace('hello from div!<script>testVarReplace="hello!"</'+'script>');
+    this.assertEqual('hello from div!', $('testdiv-replace-container-4').innerHTML);
+    this.wait(100,function(){
+      this.assertEqual('hello!',testVarReplace);
+      
+      $('testdiv-replace-5').replace('another hello from div!\n<script>testVarReplace="another hello!"</'+'script>\nhere it goes');
+      
+      // note: IE normalizes whitespace (like line breaks) to single spaces, thus the match test
+      this.assertMatch(/^another hello from div!\s+here it goes$/,$('testdiv-replace-container-5').innerHTML);
+      this.wait(100,function(){
+        this.assertEqual('another hello!',testVarReplace);
+      });
+    });
+  },
+
+  testElementReplaceWithDOMNode: function() {
+    $('testdiv-replace-element').replace(createParagraph('hello'));
+    this.assertEqual('<p>hello</p>', getInnerHTML('testdiv-replace-container-element'));
+  },
+  
+  testElementReplaceWithToElementMethod: function() {
+    $('testdiv-replace-toelement').replace({toElement: createParagraph.curry('hello')});
+    this.assertEqual('<p>hello</p>', getInnerHTML('testdiv-replace-container-toelement'));
+  },
+  
+  testElementReplaceWithToHTMLMethod: function() {
+    $('testdiv-replace-tohtml').replace({toHTML: function() { return 'hello' }});
+    this.assertEqual('hello', getInnerHTML('testdiv-replace-container-tohtml'));
+  },
+      
+  testElementSelectorMethod: function() {      
+    ['getElementsBySelector','select'].each(function(method) {
+      var testSelector = $('container')[method]('p.test');
+      this.assertEqual(testSelector.length, 4);
+      this.assertEqual(testSelector[0], $('intended'));
+      this.assertEqual(testSelector[0], $$('#container p.test')[0]);        
+    }, this);
+  },
+  
+  testElementAdjacent: function() {
+    var elements = $('intended').adjacent('p');
+    this.assertEqual(elements.length, 3);
+    elements.each(function(element){
+      this.assert(element != $('intended'));
+    }, this);
+  },
+  
+  testElementIdentify: function() {
+    var parent = $('identification');
+    this.assertEqual(parent.down().identify(), 'predefined_id');
+    this.assert(parent.down(1).identify().startsWith('anonymous_element_'));
+    this.assert(parent.down(2).identify().startsWith('anonymous_element_'));
+    this.assert(parent.down(3).identify().startsWith('anonymous_element_'));
+    
+    this.assert(parent.down(3).id !== parent.down(2).id);
+  },
+     
+  testElementClassNameMethod: function() {
+    var testClassNames = $('container').getElementsByClassName('test');
+    var testSelector = $('container').getElementsBySelector('p.test');
+    this.assertEqual(testClassNames[0], $('intended'));
+    this.assertEqual(testClassNames.length, 4);
+    this.assertEqual(testSelector[3], testClassNames[3]);
+    this.assertEqual(testClassNames.length, testSelector.length);
+  },
+  
+  testElementAncestors: function() {
+    var ancestors = $('navigation_test_f').ancestors();
+    this.assertElementsMatch(ancestors, 'ul', 'li', 'ul#navigation_test',
+      'div#nav_tests_isolator', 'body', 'html');
+    this.assertElementsMatch(ancestors.last().ancestors());
+    
+    var dummy = $(document.createElement('DIV'));
+    dummy.innerHTML = '<div></div>'.times(3);
+    this.assert(typeof $(dummy.childNodes[0]).ancestors()[0]['setStyle'] == 'function');
+  },
+  
+  testElementDescendants: function() {
+    this.assertElementsMatch($('navigation_test').descendants(), 
+      'li', 'em', 'li', 'em.dim', 'li', 'em', 'ul', 'li',
+      'em.dim', 'li#navigation_test_f', 'em', 'li', 'em');
+    this.assertElementsMatch($('navigation_test_f').descendants(), 'em');
+    
+    var dummy = $(document.createElement('DIV'));
+    dummy.innerHTML = '<div></div>'.times(3);
+    this.assert(typeof dummy.descendants()[0].setStyle == 'function');
+  },
+  
+  testElementFirstDescendant: function() {
+    this.assertElementMatches($('navigation_test').firstDescendant(), 'li.first');
+    this.assertNull($('navigation_test_next_sibling').firstDescendant());
+  },
+  
+  testElementChildElements: function() {
+    this.assertElementsMatch($('navigation_test').childElements(),
+      'li.first', 'li', 'li#navigation_test_c', 'li.last');
+    this.assertNotEqual(0, $('navigation_test_next_sibling').childNodes.length);
+    this.assertEnumEqual([], $('navigation_test_next_sibling').childElements());
+    
+    var dummy = $(document.createElement('DIV'));
+    dummy.innerHTML = '<div></div>'.times(3);
+    this.assert(typeof dummy.childElements()[0].setStyle == 'function');
+  },
+
+  testElementImmediateDescendants: function() {
+    this.assertIdentical(Element.Methods.childElements, Element.Methods.immediateDescendants);
+  },  
+      
+  testElementPreviousSiblings: function() {
+    this.assertElementsMatch($('navigation_test').previousSiblings(),
+      'span#nav_test_prev_sibling', 'p.test', 'div', 'div#nav_test_first_sibling');
+    this.assertElementsMatch($('navigation_test_f').previousSiblings(), 'li');
+    
+    var dummy = $(document.createElement('DIV'));
+    dummy.innerHTML = '<div></div>'.times(3);
+    this.assert(typeof $(dummy.childNodes[1]).previousSiblings()[0].setStyle == 'function');
+  },
+  
+  testElementNextSiblings: function() {
+    this.assertElementsMatch($('navigation_test').nextSiblings(),
+      'div#navigation_test_next_sibling', 'p');
+    this.assertElementsMatch($('navigation_test_f').nextSiblings());
+    
+    var dummy = $(document.createElement('DIV'));
+    dummy.innerHTML = '<div></div>'.times(3);
+    this.assert(typeof $(dummy.childNodes[0]).nextSiblings()[0].setStyle == 'function');
+  },
+  
+  testElementSiblings: function() {
+    this.assertElementsMatch($('navigation_test').siblings(),
+      'div#nav_test_first_sibling', 'div', 'p.test',
+      'span#nav_test_prev_sibling', 'div#navigation_test_next_sibling', 'p');
+      
+    var dummy = $(document.createElement('DIV'));
+    dummy.innerHTML = '<div></div>'.times(3);
+    this.assert(typeof $(dummy.childNodes[0]).siblings()[0].setStyle == 'function');
+  },
+  
+  testElementUp: function() {
+    var element = $('navigation_test_f');
+    this.assertElementMatches(element.up(), 'ul');
+    this.assertElementMatches(element.up(0), 'ul');
+    this.assertElementMatches(element.up(1), 'li');
+    this.assertElementMatches(element.up(2), 'ul#navigation_test');
+    this.assertElementsMatch(element.up('li').siblings(), 'li.first', 'li', 'li.last');
+    this.assertElementMatches(element.up('ul', 1), 'ul#navigation_test');
+    this.assertEqual(undefined, element.up('garbage'));
+    this.assertEqual(undefined, element.up(6));
+    this.assertElementMatches(element.up('.non-existant, ul'), 'ul');
+    
+    var dummy = $(document.createElement('DIV'));
+    dummy.innerHTML = '<div></div>'.times(3);
+    this.assert(typeof $(dummy.childNodes[0]).up().setStyle == 'function');
+  },
+  
+  testElementDown: function() {
+    var element = $('navigation_test');
+    this.assertElementMatches(element.down(), 'li.first');
+    this.assertElementMatches(element.down(0), 'li.first');
+    this.assertElementMatches(element.down(1), 'em');
+    this.assertElementMatches(element.down('li', 5), 'li.last');
+    this.assertElementMatches(element.down('ul').down('li', 1), 'li#navigation_test_f');
+    this.assertElementMatches(element.down('.non-existant, .first'), 'li.first');
+    
+    var dummy = $(document.createElement('DIV'));
+    dummy.innerHTML = '<div></div>'.times(3);
+    this.assert(typeof dummy.down().setStyle == 'function');
+    
+    var input = $$('input')[0];
+    this.assertNothingRaised(function(){ input.down('span') });
+    this.assertUndefined(input.down('span'));
+  },
+  
+  testElementPrevious: function() {
+    var element = $('navigation_test').down('li.last');
+    this.assertElementMatches(element.previous(), 'li#navigation_test_c');
+    this.assertElementMatches(element.previous(1), 'li');
+    this.assertElementMatches(element.previous('.first'), 'li.first');
+    this.assertEqual(undefined, element.previous(3));
+    this.assertEqual(undefined, $('navigation_test').down().previous());
+    this.assertElementMatches(element.previous('.non-existant, .first'), 'li.first');
+    
+    var dummy = $(document.createElement('DIV'));
+    dummy.innerHTML = '<div></div>'.times(3);
+    this.assert(typeof $(dummy.childNodes[1]).previous().setStyle == 'function');
+  },
+  
+  testElementNext: function() {
+    var element = $('navigation_test').down('li.first');
+    this.assertElementMatches(element.next(), 'li');
+    this.assertElementMatches(element.next(1), 'li#navigation_test_c');
+    this.assertElementMatches(element.next(2), 'li.last');
+    this.assertElementMatches(element.next('.last'), 'li.last');
+    this.assertEqual(undefined, element.next(3));
+    this.assertEqual(undefined, element.next(2).next());
+    this.assertElementMatches(element.next('.non-existant, .last'), 'li.last');
+    
+    var dummy = $(document.createElement('DIV'));
+    dummy.innerHTML = '<div></div>'.times(3);
+    this.assert(typeof $(dummy.childNodes[0]).next().setStyle == 'function');
+  },
+  
+  testElementInspect: function() {
+    this.assertEqual('<ul id="navigation_test">', $('navigation_test').inspect());
+    this.assertEqual('<li class="first">', $('navigation_test').down().inspect());
+    this.assertEqual('<em>', $('navigation_test').down(1).inspect());
+  },
+  
+  testElementMakeClipping: function() {
+    var chained = Element.extend(document.createElement('DIV'));
+    this.assertEqual(chained, chained.makeClipping());
+    this.assertEqual(chained, chained.makeClipping());
+    this.assertEqual(chained, chained.makeClipping().makeClipping());
+    
+    this.assertEqual(chained, chained.undoClipping());
+    this.assertEqual(chained, chained.undoClipping());
+    this.assertEqual(chained, chained.undoClipping().makeClipping());
+    
+    ['hidden','visible','scroll'].each( function(overflowValue) {
+      var element = $('element_with_'+overflowValue+'_overflow');
+      
+      this.assertEqual(overflowValue, element.getStyle('overflow'));
+      element.makeClipping();
+      this.assertEqual('hidden', element.getStyle('overflow'));
+      element.undoClipping();
+      this.assertEqual(overflowValue, element.getStyle('overflow'));
+    }, this);
+  },
+  
+  testElementExtend: function() {
+    var element = $('element_extend_test');
+    this.assertRespondsTo('show', element);
+    
+    var XHTML_TAGS = $w(
+      'a abbr acronym address applet area '+
+      'b bdo big blockquote br button caption '+
+      'cite code col colgroup dd del dfn div dl dt '+
+      'em fieldset form h1 h2 h3 h4 h5 h6 hr '+
+      'i iframe img input ins kbd label legend li '+
+      'map object ol optgroup option p param pre q samp '+
+      'script select small span strong style sub sup '+
+      'table tbody td textarea tfoot th thead tr tt ul var');
+      
+    XHTML_TAGS.each(function(tag) {
+      var element = document.createElement(tag);
+      this.assertEqual(element, Element.extend(element));
+      this.assertRespondsTo('show', element);
+    }, this);
+    
+    [null,'','a','aa'].each(function(content) {
+      var textnode = document.createTextNode(content);
+      this.assertEqual(textnode, Element.extend(textnode));
+      this.assert(typeof textnode['show'] == 'undefined');
+    }, this);
+  },
+  
+  testElementExtendReextendsDiscardedNodes: function() {
+    this.assertRespondsTo('show', $('discard_1'));
+    $('element_reextend_test').innerHTML += '<div id="discard_2"></div>';
+    this.assertRespondsTo('show', $('discard_1'));
+  },
+  
+  testElementCleanWhitespace: function() {
+    Element.cleanWhitespace("test_whitespace");
+    this.assertEqual(3, $("test_whitespace").childNodes.length);
+    
+    this.assertEqual(1, $("test_whitespace").firstChild.nodeType);
+    this.assertEqual('SPAN', $("test_whitespace").firstChild.tagName);
+    
+    this.assertEqual(1, $("test_whitespace").firstChild.nextSibling.nodeType);
+    this.assertEqual('DIV', $("test_whitespace").firstChild.nextSibling.tagName);
+    
+    this.assertEqual(1, $("test_whitespace").firstChild.nextSibling.nextSibling.nodeType);
+    this.assertEqual('SPAN', $("test_whitespace").firstChild.nextSibling.nextSibling.tagName);
+    
+    var element = document.createElement('DIV');
+    element.appendChild(document.createTextNode(''));
+    element.appendChild(document.createTextNode(''));
+    this.assertEqual(2, element.childNodes.length);
+    Element.cleanWhitespace(element);
+    this.assertEqual(0, element.childNodes.length);
+  },
+  
+  testElementEmpty: function() {
+    this.assert($('test-empty').empty());
+    this.assert($('test-empty-but-contains-whitespace').empty());
+    this.assert(!$('test-full').empty());
+  },
+
+  testDescendantOf: function() {
+    this.assert($('child').descendantOf('ancestor'));
+    this.assert($('child').descendantOf($('ancestor')));
+    
+    this.assert(!$('ancestor').descendantOf($('child')));
+
+    this.assert($('great-grand-child').descendantOf('ancestor'), 'great-grand-child < ancestor');
+    this.assert($('grand-child').descendantOf('ancestor'), 'grand-child < ancestor');
+    this.assert($('great-grand-child').descendantOf('grand-child'), 'great-grand-child < grand-child');
+    this.assert($('grand-child').descendantOf('child'), 'grand-child < child');
+    this.assert($('great-grand-child').descendantOf('child'), 'great-grand-child < child');
+    
+    this.assert($('sibling').descendantOf('ancestor'), 'sibling < ancestor');
+    this.assert($('grand-sibling').descendantOf('sibling'), 'grand-sibling < sibling');
+    this.assert($('grand-sibling').descendantOf('ancestor'), 'grand-sibling < ancestor');
+    
+    this.assert($('grand-sibling').descendantOf(document.body), 'grand-sibling < body');      
+    
+    this.assert(!$('great-grand-child').descendantOf('great-grand-child'), 'great-grand-child < great-grand-child');
+    this.assert(!$('great-grand-child').descendantOf('sibling'), 'great-grand-child < sibling');
+    this.assert(!$('sibling').descendantOf('child'), 'sibling < child');
+    this.assert(!$('great-grand-child').descendantOf('not-in-the-family'), 'great-grand-child < not-in-the-family');
+    this.assert(!$('child').descendantOf('not-in-the-family'), 'child < not-in-the-family');
+    
+    this.assert(!$(document.body).descendantOf('great-grand-child'));
+
+    // dynamically-created elements
+    $('ancestor').insert(new Element('div', { id: 'weird-uncle' }));
+    this.assert($('weird-uncle').descendantOf('ancestor'));
+    
+    $(document.body).insert(new Element('div', { id: 'impostor' }));
+    this.assert(!$('impostor').descendantOf('ancestor'));
+    
+    // test descendantOf document
+    this.assert($(document.body).descendantOf(document));  
+    this.assert($(document.documentElement).descendantOf(document));  
+  },  
+  
+  testChildOf: function() {
+    this.assert($('child').childOf('ancestor'));
+    this.assert($('child').childOf($('ancestor')));
+    this.assert($('great-grand-child').childOf('ancestor'));
+    this.assert(!$('great-grand-child').childOf('not-in-the-family'));
+    this.assertIdentical(Element.Methods.childOf, Element.Methods.descendantOf);
+  },    
+  
+  testElementSetStyle: function() {
+    Element.setStyle('style_test_3',{ 'left': '2px' });
+    this.assertEqual('2px', $('style_test_3').style.left);
+    
+    Element.setStyle('style_test_3',{ marginTop: '1px' });
+    this.assertEqual('1px', $('style_test_3').style.marginTop);
+    
+    $('style_test_3').setStyle({ marginTop: '2px', left: '-1px' });
+    this.assertEqual('-1px', $('style_test_3').style.left);
+    this.assertEqual('2px', $('style_test_3').style.marginTop);
+    
+    this.assertEqual('none', $('style_test_3').getStyle('float'));
+    $('style_test_3').setStyle({ 'float': 'left' });
+    this.assertEqual('left', $('style_test_3').getStyle('float'));
+    
+    $('style_test_3').setStyle({ cssFloat: 'none' });
+    this.assertEqual('none', $('style_test_3').getStyle('float'));
+    
+    this.assertEqual(1, $('style_test_3').getStyle('opacity'));
+    
+    $('style_test_3').setStyle({ opacity: 0.5 });
+    this.assertEqual(0.5, $('style_test_3').getStyle('opacity'));
+    
+    $('style_test_3').setStyle({ opacity: '' });
+    this.assertEqual(1, $('style_test_3').getStyle('opacity'));
+    
+    $('style_test_3').setStyle({ opacity: 0 });
+    this.assertEqual(0, $('style_test_3').getStyle('opacity'));
+
+    $('test_csstext_1').setStyle('font-size: 15px');
+    this.assertEqual('15px', $('test_csstext_1').getStyle('font-size'));
+    
+    $('test_csstext_2').setStyle({height: '40px'});
+    $('test_csstext_2').setStyle('font-size: 15px');
+    this.assertEqual('15px', $('test_csstext_2').getStyle('font-size'));
+    this.assertEqual('40px', $('test_csstext_2').getStyle('height'));
+    
+    $('test_csstext_3').setStyle('font-size: 15px');
+    this.assertEqual('15px', $('test_csstext_3').getStyle('font-size'));
+    this.assertEqual('1px', $('test_csstext_3').getStyle('border-top-width'));
+    
+    $('test_csstext_4').setStyle('font-size: 15px');
+    this.assertEqual('15px', $('test_csstext_4').getStyle('font-size'));
+    
+    $('test_csstext_4').setStyle('float: right; font-size: 10px');
+    this.assertEqual('right', $('test_csstext_4').getStyle('float'));
+    this.assertEqual('10px', $('test_csstext_4').getStyle('font-size'));
+    
+    $('test_csstext_5').setStyle('float: left; opacity: .5; font-size: 10px');
+    this.assertEqual(parseFloat('0.5'), parseFloat($('test_csstext_5').getStyle('opacity')));
+ },
+  
+  testElementSetStyleCamelized: function() {
+    this.assertNotEqual('30px', $('style_test_3').style.marginTop);
+    $('style_test_3').setStyle({ marginTop: '30px'}, true);
+    this.assertEqual('30px', $('style_test_3').style.marginTop);
+  },
+  
+  testElementSetOpacity: function() {
+    [0,0.1,0.5,0.999].each(function(opacity){
+      $('style_test_3').setOpacity(opacity);
+      
+      // b/c of rounding issues on IE special case
+      var realOpacity = $('style_test_3').getStyle('opacity');
+      
+      // opera rounds off to two significant digits, so we check for a
+      // ballpark figure
+      this.assert((Number(realOpacity) - opacity) <= 0.002, 'setting opacity to ' + opacity);        
+    }, this);
+    
+    this.assertEqual(0,
+      $('style_test_3').setOpacity(0.0000001).getStyle('opacity'));
+    
+    // for Firefox, we don't set to 1, because of flickering
+    this.assert(
+      $('style_test_3').setOpacity(0.9999999).getStyle('opacity') > 0.999
+    );
+    
+    /*
+    
+    IE <= 7 needs a `hasLayout` for opacity ("filter") to function properly
+    `hasLayout` is triggered by setting `zoom` style to `1`, 
+    
+    In IE8 setting `zoom` does not affect `hasLayout`
+    and IE8 does not even need `hasLayout` for opacity to work
+    
+    We do a proper feature test here
+    
+    */
+    
+    var ZOOM_AFFECT_HAS_LAYOUT = (function(){
+      // IE7
+      var el = document.createElement('div');
+      el.style.zoom = 1;
+      var result = el.hasLayout;
+      el = null;
+      return result;
+    })();
+    
+    if (ZOOM_AFFECT_HAS_LAYOUT) {
+      this.assert($('style_test_4').setOpacity(0.5).currentStyle.hasLayout);
+      this.assert(2, $('style_test_5').setOpacity(0.5).getStyle('zoom'));
+      this.assert(0.5, new Element('div').setOpacity(0.5).getOpacity());
+      this.assert(2, new Element('div').setOpacity(0.5).setStyle('zoom: 2;').getStyle('zoom'));
+      this.assert(2, new Element('div').setStyle('zoom: 2;').setOpacity(0.5).getStyle('zoom'));
+    }
+  },
+  
+  testElementGetStyle: function() {
+    this.assertEqual("none",
+      $('style_test_1').getStyle('display'));
+    
+    // not displayed, so "null" ("auto" is tranlated to "null")
+    this.assertNull(Element.getStyle('style_test_1', 'width'), 'elements that are hidden should return null on getStyle("width")');
+    
+    $('style_test_1').show();
+    
+    // from id rule
+    this.assertEqual("pointer",
+      Element.getStyle('style_test_1','cursor'));
+    
+    this.assertEqual("block",
+      Element.getStyle('style_test_2','display'));
+    
+    // we should always get something for width (if displayed)
+    // firefox and safari automatically send the correct value,
+    // IE is special-cased to do the same
+    this.assertEqual($('style_test_2').offsetWidth+'px', Element.getStyle('style_test_2','width'));
+    
+    this.assertEqual("static",Element.getStyle('style_test_1','position'));
+    // from style
+    this.assertEqual("11px",
+      Element.getStyle('style_test_2','font-size'));
+    // from class
+    this.assertEqual("1px",
+      Element.getStyle('style_test_2','margin-left'));
+    
+    ['not_floating_none','not_floating_style','not_floating_inline'].each(function(element) {
+      this.assertEqual('none', $(element).getStyle('float'));
+      this.assertEqual('none', $(element).getStyle('cssFloat'));
+    }, this);
+    
+    ['floating_style','floating_inline'].each(function(element) {
+      this.assertEqual('left', $(element).getStyle('float'));
+      this.assertEqual('left', $(element).getStyle('cssFloat'));
+    }, this);
+
+    this.assertEqual(0.5, $('op1').getStyle('opacity'));
+    this.assertEqual(0.5, $('op2').getStyle('opacity'));
+    this.assertEqual(1.0, $('op3').getStyle('opacity'));
+    
+    $('op1').setStyle({opacity: '0.3'});
+    $('op2').setStyle({opacity: '0.3'});
+    $('op3').setStyle({opacity: '0.3'});
+    
+    this.assertEqual(0.3, $('op1').getStyle('opacity'));
+    this.assertEqual(0.3, $('op2').getStyle('opacity'));
+    this.assertEqual(0.3, $('op3').getStyle('opacity'));
+    
+    $('op3').setStyle({opacity: 0});
+    this.assertEqual(0, $('op3').getStyle('opacity'));
+    
+    if(navigator.appVersion.match(/MSIE/)) {
+      this.assertEqual('alpha(opacity=30)', $('op1').getStyle('filter'));
+      this.assertEqual('progid:DXImageTransform.Microsoft.Blur(strength=10)alpha(opacity=30)', $('op2').getStyle('filter'));
+      $('op2').setStyle({opacity:''});
+      this.assertEqual('progid:DXImageTransform.Microsoft.Blur(strength=10)', $('op2').getStyle('filter'));
+      this.assertEqual('alpha(opacity=0)', $('op3').getStyle('filter'));
+      this.assertEqual(0.3, $('op4-ie').getStyle('opacity'));
+    }
+    // verify that value is still found when using camelized
+    // strings (function previously used getPropertyValue()
+    // which expected non-camelized strings)
+    this.assertEqual("12px", $('style_test_1').getStyle('fontSize'));
+    
+    // getStyle on width/height should return values according to
+    // the CSS box-model, which doesn't include 
+    // margin, padding, or borders
+    // TODO: This test fails on IE because there seems to be no way
+    // to calculate this properly (clientWidth/Height returns 0)
+    if(!navigator.appVersion.match(/MSIE/)) {
+      this.assertEqual("14px", $('style_test_dimensions').getStyle('width'));
+      this.assertEqual("17px", $('style_test_dimensions').getStyle('height'));
+    }
+    
+    // height/width could always be calculated if it's set to "auto" (Firefox)
+    this.assertNotNull($('auto_dimensions').getStyle('height'));
+    this.assertNotNull($('auto_dimensions').getStyle('width'));
+  },
+  
+  testElementGetOpacity: function() {
+    this.assertEqual(0.45, $('op1').setOpacity(0.45).getOpacity());
+  },
+  
+  testElementReadAttribute: function() {
+    this.assertEqual('test.html' , $('attributes_with_issues_1').readAttribute('href'));
+    this.assertEqual('L' , $('attributes_with_issues_1').readAttribute('accesskey'));
+    this.assertEqual('50' , $('attributes_with_issues_1').readAttribute('tabindex'));
+    this.assertEqual('a link' , $('attributes_with_issues_1').readAttribute('title'));
+    
+    $('cloned_element_attributes_issue').readAttribute('foo')
+    var clone = $('cloned_element_attributes_issue').clone(true);
+    clone.writeAttribute('foo', 'cloned');
+    this.assertEqual('cloned', clone.readAttribute('foo'));
+    this.assertEqual('original', $('cloned_element_attributes_issue').readAttribute('foo'));
+    
+    ['href', 'accesskey', 'accesskey', 'title'].each(function(attr) {
+      this.assertEqual('' , $('attributes_with_issues_2').readAttribute(attr));
+    }, this);
+    
+    ['checked','disabled','readonly','multiple'].each(function(attr) {
+      this.assertEqual(attr, $('attributes_with_issues_'+attr).readAttribute(attr));
+    }, this);
+    
+    this.assertEqual("alert('hello world');", $('attributes_with_issues_1').readAttribute('onclick'));
+    this.assertNull($('attributes_with_issues_1').readAttribute('onmouseover'));
+   
+    this.assertEqual('date', $('attributes_with_issues_type').readAttribute('type'));
+    this.assertEqual('text', $('attributes_with_issues_readonly').readAttribute('type'));
+    
+    var elements = $('custom_attributes').immediateDescendants();
+    this.assertEnumEqual(['1', '2'], elements.invoke('readAttribute', 'foo'));
+    this.assertEnumEqual(['2', null], elements.invoke('readAttribute', 'bar'));
+
+    var table = $('write_attribute_table');
+    this.assertEqual('4', table.readAttribute('cellspacing'));
+    this.assertEqual('6', table.readAttribute('cellpadding'));
+  },
+  
+  testElementWriteAttribute: function() {
+    var element = Element.extend(document.body.appendChild(document.createElement('p')));
+    this.assertRespondsTo('writeAttribute', element);
+    this.assertEqual(element, element.writeAttribute('id', 'write_attribute_test'));
+    this.assertEqual('write_attribute_test', element.id);
+    this.assertEqual('http://prototypejs.org/', $('write_attribute_link').
+      writeAttribute({href: 'http://prototypejs.org/', title: 'Home of Prototype'}).href);
+    this.assertEqual('Home of Prototype', $('write_attribute_link').title);
+    
+    var element2 = Element.extend(document.createElement('p'));
+    element2.writeAttribute('id', 'write_attribute_without_hash');
+    this.assertEqual('write_attribute_without_hash', element2.id);
+    element2.writeAttribute('animal', 'cat');
+    this.assertEqual('cat', element2.readAttribute('animal'));
+  },
+  
+  testElementWriteAttributeWithBooleans: function() {
+    var input = $('write_attribute_input'),
+      select = $('write_attribute_select'),
+      checkbox = $('write_attribute_checkbox'),
+      checkedCheckbox = $('write_attribute_checked_checkbox');
+    this.assert( input.          writeAttribute('readonly').            hasAttribute('readonly'));
+    this.assert(!input.          writeAttribute('readonly', false).     hasAttribute('readonly'));
+    this.assert( input.          writeAttribute('readonly', true).      hasAttribute('readonly'));
+    this.assert(!input.          writeAttribute('readonly', null).      hasAttribute('readonly'));
+    this.assert( input.          writeAttribute('readonly', 'readonly').hasAttribute('readonly'));
+    this.assert( select.         writeAttribute('multiple').            hasAttribute('multiple'));
+    this.assert( input.          writeAttribute('disabled').            hasAttribute('disabled'));
+    this.assert( checkbox.       writeAttribute('checked').             checked);
+    this.assert(!checkedCheckbox.writeAttribute('checked', false).      checked);
+  },
+
+  testElementWriteAttributeWithIssues: function() {
+    var input = $('write_attribute_input').writeAttribute({maxlength: 90, tabindex: 10}),
+      td = $('write_attribute_td').writeAttribute({valign: 'bottom', colspan: 2, rowspan: 2});
+    this.assertEqual(90, input.readAttribute('maxlength'));
+    this.assertEqual(10, input.readAttribute('tabindex'));
+    this.assertEqual(2,  td.readAttribute('colspan'));
+    this.assertEqual(2,  td.readAttribute('rowspan'));
+    this.assertEqual('bottom', td.readAttribute('valign'));
+    
+    var p = $('write_attribute_para'), label = $('write_attribute_label');
+    this.assertEqual('some-class',     p.    writeAttribute({'class':   'some-class'}).    readAttribute('class'));
+    this.assertEqual('some-className', p.    writeAttribute({className: 'some-className'}).readAttribute('class'));
+    this.assertEqual('some-id',        label.writeAttribute({'for':     'some-id'}).       readAttribute('for'));
+    this.assertEqual('some-other-id',  label.writeAttribute({htmlFor:   'some-other-id'}). readAttribute('for'));
+    
+    this.assert(p.writeAttribute({style: 'width: 5px;'}).readAttribute('style').toLowerCase().include('width'));      
+
+    var table = $('write_attribute_table');
+    table.writeAttribute('cellspacing', '2')
+    table.writeAttribute('cellpadding', '3')
+    this.assertEqual('2', table.readAttribute('cellspacing'));
+    this.assertEqual('3', table.readAttribute('cellpadding'));
+
+    var iframe = new Element('iframe', { frameborder: 0 });
+    this.assertIdentical(0, parseInt(iframe.readAttribute('frameborder')));
+  },
+  
+  testElementWriteAttributeWithCustom: function() {
+    var p = $('write_attribute_para').writeAttribute({name: 'martin', location: 'stockholm', age: 26});
+    this.assertEqual('martin',    p.readAttribute('name'));
+    this.assertEqual('stockholm', p.readAttribute('location'));
+    this.assertEqual('26',        p.readAttribute('age'));
+  },
+  
+  testElementHasAttribute: function() {
+    var label = $('write_attribute_label');
+    this.assertIdentical(true,  label.hasAttribute('for'));
+    this.assertIdentical(false, label.hasAttribute('htmlFor'));
+    this.assertIdentical(false, label.hasAttribute('className'));
+    this.assertIdentical(false, label.hasAttribute('rainbows'));
+    
+    var input = $('write_attribute_input');
+    this.assertNotIdentical(null, input.hasAttribute('readonly'));
+    this.assertNotIdentical(null, input.hasAttribute('readOnly'));
+  },
+  
+  testNewElement: function() {
+    this.assert(new Element('h1'));
+    
+    var XHTML_TAGS = $w(
+      'a abbr acronym address area '+
+      'b bdo big blockquote br button caption '+
+      'cite code col colgroup dd del dfn div dl dt '+
+      'em fieldset form h1 h2 h3 h4 h5 h6 hr '+
+      'i iframe img input ins kbd label legend li '+
+      'map object ol optgroup option p param pre q samp '+
+      'script select small span strong style sub sup '+
+      'table tbody td textarea tfoot th thead tr tt ul var');
+      
+    XHTML_TAGS.each(function(tag, index) {
+      var id = tag + '_' + index, element = document.body.appendChild(new Element(tag, {id: id}));
+      this.assertEqual(tag, element.tagName.toLowerCase());
+      this.assertEqual(element, document.body.lastChild);
+      this.assertEqual(id, element.id);
+    }, this);
+    
+    
+    this.assertRespondsTo('update', new Element('div'));
+    Element.addMethods({
+      cheeseCake: function(){
+        return 'Cheese cake';
+      }
+    });
+    
+    this.assertRespondsTo('cheeseCake', new Element('div'));
+    
+    /* window.ElementOld = function(tagName, attributes) { 
+      if (Prototype.Browser.IE && attributes && attributes.name) { 
+        tagName = '<' + tagName + ' name="' + attributes.name + '">'; 
+        delete attributes.name; 
+      } 
+      return Element.extend(document.createElement(tagName)).writeAttribute(attributes || {}); 
+    };
+    
+    this.benchmark(function(){
+      XHTML_TAGS.each(function(tagName) { new Element(tagName) });
+    }, 5);
+    
+    this.benchmark(function(){
+      XHTML_TAGS.each(function(tagName) { new ElementOld(tagName) });
+    }, 5); */
+    
+    this.assertEqual('foobar', new Element('a', {custom: 'foobar'}).readAttribute('custom'));
+    var input = document.body.appendChild(new Element('input', 
+      {id: 'my_input_field_id', name: 'my_input_field'}));
+    this.assertEqual(input, document.body.lastChild);
+    this.assertEqual('my_input_field', $(document.body.lastChild).name);
+    if ('outerHTML' in document.documentElement) {
+      this.assertMatch(/name=["']?my_input_field["']?/, $('my_input_field_id').outerHTML);
+    }
+    
+    if (originalElement && Prototype.BrowserFeatures.ElementExtensions) {
+      Element.prototype.fooBar = Prototype.emptyFunction
+      this.assertRespondsTo('fooBar', new Element('div'));
+    }
+    
+    elWithClassName = new Element('div', { 'className': 'firstClassName' });
+    this.assert(elWithClassName.hasClassName('firstClassName'));
+    
+    elWithClassName = new Element('div', { 'class': 'firstClassName' });
+    this.assert(elWithClassName.hasClassName('firstClassName'));
+  },
+
+  testElementGetHeight: function() {
+    this.assertIdentical(100, $('dimensions-visible').getHeight());
+    this.assertIdentical(100, $('dimensions-display-none').getHeight());
+  },
+  
+  testElementGetWidth: function() {
+    this.assertIdentical(200, $('dimensions-visible').getWidth());
+    this.assertIdentical(200, $('dimensions-display-none').getWidth());
+  },
+  
+  testElementGetDimensions: function() {
+    this.assertIdentical(100, $('dimensions-visible').getDimensions().height);
+    this.assertIdentical(200, $('dimensions-visible').getDimensions().width);
+    this.assertIdentical(100, $('dimensions-display-none').getDimensions().height);
+    this.assertIdentical(200, $('dimensions-display-none').getDimensions().width);
+    
+    this.assertIdentical(100, $('dimensions-visible-pos-rel').getDimensions().height);
+    this.assertIdentical(200, $('dimensions-visible-pos-rel').getDimensions().width);
+    this.assertIdentical(100, $('dimensions-display-none-pos-rel').getDimensions().height);
+    this.assertIdentical(200, $('dimensions-display-none-pos-rel').getDimensions().width);
+    
+    this.assertIdentical(100, $('dimensions-visible-pos-abs').getDimensions().height);
+    this.assertIdentical(200, $('dimensions-visible-pos-abs').getDimensions().width);
+    this.assertIdentical(100, $('dimensions-display-none-pos-abs').getDimensions().height);
+    this.assertIdentical(200, $('dimensions-display-none-pos-abs').getDimensions().width);
+    
+    // known failing issue
+    // this.assert($('dimensions-nestee').getDimensions().width <= 500, 'check for proper dimensions of hidden child elements');
+    
+    $('dimensions-td').hide();
+    this.assertIdentical(100, $('dimensions-td').getDimensions().height);
+    this.assertIdentical(200, $('dimensions-td').getDimensions().width);
+    $('dimensions-td').show();
+    
+    $('dimensions-tr').hide();
+    this.assertIdentical(100, $('dimensions-tr').getDimensions().height);
+    this.assertIdentical(200, $('dimensions-tr').getDimensions().width);
+    $('dimensions-tr').show();
+    
+    $('dimensions-table').hide();
+    this.assertIdentical(100, $('dimensions-table').getDimensions().height);
+    this.assertIdentical(200, $('dimensions-table').getDimensions().width);
+  },
+      
+  testDOMAttributesHavePrecedenceOverExtendedElementMethods: function() {
+    this.assertNothingRaised(function() { $('dom_attribute_precedence').down('form') });
+    this.assertEqual($('dom_attribute_precedence').down('input'), $('dom_attribute_precedence').down('form').update);
+  },
+  
+  testClassNames: function() {
+    this.assertEnumEqual([], $('class_names').classNames());
+    this.assertEnumEqual(['A'], $('class_names').down().classNames());
+    this.assertEnumEqual(['A', 'B'], $('class_names_ul').classNames());
+  },
+  
+  testHasClassName: function() {
+    this.assertIdentical(false, $('class_names').hasClassName('does_not_exist'));
+    this.assertIdentical(true, $('class_names').down().hasClassName('A'));
+    this.assertIdentical(false, $('class_names').down().hasClassName('does_not_exist'));
+    this.assertIdentical(true, $('class_names_ul').hasClassName('A'));
+    this.assertIdentical(true, $('class_names_ul').hasClassName('B'));
+    this.assertIdentical(false, $('class_names_ul').hasClassName('does_not_exist'));
+  },
+  
+  testAddClassName: function() {
+    $('class_names').addClassName('added_className');
+    this.assertEnumEqual(['added_className'], $('class_names').classNames());
+    
+    $('class_names').addClassName('added_className'); // verify that className cannot be added twice.
+    this.assertEnumEqual(['added_className'], $('class_names').classNames());
+    
+    $('class_names').addClassName('another_added_className');
+    this.assertEnumEqual(['added_className', 'another_added_className'], $('class_names').classNames());
+  },
+  
+  testRemoveClassName: function() {
+    $('class_names').removeClassName('added_className');
+    this.assertEnumEqual(['another_added_className'], $('class_names').classNames());
+    
+    $('class_names').removeClassName('added_className'); // verify that removing a non existent className is safe.
+    this.assertEnumEqual(['another_added_className'], $('class_names').classNames());
+    
+    $('class_names').removeClassName('another_added_className');
+    this.assertEnumEqual([], $('class_names').classNames());
+  },
+  
+  testToggleClassName: function() {
+    $('class_names').toggleClassName('toggled_className');
+    this.assertEnumEqual(['toggled_className'], $('class_names').classNames());
+    
+    $('class_names').toggleClassName('toggled_className');
+    this.assertEnumEqual([], $('class_names').classNames());
+    
+    $('class_names_ul').toggleClassName('toggled_className');
+    this.assertEnumEqual(['A', 'B', 'toggled_className'], $('class_names_ul').classNames());
+           
+    $('class_names_ul').toggleClassName('toggled_className');
+    this.assertEnumEqual(['A', 'B'], $('class_names_ul').classNames());  
+  },
+  
+  testElementScrollTo: function() {
+    var elem = $('scroll_test_2');
+    Element.scrollTo('scroll_test_2');
+    this.assertEqual(Position.page(elem)[1], 0);
+    window.scrollTo(0, 0);
+    
+    elem.scrollTo();
+    this.assertEqual(Position.page(elem)[1], 0);      
+    window.scrollTo(0, 0);
+  },
+  
+  testCustomElementMethods: function() {
+    var elem = $('navigation_test_f');
+    this.assertRespondsTo('hashBrowns', elem);
+    this.assertEqual('hash browns', elem.hashBrowns());
+    
+    this.assertRespondsTo('hashBrowns', Element);
+    this.assertEqual('hash browns', Element.hashBrowns(elem));
+  },
+  
+  testSpecificCustomElementMethods: function() {
+    var elem = $('navigation_test_f');
+    
+    this.assert(Element.Methods.ByTag[elem.tagName]);
+    this.assertRespondsTo('pancakes', elem);
+    this.assertEqual("pancakes", elem.pancakes());
+    
+    var elem2 = $('test-visible');
+
+    this.assert(Element.Methods.ByTag[elem2.tagName]);
+    this.assertUndefined(elem2.pancakes);
+    this.assertRespondsTo('waffles', elem2);
+    this.assertEqual("waffles", elem2.waffles());
+    
+    this.assertRespondsTo('orangeJuice', elem);
+    this.assertRespondsTo('orangeJuice', elem2);
+    this.assertEqual("orange juice", elem.orangeJuice());
+    this.assertEqual("orange juice", elem2.orangeJuice());
+    
+    this.assert(typeof Element.orangeJuice == 'undefined');
+    this.assert(typeof Element.pancakes == 'undefined');
+    this.assert(typeof Element.waffles == 'undefined');
+    
+  },
+  
+  testScriptFragment: function() {
+    var element = document.createElement('div');
+    // tests an issue with Safari 2.0 crashing when the ScriptFragment
+    // regular expression is using a pipe-based approach for
+    // matching any character
+    ['\r','\n',' '].each(function(character){
+      $(element).update("<script>"+character.times(10000)+"</scr"+"ipt>");
+      this.assertEqual('', element.innerHTML);
+    }, this);
+    $(element).update("<script>var blah='"+'\\'.times(10000)+"'</scr"+"ipt>");
+    this.assertEqual('', element.innerHTML);
+  },
+
+  testPositionedOffset: function() {
+    this.assertEnumEqual([10,10],
+      $('body_absolute').positionedOffset());
+    this.assertEnumEqual([10,10],
+      $('absolute_absolute').positionedOffset());
+    this.assertEnumEqual([10,10],
+      $('absolute_relative').positionedOffset());
+    this.assertEnumEqual([0,10],
+      $('absolute_relative_undefined').positionedOffset());
+    this.assertEnumEqual([10,10],
+      $('absolute_fixed_absolute').positionedOffset());
+      
+    var afu = $('absolute_fixed_undefined');
+    this.assertEnumEqual([afu.offsetLeft, afu.offsetTop],
+      afu.positionedOffset());
+      
+    var element = new Element('div'), offset = element.positionedOffset();
+    this.assertEnumEqual([0,0], offset);
+    this.assertIdentical(0, offset.top);
+    this.assertIdentical(0, offset.left);
+  },
+  
+  testCumulativeOffset: function() {
+    var element = new Element('div'), offset = element.cumulativeOffset();
+    this.assertEnumEqual([0,0], offset);
+    this.assertIdentical(0, offset.top);
+    this.assertIdentical(0, offset.left);
+  },
+  
+  testViewportOffset: function() {
+    this.assertEnumEqual([10,10],
+      $('body_absolute').viewportOffset());
+    this.assertEnumEqual([20,20],
+      $('absolute_absolute').viewportOffset());
+    this.assertEnumEqual([20,20],
+      $('absolute_relative').viewportOffset());
+    this.assertEnumEqual([20,30],
+      $('absolute_relative_undefined').viewportOffset());
+    var element = new Element('div'), offset = element.viewportOffset();
+    this.assertEnumEqual([0,0], offset);
+    this.assertIdentical(0, offset.top);
+    this.assertIdentical(0, offset.left);
+  },
+  
+  testOffsetParent: function() {
+    this.assertEqual('body_absolute', $('absolute_absolute').getOffsetParent().id);
+    this.assertEqual('body_absolute', $('absolute_relative').getOffsetParent().id);
+    this.assertEqual('absolute_relative', $('inline').getOffsetParent().id);
+    this.assertEqual('absolute_relative', $('absolute_relative_undefined').getOffsetParent().id);
+    
+    this.assertEqual(document.body, new Element('div').getOffsetParent());
+  },
+
+  testAbsolutize: function() {
+    $('notInlineAbsoluted', 'inlineAbsoluted').each(function(elt) {
+      if ('_originalLeft' in elt) delete elt._originalLeft;
+      elt.absolutize();
+      this.assertUndefined(elt._originalLeft, 'absolutize() did not detect absolute positioning');
+    }, this);
+    // invoking on "absolute" positioned element should return element 
+    var element = $('absolute_fixed_undefined').setStyle({position: 'absolute'});
+    this.assertEqual(element, element.absolutize());
+  },
+  
+  testRelativize: function() {
+    // invoking on "relative" positioned element should return element
+    var element = $('absolute_fixed_undefined').setStyle({position: 'relative'});
+    this.assertEqual(element, element.relativize());
+  },
+  
+  testViewportDimensions: function() {
+    preservingBrowserDimensions(function() {
+      window.resizeTo(800, 600);
+      var before = document.viewport.getDimensions();
+      window.resizeBy(50, 50);
+      var after  = document.viewport.getDimensions();
+    
+      this.assertEqual(before.width + 50, after.width, "NOTE: YOU MUST ALLOW JAVASCRIPT TO RESIZE YOUR WINDOW FOR THIS TEST TO PASS");
+      this.assertEqual(before.height + 50, after.height, "NOTE: YOU MUST ALLOW JAVASCRIPT TO RESIZE YOUR WINDOW FOR THIS TEST TO PASS");
+    }.bind(this));
+  },
+  
+  testElementToViewportDimensionsDoesNotAffectDocumentProperties: function() {
+    // No properties on the document should be affected when resizing
+    // an absolute positioned(0,0) element to viewport dimensions
+    var vd = document.viewport.getDimensions();
+
+    var before = documentViewportProperties.inspect();
+    $('elementToViewportDimensions').setStyle({ height: vd.height + 'px', width: vd.width + 'px' }).show();
+    var after = documentViewportProperties.inspect();
+    $('elementToViewportDimensions').hide();
+
+    documentViewportProperties.properties.each(function(prop) {
+      this.assertEqual(before[prop], after[prop], prop + ' was affected');
+    }, this);
+  },
+
+  testViewportScrollOffsets: function() {
+    preservingBrowserDimensions(function() {
+      window.scrollTo(0, 0);
+      this.assertEqual(0, document.viewport.getScrollOffsets().top);
+    
+      window.scrollTo(0, 35);
+      this.assertEqual(35, document.viewport.getScrollOffsets().top);
+    
+      window.resizeTo(200, 650);
+      window.scrollTo(25, 35);
+      this.assertEqual(25, document.viewport.getScrollOffsets().left, "NOTE: YOU MUST ALLOW JAVASCRIPT TO RESIZE YOUR WINDOW FOR THESE TESTS TO PASS");
+    
+      window.resizeTo(850, 650);
+    }.bind(this));
+  },
+  
+  testNodeConstants: function() {
+    this.assert(window.Node, 'window.Node is unavailable');
+
+    var constants = $H({
+      ELEMENT_NODE: 1,
+      ATTRIBUTE_NODE: 2,
+      TEXT_NODE: 3,
+      CDATA_SECTION_NODE: 4,
+      ENTITY_REFERENCE_NODE: 5,
+      ENTITY_NODE: 6,
+      PROCESSING_INSTRUCTION_NODE: 7,
+      COMMENT_NODE: 8,
+      DOCUMENT_NODE: 9,
+      DOCUMENT_TYPE_NODE: 10,
+      DOCUMENT_FRAGMENT_NODE: 11,
+      NOTATION_NODE: 12
+    });
+
+    constants.each(function(pair) {
+      this.assertEqual(Node[pair.key], pair.value);
+    }, this);
+  },
+  
+  testElementStorage: function() {
+    var element = $('test-empty');
+    element.store('foo', 'bar');
+    this.assertEqual("bar", element.retrieve("foo"), "Setting and reading a property");
+    var result = element.store('foo', 'thud');
+    this.assertEqual("thud", element.retrieve("foo"), "Re-setting and reading property");
+    this.assertIdentical(element, result, "Element#store should return element");
+
+    element.store('bar', 'narf');
+    this.assertEnumEqual($w('foo bar'), element.getStorage().keys(), "Getting the storage hash");    
+    element.getStorage().unset('bar');
+    this.assertEnumEqual($w('foo'), element.getStorage().keys(), "Getting the storage hash after unsetting a key");
+    
+    element.store({ 'narf': 'narf', 'zort': 'zort' });
+    
+    this.assertEqual("narf", element.retrieve('narf'), "Storing multiple properties at once");
+    this.assertEqual("zort", element.retrieve('zort'), "Storing multiple properties at once");
+    
+    this.assertUndefined(element.retrieve('bar'), "Undefined key should return undefined if default value is not defined");
+    this.assertEqual("default", element.retrieve('bar', 'default'), "Return default value if undefined key");
+    this.assertEqual("default", element.retrieve('bar'), "Makes sure default value has been set properly");
+    
+    var clonedElement = $('test-empty').clone(false);
+    this.assert(Object.isUndefined(clonedElement._prototypeUID), "Cloning a node should not confuse the storage engine");
+  },
+  
+  testElementClone: function() {
+    var element = new Element('div', {
+      title: 'bar'
+    });
+    element.className = 'foo';
+    
+    // add child
+    element.update('<span id="child">child node</span>');
+    
+    // add observer
+    element.observe('click', Prototype.emptyFunction);
+    
+    // add observer on a child
+    element.down('span').observe('dblclick', Prototype.emptyFunction);
+    
+    var shallowClone = element.clone();
+    var deepClone = element.clone(true);
+    
+    var assertCloneTraits = (function(clone) {
+      this.assert(clone); // exists
+      this.assert(clone.show); // is extended
+      this.assertEqual('DIV', clone.nodeName.toUpperCase()); // proper nodeName
+      this.assertEqual('foo', clone.className); // proper attributes
+      this.assertEqual('bar', clone.title);
+      this.assert(!clone._prototypeUID); // _prototypeUID does not exist
+    }).bind(this);
+    
+    // test generic traits of both deep and shallow clones first
+    assertCloneTraits(shallowClone);
+    assertCloneTraits(deepClone);
+    
+    // test deep clone traits
+    this.assert(deepClone.firstChild);
+    this.assertEqual('SPAN', deepClone.firstChild.nodeName.toUpperCase());
+    this.assert(!deepClone.down('span')._prototypeUID);
+  }
+});
+
+function preservingBrowserDimensions(callback) {
+  var original = document.viewport.getDimensions();
+  window.resizeTo(640, 480);
+  var resized = document.viewport.getDimensions();
+  original.width += 640 - resized.width, original.height += 480 - resized.height;
+  
+  try {
+    window.resizeTo(original.width, original.height);
+    callback();
+  } finally {
+    window.resizeTo(original.width, original.height);
+  }
+}