demo: started border-width

demo/Button/MainUnit.lfm

@@ -7,13 +7,13 @@ object MainForm: TMainForm
   Stylesheet.Strings = (
     'div {'
     '  padding: 3px; '
-    '  border: 2px; '
+    '  border: 2px solid black; '
     '  margin: 6px;'
     '}'
   )
   OnCreate = MainFormCreate
   object Body1: TBody
-    Style = 'border: 2px;'#10'border-color: blue;'
+    Style = 'border: 2px solid blue;'#10
     object Div1: TDiv
       Style = 'background-color: blue;'#10'border-color: black;'#10'height:50px;'
       OnMouseDown = Div1MouseDown

demo/Button/MainUnit.pas

@@ -68,9 +68,10 @@ end;
 
 procedure TMainForm.MainFormCreate(Sender: TObject);
 begin
+
   Div1.Style:=
      'background:#44c767;'
-    +'border-width:1px;'
+    +'border-width:7px;'
     +'border-color:#18ab29;'
     +'padding:16px 31px;'
     +'font-size:15px; font-family:Arial; font-weight:bold;'

demo/ButtonGenerator/MainUnit.pas

@@ -14,12 +14,13 @@ type
   TFresnelForm1 = class(TFresnelForm)
     procedure FresnelForm1Create(Sender: TObject);
   private
-    procedure FontSizeSliderChange(Sender: TObject);
+    procedure OnPropChange(Sender: TObject);
     procedure UpdateButton;
   public
     ButtonDiv: TDiv;
     ButtonLabel: TLabel;
     FontSizeSlider: TDemoSlider;
+    BorderWidthSlider: TDemoSlider;
   end;
 
 var
@@ -55,9 +56,21 @@ begin
     MaxPosition:=40;
     Position:=12;
     Parent:=Self;
-    OnChange:=@FontSizeSliderChange;
+    OnChange:=@OnPropChange;
   end;
 
+  BorderWidthSlider:=TDemoSlider.Create(Self);
+  with BorderWidthSlider do begin
+    Name:='BorderWidthSlider';
+    Caption:='Border Width:';
+    Style:='width: 100px';
+    ValueFormat:='%.0fpx';
+    MinPosition:=0;
+    MaxPosition:=10;
+    Position:=1;
+    Parent:=Self;
+    OnChange:=@OnPropChange;
+  end;
 
   ButtonDiv:=TDiv.Create(Self);
   with ButtonDiv do begin
@@ -71,7 +84,7 @@ begin
   end;
 end;
 
-procedure TFresnelForm1.FontSizeSliderChange(Sender: TObject);
+procedure TFresnelForm1.OnPropChange(Sender: TObject);
 begin
   UpdateButton;
 end;
@@ -79,7 +92,9 @@ end;
 procedure TFresnelForm1.UpdateButton;
 begin
   if ButtonDiv=nil then exit;
-  ButtonDiv.Style:='font-size:'+FloatToStr(FontSizeSlider.Position)+'px;';
+  ButtonDiv.Style:=
+    'font-size:'+FloatToStr(FontSizeSlider.Position)+'px;'
+    +'border-width:'+FloatToStr(BorderWidthSlider.Position)+'px;'
 end;
 
 end.

src/base/fresnel.dom.pas

@@ -3104,6 +3104,7 @@ var
   StyleAttr: TFresnelCSSAttribute;
   aStyle: String;
 begin
+  // check style, because without style the border-width becomes 0
   StyleAttr:=TFresnelCSSAttribute(ord(fcaBorderLeftStyle)+ord(Attr)-ord(fcaBorderLeftWidth));
   aStyle:=GetComputedCSSString(StyleAttr,false);
   if (aStyle='') or (aStyle='none') then

src/base/fresnel.layouter.pas

@@ -687,6 +687,8 @@ begin
 
     CurSpace:=Max(0,MaxChildRight-FLineBorderBoxRight-Max(FLineMarginRight,ChildMarginLeft)-ChildMarginRight);
 
+    //writeln('TFLBlockFormattingContext.ComputeLayoutBorderBox ',ChildEl.GetPath,' Margin=',FloatToStr(ChildMarginLeft),',',FloatToStr(ChildMarginTop),',',FloatToStr(ChildMarginRight),',',FloatToStr(ChildMarginBottom),' Border=',FloatToStr(ChildBorderLeft),',',FloatToStr(ChildBorderTop),',',FloatToStr(ChildBorderRight),',',FloatToStr(ChildBorderBottom),' Padding=',FloatToStr(ChildPaddingLeft),',',FloatToStr(ChildPaddingTop),',',FloatToStr(ChildPaddingRight),',',FloatToStr(ChildPaddingBottom));
+
     // width, height are contentbox and can be NaN
     ChildWidth:=ChildEl.GetComputedCSSLength(fcaWidth,false,true);
     ChildHeight:=ChildEl.GetComputedCSSLength(fcaHeight,false,true);
@@ -695,7 +697,7 @@ begin
     ChildMinHeight:=ChildEl.GetComputedCSSLength(fcaMinHeight,false,true);
     ChildMaxHeight:=ChildEl.GetComputedCSSLength(fcaMaxHeight,false,true);
 
-    //writeln('TFLBlockFormattingContext.ComputeLayoutBorderBox ',ChildEl.Name,' Commit=',Commit,' ChildWidth=',ChildWidth,' ChildHeight=',ChildHeight);
+    //writeln('TFLBlockFormattingContext.ComputeLayoutBorderBox ',ChildEl.GetPath,' Commit=',Commit,' ChildWidth=',ChildWidth,' ChildHeight=',ChildHeight);
 
     if (not IsNan(ChildMinWidth)) and (not IsNan(ChildMaxWidth)) and (ChildMinWidth>=ChildMaxWidth) then
       ChildWidth:=ChildMinWidth;

src/skia/fresnel.skiarenderer.pas

@@ -436,7 +436,7 @@ const
   end;
 
 var
-  HasBorder, HasRadius: Boolean;
+  HasBorder, HasRadius, SameBorderWidth: Boolean;
   r: TRectF;
   Corner: TFresnelCSSCorner;
   Radii: TSkRoundRectRadii;
@@ -454,8 +454,13 @@ begin
     exit;
   end;
 
+  SameBorderWidth:=true;
   for Side in TFresnelCSSSide do
+  begin
     NormStroke(Params.Width[Side],true);
+    if (Side>Low(Side)) and (not SameValue(Params.Width[Side],Params.Width[Low(Side)])) then
+      SameBorderWidth:=false;
+  end;
 
   HasBorder:=(Params.Width[ffsLeft]>0)
          or (Params.Width[ffsRight]>0)
@@ -491,7 +496,7 @@ begin
   r.Offset(Params.Box.Left+Origin.X,Params.Box.Top+Origin.Y);
   //writeln('TFresnelSkiaRenderer.DrawElBorder ',El.GetPath,' Box=',Params.Box.ToString,' Origin=',Origin.ToString,' r=',r.Left,',',r.Top,',',r.Right,',',r.Bottom);
 
-  // draw background
+  // draw background color
   if Params.BackgroundColorFP.Alpha>alphaTransparent then
   begin
     SkPaint:=TSkPaint.Create(TSkPaintStyle.Fill);
@@ -513,7 +518,7 @@ begin
     // todo border-right
     SkPaint:=TSkPaint.Create(TSkPaintStyle.Stroke);
     SkPaint.setColor(FPColorToSkia(Params.Color[ffsLeft]));
-    SkPaint.SetStrokeWidth(1);
+    SkPaint.SetStrokeWidth(Params.Width[ffsLeft]);
     SkPaint.SetAntiAlias(true);
     if HasRadius then
     begin