Support base64 images in css content property

Author: gyfke

Source/Demo/Common/HtmlRenderer.Demo.Common.csproj

@@ -155,6 +155,9 @@
   <ItemGroup>
     <EmbeddedResource Include="Resources\image32.png" />
   </ItemGroup>
+  <ItemGroup>
+    <EmbeddedResource Include="TestSamples\32.Image in css content.htm" />
+  </ItemGroup>
   <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
   <!-- To modify your build process, add your task inside one of the targets below and uncomment it. 
        Other similar extension points exist, see Microsoft.Common.targets.

Source/Demo/Common/TestSamples/32.Image in css content.htm

@@ -69,7 +69,7 @@ public RImage Image
         /// <param name="g">the device to draw to</param>
         protected override void PaintImp(RGraphics g)
         {
-            // load image iff it is in visible rectangle
+            // load image if it is in visible rectangle
             if (_imageLoadHandler == null)
             {
                 _imageLoadHandler = new ImageLoadHandler(HtmlContainer, OnLoadImageComplete);
@@ -138,7 +138,11 @@ internal override void MeasureWordsSize(RGraphics g)
                 if (_imageLoadHandler == null && (HtmlContainer.AvoidAsyncImagesLoading || HtmlContainer.AvoidImagesLateLoading))
                 {
                     _imageLoadHandler = new ImageLoadHandler(HtmlContainer, OnLoadImageComplete);
-                    _imageLoadHandler.LoadImage(GetAttribute("src"), HtmlTag != null ? HtmlTag.Attributes : null);
+
+                    if (this.Content != null && this.Content != CssConstants.Normal)
+                        _imageLoadHandler.LoadImage(this.Content, HtmlTag != null ? HtmlTag.Attributes : null);
+                    else
+                        _imageLoadHandler.LoadImage(GetAttribute("src"), HtmlTag != null ? HtmlTag.Attributes : null);
                 }
 
                 MeasureWordSpacing(g);

Source/HtmlRenderer/Core/Dom/CssBoxImage.cs

@@ -53,6 +53,7 @@ internal abstract class CssBoxProperties
         private string _borderCollapse = "separate";
         private string _bottom;
         private string _color = "black";
+        private string _content = "normal";
         private string _cornerNwRadius = "0";
         private string _cornerNeRadius = "0";
         private string _cornerSeRadius = "0";
@@ -474,6 +475,12 @@ public string Color
             }
         }
 
+        public string Content
+        {
+            get { return _content; }
+            set { _content = value; }
+        }
+
         public string Display
         {
             get { return _display; }
@@ -646,8 +653,7 @@ public string ListStyleType
             set { _listStyleType = value; }
         }
 
-        #endregion
-
+        #endregion CSS Properties
 
         /// <summary>
         /// Gets or sets the location of the box

Source/HtmlRenderer/Core/Dom/CssBoxProperties.cs

@@ -395,6 +395,12 @@ private Dictionary<string, string> ParseCssBlockProperties(string blockSource)
             while (startIdx < blockSource.Length)
             {
                 int endIdx = blockSource.IndexOfAny(_cssBlockSplitters, startIdx);
+
+                // If blockSource contains "data:image" then skip first semicolon since it is a part of image definition
+                // example: "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA......"
+                if (startIdx >= 0 && endIdx - startIdx >= 10 && blockSource.Length - startIdx >= 10 && blockSource.IndexOf("data:image", startIdx, endIdx - startIdx) >= 0)
+                    endIdx = blockSource.IndexOfAny(_cssBlockSplitters, endIdx + 1);
+
                 if (endIdx < 0)
                     endIdx = blockSource.Length - 1;
 
@@ -485,7 +491,11 @@ private void AddProperty(string propName, string propValue, Dictionary<string, s
             }
             else if (propName == "background-image")
             {
-                properties["background-image"] = ParseBackgroundImageProperty(propValue);
+                properties["background-image"] = ParseImageProperty(propValue);
+            }
+            else if (propName == "content")
+            {
+                properties["content"] = ParseImageProperty(propValue);
             }
             else if (propName == "font-family")
             {
@@ -584,7 +594,7 @@ private void ParseFontProperty(string propValue, Dictionary<string, string> prop
         /// </summary>
         /// <param name="propValue">the value of the property to parse</param>
         /// <returns>parsed value</returns>
-        private static string ParseBackgroundImageProperty(string propValue)
+        private static string ParseImageProperty(string propValue)
         {
             int startIdx = propValue.IndexOf("url(", StringComparison.InvariantCultureIgnoreCase);
             if (startIdx > -1)

Source/HtmlRenderer/Core/Parse/CssParser.cs

@@ -146,6 +146,8 @@ public static string GetPropertyValue(CssBox cssBox, string propName)
                     return cssBox.BackgroundGradientAngle;
                 case "color":
                     return cssBox.Color;
+                case "content":
+                    return cssBox.Content;
                 case "display":
                     return cssBox.Display;
                 case "direction":
@@ -326,6 +328,9 @@ public static void SetPropertyValue(CssBox cssBox, string propName, string value
                 case "color":
                     cssBox.Color = value;
                     break;
+                case "content":
+                    cssBox.Content = value;
+                    break;
                 case "display":
                     cssBox.Display = value;
                     break;

Source/HtmlRenderer/Core/Utils/CssUtils.cs

@@ -128,7 +128,7 @@ internal static class HtmlConstants
         //        public const string cols = "cols";
         //        public const string colspan = "colspan";
         //        public const string compact = "compact";
-        //        public const string content = "content";
+        public const string content = "content";
         //        public const string coords = "coords";
         //        public const string data = "data";
         //        public const string datetime = "datetime";