Changeset 193975 in webkit
- Timestamp:
- Dec 11, 2015 1:47:31 PM (8 years ago)
- Location:
- trunk/PerformanceTests
- Files:
-
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/PerformanceTests/Animometer/runner/animometer.html
r193685 r193975 2 2 <html> 3 3 <head> 4 <meta name="viewport" content="width=device-width, user-scalable=no"> 4 5 <link rel="stylesheet" href="resources/animometer.css"> 5 6 <script src="../resources/strings.js"></script> … … 15 16 <main> 16 17 <div class="spacer"></div> 17 <div id="section-container"> 18 <section id="home" class="selected"> 19 <header> 20 <h1>Animometer</h1> 21 </header> 22 <div id="suites"> 23 <h2>Suites:</h2> 24 <ul class="tree"></ul> 25 </div> 26 <div id="options"> 27 <h2>Options:</h2> 28 <form name="benchmark-options"> 18 19 <section id="home" class="selected"> 20 <header> 21 <h1>Animometer</h1> 22 </header> 23 <div id="suites"> 24 <h2>Suites:</h2> 25 <ul class="tree"></ul> 26 </div> 27 <div id="options"> 28 <h2>Options:</h2> 29 <form name="benchmark-options"> 30 <ul> 31 <li> 32 <label>Test length: <input type="number" id="test-interval" value="10"> seconds each</label> 33 </li> 34 <li> 35 <h3>Display:</h3> 29 36 <ul> 30 <li> 31 <label>Test length: <input type="number" id="test-interval" value="10"> seconds each</label> 32 </li> 33 <li> 34 <h3>Display:</h3> 35 <ul> 36 <li><label><input name="display" type="radio" value="minimal" checked> Minimal</label></li> 37 <li><label><input name="display" type="radio" value="progress-bar" checked> Progress bar</label></li> 38 <li><label><input name="display" type="radio" value="statistics-table"> Statistics table</label></li> 39 </ul> 40 </li> 41 <li> 42 <h3>Adjusting the test complexity:</h3> 43 <ul> 44 <li><label><input name="adjustment" type="radio" value="fixed"> Keep constant</label></li> 45 <li><label><input name="adjustment" type="radio" value="fixed-after-warmup"> Keep constant after warmup to target FPS</label></li> 46 <li><label><input name="adjustment" type="radio" value="adaptive" checked> Maintain target FPS</label></li> 47 </ul> 48 </li> 49 <li> 50 <label>Target frame rate: <input type="number" id="frame-rate" value="50"> FPS</label> 51 </li> 52 <li> 53 <label><input type="checkbox" id="estimated-frame-rate" checked> Filter frame rate calculation</label> 54 </li> 37 <li><label><input name="display" type="radio" value="minimal" checked> Minimal</label></li> 38 <li><label><input name="display" type="radio" value="progress-bar" checked> Progress bar</label></li> 39 <li><label><input name="display" type="radio" value="statistics-table"> Statistics table</label></li> 55 40 </ul> 56 </form> 57 </div> 58 <footer> 59 <button class="large-button" onclick="benchmarkController.startTest()">Start Test</button> 60 </footer> 61 </section> 62 <section id="running"> 63 <div id="running-test"></div> 64 <div id="progress"> 65 <div id="progress-completed"></div> 66 </div> 67 <div id="record"> 68 <table class="results-table"></table> 69 </div> 70 </section> 71 <section id="results"> 72 <header> 73 <h1>Results:</h1> 74 </header> 75 <data> 76 <table class="results-table"></table> 77 </data> 78 <footer> 79 <button class="large-button" onclick="benchmarkController.selectResults()">Select</button> 80 <button class="large-button" onclick="benchmarkController.showJSON()">JSON</button> 81 <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button> 82 </footer> 83 </section> 84 <section id="json"> 85 <header> 86 <h1>JSON:</h1> 87 </header> 88 <data> 89 <div class="results-json" contentEditable="true"></div> 90 </data> 91 <footer> 92 <button class="large-button" onclick="benchmarkController.selectJSON('json')">Select</button> 93 <button class="large-button" onclick="benchmarkController.showResults()">Results</button> 94 <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button> 95 </footer> 96 </section> 97 <section id="test-json"> 98 <header> 99 <h1>JSON:</h1> 100 </header> 101 <data> 102 <div class="results-json" contentEditable="true"></div> 103 </data> 104 <footer> 105 <button class="large-button" onclick="benchmarkController.selectJSON('test-json')">Select</button> 106 <button class="large-button" onclick="benchmarkController.showResults()">Results</button> 107 <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button> 108 </footer> 109 </section> 110 <section id="test-graph"> 111 <header> 112 <h1>Graph:</h1> 113 </header> 114 <data></data> 115 <footer> 116 <button class="large-button" onclick="benchmarkController.showResults()">Results</button> 117 <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button> 118 </footer> 119 </section> 120 </div> 41 </li> 42 <li> 43 <h3>Adjusting the test complexity:</h3> 44 <ul> 45 <li><label><input name="adjustment" type="radio" value="fixed"> Keep constant</label></li> 46 <li><label><input name="adjustment" type="radio" value="fixed-after-warmup"> Keep constant after warmup to target FPS</label></li> 47 <li><label><input name="adjustment" type="radio" value="adaptive" checked> Maintain target FPS</label></li> 48 </ul> 49 </li> 50 <li> 51 <label>Target frame rate: <input type="number" id="frame-rate" value="50"> FPS</label> 52 </li> 53 <li> 54 <label><input type="checkbox" id="estimated-frame-rate" checked> Filter frame rate calculation</label> 55 </li> 56 </ul> 57 </form> 58 </div> 59 <footer> 60 <button class="large-button" onclick="benchmarkController.startTest()">Start Test</button> 61 </footer> 62 </section> 63 <section id="running"> 64 <div id="running-test"></div> 65 <div id="progress"> 66 <div id="progress-completed"></div> 67 </div> 68 <div id="record"> 69 <table class="results-table"></table> 70 </div> 71 </section> 72 <section id="results"> 73 <header> 74 <h1>Results:</h1> 75 </header> 76 <data> 77 <table class="results-table"></table> 78 </data> 79 <footer> 80 <button class="large-button" onclick="benchmarkController.selectResults()">Select</button> 81 <button class="large-button" onclick="benchmarkController.showJSON()">JSON</button> 82 <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button> 83 </footer> 84 </section> 85 <section id="json"> 86 <header> 87 <h1>JSON:</h1> 88 </header> 89 <data> 90 <div class="results-json" contentEditable="true"></div> 91 </data> 92 <footer> 93 <button class="large-button" onclick="benchmarkController.selectJSON('json')">Select</button> 94 <button class="large-button" onclick="benchmarkController.showResults()">Results</button> 95 <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button> 96 </footer> 97 </section> 98 <section id="test-json"> 99 <header> 100 <h1>JSON:</h1> 101 </header> 102 <data> 103 <div class="results-json" contentEditable="true"></div> 104 </data> 105 <footer> 106 <button class="large-button" onclick="benchmarkController.selectJSON('test-json')">Select</button> 107 <button class="large-button" onclick="benchmarkController.showResults()">Results</button> 108 <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button> 109 </footer> 110 </section> 111 <section id="test-graph"> 112 <header> 113 <h1>Graph:</h1> 114 </header> 115 <data></data> 116 <footer> 117 <button class="large-button" onclick="benchmarkController.showResults()">Results</button> 118 <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button> 119 </footer> 120 </section> 121 121 122 <div class="spacer"></div> 122 123 </main> -
trunk/PerformanceTests/Animometer/runner/resources/animometer.css
r193685 r193975 60 60 } 61 61 62 @media screen and (max-device-width: 414px) { 63 button.large-button { 64 margin: 1em 0; 65 } 66 } 67 62 68 /* -------------------------------------------------------------------------- */ 63 69 /* Tree */ … … 116 122 width: 1em; 117 123 height: 1em; 118 content: '\25B 6';124 content: '\25BA'; 119 125 text-align: center; 120 126 line-height: 2.5em; … … 124 130 .tree > li > :checked ~ label.tree-label:before { 125 131 content: '\25BC'; 132 } 133 134 @media screen and (max-device-width: 414px) { 135 .tree { 136 padding-left: 1em; 137 } 138 .tree > li > label.tree-label:before { 139 font-size: 1em; 140 margin-left: -1.75em; 141 line-height: 1em; 142 } 126 143 } 127 144 … … 216 233 } 217 234 218 section#home {235 #home { 219 236 min-height: 600px; 220 height: initial;237 height: auto; 221 238 } 222 239 … … 264 281 } 265 282 266 section#home {283 #home { 267 284 min-height: 800px; 268 285 } 269 286 } 270 287 288 @media screen and (max-device-width: 414px) { 289 .spacer { 290 -webkit-flex: 0 0 0; 291 -ms-flex: 0 0 0; 292 flex: 0 0 0; 293 } 294 295 section { 296 box-sizing: border-box; 297 width: 100%; 298 height: 100%; 299 align-self: stretch; 300 padding: 0 5px; 301 } 302 303 #home { 304 min-height: 100%; 305 } 306 307 .display-progress-bar section, 308 .display-statistics-table section { 309 border: 0; 310 } 311 312 section > footer { 313 -webkit-flex-direction: column; 314 -ms-flex-direction: column; 315 flex-direction: column; 316 max-height: initial; 317 } 318 } 319 271 320 /* -------------------------------------------------------------------------- */ 272 321 /* Home Section */ 273 322 /* -------------------------------------------------------------------------- */ 274 323 275 section#home {324 #home { 276 325 -webkit-flex-direction: row; 277 326 -ms-flex-direction: row; … … 285 334 } 286 335 287 section#home h2 {336 #home h2 { 288 337 font-size: 1.2em; 289 338 } … … 308 357 } 309 358 310 section#home > header > h1 {359 #home > header > h1 { 311 360 margin: 0 auto; 312 361 width: 70%; … … 314 363 } 315 364 316 section#home input[type="number"] {365 #home input[type="number"] { 317 366 width: 50px; 318 367 } … … 332 381 margin: 0; 333 382 padding: 0 0 0 1em; 334 }335 336 #suites ul ul li {337 383 } 338 384 … … 362 408 } 363 409 410 @media screen and (max-device-width: 414px) { 411 #suites, 412 #options { 413 padding: 0 5px; 414 margin: 0; 415 } 416 #suites { 417 -webkit-flex: 0 1 100%; 418 -ms-flex: 0 1 100%; 419 flex: 0 1 100%; 420 } 421 } 422 364 423 /* -------------------------------------------------------------------------- */ 365 424 /* Running Section */ 366 425 /* -------------------------------------------------------------------------- */ 367 426 368 section#running {427 #running { 369 428 position: relative; 370 429 -ms-flex-align: center; … … 377 436 } 378 437 379 section#running >#running-test {438 #running-test { 380 439 width: 100%; 381 440 height: 100%; 382 441 } 383 442 384 section#running >#running-test > iframe {443 #running-test > iframe { 385 444 width: 800px; 386 445 height: 600px; … … 389 448 } 390 449 391 .display-progress-bar section#running > #progress, 392 .display-statistics-table section#running > #progress { 450 #progress, #record { 451 display: none; 452 } 453 454 .display-progress-bar #progress, 455 .display-statistics-table #progress { 456 display: block; 393 457 position: absolute; 394 458 bottom: -6px; … … 401 465 } 402 466 403 .display-progress-bar section#running > #progress >#progress-completed,404 .display-statistics-table section#running > #progress >#progress-completed {467 .display-progress-bar #progress-completed, 468 .display-statistics-table #progress-completed { 405 469 position: absolute; 406 470 top: 0; … … 411 475 } 412 476 413 section#running > #record { 477 .display-progress-bar #record, 478 .display-statistics-table #record { 479 display: block; 414 480 position: absolute; 415 481 bottom: -95px; … … 420 486 421 487 @media screen and (min-device-width: 1800px) { 422 section#running >#running-test > iframe {488 #running-test > iframe { 423 489 width: 1600px; 424 490 height: 800px; … … 426 492 } 427 493 494 @media screen and (max-device-width: 414px) { 495 #running { 496 padding: 0; 497 } 498 499 #running-test { 500 overflow: hidden; 501 } 502 503 #running-test > iframe { 504 width: calc(100%); 505 height: calc(100%); 506 } 507 } 428 508 /* -------------------------------------------------------------------------- */ 429 509 /* Results Section */ -
trunk/PerformanceTests/ChangeLog
r193685 r193975 1 2015-12-11 Jon Lee <jonlee@apple.com> 2 3 Improve Animometer on iOS 4 https://bugs.webkit.org/show_bug.cgi?id=152180 5 6 Reviewed by Simon Fraser. 7 8 Improve experience on phones. Make the canvas take 9 up the whole screen. 10 11 * Animometer/runner/animometer.html: Add meta viewport. 12 Remove the container div. 13 * Animometer/runner/resources/animometer.css: Have buttons lay 14 out vertically. Update detail arrow glyph. Make the suites and 15 options section lay out vertically. Remove the top spacers since 16 we want the canvas to take over the whole screen. Minimal display 17 is recommended for use. 18 1 19 2015-12-07 Jon Lee <jonlee@apple.com> 2 20
Note: See TracChangeset
for help on using the changeset viewer.