Fixes #63

googlearchive · Jul 24, 2014 · ae00b0a · ae00b0a
1 parent 5b24a18
commit ae00b0a
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 46 deletions.
diff --git a/src/Parser.js b/src/Parser.js
@@ -136,7 +136,24 @@ var importParser = {
   },
   parseGeneric: function(elt) {
     this.trackElement(elt);
-    document.head.appendChild(elt);
+    this.addElementToDocument(elt);
+  },
+  rootImportForElement: function(elt) {
+    var n = elt;
+    while (n.ownerDocument.__importLink) {
+      n = n.ownerDocument.__importLink;
+    }
+    return n;
+  },
+  addElementToDocument: function(elt) {
+    //document.head.appendChild(elt);
+    var port = this.rootImportForElement(elt.__importElement || elt);
+    var l = port.__insertedElements = port.__insertedElements || 0;
+    var refNode = port.nextElementSibling;
+    for (var i=0; i < l; i++) {
+      refNode = refNode && refNode.nextElementSibling;
+    }
+    port.parentNode.insertBefore(elt, refNode);
   },
   // tracks when a loadable element has loaded
   trackElement: function(elt, callback) {
@@ -193,7 +210,7 @@ var importParser = {
       script.parentNode.removeChild(script);
       scope.currentScript = null;  
     });
-    document.head.appendChild(script);
+    this.addElementToDocument(script);
   },
   // determine the next element in the tree which should be parsed
   nextToParse: function() {

diff --git a/test/html/imports/sheet1.css b/test/html/imports/sheet1.css
@@ -1,3 +1,7 @@
 .red {
-  background: red;
+  background-color: red;
+}
+
+.overridden {
+	background-color: green;
 }
diff --git a/test/html/imports/sheet2.css b/test/html/imports/sheet2.css
@@ -1,3 +1,3 @@
 .blue {
-  background: blue;
+  background-color: blue;
 }
diff --git a/test/html/imports/sheet3.css b/test/html/imports/sheet3.css
@@ -1,3 +1,3 @@
 .orange {
-  background: orange;
+  background-color: orange;
 }
diff --git a/test/html/imports/style-elements-import.html b/test/html/imports/style-elements-import.html
@@ -0,0 +1,10 @@
+<style>
+	.styled {
+		background: red;
+	}
+</style>
+<style>
+	.overridden-style {
+		background: red;
+	}
+</style>
diff --git a/test/html/imports/style-links-import.html b/test/html/imports/style-links-import.html
@@ -1,5 +1,3 @@
 <link rel="stylesheet" href="sheet3.css">
 <link rel="stylesheet" href="sheet1.css">
-<template>
-  <link rel="stylesheet" href="sheet2.css">
-</template>
+<link rel="stylesheet" href="sheet2.css">
diff --git a/test/html/style-links.html b/test/html/style-links.html
@@ -1,41 +1,58 @@
 <!doctype html>
 <html>
-  <head>
-    <title>Style Links Test</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-links-import.html">
-  </head>
-  <body>
-    <script>
-      addEventListener('HTMLImportsLoaded', function() {
-
-        function checkLinksForContent(root) {
-          var links = root.querySelectorAll('link');
-          Array.prototype.forEach.call(links, function(link) {
-            chai.assert.ok(link.__resource, 'style link loaded', link);
-          })
-        }
-
-        setTimeout(function() {
-          checkLinksForContent(document.body);
-          done();
-          return;
-
-          var imp = document.head.querySelector('link[rel=import]');
-          chai.assert.ok(imp.content, 'import has content');
-
-          var styleLink = document.querySelector('link[rel=stylesheet]');
-          chai.assert.isUndefined(styleLink.__resource);
-
-          checkLinksForContent(imp.content.querySelector('body'));
-
-          chai.assert.equal(document.styleSheets.length, 2);
-
-          done();
-        }, 50);
-      });
-    </script>
-  </body>
+<head>
+  <title>Style Links Test</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-links-import.html">
+  <style>
+    .overridden {
+      background-color: black;
+    }
+  </style>
+  <link rel="import" href="imports/style-elements-import.html">
+  <style>
+    .overridden-style {
+      background-color: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="red">red?</div>
+  <div class="blue">white?</div>
+  <div class="orange">orange?</div>
+
+  <div class="overridden">black?</div>
+
+  <div class="styled">red?</div>
+  <div class="overridden-style">black?</div>
+
+
+  <script>
+    addEventListener('HTMLImportsLoaded', function() {
+
+      var imp = document.head.querySelector('link[rel=import]');
+      chai.assert.ok(imp.import, 'import has content');
+
+      function computedStyle(selector) {
+        return getComputedStyle(document.querySelector(selector));
+      }
+
+      // styles in stylesheets are applied
+      chai.assert.equal(computedStyle('.red').backgroundColor, 'rgb(255, 0, 0)');
+      chai.assert.equal(computedStyle('.orange').backgroundColor, 'rgb(255, 165, 0)');
+      chai.assert.equal(computedStyle('.blue').backgroundColor, 'rgb(0, 0, 255)');
+      // styles in stylesheets are applied in the correct order and overriddable
+      chai.assert.equal(computedStyle('.overridden').backgroundColor, 'rgb(0, 0, 0)');
+      // styles in style elements are applied
+      chai.assert.equal(computedStyle('.styled').backgroundColor, 'rgb(255, 0, 0)');
+      // styles in style are applied in the correct order and overriddable
+      chai.assert.equal(computedStyle('.overridden-style').backgroundColor, 'rgb(0, 0, 0)');
+
+
+      done();
+    });
+  </script>
+</body>
 </html>