Text layout & Sliver update & Flow Refactor

integration_tests/specs/css/css-text/line-join.ts

@@ -0,0 +1,294 @@
+describe('Text Line Join', () => {
+  it('works with pre span', async () => {
+    let p = createElement(
+      'p',
+      {
+        xmlns: 'http://www.w3.org/1999/xhtml',
+        style: {
+          direction: 'ltr',
+        },
+      },
+      [
+        createElement(
+        'String',
+        {
+          style: {},
+        },
+        [createText(`Begin `)]
+        ),
+        createText(` pre text.`)
+      ]
+    );
+    document.body.appendChild(p);
+    await snapshot();
+  });
+
+  it('works with pre span and second line break', async () => {
+    let p = createElement(
+      'p',
+      {
+        xmlns: 'http://www.w3.org/1999/xhtml',
+        style: {
+          direction: 'ltr',
+        },
+      },
+      [
+        createElement(
+        'Strong',
+        {
+          style: {},
+        },
+        [createText(`pre text, `)]
+        ),
+        createText(`this is very long long long line to build break. `)
+      ]
+    );
+    document.body.appendChild(p);
+    await snapshot();
+  });
+
+  it('works with pre span and first line break', async () => {
+    let p = createElement(
+      'p',
+      {
+        xmlns: 'http://www.w3.org/1999/xhtml',
+        style: {
+          direction: 'ltr',
+        },
+      },
+      [
+        createElement(
+        'Strong',
+        {
+          style: {},
+        },
+        [
+          createText(`Begin, his is very long long long line to build break, `),
+          createText(`pre text.`),
+        ]
+        ),
+      ]
+    );
+    document.body.appendChild(p);
+    await snapshot();
+  });
+
+  it('works with more text join', async () => {
+    let p = createElement(
+      'p',
+      {
+        xmlns: 'http://www.w3.org/1999/xhtml',
+        style: {
+          direction: 'ltr',
+        },
+      },
+      [
+        createElement(
+        'Strong',
+        {
+          style: {},
+        },
+        [
+          createText(`A text with `),
+          createText(`B text.`),
+          createText(`C text. Join next text.`),
+          createText(`pre text.`)],
+        ),
+      ]
+    );
+    document.body.appendChild(p);
+    await snapshot();
+  });
+
+  it('works with inlineBlock', async () => {
+    let p = createElement(
+      'p',
+      {
+        xmlns: 'http://www.w3.org/1999/xhtml',
+        style: {
+          direction: 'ltr',
+        },
+      },
+      [
+        createElement('div', {
+          style: {
+            'background-color': 'green',
+            height: '20px',
+            width: '20px',
+            'box-sizing': 'border-box',
+            display: 'inline-block'
+          },
+        }),
+        createElement(
+        'Strong ',
+        {
+          style: {},
+        },
+        [
+          createText(`A text with `),
+          createText(`B text.`),
+          createText(`pre text.`)],
+        ),
+      ]
+    );
+    document.body.appendChild(p);
+    await snapshot();
+  });
+
+  it('works with join two inline element', async () => {
+    let div = createElement(
+      'div',
+      {
+        style: {
+          width: '100px',
+          backgroundColor:'#ff2'
+        },
+      },
+      [
+        createElement('span', {
+          style: {
+          },
+        },[createText(`ffffffffffff`)]),
+        createElement('span', {
+          style: {
+          },
+        },[createText(`In this article`),]),
+      ]
+    );
+    document.body.appendChild(div);
+    await snapshot();
+  });
+
+  it('works with join two inline element and img', async () => {
+    let div = createElement(
+      'div',
+      {
+        style: {
+          width: '100px',
+          backgroundColor:'#ff2'
+        },
+      },
+      [
+        createElement('span', {
+          style: {
+          },
+        },[createText(`A`)]),
+        createElement('span', {
+          style: {
+          },
+        },[
+          createElement('img', {
+            src: 'assets/blue15x15.png',
+            width: '15',
+            height: '15',
+            style: {
+            },
+          }),
+          createText(`In this article`),
+        ]),
+      ]
+    );
+    document.body.appendChild(div);
+    await snapshot();
+  });
+
+  it('works with join two inline element and img and more text', async () => {
+    let div = createElement(
+      'div',
+      {
+        style: {
+          width: '100px',
+          backgroundColor:'#ff2'
+        },
+      },
+      [
+        createElement('span', {
+          style: {
+          },
+        },[createText(`AAA`)]),
+        createElement('span', {
+          style: {
+          },
+        },[
+          createElement('img', {
+            src: 'assets/blue15x15.png',
+            width: '15',
+            height: '15',
+            style: {
+            },
+          }),
+          createText(`In this article`),
+        ]),
+      ]
+    );
+    document.body.appendChild(div);
+    await snapshot();
+  }); 
+
+  it('works with join two inline element and img and more text', async () => {
+    let div = createElement(
+      'div',
+      {
+        style: {
+          width: '100px',
+          backgroundColor:'#ff2'
+        },
+      },
+      [
+        createElement('span', {
+          style: {
+          },
+        },[createText(`AAA`)]),
+        createElement('span', {
+          style: {
+          },
+        },[
+          createText(`pre text`),
+          createElement('img', {
+            src: 'assets/blue15x15.png',
+            width: '15',
+            height: '15',
+            style: {
+            },
+          }),
+          createText(`In this article, test of in the picture`),
+        ]),
+      ]
+    );
+    document.body.appendChild(div);
+    await snapshot();
+  }); 
+
+  it('works with join two inline element and block', async () => {
+    let div = createElement(
+      'div',
+      {
+        style: {
+          width: '100px',
+          backgroundColor:'#ff2'
+        },
+      },
+      [
+        createElement('span', {
+          style: {
+          },
+        },[createText(`AAA`)]),
+        createElement('span', {
+          style: {
+          },
+        },[
+          createText(`pre text`),
+          createElement('div', {
+            width: '15',
+            height: '15',
+            style: {
+            },
+          }),
+          createText(`In this article, test of in the picture`),
+        ]),
+      ]
+    );
+    document.body.appendChild(div);
+    await snapshot();
+  });
+});

webf/lib/rendering.dart

@@ -13,6 +13,7 @@ export 'src/rendering/resize_observer.dart';
 export 'src/rendering/box_model.dart';
 export 'src/rendering/replaced.dart';
 export 'src/rendering/sliver_list.dart';
+export 'src/rendering/resize_observer.dart';
 export 'src/rendering/preferred_size.dart';
 export 'src/rendering/render_position_holder.dart';
 export 'src/rendering/text.dart';
@@ -29,3 +30,7 @@ export 'src/rendering/paragraph.dart';
 export 'src/rendering/line_break.dart';
 export 'src/rendering/image.dart';
 export 'src/rendering/webf_render_list.dart';
+export 'src/rendering/logic_box.dart';
+
+export 'src/rendering/logic_box.dart';
+

webf/lib/src/css/border.dart

@@ -85,6 +85,11 @@ mixin CSSBorderMixin on RenderStyle {
     return Size(border.left + innerSize.width + border.right, border.top + innerSize.height + border.bottom);
   }
 
+  Size wrapBorderSizeRight(Size innerSize) {
+    return Size(innerSize.width + border.right,
+        border.top + innerSize.height + border.bottom);
+  }
+
   BoxConstraints deflateBorderConstraints(BoxConstraints constraints) {
     return constraints.deflate(border);
   }

webf/lib/src/css/computed_style_declaration.dart

@@ -747,6 +747,8 @@ extension VerticalAlignText on VerticalAlign {
         return 'top';
       case VerticalAlign.bottom:
         return 'bottom';
+      case VerticalAlign.textBottom:
+        return 'textBottom';
     }
   }
 }

webf/lib/src/css/css_animation.dart

@@ -204,6 +204,7 @@ mixin CSSAnimationMixin on RenderStyle {
 
             target.dispatchEvent(AnimationEvent(EVENT_ANIMATION_END, animationName: name));
             animation.dispose();
+            _runningAnimation.remove(name);
           };
 
           _runningAnimation[name] = animation;

webf/lib/src/css/inline.dart

@@ -21,6 +21,9 @@ enum VerticalAlign {
   /// Aligns the middle of the element with the baseline plus half the x-height of the parent.
   /// @TODO not supported
   ///  middle,
+  //
+  /// Aligns the bottom of the element with the bottom of the parent element's font.
+  textBottom,
 }
 
 mixin CSSInlineMixin on RenderStyle {
@@ -40,6 +43,8 @@ mixin CSSInlineMixin on RenderStyle {
         return VerticalAlign.top;
       case BOTTOM:
         return VerticalAlign.bottom;
+      case TEXT_BOTTOM:
+        return VerticalAlign.textBottom;
     }
     return VerticalAlign.baseline;
   }

webf/lib/src/css/keywords.dart

@@ -210,6 +210,7 @@ const String LEFT = 'left';
 const String RIGHT = 'right';
 const String TOP = 'top';
 const String BOTTOM = 'bottom';
+const String TEXT_BOTTOM = 'text-bottom';
 
 const String CENTER = 'center';
 

webf/lib/src/css/padding.dart

@@ -85,6 +85,12 @@ mixin CSSPaddingMixin on RenderStyle {
         paddingTop.computedValue + innerSize.height + paddingBottom.computedValue);
   }
 
+  Size wrapPaddingSizeRight(Size innerSize) {
+    return Size(
+        innerSize.width + paddingRight.computedValue,
+        paddingTop.computedValue + innerSize.height + paddingBottom.computedValue
+    );
+  }
   void debugPaddingProperties(DiagnosticPropertiesBuilder properties) {
     properties.add(DiagnosticsProperty('padding', padding));
   }

webf/lib/src/css/sliver.dart

@@ -5,6 +5,7 @@
 
 import 'package:flutter/rendering.dart';
 import 'package:webf/css.dart';
+import 'package:webf/rendering.dart';
 
 mixin CSSSliverMixin on RenderStyle {
   @override
@@ -13,6 +14,9 @@ mixin CSSSliverMixin on RenderStyle {
   set sliverDirection(Axis? value) {
     if (_sliverDirection == value) return;
     _sliverDirection = value;
+    if(renderBoxModel!=null && renderBoxModel is RenderSliverListLayout) {
+      (renderBoxModel as RenderSliverListLayout).refreshAxis();
+    }
     renderBoxModel?.markNeedsLayout();
   }