Tentative Canvas “Text Rendering” test

MotionMark/resources/debug-runner/tests.js

@@ -22,6 +22,7 @@
  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
+
 Utilities.extendObject(Strings.text, {
     samples: "Samples",
     complexity: "Time Complexity",
@@ -456,3 +457,28 @@ Suites.push(new Suite("Basic canvas path suite",
         }
     ]
 ));
+
+Suites.push(new Suite("Tentative 1.4 suite",
+    [
+        {
+            url: "dev/stories/stories.html",
+            name: "Stories"
+        },
+        {
+            url: "dev/map-zoomer/map-zoomer.html",
+            name: "Map Zoomer"
+        },
+        {
+            url: "dev/radial-chart/radial-chart.html",
+            name: "Canvas Radial Chart"
+        },
+        {
+            url: "dev/dashboard/dashboard.html",
+            name: "Dashboard"
+        },
+        {
+            url: "dev/text-rendering.html",
+            name: "Text Rendering"
+        }
+    ]
+));

MotionMark/resources/extensions.js

@@ -247,6 +247,11 @@ class Point {
         this.y = y;
     }
 
+    clone()
+    {
+        return new Point(this.x, this.y);
+    }
+
     // Used when the point object is used as a size object.
     get width()
     {
@@ -290,6 +295,21 @@ class Point {
             return new Point(this.x * other, this.y * other);
         return new Point(this.x * other.x, this.y * other.y);
     }
+
+    min(other)
+    {
+        return new Point(Math.min(this.x, other.x), Math.min(this.y, other.y));
+    }
+
+    max(other)
+    {
+        return new Point(Math.max(this.x, other.x), Math.max(this.y, other.y));
+    }
+
+    scale(factor)
+    {
+        return new Point(this.x * factor, this.y * factor);
+    }
 
     move(angle, velocity, timeDelta)
     {
@@ -298,12 +318,12 @@ class Point {
 
     length()
     {
-        return Math.sqrt(this.x * this.x + this.y * this.y);
+        return Math.hypot(this.x, this.y);
     }
 
     normalize()
     {
-        var l = Math.sqrt(this.x * this.x + this.y * this.y);
+        const l = this.length();
         this.x /= l;
         this.y /= l;
         return this;

MotionMark/resources/runner/motionmark.css

@@ -387,8 +387,10 @@ body.images-loaded #intro {
 .frame-container {
     position: absolute;
 
+    /*
     top: 50%;
     left: 50%;
+    */
 }
 
 .frame-container > iframe {
@@ -400,24 +402,36 @@ body.images-loaded #intro {
 }
 
 body.small .frame-container {
+    /*
     width: 568px;
     height: 320px;
     margin-left: -284px;
     margin-top: -160px;
+    */
+    width: 100%;
+    height: 100%;
 }
 
 body.medium .frame-container {
+    /*
     width: 900px;
     height: 600px;
     margin-left: -450px;
     margin-top: -300px;
+    */
+    width: 100%;
+    height: 100%;
 }
 
 body.large .frame-container {
+    /*
     width: 1600px;
     height: 800px;
     margin-left: -800px;
     margin-top: -400px;
+    */
+    width: 100%;
+    height: 100%;
 }
 
 /* Results section */

MotionMark/tests/bouncing-particles/resources/bouncing-canvas-particles.js

@@ -97,6 +97,7 @@ class BouncingCanvasParticlesStage extends BouncingParticlesStage {
     {
         await super.initialize(benchmark, options);
         this.context = this.element.getContext("2d");
+        this.context.scale(this.devicePixelRatio, this.devicePixelRatio);
     }
 
     animate(timeDelta)

MotionMark/tests/core/resources/canvas-stage.js

@@ -36,6 +36,7 @@ class CanvasStage extends Stage {
     {
         await super.initialize(benchmark, options);
         this.context = this.element.getContext("2d");
+        this.context.scale(this.devicePixelRatio, this.devicePixelRatio);
     }
 
     tune(count)

MotionMark/tests/core/resources/image-data.js

@@ -132,6 +132,7 @@ class ImageDataStage extends Stage {
         for (var i = 0; i < this._offsetIndex; ++i) {
             var element = this.testElements[i];
             var context = element.getContext("2d");
+            context.scale(this.devicePixelRatio, this.devicePixelRatio);
 
             // Get image data
             var imageData = context.getImageData(0, 0, ImageDataStage.imageWidth, ImageDataStage.imageHeight);
@@ -158,7 +159,9 @@ class ImageDataStage extends Stage {
                 context.putImageData(imageData, 0, 0);
             else {
                 this._refreshElement(element);
-                element.getContext("2d").drawImage(Stage.randomElementInArray(this.images), 0, 0, ImageDataStage.imageWidth, ImageDataStage.imageHeight);
+                const context = element.getContext("2d");
+                context.scale(this.devicePixelRatio, this.devicePixelRatio);
+                context.drawImage(Stage.randomElementInArray(this.images), 0, 0, ImageDataStage.imageWidth, ImageDataStage.imageHeight);
             }
         }
     }

MotionMark/tests/dev/dashboard/Description.md

@@ -0,0 +1,37 @@
+# Dashboard SVG Test
+
+Goals
+-----
+
+Measure SVG/rendering workloads that are common for data visualization.
+
+
+Design
+------
+
+A test based on D3.js that updates various SVG graphcs
+
+
+Features tested
+---------------
+
+* TBD
+
+
+Work per measured frame
+----------------------
+
+D3 updates to the SVG DOM, and work triggered by those updates.
+
+
+Licensing requirements
+----------------------
+
+None
+
+
+Remaining work
+--------------
+
+* Use some more SVG features
+* Flesh out the content some more; use more D3 features.