Merge branch 'real-imports' into dynamic

googlearchive · Jan 21, 2014 · 2cda7f4 · 2cda7f4
2 parents cfdc879 + c39aa8c
commit 2cda7f4
Show file tree

Hide file tree

Showing 12 changed files with 63 additions and 134 deletions.
diff --git a/src/HTMLImports.js b/src/HTMLImports.js
@@ -111,7 +111,7 @@ if (!useNative) {
           // cache document
           importer.documents[url] = doc;
         }
-        elt.__resource = doc;
+        elt.import = doc;
       }
       parser.parseNext();
     },
@@ -205,7 +205,7 @@ function whenImportsReady(callback, doc) {
   }
   var imports = doc.querySelectorAll('link[rel=import');
   var loaded = 0, l = imports.length;
-  function checkDone(d) {  
+  function checkDone(d) { 
     if (loaded == l) {
       // go async to ensure parser isn't stuck on a script tag
       requestAnimationFrame(callback);
@@ -222,6 +222,7 @@ function whenImportsReady(callback, doc) {
         loadedImport.call(imp);
       } else {
         imp.addEventListener('load', loadedImport);
+        imp.addEventListener('error', loadedImport);
       }
     }
   } else {
@@ -230,7 +231,8 @@ function whenImportsReady(callback, doc) {
 }
 
 function isImportLoaded(link) {
-  return link.import && (link.import.readyState !== 'loading');
+  return useNative ? (link.import && (link.import.readyState !== 'loading')) :
+      link.__importParsed;
 }
 
 // exports

diff --git a/src/Loader.js b/src/Loader.js
@@ -10,9 +10,8 @@
   var path = scope.path;
   var xhr = scope.xhr;
 
-  var cache = {};
-
   var Loader = function(onLoad, onError, onComplete) {
+    this.cache = {};
     this.onload = onLoad;
     this.onerror = onError;
     this.oncomplete = onComplete;
@@ -60,7 +59,7 @@
       }
       if (cache[url]) {
         // complete load using cache data
-        this.onload(url, elt, cache[url]);
+        this.onload(url, elt, this.cache[url]);
         // finished this transaction
         this.tail();
         // don't need fetch
@@ -92,7 +91,7 @@
     },
     receive: function(url, elt, err, resource) {
       if (!err) {
-        cache[url] = resource;
+        this.cache[url] = resource;
       }
       var $p = this.pending[url];
       for (var i=0, l=$p.length, p; (i<l) && (p=$p[i]); i++) {

diff --git a/src/Parser.js b/src/Parser.js
@@ -8,7 +8,6 @@
 
 var IMPORT_LINK_TYPE = 'import';
 var isIe = /Trident/.test(navigator.userAgent)
-
 // highlander object for parsing a document tree
 var importParser = {
   selectors: [
@@ -53,7 +52,6 @@ var importParser = {
     this.parseNext();
   },
   parseImport: function(elt) {
-    elt.import = elt.__resource;
     // TODO(sorvell): onerror
     // fire load event
     if (elt.__resource) {

diff --git a/test/html/HTMLImports.html b/test/html/HTMLImports.html
@@ -14,22 +14,23 @@
       }, 1000);
       addEventListener('HTMLImportsLoaded', function() {
         clearTimeout(timeout);
-        //console.dir(Object.keys(HTMLImports.cache));
-        chai.assert.equal(4, Object.keys(HTMLImports.importer.cache).length,
-          'must cache exactly four resources');
-        chai.assert.equal(4, Object.keys(HTMLImports.importer.documents).length,
-          'must cache exactly four documents');
+        if (!HTMLImports.useNative) {
+          chai.assert.equal(4, Object.keys(HTMLImports.importer.cache).length,
+            'must cache exactly four resources');
+          chai.assert.equal(4, Object.keys(HTMLImports.importer.documents).length,
+            'must cache exactly four documents');
 
-        Object.keys(HTMLImports.importer.documents).forEach(function(key) {
-          var doc = HTMLImports.importer.documents[key];
-          var links = doc.querySelectorAll('link[rel=import]');
-          Array.prototype.forEach.call(links, function(link) {
-            var href = link.getAttribute('href');
-            if (href.indexOf('404') <= 0) {
-              chai.assert.isDefined(link.import, 'import should have an import property');
-            }
+          Object.keys(HTMLImports.importer.documents).forEach(function(key) {
+            var doc = HTMLImports.importer.documents[key];
+            var links = doc.querySelectorAll('link[rel=import]');
+            Array.prototype.forEach.call(links, function(link) {
+              var href = link.getAttribute('href');
+              if (href.indexOf('404') <= 0) {
+                chai.assert.isDefined(link.import, 'import should have an import property');
+              }
+            });
           });
-        })
+        }
         done();
       });
     </script>

diff --git a/test/html/imports/style-links.html → test/html/imports/style-links-import.html b/test/html/imports/style-links.html → test/html/imports/style-links-import.html
diff --git a/test/html/imports/url-import.html → test/html/imports/style-paths-import.html b/test/html/imports/url-import.html → test/html/imports/style-paths-import.html
@@ -9,15 +9,7 @@
   @import '../stuff/sheet.css';
   @import 'sheet1.css';
 
-  .red {
-    background: red;
-  }
-
-  .foo {
-    background: url(../../foo.png);
-  }
-
-  .abs {
-    background: url(http://www.google.com);
+  .image {
+    background: url(google.png);
   }
 </style>
diff --git a/test/html/load.html b/test/html/load.html
@@ -7,7 +7,7 @@
       (function() {
         function importLoaded(event) {
           window.loadEvents++;
-          if (event.target.import) {
+          if (event.type === 'load' && event.target.import) {
             var s = event.target.import.querySelector('script');
             chai.assert.ok(s, 'load event target can be used to find element in import');
           }
@@ -28,7 +28,9 @@
     <div id="test3" class="image"></div>
     <script>
       document.addEventListener('HTMLImportsLoaded', function() {
-        chai.assert.equal(loadEvents, 3, 'expected # of load events');
+        // TODO(sorvell): onerror doesn't work in native, filing bug...
+        var num = HTMLImports.useNative ? 2 : 3;
+        chai.assert.equal(loadEvents, num, 'expected # of load events');
         var test1 = getComputedStyle(document.querySelector('#test1')).backgroundColor;
         chai.assert.equal(test1, 'rgb(255, 0, 0)');
         var test2 = getComputedStyle(document.querySelector('#test2')).backgroundColor;

diff --git a/test/html/path.html b/test/html/path.html
diff --git a/test/html/style-links.html b/test/html/style-links.html
@@ -5,7 +5,7 @@
     <script src="../../../tools/test/htmltest.js"></script>
     <script src="../../../tools/test/chai/chai.js"></script>
     <script src="../../html-imports.js"></script>
-    <link rel="import" href="imports/style-links.html">
+    <link rel="import" href="imports/style-links-import.html">
   </head>
   <body>
     <script>

diff --git a/test/html/style-paths.html b/test/html/style-paths.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>HTMLImports Path Tests</title>
+  <script src="../../../tools/test/htmltest.js"></script>
+  <script src="../../../tools/test/chai/chai.js"></script>
+  <script src="../../html-imports.js"></script>
+  <link rel="import" href="imports/style-paths-import.html">
+</head>
+<body>
+  <div class="red">red</div>
+  <div class="image" style="height: 20px;"></div>
+  <script>
+
+  document.addEventListener('HTMLImportsLoaded', function() {
+    var i = document.querySelector('[rel=import]');
+    var doc = i.import;
+
+    var red = document.querySelector('.red');
+    chai.assert.equal(getComputedStyle(red).backgroundColor, 'rgb(255, 0, 0)', 'style in @import applied');
+    var image = document.querySelector('.image');
+
+    // document relative image url
+    var a = document.createElement('a');
+    a.href = 'imports/google.png';
+    chai.assert.match(getComputedStyle(image).backgroundImage, new RegExp(a.href), 'url in style applied');
+    done();  
+  });
+  </script>
+</body>
+</html>
diff --git a/test/html/urls.html b/test/html/urls.html
diff --git a/test/js/tests.js b/test/js/tests.js
@@ -8,8 +8,7 @@ htmlSuite('HTMLImports', function() {
   htmlTest('html/HTMLImports.html');
   htmlTest('html/parser.html');
   htmlTest('html/style-links.html');
-  htmlTest('html/path.html');
-  htmlTest('html/urls.html');
+  htmlTest('html/style-paths.html');
   htmlTest('html/load.html');
   htmlTest('html/currentScript.html');
   htmlTest('html/dedupe.html');