add unit testing for css

2023-08-10 21:13:10 +03:00 · 2012-03-03 16:38:05 +02:00
parent ae6d988ec3
commit 031f8733ac
4 changed files with 2095 additions and 0 deletions
--- a/tests/qunit/unit/css.js
+++ b/tests/qunit/unit/css.js
@ -0,0 +1,139 @@
+/* 
+* @author Niklas von Hertzen <niklas at hertzen.com>
+* @created 3.3.2012 
+* @website http://hertzen.com
+ */
+
+module("CSS");
+$(function() {  
+   
+  
+    var propsToTest = ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"],
+    numDivs = $('#borders div').length;
+    /*
+    expecting = [
+    // #1
+    "1px",
+    "0px",
+    "1px",
+    "0px",
+            
+    // #2
+    "16px",
+    "0px",
+    "16px",
+    "0px",
+            
+    // #3
+    "1px",
+    "3px",
+    "5px",
+    "3px",
+            
+    // #4
+    "3px",
+    "3px",
+    "3px",
+    "3px",
+            
+    // #5
+    "80px",
+    "35px",
+    "480px",
+    "188px",
+            
+    // #6
+    "3904px",
+    "3500px",
+    "2944px",
+    "2513px",
+    
+    // #7
+    "18px",
+    "6px",
+    "80px",
+    "5px",
+    
+    // #8
+    "1889px",
+    "666px",
+    "3904px",
+    "500px"
+    ];
+       */
+       
+    test('border-width', propsToTest.length * numDivs, function() {  
+            
+        $('#borders div').each(function(i, el) {
+            $.each(propsToTest, function(s, prop) {
+                var expect = $(el).css(prop);
+                
+                // older IE's don't necessarily return px even with jQuery
+                if (expect === "thin") {
+                    expect = "1px";
+                } else if (expect === "medium") {
+                    expect = "3px";
+                } else if (expect === "thick") {
+                    expect = "5px";
+                }
+                
+                QUnit.equal( _html2canvas.Util.getCSS(el, prop), expect, "div #" + (i + 1) + " property " + prop + " equals " + $(el).css(prop) ); 
+            });
+            
+        });
+    });  
+    
+    var propsToTest2 = ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"],
+    numDivs2 = $('#padding div').length;
+    
+    test('padding width', propsToTest2.length * numDivs2, function() {  
+            
+        $('#padding div').each(function(i, el) {
+            $.each(propsToTest2, function(s, prop) {
+                QUnit.equal( _html2canvas.Util.getCSS(el, prop), $(el).css(prop), "div #" + (i + 1) + " property " + prop + " equals " + $(el).css(prop) ); 
+            });
+            
+        });
+    }); 
+    
+    
+        
+    var propsToTest3 = ["backgroundPosition"],
+    numDivs3 = $('#backgroundPosition div').length;
+    
+    test('background-position', propsToTest3.length * numDivs3 * 2, function() {  
+            
+        $('#backgroundPosition div').each(function(i, el) {
+            $.each(propsToTest3, function(s, prop) {
+                var img =  new Image();
+                img.width = 50;
+                img.height = 50;
+                var item = _html2canvas.Util.getCSS(el, prop),
+                pos = _html2canvas.Util.BackgroundPosition(el, _html2canvas.Util.Bounds(el), img);
+                
+
+                var split = $(el).css(prop).split(" ");
+                var testEl = $('<div />').css({
+                    'position': 'absolute',
+                    'left': split[0],
+                    'top': split[1]
+                });
+                
+                testEl.appendTo(el);
+                
+                
+                
+                
+                QUnit.equal( pos.left, parseFloat(testEl.css('left'), 10), "div #" + (i + 1) + " background-position-x equals " + pos.left + " from " + item ); 
+                QUnit.equal( pos.top, parseFloat(testEl.css('top'), 10), "div #" + (i + 1) + " background-position-y equals " + pos.top ); 
+                
+                testEl.remove();
+                
+                
+            });
+            
+        });
+    }); 
+    
+    // TODO add backgroundPosition % tests
+});