From 7886262fea00edd232f2e089e84eebedcb670d90 Mon Sep 17 00:00:00 2001
From: ArthurHub <thekingarthur@gmail.com>
Date: Mon, 23 Sep 2013 19:04:16 +0300
Subject: [PATCH] update sample html

---
 Source/Demo/Samples/05.Images.htm | 80 ++++++++++++++++++-------------
 1 file changed, 47 insertions(+), 33 deletions(-)
diff --git a/Source/Demo/Samples/05.Images.htm b/Source/Demo/Samples/05.Images.htm
index 54e5be67e..bd76e5b3a 100644
--- a/Source/Demo/Samples/05.Images.htm
+++ b/Source/Demo/Samples/05.Images.htm
@@ -3,86 +3,100 @@
     <title></title>
     <link rel="Stylesheet" href="StyleSheet" />
     <style>
-        td
-        {
+        .tag {
+            color: rgb(128,0,0);
+        }
+
+        .att {
+            color: rgb(240,0,0);
+        }
+
+        .prop {
+            color: rgb(128,0,171);
+        }
+
+        td {
             vertical-align: middle;
             padding: 1em;
         }
     </style>
 </head>
 <body>
-    <h1>
-        Images
+    <h1>Images
         <img src="ImageIcon" />
     </h1>
     <blockquote>
         <p>
-            Of course, there's the capability of displaying images. In this release, images
-            lack of the expected alignment features to behave just as expected on an HTML context,
-            but they will do just fine for inline contexts, tables and some others.</p>
-        <h2>
-            Inserting images
+            HTML Renderer supports <code class="tag">img</code> tag as well as CSS <code class="prop">background-image</code> property.
+            <br />
+            Image data can be provided by URI, file path, base64 encoded and code interception.
+            
+        </p>
+
+        <h2>Loading image
         </h2>
         <p>
-            We all know that the <code>src</code> attribute of the <code>img</code> HTML tag
-            can be a relative or absolute path to an image on the same or any other server.
-            Here things are slightly different. Images can come from other sources:</p>
-        <ul>
-            <li><b>File Paths</b>: If you place a path to a file, the Renderer will try to load
-                it using <code><font color="#099">Image</font>.FromFile</code></li>
-            <li><b>Static Properties:</b> Obtains the image from a static property that returns
-                an <code><font color="#099">Image</font></code> object</li>
-            <li><b>Static Methods:</b> Obtains the image from a static method that takes no arguments
-                and returns an <code><font color="#099">Image</font></code> </li>
-        </ul>
-        <h2>
-            Positioning Images
-        </h2>
+            <h3>URI</h3>
+        </p>
+        <p>
+            <h3>File path</h3>
+        </p>
+        <p>
+            <h3>Base64 encoded</h3>
+        </p>
+        <p>
+            <h3>Intercept</h3>
+        </p>
+        <h2>img tag</h2>
         <p>
             You can use Images anyway you like, apply borders margin and padding as for any
             other box.
+            <div style="margin-top: 10px;">
+                <b>Limitation</b>
+                <br />
+                Image <code class="att">align</code> attribute and CSS <code class="prop">float</code> property are not yet supported.
+            </div>
         </p>
         <table border="1">
             <tr>
-                <td>
-                    Just an image:
+                <td>Just an image:
                 </td>
                 <td align="center">
                     <img src="FontIcon" />
                 </td>
             </tr>
             <tr>
-                <td>
-                    Image with border and background:
+                <td>Image with border and background:
                 </td>
                 <td align="center">
                     <img src="FontIcon" style="border: 1px solid blue; background-color: Silver" />
                 </td>
             </tr>
             <tr>
-                <td>
-                    Stretched Image:
+                <td>Stretched Image:
                 </td>
                 <td align="center">
                     <img src="FontIcon" width="50" height="50" />
                 </td>
             </tr>
             <tr>
-                <td>
-                    Huge padding and border:
+                <td>Huge padding and border:
                 </td>
                 <td>
                     <img align="center" src="FontIcon" style="padding: 1em; border: solid 1em blue; background-color: #def" />
                 </td>
             </tr>
             <tr>
-                <td colspan="2" align="center" valign="middle">
-                    Image in line
+                <td colspan="2" align="center" valign="middle">Image in line
                     <img src="CommentIcon" />
                     with the text
                 </td>
             </tr>
         </table>
+
+        <h2>Background images
+        </h2>
+
     </blockquote>
 </body>
 </html>

- Just an image: +	Just an image:
- Image with border and background: +	Image with border and background:
- Stretched Image: +	Stretched Image:
- Huge padding and border: +	Huge padding and border:
- Image in line +		Image in line with the text