Changelog for #133. Improved "canvas coommon" test coverage.

Author: TheSpyder

CHANGELOG.md

@@ -14,7 +14,13 @@
 #### :boom: Breaking Change
 
 - Corrected return type of `getPropertyValue` for CSS style attributes (it's nullable and now returns an option).
-- Corrected signature of `toggleForced` (for `Dom.domTokenList`) to accept a bool denoting whether to toggle the class on or off. https://github.com/TheSpyder/rescript-webapi/pull/136
+- Corrected signature of `DomTokenList.toggleForced` to accept a boolean, denoting whether to toggle the class on or off. https://github.com/TheSpyder/rescript-webapi/pull/136
+- Corrected argument names of Canvas2d and Path2d bindings https://github.com/TheSpyder/rescript-webapi/pull/133
+
+#### :rocket: New Feature
+
+- `VisualViewport` bindings. https://github.com/TheSpyder/rescript-webapi/pull/137
+- `Path2d` is now a separate module from `Canvas2d`, with more complete bindings https://github.com/TheSpyder/rescript-webapi/pull/133
 
 #### :bug: Bug Fix
 

lib/js/tests/Webapi/Canvas/Webapi__Canvas__Canvas2d__test.js

@@ -70,16 +70,8 @@ ctx.shadowBlur = 1;
 
 ctx.shadowColor = "red";
 
-ctx.beginPath();
-
 ctx.closePath();
 
-ctx.fill();
-
-ctx.stroke();
-
-ctx.clip();
-
 ctx.moveTo(1, 1);
 
 ctx.lineTo(1, 2);
@@ -88,14 +80,24 @@ ctx.quadraticCurveTo(1, 1, 1, 1);
 
 ctx.bezierCurveTo(1, 1, 2, 2, 4, 4);
 
-ctx.arcTo(1, 1, 2, 2, 4);
-
 ctx.arc(1, 1, 4, 1, 3, true);
 
+ctx.arcTo(1, 1, 2, 2, 4);
+
 ctx.ellipse(1, 1, 4, 8, 4, 1, 3, true);
 
 ctx.rect(0, 0, 10, 10);
 
+ctx.roundRect(0, 0, 10, 10, 10);
+
+ctx.beginPath();
+
+ctx.stroke();
+
+ctx.clip();
+
+ctx.fill();
+
 var pointInPath = ctx.isPointInPath(0, 0);
 
 var linearGradient = ctx.createLinearGradient(0.0, 0.0, 0.0, 0.0);

lib/js/tests/Webapi/Canvas/Webapi__Canvas__Path2d__test.js

@@ -3,20 +3,34 @@
 
 var path = new Path2D("M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543 c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503 c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z");
 
+path.closePath();
+
 path.moveTo(1, 1);
 
 path.lineTo(1, 2);
 
-path.rect(1, 2, 10, 10);
+path.quadraticCurveTo(1, 1, 1, 1);
+
+path.bezierCurveTo(1, 1, 2, 2, 4, 4);
+
+path.arc(1, 1, 4, 1, 3, true);
+
+path.arcTo(1, 1, 2, 2, 4);
 
-path.bezierCurveTo(1, 2, 2, 2, 4, 4);
+path.ellipse(1, 1, 4, 8, 4, 1, 3, true);
+
+path.rect(0, 0, 10, 10);
+
+path.roundRect(0, 0, 10, 10, 10);
 
 var canvasEl = document.createElement("canvas");
 
 var ctx = canvasEl.getContext("2d");
 
 ctx.fill(path);
 
+ctx.stroke(path);
+
 exports.path = path;
 exports.canvasEl = canvasEl;
 exports.ctx = ctx;

tests/Webapi/Canvas/Webapi__Canvas__Canvas2d__test.res

@@ -41,17 +41,14 @@ shadowOffsetY(ctx, 1.)
 shadowBlur(ctx, 1.)
 shadowColor(ctx, "red")
 
-ctx->beginPath
+// common things
 ctx->closePath
-ctx->fill
-ctx->stroke
-ctx->clip
 ctx->moveTo(~x=1., ~y=1.)
 ctx->lineTo(~x=1., ~y=2.)
 ctx->quadraticCurveTo(~cpx=1., ~cpy=1., ~x=1., ~y=1.)
 ctx->bezierCurveTo(~cp1x=1., ~cp1y=1., ~cp2x=2., ~cp2y=2., ~x=4., ~y=4.)
-ctx->arcTo(~x1=1., ~y1=1., ~x2=2., ~y2=2., ~r=4.)
 ctx->arc(~x=1., ~y=1., ~r=4., ~startAngle=1., ~endAngle=3., ~counterClockWise=true, ())
+ctx->arcTo(~x1=1., ~y1=1., ~x2=2., ~y2=2., ~r=4.)
 ctx->ellipse(
   ~x=1.,
   ~y=1.,
@@ -64,8 +61,17 @@ ctx->ellipse(
   (),
 )
 ctx->rect(~x=0., ~y=0., ~w=10., ~h=10.)
+ctx->roundRect(~x=0., ~y=0., ~w=10., ~h=10., ~r=10.)
+// end common things
+
+ctx->beginPath
+ctx->stroke
+ctx->clip
+ctx->fill
 let pointInPath: bool = ctx->isPointInPath(~x=0., ~y=0.)
 
+// fillPath2d and strokePath2d are in the Path2d module test
+
 let linearGradient: gradient = ctx->createLinearGradient(~x0=0.0, ~y0=0.0, ~x1=0.0, ~y1=0.0)
 setStrokeStyle(ctx, Gradient, linearGradient)
 let radialGradient: gradient =
@@ -122,4 +128,4 @@ ctx->strokeText("hi", ~x=1., ~y=0., ())
 
 ctx->fillRect(~x=1., ~y=0., ~w=10., ~h=10.)
 ctx->strokeRect(~x=1., ~y=0., ~w=10., ~h=10.)
-ctx->clearRect(~x=1., ~y=0., ~w=10., ~h=10.)
+ctx->clearRect(~x=1., ~y=0., ~w=10., ~h=10.)

tests/Webapi/Canvas/Webapi__Canvas__Path2d__test.res

@@ -1,22 +1,40 @@
 open Webapi.Canvas
-open Webapi.Canvas.Canvas2d
 open Webapi.Dom
+open Path2d
 
-let path = Path2d.make(
+let path = make(
   ~d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223" ++
   ",0,12.425,6.179,13.079,13.543 c0,0,0.353,1.828-0.424,5.119c-1.058,4.482" ++
   "-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021" ++
   "-6.898-11.503 c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2" ++ ",13.159,2C18.522,2,22.832,5.343,24.85,10.126z",
   (),
 )
 
-path->Path2d.moveTo(~x=1., ~y=1.)
-path->Path2d.lineTo(~x=1., ~y=2.)
-path->Path2d.rect(~x=1., ~y=2., ~w=10., ~h=10.)
-path->Path2d.bezierCurveTo(~cp1x=1., ~cp1y=2., ~cp2x=2., ~cp2y=2., ~x=4., ~y=4.)
-
+// common things
+path->closePath
+path->moveTo(~x=1., ~y=1.)
+path->lineTo(~x=1., ~y=2.)
+path->quadraticCurveTo(~cpx=1., ~cpy=1., ~x=1., ~y=1.)
+path->bezierCurveTo(~cp1x=1., ~cp1y=1., ~cp2x=2., ~cp2y=2., ~x=4., ~y=4.)
+path->arc(~x=1., ~y=1., ~r=4., ~startAngle=1., ~endAngle=3., ~counterClockWise=true, ())
+path->arcTo(~x1=1., ~y1=1., ~x2=2., ~y2=2., ~r=4.)
+path->ellipse(
+  ~x=1.,
+  ~y=1.,
+  ~rx=4.,
+  ~ry=8.,
+  ~rtn=4.,
+  ~startAngle=1.,
+  ~endAngle=3.,
+  ~counterClockWise=true,
+  (),
+)
+path->rect(~x=0., ~y=0., ~w=10., ~h=10.)
+path->roundRect(~x=0., ~y=0., ~w=10., ~h=10., ~r=10.)
+// end common things
 
 let canvasEl: Dom.element = document->Document.createElement("canvas")
 let ctx = canvasEl->CanvasElement.getContext2d
 
-ctx->fillPath2d(path)
+ctx->Canvas2d.fillPath2d(path)
+ctx->Canvas2d.strokePath2d(path)