Update Animometer to accommodate different screens
authorjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 12 Apr 2016 02:12:23 +0000 (02:12 +0000)
committerjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 12 Apr 2016 02:12:23 +0000 (02:12 +0000)
https://bugs.webkit.org/show_bug.cgi?id=156449

Reviewed by Darin Adler.
Provisionally reviewed by Said Abou-Hallawa.

* Animometer/index.html: Wrap button in a container to add padding at the bottom.
* Animometer/resources/debug-runner/animometer.css:
(@media screen and (min-device-width: 1800px)): Deleted.
(@media screen and (min-width: 1800px)): Cannot use min-device-width since it may match incorrectly.
(screen and (max-device-height: 414px) and (orientation: landscape)): Some devices swap device width
and height with orientation change.
* Animometer/resources/runner/animometer.css: Similar.
(screen and (min-device-width: 1024px) and (orientation: landscape)):
(screen and (max-device-height: 414px) and (orientation: landscape)):
(.frame-container): On smaller iPhones, adding 1px prevents the navigation bars from appearing.
(@media screen and (min-device-width: 768px) and (max-device-width: 1024px)): Deleted.
(@media (min-device-height: 768px) and (max-device-height: 1024px)): Target iPad Airs and similar.
(@media screen and (min-device-width: 1024px) and (max-device-width: 1366px)): Deleted.
(@media screen and (max-device-width: 1024px) and (min-device-height: 1366px)): Target iPad Pro.
(#results footer): Add padding below the button for testing again.
* Animometer/tests/master/multiply.html: Remove the center text.
* Animometer/tests/master/resources/text.js: Update the test so that in every frame the text moves.
* Animometer/tests/master/text.html: Update the text sizing depending on the size of the device.

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

PerformanceTests/Animometer/index.html
PerformanceTests/Animometer/resources/debug-runner/animometer.css
PerformanceTests/Animometer/resources/runner/animometer.css
PerformanceTests/Animometer/tests/master/multiply.html
PerformanceTests/Animometer/tests/master/resources/text.js
PerformanceTests/Animometer/tests/master/text.html
PerformanceTests/ChangeLog

index bc33bbb..e1e2ec0 100644 (file)
@@ -35,7 +35,9 @@
                 <table id="results-score"></table>
                 <table id="results-header"></table>
             </div>
-            <button onclick="benchmarkController.startBenchmark()">Test Again</button>
+            <footer>
+                <button onclick="benchmarkController.startBenchmark()">Test Again</button>
+            </footer>
         </section>
         <hr>
     </main>
index ac0d172..cc13dbd 100644 (file)
@@ -27,7 +27,7 @@ button:active {
     background-color: rgba(255, 255, 255, .2);
 }
 
-@media screen and (min-device-width: 1800px) {
+@media screen and (min-width: 1800px) {
     section {
         width: 1600px;
         height: 800px;
@@ -107,7 +107,8 @@ label.tree-label {
     margin-left: 2em;
 }
 
-@media screen and (max-device-width: 414px) {
+@media screen and (max-device-width: 414px),
+    screen and (max-device-height: 414px) and (orientation: landscape) {
     .tree {
         padding-left: 1em;
     }
@@ -236,7 +237,8 @@ label.tree-label {
     }
 }
 
-@media screen and (max-device-width: 414px) {
+@media screen and (max-device-width: 414px),
+    screen and (max-device-height: 414px) and (orientation: landscape) {
     #intro {
         min-height: 100%;
     }
index eefbd25..65c0a91 100644 (file)
@@ -54,7 +54,6 @@ button {
     flex: 0 0 auto;
     display: block;
     font-size: 1.5em;
-    margin-bottom: 10vh;
     border: 2px solid rgb(96, 96, 96);
     color: rgb(96, 96, 96);
     background: transparent;
@@ -77,7 +76,8 @@ button:disabled {
     color: rgba(96, 96, 96, .5);
 }
 
-@media screen and (min-device-width: 768px) {
+@media screen and (min-device-height: 1024px),
+    screen and (min-device-width: 1024px) and (orientation: landscape) {
     section {
         padding: 0 20px;
     }
@@ -90,7 +90,8 @@ button:disabled {
     }
 }
 
-@media screen and (max-device-width: 414px) {
+@media screen and (max-device-width: 414px),
+    screen and (max-device-height: 414px) and (orientation: landscape) {
     h1 {
         font-size: 2.5em;
     }
@@ -136,14 +137,16 @@ button:disabled {
     margin: 0 auto;
 }
 
-@media screen and (min-device-width: 768px) {
+@media screen and (min-device-height: 1024px),
+    screen and (min-device-width: 1024px) and (orientation: landscape) {
     #intro p {
         max-width: 800px;
         margin: 0;
     }
 }
 
-@media screen and (max-device-width: 414px) {
+@media screen and (max-device-width: 414px),
+    screen and (max-device-height: 414px) and (orientation: landscape) {
     #intro.selected {
         display: flex;
         align-items: center;
@@ -173,14 +176,15 @@ button:disabled {
     margin: 0 auto;
 }
 
-@media screen and (max-device-width: 414px) {
+@media screen and (max-device-width: 414px),
+    screen and (max-device-height: 414px) and (orientation: landscape) {
     #test-container {
         padding: 0;
     }
 
     .frame-container {
         width: 100%;
-        height: 100%;
+        height: calc(100% + 1px);
     }
 
     .frame-container > iframe {
@@ -189,14 +193,14 @@ button:disabled {
     }
 }
 
-@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+@media (min-device-height: 768px) and (max-device-height: 1024px) {
     .frame-container > iframe {
         width: 900px;
         height: 600px;
     }
 }
 
-@media screen and (min-device-width: 1024px) and (max-device-width: 1366px) {
+@media screen and (max-device-width: 1024px) and (min-device-height: 1366px) {
     .frame-container > iframe {
         width: 1200px;
         height: 800px;
@@ -258,8 +262,12 @@ button:disabled {
 #results-score td, #results-score th {
     text-align: right;
 }
+#results footer {
+    padding-bottom: 10vh;
+}
 
-@media screen and (max-device-width: 414px) {
+@media screen and (max-device-width: 414px),
+    screen and (max-device-height: 414px) and (orientation: landscape) {
     #results.selected {
         padding: 0 20px;
         display: flex;
index 7ddc1ef..717aff7 100644 (file)
         border-bottom-right-radius: 100%;
         border-top-left-radius: 100%;
     }
-
-    #center-text {
-        color: #FFF;
-        font-size: 2em;
-        font-weight: 200;
-    }
     </style>
 </head>
 <body>
     <div id="stage">
-        <span id="center-text">multiply</span>
     </div>
     <script src="../../resources/strings.js"></script>
     <script src="../../resources/extensions.js"></script>
index f5950b2..c7ebe46 100644 (file)
@@ -71,13 +71,14 @@ var TextStage = Utilities.createSubclass(Stage,
     animate: function(timeDelta) {
         var angle = Stage.dateCounterValue(this.millisecondsPerRotation);
 
-        var x = 0;
-        var y = 0;
         var progress = 0;
         var stepX = Math.sin(angle) * this.particleDistanceX;
         var stepY = Math.cos(angle) * this.particleDistanceY;
+        var x = -stepX * 3;
+        var y = -stepY * 3;
         var gradient = this.gradients[Math.floor(angle/(Math.PI * 2)) % this.gradients.length];
         var offset = Stage.dateCounterValue(200);
+        this._template.style.transform = "translate(" + Math.floor(x) + "px," + Math.floor(y) + "px)";
         for (var i = 0; i < this._offsetIndex; ++i) {
             var element = this.testElements[i];
 
@@ -91,7 +92,7 @@ var TextStage = Utilities.createSubclass(Stage,
 
             x += stepX;
             y += stepY;
-            element.style.transform = "translateX(" + Math.floor(x) + "px) translateY(" + Math.floor(y) + "px)";
+            element.style.transform = "translate(" + Math.floor(x) + "px," + Math.floor(y) + "px)";
 
             progress += this._stepProgress;
         }
index 8e0a207..4c9dde1 100644 (file)
             font-size: 48px;
             background-color: #313534;/* #d1948c;*/
         }
-        @media screen and (max-device-width: 414px) {
+        @media (min-device-height: 768px) and (max-device-height: 1024px) {
+            #stage {
+                font-size: 40px;
+            }
+        }
+        @media screen and (max-device-width: 414px),
+            screen and (max-device-height: 414px) and (orientation: landscape) {
             #stage {
                 font-size: 36px;
             }
         }
-        @media screen and (max-device-width: 320px) {
+        @media screen and (max-device-width: 375px),
+            screen and (max-device-height: 375px) and (orientation: landscape) {
+            #stage {
+                font-size: 30px;
+            }
+        }
+        @media screen and (max-device-width: 320px),
+            screen and (max-device-height: 320px) and (orientation: landscape) {
             #stage {
-                font-size: 24px;
+                font-size: 28px;
             }
         }
 
index 5a4f1d5..814537e 100644 (file)
@@ -1,3 +1,30 @@
+2016-04-09  Jon Lee  <jonlee@apple.com>
+
+        Update Animometer to accommodate different screens
+        https://bugs.webkit.org/show_bug.cgi?id=156449
+
+        Reviewed by Darin Adler.
+        Provisionally reviewed by Said Abou-Hallawa.
+
+        * Animometer/index.html: Wrap button in a container to add padding at the bottom.
+        * Animometer/resources/debug-runner/animometer.css:
+        (@media screen and (min-device-width: 1800px)): Deleted.
+        (@media screen and (min-width: 1800px)): Cannot use min-device-width since it may match incorrectly.
+        (screen and (max-device-height: 414px) and (orientation: landscape)): Some devices swap device width
+        and height with orientation change.
+        * Animometer/resources/runner/animometer.css: Similar.
+        (screen and (min-device-width: 1024px) and (orientation: landscape)):
+        (screen and (max-device-height: 414px) and (orientation: landscape)):
+        (.frame-container): On smaller iPhones, adding 1px prevents the navigation bars from appearing.
+        (@media screen and (min-device-width: 768px) and (max-device-width: 1024px)): Deleted.
+        (@media (min-device-height: 768px) and (max-device-height: 1024px)): Target iPad Airs and similar.
+        (@media screen and (min-device-width: 1024px) and (max-device-width: 1366px)): Deleted.
+        (@media screen and (max-device-width: 1024px) and (min-device-height: 1366px)): Target iPad Pro.
+        (#results footer): Add padding below the button for testing again.
+        * Animometer/tests/master/multiply.html: Remove the center text.
+        * Animometer/tests/master/resources/text.js: Update the test so that in every frame the text moves.
+        * Animometer/tests/master/text.html: Update the text sizing depending on the size of the device.
+
 2016-04-08  Jon Lee  <jonlee@apple.com>
 
         Have Animometer benchmark always start with complexity of 1