From 578cd17223c6aa9bae3814f2a71e87f1dc196b58 Mon Sep 17 00:00:00 2001 From: Niklas von Hertzen Date: Sat, 16 Jul 2011 04:13:38 +0300 Subject: [PATCH] initial commit --- demo.html | 2364 ++++++++++++++++++++++++++++++++++ demo2.html | 188 +++ demo3.html | 79 ++ html2canvas.js | 795 ++++++++++++ html2canvas.min.js | 21 + jquery.plugin.html2canvas.js | 70 + tests/background.html | 90 ++ tests/image.jpg | Bin 0 -> 2952 bytes tests/text.html | 129 ++ 9 files changed, 3736 insertions(+) create mode 100644 demo.html create mode 100644 demo2.html create mode 100644 demo3.html create mode 100644 html2canvas.js create mode 100644 html2canvas.min.js create mode 100644 jquery.plugin.html2canvas.js create mode 100644 tests/background.html create mode 100644 tests/image.jpg create mode 100644 tests/text.html diff --git a/demo.html b/demo.html new file mode 100644 index 0000000..ed87c9f --- /dev/null +++ b/demo.html @@ -0,0 +1,2364 @@ + + + + + + + + + + +
+

One column fixed width layout

+ +
+
+ + +
+

Page heading

+

Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem ve eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

+

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

+

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

+
+ +
+
+ +
+
+ ©Copyright Max Design 2010 +
+ \ No newline at end of file diff --git a/demo2.html b/demo2.html new file mode 100644 index 0000000..51778f7 --- /dev/null +++ b/demo2.html @@ -0,0 +1,188 @@ + + + + + + + + + + + + display/box/float/clear test + + + + +
+
+ toggle +
+
+
    +
  • + the way +
    • +
  • +

    + the world ends +

    +
    +

    + bang + +

    +

    + whimper + +

    +
    +
    • +
  • + i grow old +
    • +
  • + pluot? +
    • +
+
+
+ bar maids, +
+
+

+ sing to me, erbarme dich +

+
+
+

+ This is a nonsensical document, but syntactically valid HTML 4.0. All 100% conformant CSS1 agents should be able to render the document elements above this paragraph indistinguishably (to the pixel) from this reference rendering, (except font rasterization and form widgets). All discrepancies should be traceable to CSS1 implementation shortcomings. Once you have finished evaluating this test, you can return to the parent page. +

+ + diff --git a/demo3.html b/demo3.html new file mode 100644 index 0000000..b5273a2 --- /dev/null +++ b/demo3.html @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + + + + + + + +
+
+
+

Heading

+ Text that isn't wrapped in anything. +

Followed by some text wrapped in a <p> paragraph.

+ Maybe add a link or a different style of link with a highlight. +
+

More content

+
a
+
+ +
+ +
+
+ + diff --git a/html2canvas.js b/html2canvas.js new file mode 100644 index 0000000..f88e1d5 --- /dev/null +++ b/html2canvas.js @@ -0,0 +1,795 @@ +/* + * html2canvas v0.11 + * + * Copyright 2011, Niklas von Hertzen + * http://www.twitter.com/niklasvh + * + * Released under the MIT License + */ + + +function html2canvas(el,userOptions) { + + var options = userOptions || {}; + + var opts = { + logging:false, + ready: function(canvas){ + document.body.appendChild(canvas); + }, + renderViewport: true + }; + opts = extendObj(options,opts); + + var imageLoaded, + imagesLoaded = 0, + images = [], + canvas, + ctx, + bgx, + bgy, + image, + ignoreElements = "IFRAME|OBJECT|PARAM"; + + + + // test how to measure text bounding boxes + var useRangeBounds = false; + if (document.createRange){ + var r = document.createRange(); + useRangeBounds = new Boolean(r.getBoundingClientRect); + } + + + function init(){ + + + canvas = document.createElement('canvas'); + + // TODO remove jQuery dependency + canvas.width = $(document).width(); + canvas.height = $(document).height()+10; + + + + if (!canvas.getContext){ + + // TODO include Flashcanvas + /* + + var script = document.createElement('script'); + script.type = "text/javascript"; + script.src = "flashcanvas.js"; + var s = document.getElementsByTagName('script')[0]; + s.parentNode.insertBefore(script, s); + + + if (typeof FlashCanvas != "undefined") { + + FlashCanvas.initElement(canvas); + ctx = canvas.getContext('2d'); + } + */ + }else{ + ctx = canvas.getContext('2d'); + } + + if (!ctx){ + // canvas not initialized, let's kill it here + log('Canvas not available'); + return; + } + + // set common settings for canvas + ctx.textBaseline = "bottom"; + + log('Finding background images'); + + getImages(el); + + log('Finding images'); + each(document.images,function(i,e){ + preloadImage(getAttr(e,'src')); + }); + + + if (images.length == 0){ + start(); + } + + + } + + function start(){ + + if (images.length == 0 || imagesLoaded==images.length/2){ + log('Started parsing'); + newElement2(el); + + parseElement(el); + } + } + + function log(a){ + if (opts.logging){ + if (typeof console != "undefined" && console.log){ + console.log(a); + }else{ + alert(a); + } + } + } + + function preloadImage(src){ + + if (images.indexOf(src)==-1){ + images.push(src); + + var img = new Image(); + // TODO remove jQuery dependancy + $(img).load(function(){ + imagesLoaded++; + start(); + + }); + img.onerror = function(){ + images.splice(images.indexOf(img.src),2); + imagesLoaded++; + start(); + } + img.src = src; + images.push(img); + + } + + } + + /* + * Function to find all images from and background-image + */ + + function getImages(el){ + + // TODO remove jQuery dependancy + each($(el).contents(),function(i,element){ + var ignRe = new RegExp("("+ignoreElements+")"); + if (!ignRe.test(element.nodeName)){ + getImages(element); + } + }) + + if (el.nodeType==1 || typeof el.nodeType == "undefined"){ + var background_image = getCSS(el,'background-image'); + if (background_image && background_image != "1" && background_image != "none" && background_image.substring(0,7)!="-webkit"){ + var src = backgroundImageUrl(background_image); + preloadImage(src); + } + } + } + + function parsing(el){ + + var ignRe = new RegExp("("+ignoreElements+")"); + if (!ignRe.test(el.nodeName)){ + + + newElement2(el); + // TODO remove jQuery dependancy + + var contents = $(el).contents(); + + + if (contents.length == 1){ + + // check nodeType + if (contents[0].nodeType==1){ + // it's an element, so let's look inside it + parsing(contents[0]); + }else if (contents[0].nodeType==3){ + // it's a text node, so lets print the text + newText2(el,contents[0]); + } + }else{ + + each(contents,function(cid,cel){ + + if (cel.nodeType==1){ + // element + parsing(cel); + }else if (cel.nodeType==3){ + newText2(el,cel); + } + + }); + + } + } + } + + + function parseElement(element){ + + each(element.children,function(index,el){ + parsing(el); + }); + + + finish(); + } + + /* + * Function to retrieve the actual src of a background-image + */ + function backgroundImageUrl(src){ + if (src.substr(0,5)=='url("'){ + src = src.substr(5); + src = src.substr(0,src.length-2); + }else{ + src = src.substr(4); + src = src.substr(0,src.length-1); + } + return src; + } + + /* + * Load image from storage + */ + + function loadImage(src){ + + var imgIndex = images.indexOf(src); + if (imgIndex!=-1){ + return images[imgIndex+1]; + }else{ + return false; + } + + } + + + /* + * Function to provide bounds for element + */ + function getBounds(el){ + + window.scroll(0,0); + + if (el.getBoundingClientRect){ + var bounds = el.getBoundingClientRect(); + bounds.top = bounds.top; + bounds.left = bounds.left; + return bounds; + }else{ + + // TODO remove jQuery dependancy + var p = $(el).offset(); + + return { + left: p.left + parseInt(getCSS(el,"border-left-width"),10), + top: p.top + parseInt(getCSS(el,"border-top-width"),10), + width:$(el).innerWidth(), + height:$(el).innerHeight() + } + + } + } + + + function newElement2(el){ + + var bounds = getBounds(el); + + var x = bounds.left; + var y = bounds.top; + var w = bounds.width; + var h = bounds.height; + + var bgcolor = getCSS(el,"background-color"); + + + + + /* + * TODO add support for different border-style's than solid + */ + var borders = getBorderData(el); + + each(borders,function(borderSide,borderData){ + if (borderData.width>0){ + var bx = x, + by = y, + bw = w, + bh = h-(borders[2].width); + switch(borderSide){ + case 0: + // top border + bh = borders[0].width; + break; + case 1: + // right border + bx = x+w-(borders[1].width); + bw = borders[1].width; + break; + case 2: + // bottom border + by = (by+h)-(borders[2].width); + bh = borders[2].width; + break; + case 3: + // left border + bw = borders[3].width; + break; + } + + newRect(bx,by,bw,bh,borderData.color); + + + + } + + }); + + + + // draw base element bgcolor + newRect( + x+borders[3].width, + y+borders[0].width, + w-(borders[1].width+borders[3].width), + h-(borders[0].width+borders[2].width), + bgcolor + ); + + drawBackground(el,{ + left: x+borders[3].width, + top: y+borders[0].width, + width: w-(borders[1].width+borders[3].width), + height: h-(borders[0].width+borders[2].width) + }); + + if (el.nodeName=="IMG"){ + image = loadImage(getAttr(el,'src')); + if (image){ + ctx.drawImage(image,x+parseInt(getCSS(el,'padding-left'),10),y+parseInt(getCSS(el,'padding-top'),10)); + }else{ + log("Error loading :" + getAttr(el,'src')); + } + } + + + + } + + + + function drawBackground(el,bounds){ + + + var background_image = getCSS(el,"background-image"); + var background_repeat = getCSS(el,"background-repeat"); + + if (typeof background_image != "undefined" && /^(1|none)$/.test(background_image)==false){ + + background_image = backgroundImageUrl(background_image); + var image = loadImage(background_image); + + + var bgp = getBackgroundPosition(el,bounds,image); + + + if (image){ + switch(background_repeat){ + + case "repeat-x": + drawbackgroundRepeatX(image,bgp,bounds.left,bounds.top,bounds.width,bounds.height); + break; + + case "repeat-y": + drawbackgroundRepeatY(image,bgp,bounds.left,bounds.top,bounds.width,bounds.height); + break; + + case "no-repeat": + + drawBackgroundRepeat(image,bgp.left+bounds.left,bgp.top+bounds.top,Math.min(bounds.width,image.width),Math.min(bounds.height,image.height),bounds.left,bounds.top); + // ctx.drawImage(image,(bounds.left+bgp.left),(bounds.top+bgp.top)); + break; + + default: + var height, + add; + + + bgp.top = bgp.top-Math.ceil(bgp.top/image.height)*image.height; + + + for(bgy=(bounds.top+bgp.top);bgy<=bounds.height+bounds.top;){ + + + + var h = Math.min(image.height,(bounds.height+bounds.top)-bgy); + + + if ( Math.floor(bgy+image.height)>h+bgy){ + height = (h+bgy)-bgy; + }else{ + height = image.height; + } + // console.log(height); + + if (bgy0){ + bgp.top += add; + } + bgy = Math.floor(bgy+image.height)-add; + } + break; + + + } + }else{ + + log("Error loading background:" + background_image); + //console.log(images); + } + + } + } + + function drawbackgroundRepeatY(image,bgp,x,y,w,h){ + + var height, + width = Math.min(image.width,w); + + bgp.top = bgp.top-Math.ceil(bgp.top/image.height)*image.height; + + + for(bgy=(y+bgp.top);bgy<=h+y;){ + + + if ( Math.floor(bgy+image.height)>h+y){ + height = (h+y)-bgy; + }else{ + height = image.height; + } + drawBackgroundRepeat(image,x+bgp.left,bgy,width,height,x,y); + + bgy = Math.floor(bgy+image.height); + + } + } + + function drawbackgroundRepeatX(image,bgp,x,y,w,h){ + + var height = Math.min(image.height,h), + width; + + + bgp.left = bgp.left-Math.ceil(bgp.left/image.width)*image.width; + + + for(bgx=(x+bgp.left);bgx<=w+x;){ + + if (Math.floor(bgx+image.width)>w+x){ + width = (w+x)-bgx; + }else{ + width = image.width; + } + + drawBackgroundRepeat(image,bgx,(y+bgp.top),width,height,x,y); + + bgx = Math.floor(bgx+image.width); + + + } + } + + function drawBackgroundRepeat(image,x,y,width,height,elx,ely){ + var sourceX = 0, + sourceY=0; + if (elx-x>0){ + sourceX = elx-x; + } + + if (ely-y>0){ + sourceY = ely-y; + } + + ctx.drawImage( + image, + sourceX, // source X + sourceY, // source Y + width-sourceX, // source Width + height-sourceY, // source Height + x+sourceX, // destination X + y+sourceY, // destination Y + width-sourceX, // destination width + height-sourceY // destination height + ); + } + + /* + * Function to retrieve background-position, both in pixels and % + */ + + function getBackgroundPosition(el,bounds,image){ + + var bgposition = getCSS(el,"background-position").split(" "), + top, + left, + percentage; + + + if (bgposition[0].indexOf("%")!=-1){ + + percentage = (parseFloat(bgposition[0])/100); + left = ((bounds.width * percentage)-(image.width*percentage)); + }else{ + left = parseInt(bgposition[0],10); + } + + if (bgposition[1].indexOf("%")!=-1){ + + percentage = (parseFloat(bgposition[1])/100); + top = ((bounds.height * percentage)-(image.height*percentage)); + }else{ + top = parseInt(bgposition[1],10); + } + + return { + top: top, + left: left + }; + + } + + + + /* + * Function to provide border details for an element + */ + + function getBorderData(el){ + + var borders = []; + each(["top","right","bottom","left"],function(i,borderSide){ + borders.push({ + width: parseInt(getCSS(el,'border-'+borderSide+'-width'),10), + color: getCSS(el,'border-'+borderSide+'-color') + }); + }); + + return borders; + + } + + // Drawing a rectangle + function newRect(x,y,w,h,bgcolor){ + if (bgcolor!="transparent"){ + ctx.fillStyle = bgcolor; + ctx.fillRect (x, y, w, h); + } + } + + + /* + * Function to draw the text on the canvas + */ + + function printText(currentText,x,y){ + if (trim(currentText).length>0){ + ctx.fillText(currentText,x,y); + } + } + /* + * Function for fetching the css attribute + * TODO remove jQuery dependancy + */ + function getCSS(el,attribute){ + return $(el).css(attribute); + } + + /* + * Function for fetching the element attribute + */ + function getAttr(el,attribute){ + return el.getAttribute(attribute); + //return $(el).attr(attribute); + } + + function newText2(el,textNode){ + + + + + var family = getCSS(el,"font-family"); + var size = getCSS(el,"font-size"); + var color = getCSS(el,"color"); + + var bold = getCSS(el,"font-weight"); + var font_style = getCSS(el,"font-style"); + + + var text_decoration = getCSS(el,"text-decoration"); + + + // apply text-transform:ation to the text + textNode.nodeValue = textTransform(textNode.nodeValue,getCSS(el,"text-transform")); + var text = textNode.nodeValue; + + //text = $.trim(text); + if (text.length>0){ + switch(bold){ + case "401": + bold = "bold"; + break; + } + + + + ctx.font = bold+" "+font_style+" "+size+" "+family; + ctx.fillStyle = color; + + + + + + var oldTextNode = textNode; + for(var c=0;c + * + * Copyright 2011, Niklas von Hertzen + * http://www.twitter.com/niklasvh + * + * Released under the MIT License + */ + +function html2canvas(s,I){function t(){if(j.length==0||u==j.length/2)m("Started parsing"),x(s),J(s)}function m(a){q.logging&&(typeof console!="undefined"&&console.log?console.log(a):alert(a))}function y(a){if(j.indexOf(a)==-1){j.push(a);var b=new Image;$(b).load(function(){u++;t()});b.onerror=function(){j.splice(j.indexOf(b.src),2);u++;t()};b.src=a;j.push(b)}}function z(a){n($(a).contents(),function(a,e){RegExp("("+A+")").test(e.nodeName)||z(e)});if(a.nodeType==1||typeof a.nodeType=="undefined")if((a= +i(a,"background-image"))&&a!="1"&&a!="none"&&a.substring(0,7)!="-webkit")a=B(a),y(a)}function v(a){if(!RegExp("("+A+")").test(a.nodeName)){x(a);var b=$(a).contents();b.length==1?b[0].nodeType==1?v(b[0]):b[0].nodeType==3&&C(a,b[0]):n(b,function(b,g){g.nodeType==1?v(g):g.nodeType==3&&C(a,g)})}}function J(a){n(a.children,function(a,e){v(e)});K()}function B(a){a.substr(0,5)=='url("'?(a=a.substr(5),a=a.substr(0,a.length-2)):(a=a.substr(4),a=a.substr(0,a.length-1));return a}function D(a){a=j.indexOf(a); +return a!=-1?j[a+1]:!1}function E(a){window.scroll(0,0);if(a.getBoundingClientRect)return a=a.getBoundingClientRect(),a.top=a.top,a.left=a.left,a;else{var b=$(a).offset();return{left:b.left+parseInt(i(a,"border-left-width"),10),top:b.top+parseInt(i(a,"border-top-width"),10),width:$(a).innerWidth(),height:$(a).innerHeight()}}}function x(a){var b=E(a),e=b.left,g=b.top,f=b.width,d=b.height,b=i(a,"background-color"),c=L(a);n(c,function(a,b){if(b.width>0){var h=e,i=g,j=f,k=d-c[2].width;switch(a){case 0:k= +c[0].width;break;case 1:h=e+f-c[1].width;j=c[1].width;break;case 2:i=i+d-c[2].width;k=c[2].width;break;case 3:j=c[3].width}r(h,i,j,k,b.color)}});r(e+c[3].width,g+c[0].width,f-(c[1].width+c[3].width),d-(c[0].width+c[2].width),b);M(a,{left:e+c[3].width,top:g+c[0].width,width:f-(c[1].width+c[3].width),height:d-(c[0].width+c[2].width)});a.nodeName=="IMG"&&((F=D(a.getAttribute("src")))?k.drawImage(F,e+parseInt(i(a,"padding-left"),10),g+parseInt(i(a,"padding-top"),10)):m("Error loading :"+a.getAttribute("src")))} +function M(a,b){var e=i(a,"background-image"),g=i(a,"background-repeat");if(typeof e!="undefined"&&/^(1|none)$/.test(e)==!1){var e=B(e),f=D(e),d,c=i(a,"background-position").split(" "),o;c[0].indexOf("%")!=-1?(o=parseFloat(c[0])/100,d=b.width*o-f.width*o):d=parseInt(c[0],10);c[1].indexOf("%")!=-1?(o=parseFloat(c[1])/100,c=b.height*o-f.height*o):c=parseInt(c[1],10);d={top:c,left:d};if(f)switch(g){case "repeat-x":G(f,d,b.left,b.top,b.width,b.height);break;case "repeat-y":var e=b.left,g=b.top,c=b.height, +j=Math.min(f.width,b.width);d.top-=Math.ceil(d.top/f.height)*f.height;for(h=g+d.top;h<=c+g;)o=Math.floor(h+f.height)>c+g?c+g-h:f.height,w(f,e+d.left,h,j,o,e,g),h=Math.floor(h+f.height);break;case "no-repeat":w(f,d.left+b.left,d.top+b.top,Math.min(b.width,f.width),Math.min(b.height,f.height),b.left,b.top);break;default:d.top-=Math.ceil(d.top/f.height)*f.height;for(h=b.top+d.top;h<=b.height+b.top;)e=Math.min(f.height,b.height+b.top-h),e=Math.floor(h+f.height)>e+h?e+h-h:f.height,h0&&(d.top+=g),h=Math.floor(h+f.height)-g}else m("Error loading background:"+e)}}function G(a,b,e,g,f,d){var d=Math.min(a.height,d),c;b.left-=Math.ceil(b.left/a.width)*a.width;for(l=e+b.left;l<=f+e;)c=Math.floor(l+a.width)>f+e?f+e-l:a.width,w(a,l,g+b.top,c,d,e,g),l=Math.floor(l+a.width)}function w(a,b,e,g,f,d,c){var h=0,i=0;d-b>0&&(h=d-b);c-e>0&&(i=c-e);k.drawImage(a,h,i,g-h,f-i,b+h,e+i,g-h,f-i)}function L(a){var b=[];n(["top","right","bottom","left"],function(e, +g){b.push({width:parseInt(i(a,"border-"+g+"-width"),10),color:i(a,"border-"+g+"-color")})});return b}function r(a,b,e,g,f){if(f!="transparent")k.fillStyle=f,k.fillRect(a,b,e,g)}function i(a,b){return $(a).css(b)}function C(a,b){var e=i(a,"font-family"),g=i(a,"font-size"),f=i(a,"color"),d=i(a,"font-weight"),c=i(a,"font-style"),h=i(a,"text-decoration");b.nodeValue=N(b.nodeValue,i(a,"text-transform"));var j=b.nodeValue;if(j.length>0){switch(d){case "401":d="bold"}k.font=d+" "+c+" "+g+" "+e;k.fillStyle= +f;c=b;for(e=0;e0&&k.fillText(c,m,l);switch(h){case "underline":r(d.left, +Math.round(d.bottom-d.height/7),d.width,1,f);break;case "overline":r(d.left,d.top,d.width,1,f);break;case "line-through":r(d.left,Math.round(d.top+d.height/2),d.width,1,f)}c=g}}}function N(a,b){switch(b){case "lowercase":return a.toLowerCase();case "capitalize":return a.replace(/(^|\s|:|-|\(|\))([a-z])/g,function(a,b,f){return b+f.toUpperCase()});case "uppercase":return a.toUpperCase();default:return a}}function K(){m("Finished rendering");if(q.renderViewport){var a=document.createElement("canvas"); +a.getContext("2d");a.width=window.innerWidth;a.height=window.innerHeight}q.ready(p)}function n(a,b){for(var b=b||function(){},e=0;e +* @created 16.7.2011 +* @website http://hertzen.com + */ + + +/* + * jQuery helper plugin for examples and tests + */ + +(function( $ ){ + $.fn.html2canvas = function() { + + var message, + timer; + + html2canvas(this.get(0),{ + ready:function(canvas){ + document.body.appendChild(canvas); + var canvas = $(canvas); + canvas.css('position','absolute') + .css('left',0).css('top',0); + // $('body').append(canvas); + $(canvas).siblings().toggle(); + $(window).click(function(){ + if (!canvas.is(':visible')){ + $(canvas).toggle().siblings().toggle(); + throwMessage("Canvas Render visible"); + } else{ + $(canvas).siblings().toggle(); + $(canvas).toggle(); + throwMessage("Canvas Render hidden"); + } + + + }); + } + + }); + + + function throwMessage(msg){ + window.clearTimeout(timer); + timer = window.setTimeout(function(){ + message.fadeOut(function(){ + message.remove(); + }); + },2000); + $(message).remove(); + message = $('
').text(msg).css({ + margin:0, + padding:10, + background: "#000", + opacity:0.7, + position:"fixed", + top:10, + right:10, + fontFamily: 'Tahoma' , + color:'#fff', + fontSize:12, + borderRadius:12, + width:'auto', + height:'auto' + }).hide().fadeIn().appendTo('body'); + } + + }; +})( jQuery ); + \ No newline at end of file diff --git a/tests/background.html b/tests/background.html new file mode 100644 index 0000000..dd21749 --- /dev/null +++ b/tests/background.html @@ -0,0 +1,90 @@ + + + + + Background attribute tests + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+
+ +
+
+
+
+
+
+ + + + diff --git a/tests/image.jpg b/tests/image.jpg new file mode 100644 index 0000000000000000000000000000000000000000..5c6cd3c9ec4974032cb9c57c6e4adf920ae5fb2f GIT binary patch literal 2952 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 GKl(2UN<`BD literal 0 HcmV?d00001 diff --git a/tests/text.html b/tests/text.html new file mode 100644 index 0000000..76d7502 --- /dev/null +++ b/tests/text.html @@ -0,0 +1,129 @@ + + + + + Text tests + + + + + + + + + + +

<h1> text-decoration

+
+

Arial

+
    +
  1. text-decoration:none;
    2. +
  2. text-decoration:underline;
    3. +
  3. text-decoration:overline;
    4. +
  4. text-decoration:line-through;
    5. +
+ +
    +
  1. text-decoration:none;
    2. +
  2. text-decoration:underline;
    3. +
  3. text-decoration:overline;
    4. +
  4. text-decoration:line-through;
    5. +
+
    +
  1. text-decoration:none;
    2. +
  2. text-decoration:underline;
    3. +
  3. text-decoration:overline;
    4. +
  4. text-decoration:line-through;
    5. +
+
+ +
+

Verdana

+
    +
  1. text-decoration:none;
    2. +
  2. text-decoration:underline;
    3. +
  3. text-decoration:overline;
    4. +
  4. text-decoration:line-through;
    5. +
+ +
    +
  1. text-decoration:none;
    2. +
  2. text-decoration:underline;
    3. +
  3. text-decoration:overline;
    4. +
  4. text-decoration:line-through;
    5. +
+
    +
  1. text-decoration:none;
    2. +
  2. text-decoration:underline;
    3. +
  3. text-decoration:overline;
    4. +
  4. text-decoration:line-through;
    5. +
+
+ +
+

Tahoma

+
    +
  1. text-decoration:none;
    2. +
  2. text-decoration:underline;
    3. +
  3. text-decoration:overline;
    4. +
  4. text-decoration:line-through;
    5. +
+ +
    +
  1. text-decoration:none;
    2. +
  2. text-decoration:underline;
    3. +
  3. text-decoration:overline;
    4. +
  4. text-decoration:line-through;
    5. +
+
    +
  1. text-decoration:none;
    2. +
  2. text-decoration:underline;
    3. +
  3. text-decoration:overline;
    4. +
  4. text-decoration:line-through;
    5. +
+
+ +

<h2> text-transform

+
    +
  • text-transform:none;
    • +
  • text-transform:capitalize; (including foreign characters such as Öaäå)
    • +
  • text-transform:uppercase;
    • +
  • text-transform:lowercase;
    • +
+

<h3> misc text alignments

+
    +
  • word-spacing:5px; (as each letter is rendered individually, the bounds will always be correct)
    • +
  • line-height:35px;
    (same goes for line-height)
    • +
  • letter-spacing:5px;
    • +
  • text-align:right;width:300px;
    • +
  • font-variant:small-caps; (not yet supported)
    • +
+ + +