Merge pull request madrobby#1074 from lastminutedotcom/master

Added support for pseudo-elements in getComputedStyle shim
LEV7n · Jul 12, 2016 · 9ec56e0 · 9ec56e0
2 parents 30ea753 + c0d821e
commit 9ec56e0
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 2 deletions.
diff --git a/src/ie.js b/src/ie.js
@@ -9,9 +9,9 @@
     getComputedStyle(undefined)
   } catch(e) {
     var nativeGetComputedStyle = getComputedStyle;
-    window.getComputedStyle = function(element){
+    window.getComputedStyle = function(element, pseudoElement){
       try {
-        return nativeGetComputedStyle(element)
+        return nativeGetComputedStyle(element, pseudoElement)
       } catch(e) {
         return null
       }

diff --git a/test/ie.html b/test/ie.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+  <link rel="stylesheet" href="test.css">
+  <title>Zepto Touch unit tests</title>
+  <script src="../vendor/evidence.js"></script>
+  <script src="evidence_runner.js"></script>
+  <script>
+    // avoid caching
+    (function(){
+      function load(scripts){
+        scripts.split(' ').forEach(function(script){
+          document.write('<script src="../src/'+script+'.js?'+(+new Date)+'"></scr'+'ipt>')
+        })
+      }
+
+      load('ie')
+    })()
+  </script>
+  <style>
+      body {
+          height: 50px;
+      }
+      body:after {
+          content: 'abc';
+      }
+  </style>
+</head>
+<body>
+  <h1>Zepto ie unit tests</h1>
+  <p id="results">
+    Running… see browser console for results
+  </p>
+
+  <script>
+    (function(){
+
+      Evidence('getComputedStyle', {
+
+        //Test to check if getComputedStyle does not blow up when no element are provided
+        testGetComputedStyleNoElem: function(t){
+          t.assertEqual(null, getComputedStyle())
+        },
+
+        //Test to check if computed styles for elements are returned correctly
+        testGetComputedStyle: function(t){
+          t.assertEqual('50px', getComputedStyle(document.body).height)
+        },
+
+        //Test to check if computed styles for pseudo-elements are returned correctly
+        //Assertion a bit hacky as IE returns the value in double quotes
+        testGetComputedStylePseudoElem: function(t){
+          t.assert(getComputedStyle(document.body, ':after').content.indexOf('abc') >  -1)
+        }
+
+      })
+    })()
+  </script>
+
+</body>
+</html>
diff --git a/test/index.html b/test/index.html
@@ -48,6 +48,7 @@ <h2>Other modules unit test</h2>
     <li><a href="ajax_deferred.html">ajax + deferred</a></li>
     <li><a href="callbacks.html">callbacks</a></li>
     <li><a href="ios3.html">ios3</a></li>
+    <li><a href="ie.html">ie</a></li>
   </ul>
 
   <h2>Functional tests</h2>