Merge remote-tracking branch 'origin/main' into beta/0.14.2

integration_tests/specs/dom/elements/canvas/context2d.ts

@@ -491,4 +491,225 @@ describe('Canvas context 2d', () => {
     await snapshot(canvas);
     done();
   });
+
+  it('should work with createPattern from a canvas when repetition is repeat', async (done) => {
+    const canvas = <canvas height="300" width = "300" />;
+    document.body.appendChild(canvas);
+
+    var context = canvas.getContext('2d');
+
+    const patternCanvas = document.createElement("canvas");
+    const patternContext = patternCanvas.getContext("2d");
+    if (!patternContext) {
+      throw new Error('canvas context is null');
+    }
+
+    // Give the pattern a width and height of 50
+    patternCanvas.width = 50;
+    patternCanvas.height = 50;
+
+    // Give the pattern a background color and draw an arc
+    patternContext.fillStyle = "#fec";
+    patternContext.arc(0, 0, 50, 0, 0.5 * Math.PI);
+    patternContext.stroke();
+
+
+    if (!context) {
+      throw new Error('canvas context is null');
+    }
+
+    const pattern = context.createPattern(patternCanvas, "repeat");
+    context.fillStyle = pattern;
+    context.fillRect(0, 0, canvas.width, canvas.height);
+
+    await snapshot(canvas);
+    done();
+
+  });
+
+  it('should work with createPattern from a canvas when repetition is repeat-x', async (done) => {
+    const canvas = <canvas height="300" width = "300" />;
+    document.body.appendChild(canvas);
+
+    var context = canvas.getContext('2d');
+
+    const patternCanvas = document.createElement("canvas");
+    const patternContext = patternCanvas.getContext("2d");
+    if (!patternContext) {
+      throw new Error('canvas context is null');
+    }
+
+    // Give the pattern a width and height of 50
+    patternCanvas.width = 50;
+    patternCanvas.height = 50;
+
+    // Give the pattern a background color and draw an arc
+    patternContext.fillStyle = "#fec";
+    patternContext.arc(0, 0, 50, 0, 0.5 * Math.PI);
+    patternContext.stroke();
+
+
+    if (!context) {
+      throw new Error('canvas context is null');
+    }
+
+    const pattern = context.createPattern(patternCanvas, "repeat-x");
+    context.fillStyle = pattern;
+    context.fillRect(0, 0, canvas.width, canvas.height);
+
+    await snapshot(canvas);
+    done();
+
+  });
+
+  it('should work with createPattern from a canvas when repetition is repeat-y', async (done) => {
+    const canvas = <canvas height="300" width = "300" />;
+    document.body.appendChild(canvas);
+
+    var context = canvas.getContext('2d');
+
+    const patternCanvas = document.createElement("canvas");
+    const patternContext = patternCanvas.getContext("2d");
+    if (!patternContext) {
+      throw new Error('canvas context is null');
+    }
+
+    // Give the pattern a width and height of 50
+    patternCanvas.width = 50;
+    patternCanvas.height = 50;
+
+    // Give the pattern a background color and draw an arc
+    patternContext.fillStyle = "#fec";
+    patternContext.arc(0, 0, 50, 0, 0.5 * Math.PI);
+    patternContext.stroke();
+
+
+    if (!context) {
+      throw new Error('canvas context is null');
+    }
+
+    const pattern = context.createPattern(patternCanvas, "repeat-y");
+    context.fillStyle = pattern;
+    context.fillRect(0, 0, canvas.width, canvas.height);
+
+    await snapshot(canvas);
+    done();
+
+  });
+
+  it('should work with createPattern from a canvas when repetition is no-repeat', async (done) => {
+    const canvas = <canvas height="300" width = "300" />;
+    document.body.appendChild(canvas);
+
+    var context = canvas.getContext('2d');
+
+    const patternCanvas = document.createElement("canvas");
+    const patternContext = patternCanvas.getContext("2d");
+    if (!patternContext) {
+      throw new Error('canvas context is null');
+    }
+
+    // Give the pattern a width and height of 50
+    patternCanvas.width = 50;
+    patternCanvas.height = 50;
+
+    // Give the pattern a background color and draw an arc
+    patternContext.fillStyle = "#fec";
+    patternContext.arc(0, 0, 50, 0, 0.5 * Math.PI);
+    patternContext.stroke();
+
+
+    if (!context) {
+      throw new Error('canvas context is null');
+    }
+
+    const pattern = context.createPattern(patternCanvas, "no-repeat");
+    context.fillStyle = pattern;
+    context.fillRect(0, 0, canvas.width, canvas.height);
+
+    await snapshot(canvas);
+    done();
+
+  });
+
+  it('should work with createPattern from an image when repetition is repeat', async (done) => {
+    const canvas = <canvas height="300" width = "300" />;
+    document.body.appendChild(canvas);
+
+    var context = canvas.getContext('2d');
+
+
+    const img = new Image();
+    img.src = 'assets/cat.png';
+    // Only use the image after it's loaded
+    img.onload = async () => {
+      const pattern = context.createPattern(img, "repeat");
+      context.fillStyle = pattern;
+      context.fillRect(0, 0, 300, 300);
+      await snapshot(canvas);
+      done();
+    };
+
+  })
+
+  it('should work with createPattern from an image when repetition is repeat-x', async (done) => {
+    const canvas = <canvas height="300" width = "300" />;
+    document.body.appendChild(canvas);
+
+    var context = canvas.getContext('2d');
+
+
+    const img = new Image();
+    img.src = 'assets/cat.png';
+    // Only use the image after it's loaded
+    img.onload = async () => {
+      const pattern = context.createPattern(img, "repeat-x");
+      context.fillStyle = pattern;
+      context.fillRect(0, 0, 300, 300);
+      await snapshot(canvas);
+      done();
+    };
+
+  })
+
+  it('should work with createPattern from an image when repetition is repeat-y', async (done) => {
+    const canvas = <canvas height="300" width = "300" />;
+    document.body.appendChild(canvas);
+
+    var context = canvas.getContext('2d');
+
+
+    const img = new Image();
+    img.src = 'assets/cat.png';
+    // Only use the image after it's loaded
+    img.onload = async () => {
+      const pattern = context.createPattern(img, "repeat-y");
+      context.fillStyle = pattern;
+      context.fillRect(0, 0, 300, 300);
+      await snapshot(canvas);
+      done();
+    };
+
+  })
+
+  it('should work with createPattern from an image when repetition is no-repeat', async (done) => {
+    const canvas = <canvas height="300" width = "300" />;
+    document.body.appendChild(canvas);
+
+    var context = canvas.getContext('2d');
+
+
+    const img = new Image();
+    img.src = 'assets/cat.png';
+    // Only use the image after it's loaded
+    img.onload = async () => {
+      const pattern = context.createPattern(img, "no-repeat");
+      context.fillStyle = pattern;
+      context.fillRect(0, 0, 300, 300);
+      await snapshot(canvas);
+      done();
+    };
+
+  })
+
 });

webf/lib/src/html/canvas/canvas.dart

@@ -131,10 +131,8 @@ class CanvasElement extends Element {
     double? height;
 
     RenderStyle renderStyle = renderBoxModel!.renderStyle;
-    double? styleWidth =
-        renderStyle.width.isAuto ? null : renderStyle.width.computedValue;
-    double? styleHeight =
-        renderStyle.height.isAuto ? null : renderStyle.height.computedValue;
+    double? styleWidth = renderStyle.width.isAuto ? null : renderStyle.width.computedValue;
+    double? styleHeight = renderStyle.height.isAuto ? null : renderStyle.height.computedValue;
 
     if (styleWidth != null) {
       width = styleWidth;
@@ -182,10 +180,8 @@ class CanvasElement extends Element {
       // @TODO: CSS object-fit for canvas.
       // To fill (default value of object-fit) the bitmap content, use scale to get the same performed.
       RenderStyle renderStyle = renderBoxModel!.renderStyle;
-      double? styleWidth =
-          renderStyle.width.isAuto ? null : renderStyle.width.computedValue;
-      double? styleHeight =
-          renderStyle.height.isAuto ? null : renderStyle.height.computedValue;
+      double? styleWidth = renderStyle.width.isAuto ? null : renderStyle.width.computedValue;
+      double? styleHeight = renderStyle.height.isAuto ? null : renderStyle.height.computedValue;
 
       double? scaleX;
       double? scaleY;
@@ -259,7 +255,7 @@ class CanvasElement extends Element {
     resize();
   }
 
-  void _styleChangedListener(String key, String? original, String present, { String? baseHref }) {
+  void _styleChangedListener(String key, String? original, String present, {String? baseHref}) {
     switch (key) {
       case WIDTH:
       case HEIGHT:

webf/lib/src/html/canvas/canvas_context.dart

@@ -21,14 +21,7 @@ enum CanvasLineJoin { round, bevel, miter }
 
 enum CanvasTextAlign { start, end, left, right, center }
 
-enum CanvasTextBaseline {
-  top,
-  hanging,
-  middle,
-  alphabetic,
-  ideographic,
-  bottom
-}
+enum CanvasTextBaseline { top, hanging, middle, alphabetic, ideographic, bottom }
 
 enum CanvasDirection { ltr, rtl, inherit }
 
@@ -86,8 +79,7 @@ abstract class CanvasCompositing {
 abstract class CanvasImageSmoothing {
   // image smoothing
   bool imageSmoothingEnabled = true; // (default true)
-  ImageSmoothingQuality imageSmoothingQuality =
-      ImageSmoothingQuality.low; // (default low)
+  ImageSmoothingQuality imageSmoothingQuality = ImageSmoothingQuality.low; // (default low)
 }
 
 class CanvasImageSource {
@@ -98,21 +90,23 @@ class CanvasImageSource {
   void _fillCanvasImageSource(source) {
     if (source is ImageElement) {
       image_element = source;
+    } else if (source is CanvasElement) {
+      canvas_element = source;
     }
   }
 
   ImageElement? image_element;
+
+  CanvasElement? canvas_element;
 }
 
 abstract class CanvasFillStrokeStyles {
   // colors and styles (see also the CanvasPathDrawingStyles and CanvasTextDrawingStyles
   Color strokeStyle = Color(0xFF000000); // (default black)
   Color fillStyle = Color(0xFF000000); // (default black)
-  CanvasGradient createLinearGradient(
-      double x0, double y0, double x1, double y1);
+  CanvasGradient createLinearGradient(double x0, double y0, double x1, double y1);
 
-  CanvasGradient createRadialGradient(
-      double x0, double y0, double r0, double x1, double y1, double r1);
+  CanvasGradient createRadialGradient(double x0, double y0, double r0, double x1, double y1, double r1);
 
   CanvasPattern createPattern(CanvasImageSource image, String repetition);
 }
@@ -153,6 +147,7 @@ class CanvasGradient extends BindingObject {
   get pointer => _pointer;
 
   List<CSSColorStop> colorGradients = [];
+
   // opaque object
   void addColorStop(num offset, String color) {
     Color? colorStop = CSSColor.parseColor(color, renderStyle: ownerCanvasElement.renderStyle);
@@ -163,9 +158,8 @@ class CanvasGradient extends BindingObject {
 
   @override
   void initializeMethods(Map<String, BindingObjectMethod> methods) {
-    methods['addColorStop'] = BindingObjectMethodSync(
-        call: (args) => addColorStop(
-            castToType<num>(args[0]), castToType<String>(args[1])));
+    methods['addColorStop'] =
+        BindingObjectMethodSync(call: (args) => addColorStop(castToType<num>(args[0]), castToType<String>(args[1])));
   }
 
   @override
@@ -176,10 +170,20 @@ class CanvasGradient extends BindingObject {
 class CanvasPattern extends BindingObject {
   CanvasPattern(CanvasImageSource image, String repetition)
       : _pointer = allocateNewBindingObject(),
+        _image = image,
+        _repetition = repetition,
         super();
 
   final ffi.Pointer<NativeBindingObject> _pointer;
 
+  final String _repetition;
+
+  final CanvasImageSource _image;
+
+  String get repetition => _repetition;
+
+  CanvasImageSource get image => _image;
+
   @override
   get pointer => _pointer;