- Revision
- 199328
- Author
- [email protected]
- Date
- 2016-04-11 19:12:23 -0700 (Mon, 11 Apr 2016)
Log Message
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.
Modified Paths
Diff
Modified: trunk/PerformanceTests/Animometer/index.html (199327 => 199328)
--- trunk/PerformanceTests/Animometer/index.html 2016-04-12 01:32:15 UTC (rev 199327)
+++ trunk/PerformanceTests/Animometer/index.html 2016-04-12 02:12:23 UTC (rev 199328)
@@ -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>
Modified: trunk/PerformanceTests/Animometer/resources/debug-runner/animometer.css (199327 => 199328)
--- trunk/PerformanceTests/Animometer/resources/debug-runner/animometer.css 2016-04-12 01:32:15 UTC (rev 199327)
+++ trunk/PerformanceTests/Animometer/resources/debug-runner/animometer.css 2016-04-12 02:12:23 UTC (rev 199328)
@@ -27,7 +27,7 @@
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 @@
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 @@
}
}
-@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%;
}
Modified: trunk/PerformanceTests/Animometer/resources/runner/animometer.css (199327 => 199328)
--- trunk/PerformanceTests/Animometer/resources/runner/animometer.css 2016-04-12 01:32:15 UTC (rev 199327)
+++ trunk/PerformanceTests/Animometer/resources/runner/animometer.css 2016-04-12 02:12:23 UTC (rev 199328)
@@ -54,7 +54,6 @@
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 @@
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 @@
}
}
-@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 @@
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 @@
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 @@
}
}
-@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 @@
#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;
Modified: trunk/PerformanceTests/Animometer/tests/master/multiply.html (199327 => 199328)
--- trunk/PerformanceTests/Animometer/tests/master/multiply.html 2016-04-12 01:32:15 UTC (rev 199327)
+++ trunk/PerformanceTests/Animometer/tests/master/multiply.html 2016-04-12 02:12:23 UTC (rev 199328)
@@ -38,17 +38,10 @@
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=""
<script src=""
Modified: trunk/PerformanceTests/Animometer/tests/master/resources/text.js (199327 => 199328)
--- trunk/PerformanceTests/Animometer/tests/master/resources/text.js 2016-04-12 01:32:15 UTC (rev 199327)
+++ trunk/PerformanceTests/Animometer/tests/master/resources/text.js 2016-04-12 02:12:23 UTC (rev 199328)
@@ -71,13 +71,14 @@
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 @@
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;
}
Modified: trunk/PerformanceTests/Animometer/tests/master/text.html (199327 => 199328)
--- trunk/PerformanceTests/Animometer/tests/master/text.html 2016-04-12 01:32:15 UTC (rev 199327)
+++ trunk/PerformanceTests/Animometer/tests/master/text.html 2016-04-12 02:12:23 UTC (rev 199328)
@@ -10,16 +10,29 @@
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: 24px;
+ font-size: 30px;
}
}
+ @media screen and (max-device-width: 320px),
+ screen and (max-device-height: 320px) and (orientation: landscape) {
+ #stage {
+ font-size: 28px;
+ }
+ }
#stage div {
width: 80%;
Modified: trunk/PerformanceTests/ChangeLog (199327 => 199328)
--- trunk/PerformanceTests/ChangeLog 2016-04-12 01:32:15 UTC (rev 199327)
+++ trunk/PerformanceTests/ChangeLog 2016-04-12 02:12:23 UTC (rev 199328)
@@ -1,3 +1,30 @@
+2016-04-09 Jon Lee <[email protected]>
+
+ 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 <[email protected]>
Have Animometer benchmark always start with complexity of 1
