Update the About page and add a non-60fps warning on the front page.

smfr · smfr · commit d51d4b2d7556 · 2024-01-05T14:16:40.000-08:00
Update the About page to suggest changing the display refresh frequency to 60fps
if comparing browsers.

Remove Focus from the list of subtests described.

Add the full list of 1.3 changes, linking to GitHub commits.

On the front page, if frame-rate detection detects a non-60fps rate, fix
the label below the Run button to suggest changing the display refresh rate.
diff --git a/MotionMark/about.html b/MotionMark/about.html
@@ -44,7 +44,7 @@ <h1>About MotionMark <span class="version"></span></h1>
 
             <p>MotionMark is a web benchmark that focuses on graphics performance. It draws multiple rendering elements, each of which uses the same set of graphics primitives. An element could be an SVG node, an HTML element with CSS style, or a series of canvas operations. Slight variations among the elements avoid trivial caching optimizations by the browser. Although fairly simple, the effects were chosen to reflect techniques commonly used on the web. Tests are visually rich, being designed to stress the graphics system rather than JavaScript.</p>
 
-            <p>After an initial warm-up, each test runs for a fixed period of time. Based on measurements of the browser’s frame rate, MotionMark adjusts the number of elements to draw, and concentrates around a narrow range where the browser starts to fail animating at 60 frames per second (fps). A piecewise linear regression is applied to the data, and the change point is reported as the test's score. The confidence interval is calculated through <a href="https://en.wikipedia.org/wiki/Bootstrapping_(statistics)">bootstrapping</a>. MotionMark calculates the geometric mean of all of the tests’ scores to report the single score for the run.</p>
+            <p>After an initial warm-up, each test runs for a fixed period of time. Based on measurements of the browser’s frame rate, MotionMark adjusts the number of elements to draw, and concentrates around a narrow range where the browser starts to fail animating at the target frame rate (typically 60 frames per second). A piecewise linear regression is applied to the data, and the change point is reported as the test's score. The confidence interval is calculated through <a href="https://en.wikipedia.org/wiki/Bootstrapping_(statistics)">bootstrapping</a>. MotionMark calculates the geometric mean of all of the tests’ scores to report the single score for the run.</p>
 
             <p>MotionMark can be run on a wide variety of devices. Using the device’s screen dimensions it adjusts the drawing area into one of three sizes:</p>
 
@@ -58,22 +58,32 @@ <h1>About MotionMark <span class="version"></span></h1>
 
             <ul>
                 <li><strong>Multiply</strong>: CSS border radius, transforms, opacity</li>
-                <li><strong>Arcs and Fills</strong>: Canvas path fills and arcs</li>
+                <li><strong>Canvas Arcs</strong>: Canvas path fills and arcs</li>
                 <li><strong>Leaves</strong>: CSS-transformed elements, opacity</li>
-                <li><strong>Paths</strong>: Canvas line, quadratic, and Bezier paths</li>
-                <li><strong>Lines</strong>: Canvas line segments</li>
-                <li><strong>Focus</strong>: CSS blur filter, opacity</li>
+                <li><strong>Canvas Paths</strong>: Canvas line, quadratic, and Bezier paths</li>
+                <li><strong>Canvas Lines</strong>: Canvas line segments</li>
                 <li><strong>Images</strong>: Canvas <code>getImageData()</code> and <code>putImageData()</code></li>
                 <li><strong>Design</strong>: HTML text rendering</li>
                 <li><strong>Suits</strong>: SVG clip paths, gradients and transforms</li>
             </ul>
 
             <p>To achieve consistent results on mobile devices, put the device in landscape orientation. On laptops and desktops, use the default display resolution and make the browser window fullscreen. Make sure that screen automatic display sleep is turned off or set to longer than 8 minutes.</p>
 
-            <h3>Version log</h3>
+            <p id="set-display-fps">The MotionMark benchmark relies on the requestAnimationFrame() JavaScript API, which provides callbacks at a consistent frequency related to screen refresh rate. However, browsers have made different choices about whether requestAnimationFrame() should strictly follow screen refresh rate. Safari currently fires requestAnimationFrame() callbacks at 60Hz on 120Hz screens, while other browsers fire it at 120Hz. This affects the benchmark score, so to compare browser scores across browsers, be sure to set the screen refresh rate to 60Hz (for example on macOS, this can be done in the Displays panel in System Settings).</p>
+
+            <h3>Version history</h3>
 
             <ul id="log">
-                <li><strong>1.3</strong>: Add support for non-60Hz <code>requestAnimationFrame</code> rates to the <a href="developer.html">developer settings</a>.</li>
+                <li><strong>1.3</strong>: 
+                    <ul>
+                        <li><a href="https://github.com/WebKit/MotionMark/commit/c0a884c2df3287362a126484cd8c07c940015463">Add support for non-60Hz <code>requestAnimationFrame</code> rates</a></li>
+                        <li><a href="https://github.com/WebKit/MotionMark/commit/9edd41ad33d24cc10b60576b8eb9626178f66122">Change the Multiply subtest to use <code>display:none</code> for non-animating elements</a></li>
+                        <li><a href="https://github.com/WebKit/MotionMark/commit/2b2e9d4e89dbd83922e7960872e8ad5f2d23d043">Increase the maximum complexity of the Multiply subtest</a></li>
+                        <li><a href="https://github.com/WebKit/MotionMark/commit/3090053c0fca81a9feb037075ef934275c690f3e">Make the Paths test workload more consistent</a></li>
+                        <li><a href="https://github.com/WebKit/MotionMark/commit/ff00967f5d6e92624d4e50e92f719a5ad7de95b7">Fix instability in the Design subtest</a></li>
+                        <li><a href="https://github.com/WebKit/MotionMark/commit/465dd49026a40a7bd8d30d64a264492165c711e8">Make the 'slope' profile the default profile</a></li>
+                    </ul>
+                </li>
                 <li><strong>1.2</strong>: Fix <a href="https://bugs.webkit.org/show_bug.cgi?id=220847">bug</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=221075">bug</a>, and <a href="https://bugs.webkit.org/show_bug.cgi?id=219984">bug</a> to reduce test variance and sensitivity to individual long frames.</li>
                 <li><strong>1.1.1</strong>: Fix <a href="https://bugs.webkit.org/show_bug.cgi?id=210640">bug</a> in the calculation of timestamps used for animation during warm up phase of tests.</li>
                 <li><a href="https://webkit.org/blog/8434/motionmark-1-1/"><strong>1.1</strong></a>: Update Multiply test to increase max capacity and expand methods for hiding elements. Update Leaves test to use range of sizes and opacity.</li>
diff --git a/MotionMark/resources/runner/motionmark.js b/MotionMark/resources/runner/motionmark.js
@@ -502,13 +502,16 @@ window.benchmarkController = {
     {
         const frameRateLabel = document.getElementById("frame-rate-label");
 
-        let labelContent = Strings.text.usingFrameRate.replace("%s", frameRate);
+        let labelContent = "";
         if (!frameRate) {
             labelContent = Strings.text.frameRateDetectionFailure;
             frameRate = 60;
-        }
+        } else if (frameRate != 60)
+            labelContent = Strings.text.non60FrameRate.replace("%s", frameRate);
+        else 
+            labelContent = Strings.text.usingFrameRate.replace("%s", frameRate);
 
-        frameRateLabel.textContent = labelContent;
+        frameRateLabel.innerHTML = labelContent;
 
         this.benchmarkDefaultParameters["system-frame-rate"] = frameRate;
         this.benchmarkDefaultParameters["frame-rate"] = frameRate;
diff --git a/MotionMark/resources/strings.js b/MotionMark/resources/strings.js
@@ -32,6 +32,7 @@ var Strings = {
         runBenchmark: "Run Benchmark",
         usingFrameRate: "Framerate %sfps",
         frameRateDetectionFailure: "Failed to determine framerate, using 60fps",
+        non60FrameRate: "Framerate %sfps. If comparing browsers, be sure to <a href='about.html#set-display-fps'>set your display refresh rate to 60Hz</a>."
     },
     json: {
         version: "version",
