Add about page for MotionMark
authorjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 2 Nov 2017 04:17:36 +0000 (04:17 +0000)
committerjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 2 Nov 2017 04:17:36 +0000 (04:17 +0000)
https://bugs.webkit.org/show_bug.cgi?id=179152

Reviewed by Ryosuke Niwa.

* MotionMark/about.html: Added.
* MotionMark/index.html:
* MotionMark/resources/runner/motionmark.css:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@224317 268f45cc-cd09-0410-ab3c-d52691b4dbfc

PerformanceTests/ChangeLog
PerformanceTests/MotionMark/about.html [new file with mode: 0644]
PerformanceTests/MotionMark/index.html
PerformanceTests/MotionMark/resources/runner/motionmark.css

index 54ee312..1b6c75d 100644 (file)
@@ -1,3 +1,14 @@
+2017-11-01  Jon Lee  <jonlee@apple.com>
+
+        Add about page for MotionMark
+        https://bugs.webkit.org/show_bug.cgi?id=179152
+
+        Reviewed by Ryosuke Niwa.
+
+        * MotionMark/about.html: Added.
+        * MotionMark/index.html:
+        * MotionMark/resources/runner/motionmark.css:
+
 2017-10-30  Michael Saboff  <msaboff@apple.com>
 
         Eliminate Basic compiler test from RexBench
diff --git a/PerformanceTests/MotionMark/about.html b/PerformanceTests/MotionMark/about.html
new file mode 100644 (file)
index 0000000..aecb883
--- /dev/null
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no">
+
+    <title>About MotionMark</title>
+
+    <link rel="stylesheet" href="resources/runner/motionmark.css">
+</head>
+<body class="images-loaded">
+    <main>
+    <section id="about" class="selected">
+        <svg class="logo"><use xlink:href="resources/runner/logo.svg#root"></svg>
+
+        <div class="body">
+            <h1>About MotionMark</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>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>
+
+            <ol>
+                <li>Small (568 x 320), targeted at mobile phones</li>
+                <li>Medium (900 x 600), targeted at tablets and laptops</li>
+                <li>Large (1600 x 800), targeted at desktops</li>
+            </ol>
+
+            <p>The design of the benchmark is modular. This makes it easy to write new tests and use different controllers, which can assist a developer working on improving the performance of a web engine. For the purpose of a public benchmark, the MotionMark master suite tests a variety of drawing operations using techniques including CSS, SVG, and Canvas:</p>
+
+            <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>Leaves</strong>: CSS-transformed elements</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>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>
+
+            <center><button onclick="location.href='./'">Return to homepage</button></center>
+        </div>
+        </section>
+    </main>
+</body>
+</html>
\ No newline at end of file
index e1a0c1c..4158996 100644 (file)
@@ -30,6 +30,8 @@
             <svg class="logo"><use xlink:href="resources/runner/logo.svg#root"></svg>
             <div class="body">
                 <p>MotionMark is a graphics benchmark that measures a browser’s capability to animate complex scenes at a target frame rate.</p>
+
+                <p><a href="about.html">More details</a> about the benchmark are available. Bigger scores are better.</p>
                 <p>For accurate results, please take your browser window full screen, or rotate your device to landscape orientation.</p>
                 <p class="portrait-orientation-check"><b>Please rotate your device.</b></p>
                 <button class="landscape-orientation-check" onclick="benchmarkController.startBenchmark()">Run Benchmark</button>
index 05b45f8..86da6be 100644 (file)
@@ -278,10 +278,13 @@ button:disabled {
     }
 }
 
-/* Intro section */
+/* Intro section, About page */
 
-#intro {
+#intro, #about {
     padding: 2em;
+}
+
+#intro {
     opacity: 0;
     transition: opacity 500ms ease-in;
 }
@@ -290,6 +293,40 @@ body.images-loaded #intro {
     opacity: 1;
 }
 
+#about .body {
+    transform: none;
+    margin: 0;
+    max-width: initial;
+}
+
+#about li {
+    line-height: 1.5em;
+}
+
+#about button {
+    padding: .75em 2em;
+    margin: 1.5em auto 0;
+    min-width: initial;
+    transform: skewX(-10deg);
+}
+
+@media screen and (min-width: 667px) {
+    #about .body {
+        font-size: .7em;
+        margin: 1em;
+    }
+
+    #about ol, #about ul {
+        padding-left: 3em;
+    }
+}
+
+
+#intro a, #about a,
+#intro a:visited, #about a:visited {
+    color: black;
+}
+
 /* Running test section */
 
 .frame-container {