1 /* 2 * Copyright (C) 2011 Google Inc. All rights reserved. 3 * 4 * Redistribution and use in source and binary forms, with or without 5 * modification, are permitted provided that the following conditions 6 * are met: 7 * 1. Redistributions of source code must retain the above copyright 8 * notice, this list of conditions and the following disclaimer. 9 * 2. Redistributions in binary form must reproduce the above copyright 10 * notice, this list of conditions and the following disclaimer in the 11 * documentation and/or other materials provided with the distribution. 12 * 13 * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS'' 14 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, 15 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 16 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS 17 * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR 18 * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF 19 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS 20 * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN 21 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) 22 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF 23 * THE POSSIBILITY OF SUCH DAMAGE. 24 */ 25 26 .non-action-button, .results-view ul.actions, .ui-dialog ul.actions { 27 float: right; 28 margin: 0; 29 padding: 5px 0px; 30 list-style: none; 31 display: inline-block; 32 } 33 34 .non-action-button { 35 padding: 5px; 36 } 37 38 .results-view ul.actions.rebaseline-action { 39 float: none; 40 position: absolute; 41 right: 4px; 42 top: 7px; 43 padding: 0; 44 } 45 46 .results-view ul.actions li, .ui-dialog ul.actions li { 47 display: inline-block; 48 } 49 50 .results-view h3 ul.actions { 51 padding: 2px 0px; 52 } 53 54 .results-view h3 ul.actions { 55 visibility: hidden; 56 } 57 58 .results-view h3.ui-state-active ul.actions { 59 visibility: visible; 60 } 61 62 .ui-tabs .ui-tabs-panel.results-detail { 63 padding: 0px; 64 } 65 66 .results-grid table { 67 table-layout: fixed; 68 width: 100%; 69 border-collapse: collapse; 70 } 71 72 .results-grid table td, .results-view table th { 73 overflow: hidden; 74 vertical-align: top; 75 } 76 77 .results-grid table th { 78 padding: 3px; 79 border-top: 1px solid #DDD; 80 border-bottom: 1px solid #DDD; 81 } 82 83 .results-grid .text-result { 84 border: none; 85 width: 100%; 86 height: 400px; /* FIXME: How do we get a reasonable height here? */ 87 } 88 89 .results-grid .image-result { 90 width: 100%; 91 height: auto; 92 } 93 94 .results-view .top-panel { 95 max-height: 20%; 96 overflow: auto; 97 position: relative; 98 border: 1px solid #EEE; 99 } 100 101 .results-view .resize-handle { 102 height: 5px; 103 text-align: center; 104 -webkit-user-select: none; 105 line-height: 5px; 106 cursor: ns-resize; 107 font-size: 5px; 108 font-weight: bold; 109 padding: 1px; 110 } 111 112 .results-view .resize-handle:before { 113 content: '|||'; 114 } 115 116 .results-view .link-title, 117 .results-view .active .non-link-title { 118 display: none; 119 } 120 121 .results-view .non-link-title, 122 .results-view .active .link-title { 123 display: inline-block; 124 } 125 126 .results-view h3 { 127 font-size: 14px; 128 font-weight: normal; 129 border-top: 1px solid #DDD; 130 margin: 0; 131 cursor: pointer; 132 } 133 134 .results-view h3:not(.active):hover { 135 background-color: #EEE; 136 } 137 138 .results-view .active { 139 background-color: #CCC; 140 } 141 142 /* CSS percentages in standards-mode are dumb. You need to have a percentage or fixed height 143 all the way up the tree in order to have percentages resolve. */ 144 html, body, #onebar, .results-view, .test-selector { 145 height: 100%; 146 } 147 148 #results, #perf { 149 /* FIXME: We really should use flexbox so we don't have to do this. But that requires restructuring the DOM a bit. */ 150 height: -webkit-calc(100% - 39px); 151 box-sizing: border-box; 152 /* Position relative so that nested percentages size to this element. */ 153 position: relative; 154 } 155 156 /*** status console ***/ 157 .status { 158 position: fixed; 159 bottom: 0; 160 left: 0; 161 right: 0; 162 height: 100px; 163 background-color: white; 164 border-top: 1px solid gray; 165 -webkit-box-shadow: 0px -2px 10px gray; 166 overflow: auto; 167 white-space: nowrap; 168 padding: 4px; 169 } 170 171 .status .actions, .status .process-text { 172 position: fixed; 173 bottom: 0; 174 right: 20px; 175 margin: 4px; 176 } 177 178 .processing .actions { 179 display: none; 180 } 181 182 .processing .process-text { 183 display: block; 184 } 185 186 .process-text { 187 display: none; 188 } 189 190 .status-content { 191 border-bottom: 1px dashed; 192 margin-bottom: 1em; 193 } 194 195 .status-content:last-child { 196 border-bottom: 0; 197 margin-bottom: 0; 198 } 199 200 .flakiness-iframe, .flakiness-iframe-placeholder { 201 border: none; 202 height: 0; 203 width: 100%; 204 } 205