Gecko [ nrupathungauniversityblr.ac.in ]

Name	Size	Permission
css	[ DIR ]	drwxr-xr-x
images	[ DIR ]	drwxr-xr-x
backgroundcolor_fontdecoration...	4.53 KB	-rwxr-xr-x
css_2d_transforms.html	4.06 KB	-rwxr-xr-x
css_at_font_face.html	1.11 KB	-rwxr-xr-x
css_baseline.html	937 B	-rwxr-xr-x
css_border.html	6.53 KB	-rwxr-xr-x
css_border_radius.html	824 B	-rwxr-xr-x
css_color_cmyk.html	1005 B	-rwxr-xr-x
css_content.html	767 B	-rwxr-xr-x
css_counter.html	2.23 KB	-rwxr-xr-x
css_float.html	8.38 KB	-rwxr-xr-x
css_font_selection.html	6.57 KB	-rwxr-xr-x
css_important_flag.html	1.82 KB	-rwxr-xr-x
css_letter_spacing.html	4.98 KB	-rwxr-xr-x
css_line_height.html	2.72 KB	-rwxr-xr-x
css_margin.html	1.73 KB	-rwxr-xr-x
css_media.html	2.75 KB	-rwxr-xr-x
css_multiple_class.html	453 B	-rwxr-xr-x
css_nth_child.html	2.45 KB	-rwxr-xr-x
css_opacity.html	2.61 KB	-rwxr-xr-x
css_outline.html	2.68 KB	-rwxr-xr-x
css_overflow_hidden.html	946 B	-rwxr-xr-x
css_position_absolute.html	1.08 KB	-rwxr-xr-x
css_position_all.html	9.85 KB	-rwxr-xr-x
css_position_fixed.html	8.14 KB	-rwxr-xr-x
css_selectors.html	1.29 KB	-rwxr-xr-x
css_table_height.html	329 B	-rwxr-xr-x
css_table_layout_fixed.html	10.11 KB	-rwxr-xr-x
css_text_align.html	3.26 KB	-rwxr-xr-x
css_text_decoration.html	4.14 KB	-rwxr-xr-x
css_vertical_align.html	1.32 KB	-rwxr-xr-x
css_vertical_align_w3.html	15.01 KB	-rwxr-xr-x
css_whitespace.html	1.82 KB	-rwxr-xr-x
css_word_wrap.html	759 B	-rwxr-xr-x
css_z_index.html	1.36 KB	-rwxr-xr-x
demo_01.html	5.92 KB	-rwxr-xr-x
dom_anchor_link.html	9.77 KB	-rwxr-xr-x
dom_br.html	1.97 KB	-rwxr-xr-x
dom_form_fieldset.html	1.23 KB	-rwxr-xr-x
dom_large_table.html	39.04 KB	-rwxr-xr-x
dom_long_table.php	673 B	-rwxr-xr-x
dom_nbsp.html	1.64 KB	-rwxr-xr-x
dom_nested_table.html	948 B	-rwxr-xr-x
dom_ol.html	2.85 KB	-rwxr-xr-x
dom_simple_ul.html	1.34 KB	-rwxr-xr-x
dom_table.html	1.65 KB	-rwxr-xr-x
dom_table_image.html	371 B	-rwxr-xr-x
dom_ul.html	15.13 KB	-rwxr-xr-x
encoding_entities.html	518 B	-rwxr-xr-x
encoding_latin1.html	27.34 KB	-rwxr-xr-x
encoding_special.html	12.93 KB	-rwxr-xr-x
encoding_symbols.html	32.3 KB	-rwxr-xr-x
encoding_unicode.html	190 B	-rwxr-xr-x
encoding_unicode_wrapping.html	558 B	-rwxr-xr-x
encoding_utf-8.html	31.45 KB	-rwxr-xr-x
encoding_utf-8_all.html	538.06 KB	-rwxr-xr-x
encoding_utf-8_w3.html	13.58 KB	-rwxr-xr-x
image_background.html	4.37 KB	-rwxr-xr-x
image_basic.html	487 B	-rwxr-xr-x
image_bmp.html	3.45 KB	-rwxr-xr-x
image_datauri.html	13.43 KB	-rwxr-xr-x
image_dimensions.html	920 B	-rwxr-xr-x
image_gif.html	258 B	-rwxr-xr-x
image_remote.html	1.46 KB	-rwxr-xr-x
image_transparent_gif.html	524 B	-rwxr-xr-x
image_transparent_png.html	6.34 KB	-rwxr-xr-x
image_variants.html	9.52 KB	-rwxr-xr-x
page_pages.html	9.46 KB	-rwxr-xr-x
print_header_footer.html	8.25 KB	-rwxr-xr-x
quirks_center_table.html	316 B	-rwxr-xr-x
quirks_font_tag.html	1.85 KB	-rwxr-xr-x
quirks_html_attributes.html	2.2 KB	-rwxr-xr-x
script_javascript.html	429 B	-rwxr-xr-x
script_php.php	818 B	-rwxr-xr-x

Code Editor : image_variants.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style>
body {
  color: #7d7a7a;
  font-family: sans-serif;
}
div.bgimages a {
  padding-left:20px;
  background:url(images/pdf.png) no-repeat yellow;
}
div.bgimages ul {
  text-align: left;
  line-height:170%;
}
</style>
</head>

<h2> 40% of box width:</h2>
<div style="width:360pt; border:1pt solid #7d7a7a">
<img style="width:40%;" src="images/dompdf_simple.png"/>
</div>

<h2>multiple identical images jpg:</h2>
<img src="images/goldengate.jpg" width="204" height="272"/>
<img src="images/goldengate.jpg" width="204" height="272"/>
<img src="images/goldengate.jpg" width="204" height="272"/>

<h2>multiple identical images gif (will be recoded to png by dompdf):</h2>
<img src="images/what_ordered.gif" width="560" height="272"/>
<img src="images/what_ordered.gif" width="560" height="272"/>
<img src="images/what_ordered.gif" width="560" height="272"/>

<h2>multiple identical images png:</h2>
<img src="images/dompdf_simple.png" width="200" height="76"/>
<img src="images/dompdf_simple.png" width="200" height="76"/>
<img src="images/dompdf_simple.png" width="200" height="76"/>

<h2>local png image with alpha channel:</h2>
<img src="images/dokuwiki-128.png" width="128" height="128"/>

<h2 style="color:red;">Attention!</h2>

<p style="color:red;">For external images to work, the following configuration is required:</p>
<pre style="color:red;">dompdf_config.inc.php :</pre>

<pre style="color:red;">define("DOMPDF_ENABLE_REMOTE", true);</pre>

<h2>external png Image with alpha channel:</h2>
<img src="http://www.dokuwiki.org/lib/exe/fetch.php?media=wiki:dokuwiki-128.png" width="128" height="128" />

<h2>external image, dynamically created with id in url parameter at end of parameter(.jpg):</h2>
<img src="http://www.dokuwiki.org/lib/exe/fetch.php?media=example:sunset.jpg" width="500" height="375" />

<h2>external image, dynamically created with id in url parameter not at end of parameter (.jpg):</h2>
<img src="https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000" />

<h2>external Image without file extension (.jpg):</h2>
<img width="200" height="300" src="http://placekitten.com/g/200/300" />

<h2><a name="bgimages">Background images</a></h2>
<div class="bgimages">
<ul>
<li><a href="bgimages">no-repeat position:default</a></li>
<li><a href="bgimages" style="background-position:left center;">no-repeat position:left-center</a></li>
<li><a href="bgimages" style="background-position:left bottom;">no-repeat position:left-bottom</a></li>
<li><a href="bgimages" style="background-position:right bottom;">no-repeat position:right-bottom</a></li>
<li><a href="bgimages" style="background-position:center center;">no-repeat position:center-center</a></li>
<li><a href="bgimages" style="background-position:50% 50%;">no-repeat position:50%-50%</a></li>
<li><a href="bgimages" style="background-position:4px 8px;">no-repeat position:4px-8px</a></li>
<li><a href="bgimages" style="background-position:-4px -8px;">no-repeat position:-4px--8px</a></li>
<li><a href="bgimages" style="background-position:32px 0px;">no-repeat position:32px-0px</a></li>
<li><a href="bgimages" style="background-position:0px 8px;">no-repeat position:0px-8px</a></li>
</ul>
<ul>
<li><a href="bgimages" style="background-repeat:repeat-y;">repeat-y position:default</a></li>
<li><a href="bgimages" style="background-repeat:repeat-y; background-position:left center;">repeat-y position:left-center</a></li>
<li><a href="bgimages" style="background-repeat:repeat-y; background-position:left bottom;">repeat-y position:left-bottom</a></li>
<li><a href="bgimages" style="background-repeat:repeat-y; background-position:right bottom;">repeat-y position:right-bottom</a></li>
<li><a href="bgimages" style="background-repeat:repeat-y; background-position:center center;">repeat-y position:center-center</a></li>
<li><a href="bgimages" style="background-repeat:repeat-y; background-position:50% 50%;">repeat-y position:50%-50%</a></li>
<li><a href="bgimages" style="background-repeat:repeat-y; background-position:4px 8px;">repeat-y position:4px-8px</a></li>
<li><a href="bgimages" style="background-repeat:repeat-y; background-position:-4px -8px;">repeat-y position:-4px--8px</a></li>
<li><a href="bgimages" style="background-repeat:repeat-y; background-position:32px 0px;">repeat-y position:32px-0px</a></li>
<li><a href="bgimages" style="background-repeat:repeat-y; background-position:0px 8px;">repeat-y position:0px-8px</a></li>
</ul>
<ul>
<li><a href="bgimages" style="background-repeat:repeat-x;">repeat-x position:default</a></li>
<li><a href="bgimages" style="background-repeat:repeat-x; background-position:left center;">repeat-x position:left-center</a></li>
<li><a href="bgimages" style="background-repeat:repeat-x; background-position:left bottom;">repeat-x position:left-bottom</a></li>
<li><a href="bgimages" style="background-repeat:repeat-x; background-position:right bottom;">repeat-x position:right-bottom</a></li>
<li><a href="bgimages" style="background-repeat:repeat-x; background-position:center center;">repeat-x position:center-center</a></li>
<li><a href="bgimages" style="background-repeat:repeat-x; background-position:50% 50%;">repeat-x position:50%-50%</a></li>
<li><a href="bgimages" style="background-repeat:repeat-x; background-position:4px 8px;">repeat-x position:4px-8px</a></li>
<li><a href="bgimages" style="background-repeat:repeat-x; background-position:-4px -8px;">repeat-x position:-4px--8px</a></li>
<li><a href="bgimages" style="background-repeat:repeat-x; background-position:32px 0px;">repeat-x position:32px-0px</a></li>
<li><a href="bgimages" style="background-repeat:repeat-x; background-position:0px 8px;">repeat-x position:0px-8px</a></li>
</ul>
<ul>
<li><a href="bgimages" style="background-repeat:repeat;">repeat position:default</a></li>
<li><a href="bgimages" style="background-repeat:repeat; background-position:left center;">repeat position:left-center</a></li>
<li><a href="bgimages" style="background-repeat:repeat; background-position:left bottom;">repeat position:left-bottom</a></li>
<li><a href="bgimages" style="background-repeat:repeat; background-position:right bottom;">repeat position:right-bottom</a></li>
<li><a href="bgimages" style="background-repeat:repeat; background-position:center center;">repeat position:center-center</a></li>
<li><a href="bgimages" style="background-repeat:repeat; background-position:50% 50%;">repeat position:50%-50%</a></li>
<li><a href="bgimages" style="background-repeat:repeat; background-position:4px 8px;">repeat position:4px-8px</a></li>
<li><a href="bgimages" style="background-repeat:repeat; background-position:-4px -8px;">repeat position:-4px--8px</a></li>
<li><a href="bgimages" style="background-repeat:repeat; background-position:32px 0px;">repeat position:32px-0px</a></li>
<li><a href="bgimages" style="background-repeat:repeat; background-position:0px 8px;">repeat position:0px-8px</a></li>
</ul>
<ul>
<li><a href="bgimages" style="background-position:32px 8px;">no-repeat position:32px-8px</a></li>
<li><a href="bgimages" style="background-position:32pt 8pt;">no-repeat position:32pt-8pt</a></li>
<li><a href="bgimages" style="background-position:32px 32px;">no-repeat position:32px-32px</a></li>
<li><a href="bgimages" style="background-position:-16px -16px;">no-repeat position:-16px--16px</a></li>
</ul>
<ul>
<li><a href="bgimages" style="background-image:url(http://www.dokuwiki.org/lib/images/fileicons/html.png);">no-repeat position:default image:url(http://www.dokuwiki.org/lib/images/fileicons/html.png) [image remote]</a></li>
<li><a href="bgimages" style="background-image:url(images/png.png);">no-repeat position:default image:url(images/png.png) [image in subfolder]</a></li>
<li><a href="bgimages" style="background-image:url(images/html.png);">no-repeat position:default image:url(html.png) [image in same folder]</a></li>

<li><a href="bgimages" style="background-image:url(images/html.png);">no-repeat position:default image:url(html.png) [image in same folder]
Added very long description, to see if non repeating background image is repeated after a line break.
blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah,
blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah,
...      
</a></li>

<h2 style="color:red;">Attention!</h2>
<p style="color:red;">For absolute image references to work, the file (dompdf)/www/test/images/smiley.png must be copyied exactly to (virtual web server root)/absimagetest/smiley.png</p>
<li><a href="bgimages" style="background-image:url(/absimagetest/smiley.png);">no-repeat position:default image:url(/absimagetest/smiley.png) [abs image ]</a></li>
</ul>
</div>
<p><a href="bgimages" style="line-height:170%;padding-left:20px;background:url(images/pdf.png) no-repeat yellow;background-position:left top;">paragraph link no-repeat position:default</a></p>
<p style="text-align:left;line-height:170%;padding-left:20px;background:url(images/pdf.png) no-repeat yellow;background-position:left top;">paragraph text no-repeat position:left-top; more text text more text text bla bla sdfjkhs sdfsjksdfks sdfkjsfsf skjfh ksjdfhsd </p>
<p style="text-align:left;line-height:170%;padding-left:20px;background:url(images/pdf.png) no-repeat yellow;background-position:left center;">paragraph text no-repeat position:left-center; more text text more text text bla bla sdfjkhs sdfsjksdfks sdfkjsfsf skjfh ksjdfhsd </p>
<p>
<span>The PHP 5 HTML to PDF converter</span>
</p>

</div>

</body> </html>

${this.title}

Code Editor : image_variants.html