Ported tests from specs/obsolete-tests/unit/scope.js. Discovered that…

… our old expected behavior for the scoping of attribute-assigned event handlers doesn't match that of Firefox and Chrome (and Safari and IE are just plain broken). Test as committed here is ambiguous, and will pass against both the old env.js and Firefox. When env.js is updated, further investigation of spec should be done, and the test extended to differentiate the two behaviors.
thatcher · Apr 28, 2010 · 3061b32 · 3061b32
1 parent c21f7d0
commit 3061b32
Show file tree

Hide file tree

Showing 4 changed files with 162 additions and 25 deletions.
diff --git a/specs/obsolete-tests/html/scope.html → specs/fixtures/scope/attribute.html b/specs/obsolete-tests/html/scope.html → specs/fixtures/scope/attribute.html
@@ -2,9 +2,9 @@
 
 <!--
  * This file is a component of env.js,
- *     http://github.com/gleneivey/env-js/commits/master/README
+ *     http://github.com/thatcher/env-js/
  * a Pure JavaScript Browser Environment
- * Copyright 2009 John Resig, licensed under the MIT License
+ * Copyright 2010 John Resig, licensed under the MIT License
  *     http://www.opensource.org/licenses/mit-license.php
   -->
 
@@ -27,10 +27,21 @@
       function makeAPara(){
         var paraText =
 "This is a paragraph, made dynamically, with the following components: ";
-        for (var i=1; (i) != arguments.length; i++)
+        for (var i=2; i < arguments.length; i++)
           paraText += "--" + arguments[i] + "--    ";
         appendAPara(document, document.getElementById('div1'),
                     arguments[0], paraText);
+
+        // the paragraph this generates isn't currently used in any asserts,
+        // but has proven very helpful for debug
+        paraText = "";
+        var scopeObj = arguments[1];
+        while (scopeObj && (scopeObj != scopeObj.__parent__)){
+          paraText += scopeObj + " ";
+          scopeObj = scopeObj.__parent__;
+        }
+        appendAPara(document, document.getElementById('div1'), "debug",
+          paraText);
       }
 
       aVar = "Strict";
@@ -53,13 +64,20 @@
       with a 'p' element.
     </div>
 
-    <div id="div2" align="center"
-         onclick="aVar='Overridden!'; checkLexicalScoping(this);">
-      <form id="form1" action="post-url" method="post">
-        <input id="text1" type="text" size="42"
-          onchange="makeAPara('p3', value, type, size, action, align);"
-        />
-      </form>
+    <div id="div2" onclick="aVar='Overridden!'; checkLexicalScoping(this);">
+      <table id="tab1" rules="all" align="center">
+        <caption>Table Caption</caption><tr><td>
+          <form id="form1" action="post-url" method="post">
+            <div><span>
+              <input id="text1" type="text" size="42" onchange="makeAPara('p3', this, id, value, type, size, action, method, anchors.length, align);"
+              />
+<!-- other DOM object members:
+, caption.innerHTML, rules
+  -->
+            </span></div>
+          </form>
+        </td></tr>
+      </table>
     </div>
 
     <div id="div3">

diff --git a/specs/fixtures/scope/iframeXa.html b/specs/fixtures/scope/iframeXa.html
@@ -8,6 +8,9 @@
  *     http://www.opensource.org/licenses/mit-license.php
   -->
 
+
+<!-- elements and scripting here match test cases in ../../scope/spec.js -->
+
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
       lang="en" dir="ltr" id="html">
   <head>
@@ -18,13 +21,6 @@
       This is the text content of a paragraph element.
     </p>
 
-<!------------
-  in process of porting tests from 'obsolete-tests'; content below this
-  comment not yet referenced by a specs/*/spec.js file
-  ------------>
-
-
-    <!-- elements and scripting here match test cases in ../../scope/spec.js -->
     <script>//ensure that we can execute JS inline while loading
       document.write(
         '\x3cp id="js_generated_p"\x3eDynamically-generated\x3c/p\x3e');

diff --git a/specs/scope/index.html b/specs/scope/index.html
@@ -55,6 +55,13 @@ <h2  id="qunit-userAgent"></h2>
             <iframe id='loaded-iframe' style='display:none'
                 src='../fixtures/scope/iframeXa.html'></iframe>
             <iframe id='empty-iframe' style='display:none'></iframe>
+            <iframe id='scope-iframe' style='display:none'
+                src='../fixtures/scope/iframeXa.html'></iframe>
+            <iframe id='attribute-iframe' style='display:none'
+                src='../fixtures/scope/attribute.html'></iframe>
+
+            <br />
+            Nested <code>&lt;iframe&gt;</code>s used for "Iframe nesting" test:
             <iframe id='nesting-iframe'
 style='border: 3px solid green; width: 100%; height: 1020px;'>
              </iframe>

diff --git a/specs/scope/spec.js b/specs/scope/spec.js
@@ -174,8 +174,8 @@ asyncTest("Iframe nesting", function(){
                 "nested IFRAME has correct .top");
 
 
-	// now, we'll programatically extend the nesting depth from 2 to many
-	recursivelyInsertIFrames( startingDepth, endingDepth, iframeNested1,
+        // now, we'll programatically extend the nesting depth from 2 to many
+        recursivelyInsertIFrames( startingDepth, endingDepth, iframeNested1,
             secondOnloadHandlerContainingTests );
     };
 
@@ -184,8 +184,8 @@ asyncTest("Iframe nesting", function(){
         iframe = iframe.contentDocument.getElementById('nested1Level');
 
         for (var c = startingDepth; c <= endingDepth; c++){
-	    iframe = iframe.contentDocument.
-		getElementById("iframe_of_depth_" + c);
+            iframe = iframe.contentDocument.
+                getElementById("iframe_of_depth_" + c);
 
             var doc = iframe.contentDocument;
             var matchResult = doc.getElementById('nestingLevel').
@@ -202,11 +202,11 @@ asyncTest("Iframe nesting", function(){
 
             var aWindow = iframe.contentWindow;
             if (window.top.allTestsAreBeingRunWithinAnExtraIFrame)
-		equals( aWindow.top, window.top,
-		    "window " + c + " levels down has correct '.top'" );
+                equals( aWindow.top, window.top,
+                    "window " + c + " levels down has correct '.top'" );
             else
-		equals( aWindow.top, window,
-		    "window " + c + " levels down has correct '.top'" );
+                equals( aWindow.top, window,
+                    "window " + c + " levels down has correct '.top'" );
             for (var cn = c; cn > 0; cn--)
                 aWindow = aWindow.parent;
             equals( aWindow, window,
@@ -252,3 +252,119 @@ function recursivelyInsertIFrames(
     existingIframe.contentDocument.getElementsByTagName('body')[0].
         appendChild(newIframe);
 }
+
+
+test("Scoping of JS inline in HTML", function(){
+    expect(3);
+
+    var idoc = document.getElementById('scope-iframe').contentDocument;
+    ok( idoc.getElementById('js_generated_p').innerHTML.match(/Dynamic/),
+        "Can get content from dynamically-generate p element" );
+
+    ok( idoc.getElementById('internalDocRefResult').innerHTML.
+            match(/exists-found/),
+        "Got confirmation of access to 'document' object in iframe" );
+
+    ok( idoc.getElementById('appended').innerHTML.match(/appended para/),
+        "Got confirmation of body-onload execution in iframe" );
+});
+
+
+// the following tests depend on '../fixtures/scope/attribute.html'
+//   being loaded into the iframe 'attribute-iframe' in
+//   scope/index.html'.  Each test must only execute once.  Otherwise,
+//   there are no test order dependencies except those noted on
+//   individual tests.
+
+test("Event handler attributes have access to correct scopes", function(){
+    expect(3+3+3+3+2+2);
+
+    // test:  img1.onclick creates p1
+    var idoc = document.getElementById('attribute-iframe').contentDocument;
+    ok( !(idoc.getElementById('p1')),
+        "img1 event handler didn't execute early" );
+
+    var img1 = idoc.getElementById('img1');
+    ok( img1, "can find 'img1' in iframe" );
+    dispatchClick(img1);
+    ok( idoc.getElementById('p1').innerHTML.match(/img1 click/),
+        "img1 event handler executed correctly" );
+
+
+    // test:  div1.onclick creates p2
+    ok( !(idoc.getElementById('p2')),
+        "div1 event handler didn't execute early" );
+    var div1 = idoc.getElementById('div1');
+    ok( div1, "can find 'div1' in iframe" );
+    dispatchClick(div1);
+    ok( idoc.getElementById('p2').innerHTML.match(/div1 click/),
+        "div1 event handler executed correctly" );
+
+
+    // test:  text1.onchange creates p3 containing values from several elements
+    ok( !(idoc.getElementById('p3')),
+        "text1 event handler didn't execute early" );
+    var text1 = idoc.getElementById('text1');
+    ok( text1, "can find 'text1' in iframe" );
+
+    text1.value = "a New Input Value";
+    dispatchChange(text1);
+
+    var goodRE = /components:\s+--text1--\s+--a New Input Value--\s+--text--\s+--42--\s+--.*post-url--\s+--post--\s+--0--\s+----/;
+    // other DOM object members:
+    //--Table Caption--\s+--all--\s+
+    ok( idoc.getElementById('p3').innerHTML.match(goodRE),
+        "text1 event handler executed correctly" );
+
+
+    // test:  div2.onclick creates paragraph 'lex' at end of div2
+    aVar = "very bad"; // handler must *not* pick up this version of 'aVar'
+
+    ok( !(idoc.getElementById('lex')),
+        "div2 event handler didn't execute early" );
+    var div2 = idoc.getElementById('div2');
+    dispatchClick(div2);
+    var lex = idoc.getElementById('lex');
+    ok( lex.innerHTML.match(/Lexical scoping is Overridden/),
+        "div2 click handler generated correct content" );
+    equals( div2, lex.parentNode,
+        "div2 click handler generated p in correct location" );
+
+
+    // test:  div3.onclick creates a p with values from iframe's global scope
+    var p4 = idoc.getElementById('p4');
+    ok( !(p4.innerHTML.match(/Third sentence/)),
+        "div3 event handler didn't execute early");
+
+    bVar = 13; // handler should *not* pick up this version of 'bVar'
+    dispatchClick(p4);  // should bubble to div3 and its handler
+    ok( p4.innerHTML.match(/number 42/),
+        "div3 event handler executed correctly" );
+
+    // test:  create an onclick fn in this scope, attach/execute in iframe
+    var p4 = idoc.getElementById('p4');
+    var div3 = idoc.getElementById('div3');
+    var checkValue = "contains good text";
+    div3.onclick = function(){ p4.appendChild(idoc.createTextNode(
+        "  Fourth sentence " + checkValue + "."));
+    }
+
+    ok( !(p4.innerHTML.match(/Fourth sentence/)),
+        "new div3 event handler didn't execute early" );
+    dispatchClick(div3);
+    ok( p4.innerHTML.match(/contains good text/),
+        "new div3 event handler executed correctly" );
+});
+
+function dispatchClick(element){
+    var event = element.ownerDocument.createEvent("MouseEvents");
+    event.initEvent("click", true, true);
+    element.dispatchEvent(event);
+}
+
+function dispatchChange(element){
+    var event = element.ownerDocument.createEvent("HTMLEvents");
+    event.initEvent("change", true, true);
+    element.dispatchEvent(event);
+}
+