source: trunk/filemanager/tp/dompdf/www/test/image_variants.html @ 2000

Revision 2000, 9.7 KB checked in by amuller, 14 years ago (diff)

Ticket #597 - Implementação do módulo gerenciador de arquivos
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2<html>
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
5<style>
6body {
7  color: #7d7a7a;
8  font-family: sans-serif;
9}
10div.bgimages a {
11  padding-left:20px;
12  background:url(images/pdf.png) no-repeat yellow;
13}
14div.bgimages ul {
15  text-align: left;
16  line-height:170%;
17}
18</style>
19</head>
20
21<body>
22<div style="text-align: center;">
23
24<h2> 40% of box width:</h2>
25<div style="width:360pt; border:1pt solid #7d7a7a">
26<img style="width:40%;" src="images/dompdf_simple.png"/>
27</div>
28
29<h2>multiple identical images jpg:</h2>
30<img src="images/goldengate.jpg" width="204" height="272"/>
31<img src="images/goldengate.jpg" width="204" height="272"/>
32<img src="images/goldengate.jpg" width="204" height="272"/>
33
34<h2>multiple identical images gif (will be recoded to png by dompdf):</h2>
35<img src="images/what_ordered.gif" width="560" height="272"/>
36<img src="images/what_ordered.gif" width="560" height="272"/>
37<img src="images/what_ordered.gif" width="560" height="272"/>
38
39<h2>multiple identical images png:</h2>
40<img src="images/dompdf_simple.png" width="200" height="76"/>
41<img src="images/dompdf_simple.png" width="200" height="76"/>
42<img src="images/dompdf_simple.png" width="200" height="76"/>
43
44<h2>local png image with alpha channel:</h2>
45<img src="images/dokuwiki-128.png" width="128" height="128"/>
46
47<h2 style="color:red;">Attention!</h2>
48
49<p style="color:red;">For external images to work, the following configuration is required:</p>
50<pre style="color:red;">dompdf_config.inc.php :</pre>
51
52<pre style="color:red;">define("DOMPDF_ENABLE_REMOTE", true);</pre>
53
54<h2>external png Image with alpha channel:</h2>
55<img src="http://www.dokuwiki.org/lib/exe/fetch.php?media=wiki:dokuwiki-128.png" width="128" height="128" />
56
57<h2>external image, dynamically created with id in url parameter at end of parameter(.jpg):</h2>
58<img src="http://www.dokuwiki.org/lib/exe/fetch.php?media=example:sunset.jpg" width="500" height="375" />
59
60<h2>external image, dynamically created with id in url parameter not at end of parameter (.jpg):</h2>
61<img src="http://www.dokuwiki.org/lib/exe/fetch.php?media=example:sunset.jpg&w=100" width="100" height="75" />
62
63<h2>external Image without file extension (.gif):</h2>
64<img width="82" height="233" src="http://www.taz.de/fileadmin/templates/neu/images/logo" />
65
66<h2><a name="bgimages">Background images</a></h2>
67<div class="bgimages">
68<ul>
69<li><a href="bgimages">no-repeat position:default</a></li>
70<li><a href="bgimages" style="background-position:left center;">no-repeat position:left-center</a></li>
71<li><a href="bgimages" style="background-position:left bottom;">no-repeat position:left-bottom</a></li>
72<li><a href="bgimages" style="background-position:right bottom;">no-repeat position:right-bottom</a></li>
73<li><a href="bgimages" style="background-position:center center;">no-repeat position:center-center</a></li>
74<li><a href="bgimages" style="background-position:50% 50%;">no-repeat position:50%-50%</a></li>
75<li><a href="bgimages" style="background-position:4px 8px;">no-repeat position:4px-8px</a></li>
76<li><a href="bgimages" style="background-position:-4px -8px;">no-repeat position:-4px--8px</a></li>
77<li><a href="bgimages" style="background-position:32px 0px;">no-repeat position:32px-0px</a></li>
78<li><a href="bgimages" style="background-position:0px 8px;">no-repeat position:0px-8px</a></li>
79</ul>
80<ul>
81<li><a href="bgimages" style="background-repeat:repeat-y;">repeat-y position:default</a></li>
82<li><a href="bgimages" style="background-repeat:repeat-y; background-position:left center;">repeat-y position:left-center</a></li>
83<li><a href="bgimages" style="background-repeat:repeat-y; background-position:left bottom;">repeat-y position:left-bottom</a></li>
84<li><a href="bgimages" style="background-repeat:repeat-y; background-position:right bottom;">repeat-y position:right-bottom</a></li>
85<li><a href="bgimages" style="background-repeat:repeat-y; background-position:center center;">repeat-y position:center-center</a></li>
86<li><a href="bgimages" style="background-repeat:repeat-y; background-position:50% 50%;">repeat-y position:50%-50%</a></li>
87<li><a href="bgimages" style="background-repeat:repeat-y; background-position:4px 8px;">repeat-y position:4px-8px</a></li>
88<li><a href="bgimages" style="background-repeat:repeat-y; background-position:-4px -8px;">repeat-y position:-4px--8px</a></li>
89<li><a href="bgimages" style="background-repeat:repeat-y; background-position:32px 0px;">repeat-y position:32px-0px</a></li>
90<li><a href="bgimages" style="background-repeat:repeat-y; background-position:0px 8px;">repeat-y position:0px-8px</a></li>
91</ul>
92<ul>
93<li><a href="bgimages" style="background-repeat:repeat-x;">repeat-x position:default</a></li>
94<li><a href="bgimages" style="background-repeat:repeat-x; background-position:left center;">repeat-x position:left-center</a></li>
95<li><a href="bgimages" style="background-repeat:repeat-x; background-position:left bottom;">repeat-x position:left-bottom</a></li>
96<li><a href="bgimages" style="background-repeat:repeat-x; background-position:right bottom;">repeat-x position:right-bottom</a></li>
97<li><a href="bgimages" style="background-repeat:repeat-x; background-position:center center;">repeat-x position:center-center</a></li>
98<li><a href="bgimages" style="background-repeat:repeat-x; background-position:50% 50%;">repeat-x position:50%-50%</a></li>
99<li><a href="bgimages" style="background-repeat:repeat-x; background-position:4px 8px;">repeat-x position:4px-8px</a></li>
100<li><a href="bgimages" style="background-repeat:repeat-x; background-position:-4px -8px;">repeat-x position:-4px--8px</a></li>
101<li><a href="bgimages" style="background-repeat:repeat-x; background-position:32px 0px;">repeat-x position:32px-0px</a></li>
102<li><a href="bgimages" style="background-repeat:repeat-x; background-position:0px 8px;">repeat-x position:0px-8px</a></li>
103</ul>
104<ul>
105<li><a href="bgimages" style="background-repeat:repeat;">repeat position:default</a></li>
106<li><a href="bgimages" style="background-repeat:repeat; background-position:left center;">repeat position:left-center</a></li>
107<li><a href="bgimages" style="background-repeat:repeat; background-position:left bottom;">repeat position:left-bottom</a></li>
108<li><a href="bgimages" style="background-repeat:repeat; background-position:right bottom;">repeat position:right-bottom</a></li>
109<li><a href="bgimages" style="background-repeat:repeat; background-position:center center;">repeat position:center-center</a></li>
110<li><a href="bgimages" style="background-repeat:repeat; background-position:50% 50%;">repeat position:50%-50%</a></li>
111<li><a href="bgimages" style="background-repeat:repeat; background-position:4px 8px;">repeat position:4px-8px</a></li>
112<li><a href="bgimages" style="background-repeat:repeat; background-position:-4px -8px;">repeat position:-4px--8px</a></li>
113<li><a href="bgimages" style="background-repeat:repeat; background-position:32px 0px;">repeat position:32px-0px</a></li>
114<li><a href="bgimages" style="background-repeat:repeat; background-position:0px 8px;">repeat position:0px-8px</a></li>
115</ul>
116<ul>
117<li><a href="bgimages" style="background-position:32px 8px;">no-repeat position:32px-8px</a></li>
118<li><a href="bgimages" style="background-position:32pt 8pt;">no-repeat position:32pt-8pt</a></li>
119<li><a href="bgimages" style="background-position:32px 32px;">no-repeat position:32px-32px</a></li>
120<li><a href="bgimages" style="background-position:-16px -16px;">no-repeat position:-16px--16px</a></li>
121</ul>
122<ul>
123<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>
124<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>
125<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>
126
127<li><a href="bgimages" style="background-image:url(images/html.png);">no-repeat position:default image:url(html.png) [image in same folder]
128Added very long description, to see if non repeating background image is repeated after a line break.
129blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah,
130blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah,
131...     
132</a></li>
133
134
135<h2 style="color:red;">Attention!</h2>
136<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>
137<li><a href="bgimages" style="background-image:url(/absimagetest/smiley.png);">no-repeat position:default image:url(/absimagetest/smiley.png) [abs image ]</a></li>
138</ul>
139</div>
140<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>
141<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>
142<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>
143<p>
144<span>The PHP 5 HTML to PDF converter</span>
145</p>
146
147</div>
148
149</body> </html>
Note: See TracBrowser for help on using the repository browser.