Support non-60 frame rates in MotionMark

https://bugs.webkit.org/show_bug.cgi?id=244656
<rdar://problem/99416135>

Reviewed by Said Abou-Hallawa.

Some devices have refresh rates that are not 60fps (like ProMotion @ 120Hz),
and run requestAnimationFrame at that speed. Update MotionMark so that:

- it doesn't hard-code 60fps everywhere
- it attempts to detect the system frame rate
- the results make it clear what frame rate the tests were using

* PerformanceTests/MotionMark/developer.html:
	Add the system frame rate and some related text.
* PerformanceTests/MotionMark/resources/debug-runner/graph.js:
	Get the graphing component to read the frame rate provided
	by the results.
(updateGraphData):
(createComplexityGraph):
(onGraphTypeChanged):
* PerformanceTests/MotionMark/resources/debug-runner/motionmark.css:
(#frame-rate-detection span): Make this red when we're in progress.
* PerformanceTests/MotionMark/resources/debug-runner/motionmark.js:
	Detect the system frame rate.
* PerformanceTests/MotionMark/resources/runner/motionmark.css:
(section .body p): This text got longer, so give it a max-width.
* PerformanceTests/MotionMark/resources/runner/motionmark.js:
	Add support for variable frame rates where necessary.
* PerformanceTests/MotionMark/resources/statistics.js:
	Ditto.
* PerformanceTests/MotionMark/resources/strings.js:
	Add a new string.
* PerformanceTests/MotionMark/tests/resources/main.js:
	Support for variable rates.

[Note that this doesn't enable auto framerate detection when not running from
developer.html]

Canonical link: https://commits.webkit.org/254133@main

Author: grorg

MotionMark/about.html

@@ -73,6 +73,7 @@ <h1>About MotionMark <span class="version"></span></h1>
             <h3>Version log</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.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>

MotionMark/developer.html

@@ -99,7 +99,9 @@ <h3>Adjusting the test complexity:</h3>
                                     </ul>
                                 </li>
                                 <li>
-                                    <label>Target frame rate: <input type="number" id="frame-rate" value="50"> FPS</label>
+                                    <label>System frame rate: <input type="number" id="system-frame-rate" value="60"> FPS</label><br>
+                                    <label>Target frame rate: <input type="number" id="frame-rate" value="50"> FPS</label><br>
+                                    (Guide: should be about 5/6th of the system frame rate)
                                 </li>
                                 <li>
                                     <h3>Time measurement method:</h3>
@@ -113,7 +115,14 @@ <h3>Time measurement method:</h3>
                         </form>
                     </div>
                 </div>
-                <p>For accurate results, please take the browser window full screen, or rotate the device to landscape orientation.</p>
+                <p>
+                    For accurate results, please take the browser window full screen, or rotate the device to landscape orientation. Also,
+                    ensure that the target frame rate matches your system frame rate. Results cannot be compared between devices that
+                    use different frame rates.
+                </p>
+                <p id="frame-rate-detection">
+                    Attempting to detect system frame rate: <span>0</span> FPS (in progress).
+                </p>
                 <div class="start-benchmark">
                     <p class="hidden">Please rotate the device to orientation before starting.</p>
                     <button id="run-benchmark" onclick="benchmarkController.startBenchmark()">Run benchmark</button>

MotionMark/resources/debug-runner/graph.js

@@ -42,6 +42,8 @@ Utilities.extendObject(window.benchmarkController, {
             samplesWithProperties[seriesName] = series.toArray();
         })
 
+        this._targetFrameRate = options["frame-rate"] || 60;
+
         this.createTimeGraph(testResult, samplesWithProperties[Strings.json.controller], testData[Strings.json.marks], testData[Strings.json.controller], options, margins, size);
         this.onTimeGraphOptionsChanged();
 
@@ -127,14 +129,14 @@ Utilities.extendObject(window.benchmarkController, {
             .domain([xMin, xMax]);
         var yScale = d3.scale.linear()
             .range([size.height, 0])
-            .domain([1000/20, 1000/60]);
+            .domain([1000/(this._targetFrameRate/3), 1000/this._targetFrameRate]);
 
         var xAxis = d3.svg.axis()
             .scale(xScale)
             .orient("bottom");
         var yAxis = d3.svg.axis()
             .scale(yScale)
-            .tickValues([1000/20, 1000/25, 1000/30, 1000/35, 1000/40, 1000/45, 1000/50, 1000/55, 1000/60])
+            .tickValues([1000/20, 1000/25, 1000/30, 1000/35, 1000/40, 1000/45, 1000/50, 1000/55, 1000/60, 1000/90, 1000/120])
             .tickFormat(function(d) { return (1000 / d).toFixed(0); })
             .orient("left");
 
@@ -284,7 +286,7 @@ Utilities.extendObject(window.benchmarkController, {
                 .domain([0, complexityMax]);
         var yRight = d3.scale.linear()
                 .range([size.height, 0])
-                .domain([1000/20, 1000/60]);
+                .domain([1000/(this._targetFrameRate/3), 1000/this._targetFrameRate]);
 
         // Axes
         var xAxis = d3.svg.axis()
@@ -296,7 +298,7 @@ Utilities.extendObject(window.benchmarkController, {
                 .orient("left");
         var yAxisRight = d3.svg.axis()
                 .scale(yRight)
-                .tickValues([1000/20, 1000/25, 1000/30, 1000/35, 1000/40, 1000/45, 1000/50, 1000/55, 1000/60])
+                .tickValues([1000/20, 1000/25, 1000/30, 1000/35, 1000/40, 1000/45, 1000/50, 1000/55, 1000/60, 1000/90, 1000/120])
                 .tickFormat(function(d) { return (1000/d).toFixed(0); })
                 .orient("right");
 
@@ -623,6 +625,6 @@ Utilities.extendObject(window.benchmarkController, {
             }
         }
 
-        sectionsManager.setSectionScore("test-graph", score, mean);
+        sectionsManager.setSectionScore("test-graph", score, mean, this._targetFrameRate);
     }
 });

MotionMark/resources/debug-runner/motionmark.css

@@ -331,6 +331,10 @@ label.tree-label {
     color: hsl(11, 100%, 66%);
 }
 
+#frame-rate-detection span {
+    color: red;
+}
+
 @media screen and (max-device-width: 414px),
     screen and (max-device-height: 414px) and (orientation: landscape) {
     #intro .body > div:first-of-type {

MotionMark/resources/debug-runner/motionmark.js

@@ -553,6 +553,8 @@ Utilities.extendObject(window.benchmarkController, {
         suitesManager.updateUIFromLocalStorage();
         suitesManager.updateEditsElementsState();
 
+        benchmarkController.detectSystemFrameRate();
+
         var dropTarget = document.getElementById("drop-target");
         function stopEvent(e) {
             e.stopPropagation();
@@ -664,8 +666,9 @@ Utilities.extendObject(window.benchmarkController, {
         var score = dashboard.score;
         var confidence = ((dashboard.scoreLowerBound / score - 1) * 100).toFixed(2) +
             "% / +" + ((dashboard.scoreUpperBound / score - 1) * 100).toFixed(2) + "%";
+        var fps = dashboard._systemFrameRate;
         sectionsManager.setSectionVersion("results", dashboard.version);
-        sectionsManager.setSectionScore("results", score.toFixed(2), confidence);
+        sectionsManager.setSectionScore("results", score.toFixed(2), confidence, fps);
         sectionsManager.populateTable("results-header", Headers.testName, dashboard);
         sectionsManager.populateTable("results-score", Headers.score, dashboard);
         sectionsManager.populateTable("results-data", Headers.details, dashboard);
@@ -679,5 +682,47 @@ Utilities.extendObject(window.benchmarkController, {
         sectionsManager.setSectionHeader("test-graph", testName);
         sectionsManager.showSection("test-graph", true);
         this.updateGraphData(testResult, testData, benchmarkRunnerClient.results.options);
+    },
+    detectSystemFrameRate: function()
+    {
+        let last = 0;
+        let average = 0;
+        let count = 0;
+
+        const finish = function()
+        {
+            const commonFrameRates = [15, 30, 45, 60, 90, 120, 144];
+            const distanceFromFrameRates = commonFrameRates.map(rate => {
+                return Math.abs(Math.round(rate - average));
+            });
+            let shortestDistance = Number.MAX_VALUE;
+            let targetFrameRate = undefined;
+            for (let i = 0; i < commonFrameRates.length; i++) {
+                if (distanceFromFrameRates[i] < shortestDistance) {
+                    targetFrameRate = commonFrameRates[i];
+                    shortestDistance = distanceFromFrameRates[i];
+                }
+            }
+            targetFrameRate = targetFrameRate || 60;
+            document.getElementById("frame-rate-detection").textContent = `Detected system frame rate as ${targetFrameRate} FPS`;
+            document.getElementById("system-frame-rate").value = targetFrameRate;
+            document.getElementById("frame-rate").value = Math.round(targetFrameRate * 5 / 6);
+        }
+
+        const tick = function(timestamp)
+        {
+            average -= average / 30;
+            average += 1000. / (timestamp - last) / 30;
+            document.querySelector("#frame-rate-detection span").textContent = Math.round(average);
+            last = timestamp;
+            count++;
+            if (count < 300)
+                requestAnimationFrame(tick);
+            else
+                finish();
+        }
+
+        requestAnimationFrame(tick);
     }
+
 });

MotionMark/resources/runner/motionmark.css

@@ -145,6 +145,7 @@ section .body {
 section .body p {
     margin: 1em 0;
     line-height: 1.5em;
+    max-width: 60vw;
 
     -webkit-user-select: text;
     cursor: text;

MotionMark/resources/runner/motionmark.js

@@ -29,6 +29,8 @@
         this._options = options;
         this._results = null;
         this._version = version;
+        this._targetFrameRate = options["frame-rate"] || 60;
+        this._systemFrameRate = options["system-frame-rate"] || 60;
         if (testData) {
             this._iterationsSamplers = testData;
             this._processData();
@@ -83,6 +85,7 @@
         }, this);
 
         this._results[Strings.json.version] = this._version;
+        this._results[Strings.json.fps] = this._targetFrameRate;
         this._results[Strings.json.score] = Statistics.sampleMean(iterationsScores.length, iterationsScores.reduce(function(a, b) { return a + b; }));
         this._results[Strings.json.scoreLowerBound] = this._results[Strings.json.results.iterations][0][Strings.json.scoreLowerBound];
         this._results[Strings.json.scoreUpperBound] = this._results[Strings.json.results.iterations][0][Strings.json.scoreUpperBound];
@@ -109,7 +112,7 @@
 
             var complexityIndex = series.fieldMap[Strings.json.complexity];
             var frameLengthIndex = series.fieldMap[Strings.json.frameLength];
-            var regressionOptions = { desiredFrameLength: 1000/60 };
+            var regressionOptions = { desiredFrameLength: 1000/this._targetFrameRate };
             if (profile)
                 regressionOptions.preferredProfile = profile;
             return {
@@ -165,6 +168,8 @@
         result[Strings.json.complexity][Strings.json.complexity] = calculation.complexity;
         result[Strings.json.complexity][Strings.json.measurements.stdev] = Math.sqrt(calculation.error / samples[Strings.json.complexity].length);
 
+        result[Strings.json.fps] = data.targetFPS || 60;
+
         if (isRampController) {
             var timeComplexity = new Experiment;
             data[Strings.json.controller].forEach(function(regression) {
@@ -442,9 +447,10 @@ window.sectionsManager =
         document.querySelector("#" + sectionIdentifier + " .version").textContent = version;
     },
 
-    setSectionScore: function(sectionIdentifier, score, confidence)
+    setSectionScore: function(sectionIdentifier, score, confidence, fps)
     {
-        document.querySelector("#" + sectionIdentifier + " .score").textContent = score;
+        if (fps && score)
+            document.querySelector("#" + sectionIdentifier + " .score").textContent = `${score} @ ${fps}fps`;
         if (confidence)
             document.querySelector("#" + sectionIdentifier + " .confidence").textContent = confidence;
     },
@@ -557,8 +563,9 @@ window.benchmarkController = {
         var dashboard = benchmarkRunnerClient.results;
         var score = dashboard.score;
         var confidence = "±" + (Statistics.largestDeviationPercentage(dashboard.scoreLowerBound, score, dashboard.scoreUpperBound) * 100).toFixed(2) + "%";
+        var fps = dashboard._systemFrameRate;
         sectionsManager.setSectionVersion("results", dashboard.version);
-        sectionsManager.setSectionScore("results", score.toFixed(2), confidence);
+        sectionsManager.setSectionScore("results", score.toFixed(2), confidence, fps);
         sectionsManager.populateTable("results-header", Headers.testName, dashboard);
         sectionsManager.populateTable("results-score", Headers.score, dashboard);
         sectionsManager.populateTable("results-data", Headers.details, dashboard);
@@ -658,3 +665,4 @@ window.benchmarkController = {
 };
 
 window.addEventListener("load", function() { benchmarkController.initialize(); });
+

MotionMark/resources/statistics.js

@@ -179,7 +179,8 @@ Experiment.defaults =
 Regression = Utilities.createClass(
     function(samples, getComplexity, getFrameLength, startIndex, endIndex, options)
     {
-        var desiredFrameLength = options.desiredFrameLength || 1000/60;
+        var targetFrameRate = options["frame-rate"] || 60;
+        var desiredFrameLength = options.desiredFrameLength || 1000/targetFrameRate;
         var bestProfile;
 
         if (!options.preferredProfile || options.preferredProfile == Strings.json.profiles.slope) {

MotionMark/resources/strings.js

@@ -49,6 +49,7 @@ var Strings = {
         score: "score",
         scoreLowerBound: "scoreLowerBound",
         scoreUpperBound: "scoreUpperBound",
+        fps: "fps",
         bootstrap: "bootstrap",
         measurements: {
             average: "average",