diff options
Diffstat (limited to 'third_party/webkit/PerformanceTests/MotionMark/resources/debug-runner/animometer.css')
-rw-r--r-- | third_party/webkit/PerformanceTests/MotionMark/resources/debug-runner/animometer.css | 774 |
1 files changed, 774 insertions, 0 deletions
diff --git a/third_party/webkit/PerformanceTests/MotionMark/resources/debug-runner/animometer.css b/third_party/webkit/PerformanceTests/MotionMark/resources/debug-runner/animometer.css new file mode 100644 index 0000000000..7fbf31ee7d --- /dev/null +++ b/third_party/webkit/PerformanceTests/MotionMark/resources/debug-runner/animometer.css @@ -0,0 +1,774 @@ +body { + font-size: initial; +} + +body.showing-intro, +body.showing-results, +body.showing-test-graph { + background-color: rgb(96, 96, 96); + background-image: initial; + background-repeat: initial; + background-size: initial; + animation: initial; + will-change: initial; + + color: rgb(235, 235, 235); +} + +section .body { + margin-left: 0; + max-width: initial; + transform: none; +} + +h1 { + font-size: 3em; + margin: 1.5em 0 .5em; + text-align: center; +} + +button { + transform: none !important; + min-width: initial; + transition: none; + animation: none; + will-change: initial; + + display: block; + font-size: 1.5em; + border: 2px solid rgb(235, 235, 235); + color: rgb(235, 235, 235); + background: transparent; + border-radius: 10px; + padding: .5em 2em; +} + +button:hover { + background-color: rgba(255, 255, 255, .1); + cursor: pointer; +} + +button:active { + color: inherit; + background-color: rgba(255, 255, 255, .2); +} + +button:disabled { + border-color: rgba(235, 235, 235, .5); + color: rgba(235, 235, 235, .5); +} + +@media screen and (max-device-width: 414px), + screen and (max-device-height: 414px) and (orientation: landscape) { + h1 { + font-size: 2.5em; + } + + section { + box-sizing: border-box; + width: 100%; + height: 100%; + padding: 0 5px; + } +} + +/* -------------------------------------------------------------------------- */ +/* Tree */ +/* -------------------------------------------------------------------------- */ + +.tree { + padding: 0; + list-style-type: none; +} + +.tree .expand-button { + position: absolute; + clip: rect(0, 0, 0, 0); +} + +.tree .expand-button ~ ul { + display: none; +} + +.tree .expand-button:checked ~ ul { + display: block; +} + +.tree ul { + list-style-type:none; +} + +.tree li { + position: relative; + padding: 0 0 1em 1em; +} + +.tree ul li { + list-style:none; + padding: 1em 0 0 0em; +} + +.tree > li:last-child { + padding-bottom: 0; +} + +.tree-label { + position: relative; + display: inline-block; +} + +label.tree-label { + cursor: pointer; +} + +.tree > li > label.tree-label:before { + position: relative; + z-index: 1; + float: left; + margin: 0 0 0 -2em; + width: 1em; + height: 1em; + content: '\25BA'; + text-align: center; + line-height: 2.5em; + font-size: .5em; +} + +.tree > li > :checked ~ label.tree-label:before { + content: '\25BC'; +} + +.tree .link { + cursor: pointer; + color: #999; + font-style: italic; + margin-left: 2em; +} + +@media screen and (max-device-width: 414px), + screen and (max-device-height: 414px) and (orientation: landscape) { + .tree { + padding-left: 1em; + } + .tree > li > label.tree-label:before { + font-size: 1em; + margin-left: -1.75em; + line-height: 1em; + } +} + +/* -------------------------------------------------------------------------- */ +/* Intro Section */ +/* -------------------------------------------------------------------------- */ + +#intro { + padding: 0; + opacity: initial; + transition: none; +} + +#intro .body > p { + padding: 1em 0; + margin: 0 auto; + text-align: center; +} + +#intro .start-benchmark { + padding: 10vh 0; + text-align: center; +} + +#intro .start-benchmark p { + color: hsl(11, 72%, 50%); + margin-bottom: 1em; + -apple-trailing-word: -apple-partially-balanced; +} + +#intro .start-benchmark button { + margin: 0 auto; +} + + +@media screen and (max-device-width: 414px), + screen and (max-device-height: 414px) and (orientation: landscape) { + #intro.selected { + display: flex; + align-items: center; + justify-content: flex-start; + flex-flow: column; + } + + #intro p { + padding-left: 20px; + padding-right: 20px; + font-size: 1.5em; + } +} + +#intro h2 { + font-size: 1.2em; +} + +#intro .body > div:first-of-type { + width: 100%; + margin: 2em 0 0; + flex-direction: row; + display: flex; + align-content: flex-start; +} + +#suites { + padding-left: 15vw; + padding-right: 3em; + flex: 1 1 30%; +} + +#options { + flex: 10 1 auto; +} + +#intro input[type="number"] { + width: 50px; +} + +#suites input[type="number"] { + display: none; + float: right; +} + +#suites input[type="number"].selected { + display: inline; + margin: 0; +} + +#suites ul ul { + font-size: .8em; + margin: 0; + padding: 0 0 0 1em; +} + +#suites > div { + margin: 3em 0; +} + +#drop-target { + font-size: 1em; + border-radius: 10px; + padding: .5em 2em; + border: 2px solid rgb(235, 235, 235); + color: rgb(235, 235, 235); +} + +#drop-target:hover { + background-color: rgba(255, 255, 255, .1); + cursor: pointer; +} + +#options ul { + margin: 0; + padding: 0; + list-style: none; +} + +#options h3 { + font-size: 1em; + font-weight: inherit; + margin: 0 0 .3em 0; + padding: 0; +} + +#options > form > ul > li { + padding: 0 0 1em 0; +} + +#options ul ul { + padding: 0; +} + +#options li { + padding: .1em 0; +} + +#intro > p { + padding: 0 5px 1em; + font-size: 1em; +} + +#intro .start-benchmark { + padding: 0 0 10vh; + margin-top: 0; +} + +#intro .start-benchmark p { + color: hsl(11, 100%, 66%); +} + +@media screen and (max-device-width: 414px), + screen and (max-device-height: 414px) and (orientation: landscape) { + #intro .body > div:first-of-type { + flex-direction: column; + } + + #suites, + #options { + padding: 0 5px; + margin: 0; + flex: 0 0 auto; + } +} + +/* -------------------------------------------------------------------------- */ +/* Running Section */ +/* -------------------------------------------------------------------------- */ + +#running-test { + display: flex; + align-items: center; + justify-content: center; +} + +#progress { + display: none; +} + +.display-progress-bar #progress { + display: block; + position: fixed; + top: 0; + left: 0; + height: 6px; + width: 100%; + background-color: rgb(128, 128, 128); +} + +.display-progress-bar #progress-completed { + position: absolute; + top: 0; + left: 0; + height: 6px; + width: 0; + background-color: rgb(235, 96, 32); +} + +body.showing-test-container.tiles-big { + overflow: hidden; +} + +body.showing-test-container.tiles-classic { + width: 3000px; + height: 3000px; + overflow: scroll; +} + +/* -------------------------------------------------------------------------- */ +/* Results Section */ +/* -------------------------------------------------------------------------- */ + +#results { + text-align: center; +} + +#results h1, #test-graph h1 { + font-size: 2em; +} + +#results button.small-button { + border: 1px solid rgba(235, 235, 235, .9); + color: rgba(235, 235, 235, .9); + border-radius: 2px; + padding: 1px 4px; + margin: 0 0 0 1em; + font-size: 9px; +} + +#results button.small-button:active { + background-color: rgba(235, 235, 235, .2); + color: inherit; +} + +#results .score, +#test-graph .score { + font-size: 3em; + font-weight: bold; + margin: 0; +} + +#results .confidence, +#test-graph .confidence { + margin-top: 0; + margin-bottom: 1em; + font-size: 1.5em; + font-weight: 400; + text-indent: inherit; + color: inherit; +} + +#results-tables { + direction: rtl; + + display: flex; + + align-items: center; + justify-content: center; + + margin: 3em 0; +} + +#results .table-container > div { + margin-left: 0; +} + +#results #results-score { + float: initial; +} + +#results #results-header { + width: initial; + position: initial; +} + +#results table { + direction: ltr; + min-width: initial; +} + +#results table td.suites-separator { + padding: .5em 0; +} + +#results table tr:nth-child(even) { + background-color: transparent; +} + +#results th { + padding: .5em 0; +} + +#results tr td { + padding: .25em 0; +} + +#results-header td, #results-header th { + text-align: left; +} +#results-header tr td { + padding-right: 1em; +} +#results-score td, #results-score th { + text-align: right; +} +#results .body > button { + margin: 1.5em auto .5em; +} +#results footer { + padding-bottom: 10vh; +} + +@media screen and (max-device-width: 414px), + screen and (max-device-height: 414px) and (orientation: landscape) { + #results.selected { + padding: 0 20px; + } +} + +#overlay { + background: rgba(0, 0, 10, .8); +} + +@supports (-webkit-backdrop-filter: blur(10px)) { + #overlay { + background: rgba(0, 0, 10, .4); + } +} + +#overlay > div div { + border: 1px solid rgb(241, 241, 241); +} + +#overlay button { + margin: 2em auto; + border-color: rgb(241, 241, 241); + color: rgb(241, 241, 241); +} + +#overlay button:hover { + background-color: rgba(255, 255, 255, .1); +} + +#overlay button:active { + background-color: rgba(255, 255, 255, .2); +} + +#results-data .average { + padding-left: 1em; + text-align: right; +} + +#results-data .stdev { + text-align: left; + padding-left: .25em; +} + +#results-data .left { + text-align: left; +} + +#results-data .right { + text-align: right; +} + +#results-data .pad-left { + padding-left: 1em; +} + +#results-data .pad-right { + padding-right: .25em; +} + +#results-data .small { + font-size: .8em; +} + +#results-tables td.noisy-results { + color: rgb(255, 104, 104); +} + +#results-tables div { + direction: ltr; + display: flex; + flex-direction: row; +} + +#test-graph { + flex: 1 0 calc(100% - 40px); +} + +#test-graph h1 { + margin-bottom: 0; +} + +#test-graph header { + position: relative; + text-align:center; +} + +#test-graph header button { + position: absolute; + top: 0; + left: 0; + border-width: 1px; + font-size: 1em; + padding: .5em 1em; +} + +#test-graph .score, #test-graph .confidence { + margin: 0; +} + +#test-graph nav { + position: absolute; + top: 1.5em; + right: 0; + font-size: .7em; + width: 28em; +} + +#test-graph nav ul { + margin: 0 30px 1em 0; + padding: 0; + list-style: none; +} + +#test-graph nav li { + padding: .1em 0; +} + +#test-graph nav li > span { + float: right; +} + +#test-graph nav.hide-data span { + display: none; +} + +/* -------------------------------------------------------------------------- */ +/* Graph Section */ +/* -------------------------------------------------------------------------- */ + +#test-graph-data { + z-index: 1; + font: 10px sans-serif; + color: rgb(235, 235, 235); +} + +#test-graph-data > svg { + fill: none; + overflow: visible; +} + +.axis path, +.axis line { + fill: none; + stroke: #999999; + shape-rendering: crispEdges; +} + +.axis text { + fill: #999; +} + +.yLeft.axis text { + fill: #7add49; +} +.yLeft.axis path, +.yLeft.axis line { + stroke: #7add49; +} +.yRight.axis text { + fill: #fa4925; +} +.yRight.axis path, +.yRight.axis line { + stroke: #fa4925; +} + +.axis.complexity .tick line { + stroke: rgba(200, 200, 200, .6); + stroke-width: 2px; +} + +.axis.complexity .domain, +.axis.complexity text { + stroke: transparent; + fill: transparent; +} + +.marker line { + stroke: #5493D6; +} + +.marker text { + fill: #999; +} + +.mean.complexity line { + stroke: hsla(100, 69%, 58%, .8); + stroke-width: 2px; +} + +.mean.complexity polygon { + fill: hsla(100, 69%, 58%, .05); +} + +.target-fps { + stroke: rgba(250, 73, 37, .4); + stroke-width: 1px; + stroke-dasharray: 10, 10; +} + +.mean.fps line { + stroke: hsla(10, 96%, 56%, .8); + stroke-width: 2px; +} + +.mean.fps polygon { + fill: hsla(10, 96%, 56%, .1); +} + +#regressions line { + stroke: rgba(200, 200, 200, .8); + stroke-width: 2px; +} + +#regressions circle { + fill: rgba(200, 200, 200, .8); +} + +.cursor line { + stroke: rgb(250, 250, 250); + stroke-width: 1px; +} + +.cursor circle, +.cursor text { + fill: rgb(250, 250, 250); +} + +#complexity path { + stroke: rgba(122, 221, 73, .7); + stroke-width: 2px; +} + +#complexity circle { + fill: rgb(122, 221, 73); +} + +#filteredFPS path { + stroke: hsla(30, 96%, 56%, .7); + stroke-width: 1px; +} + +#filteredFPS circle { + fill: hsl(30, 96%, 56%); +} + +#rawFPS path { + stroke: rgba(250, 73, 37, .7); + stroke-width: 1px; +} + +#rawFPS circle { + fill: rgb(250, 73, 37); +} + +#complexity-graph .regression line { + stroke: rgba(253, 253, 253, .8); + stroke-width: 2px; +} + +#complexity-graph .regression circle { + fill: rgba(253, 253, 253, .8); +} + +#complexity-graph .regression polygon { + fill: rgba(253, 253, 253, .05); +} + +#complexity-graph .raw.series line { + stroke: hsla(30, 96%, 56%, .3); + stroke-width: 1px; +} + +#complexity-graph .raw.regression line { + stroke: rgba(30, 96%, 86%, .6); +} + +#complexity-graph .raw.regression polygon { + stroke: rgba(30, 96%, 86%, .05); +} + +#complexity-graph .average.series circle { + fill: hsl(170, 96%, 56%); +} + +#complexity-graph .average.series line { + stroke: hsla(170, 96%, 56%, .2); + stroke-width: 2px; +} + +#complexity-graph .bootstrap .bar { + fill: hsla(260, 56%, 66%, .4); +} + +#complexity-graph .bootstrap .median line { + stroke: hsla(300, 56%, 66%, .8); + stroke-width: 2px; +} + +#complexity-graph .bootstrap .median circle { + fill: hsla(300, 56%, 66%, .8); +} + +#complexity-graph .bootstrap .median polygon { + fill: hsla(300, 56%, 66%, .05); +} |