resources/lib/qunitjs/qunit.css

   1 /*!
   2  * QUnit 2.19.4
   3  * https://qunitjs.com/
   4  *
   5  * Copyright OpenJS Foundation and other contributors
   6  * Released under the MIT license
   7  * https://jquery.org/license
   8  */
   9
  10 /** Font Family and Sizes */
  11
  12 #qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-filteredTest, #qunit-userAgent, #qunit-testresult {
  13         font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
  14 }
  15
  16 #qunit-testrunner-toolbar, #qunit-filteredTest, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
  17 #qunit-tests { font-size: smaller; }
  18
  19
  20 /** Resets */
  21
  22 #qunit-tests, #qunit-header, #qunit-banner, #qunit-filteredTest, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter {
  23         margin: 0;
  24         padding: 0;
  25 }
  26
  27 /* Style our buttons in a simple way, uninfluenced by the styles
  28    the tested app might load. Don't affect buttons in #qunit-fixture!
  29    https://github.com/qunitjs/qunit/pull/1395
  30    https://github.com/qunitjs/qunit/issues/1437 */
  31 #qunit-testrunner-toolbar button,
  32 #qunit-testresult button {
  33         all: unset; /* best effort, modern browsers only */
  34         font: inherit;
  35         color: initial;
  36         border: initial;
  37         background-color: buttonface;
  38         padding: 0 4px;
  39 }
  40
  41
  42 /** Fixed headers with scrollable tests */
  43
  44 @supports (display: flex) or (display: -webkit-box) {
  45         @media (min-height: 500px) {
  46                 #qunit {
  47                         position: fixed;
  48                         left: 0px;
  49                         right: 0px;
  50                         top: 0px;
  51                         bottom: 0px;
  52                         padding: 8px;
  53                         display: -webkit-box;
  54                         display: flex;
  55                         flex-direction: column;
  56                 }
  57
  58                 #qunit-tests {
  59                         overflow: scroll;
  60                 }
  61
  62                 #qunit-banner {
  63                         flex: 5px 0 0;
  64                 }
  65         }
  66 }
  67
  68
  69 /** Header (excluding toolbar) */
  70
  71 #qunit-header {
  72         padding: 0.5em 0 0.5em 1em;
  73
  74         color: #C2CCD1;
  75         background-color: #0D3349;
  76
  77         font-size: 1.5em;
  78         line-height: 1em;
  79         font-weight: 400;
  80
  81         border-radius: 5px 5px 0 0;
  82 }
  83
  84 #qunit-header a {
  85         text-decoration: none;
  86         color: inherit;
  87 }
  88
  89 #qunit-header a:hover,
  90 #qunit-header a:focus {
  91         color: #FFF;
  92 }
  93
  94 #qunit-banner {
  95         height: 5px;
  96 }
  97
  98 #qunit-filteredTest {
  99         padding: 0.5em 1em 0.5em 1em;
 100         color: #366097;
 101         background-color: #F4FF77;
 102 }
 103
 104 #qunit-userAgent {
 105         padding: 0.5em 1em 0.5em 1em;
 106         color: #FFF;
 107         background-color: #2B81AF;
 108         text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
 109 }
 110
 111
 112 /** Toolbar */
 113
 114 #qunit-testrunner-toolbar {
 115         padding: 0.5em 1em 0.5em 1em;
 116         color: #5E740B;
 117         background-color: #EEE;
 118 }
 119
 120 #qunit-testrunner-toolbar .clearfix {
 121         height: 0;
 122         clear: both;
 123 }
 124
 125 #qunit-testrunner-toolbar label {
 126         display: inline-block;
 127 }
 128
 129 #qunit-testrunner-toolbar input[type=checkbox],
 130 #qunit-testrunner-toolbar input[type=radio] {
 131         margin: 3px;
 132         vertical-align: -2px;
 133 }
 134
 135 #qunit-testrunner-toolbar input[type=text] {
 136         box-sizing: border-box;
 137         height: 1.6em;
 138 }
 139
 140 #qunit-testrunner-toolbar button,
 141 #qunit-testresult button {
 142   border-radius: .25em;
 143   border: 1px solid #AAA;
 144   background-color: #F8F8F8;
 145   color: #222;
 146   line-height: 1.6;
 147   cursor: pointer;
 148 }
 149 #qunit-testrunner-toolbar button:hover,
 150 #qunit-testresult button:hover {
 151         border-color: #AAA;
 152         background-color: #FFF;
 153         color: #444;
 154 }
 155 #qunit-testrunner-toolbar button:active,
 156 #qunit-testresult button:active {
 157         border-color: #777;
 158         background-color: #CCC;
 159         color: #000;
 160 }
 161 #qunit-testrunner-toolbar button:focus,
 162 #qunit-testresult button:focus {
 163         border-color: #2F68DA;
 164         /* emulate 2px border without a layout shift */
 165         box-shadow: inset 0 0 0 1px #2F68DA
 166 }
 167 #qunit-testrunner-toolbar button:disabled,
 168 #qunit-testresult button:disabled {
 169         border-color: #CCC;
 170         background-color: #CCC;
 171         color: #FFF;
 172   cursor: default;
 173 }
 174
 175 #qunit-toolbar-filters {
 176         float: right;
 177         /* aligning right avoids overflows and inefficient use of space
 178            around the dropdown menu on narrow viewports */
 179         text-align: right;
 180 }
 181
 182 .qunit-url-config,
 183 .qunit-filter,
 184 #qunit-modulefilter {
 185         display: inline-block;
 186         line-height: 2.1em;
 187         text-align: left;
 188 }
 189
 190 .qunit-filter,
 191 #qunit-modulefilter {
 192         position: relative;
 193         margin-left: 1em;
 194 }
 195
 196 .qunit-url-config label {
 197         margin-right: 0.5em;
 198 }
 199
 200 #qunit-modulefilter-search {
 201         box-sizing: border-box;
 202         min-width: 400px;
 203         min-width: min(400px, 80vw);
 204 }
 205
 206 #qunit-modulefilter-search-container {
 207         position: relative;
 208 }
 209 #qunit-modulefilter-search-container:after {
 210         position: absolute;
 211         right: 0.3em;
 212         bottom: 0;
 213         line-height: 100%;
 214         content: "\25bc";
 215         color: black;
 216 }
 217
 218 #qunit-modulefilter-dropdown {
 219         /* align with #qunit-modulefilter-search */
 220         box-sizing: border-box;
 221         min-width: 400px;
 222         min-width: min(400px, 80vw);
 223         max-width: 80vw;
 224         position: absolute;
 225         right: 0;
 226         top: 100%;
 227         margin-top: 2px;
 228
 229         /* ensure that when on a narrow viewports and having only one result,
 230            that #qunit-modulefilter-actions fall outside the dropdown rectangle. */
 231         min-height: 3em;
 232
 233         border: 1px solid #AAA;
 234         border-top-color: transparent;
 235         border-radius: 0 0 .25em .25em;
 236         color: #0D3349;
 237         background-color: #F5F5F5;
 238         z-index: 99;
 239 }
 240
 241 #qunit-modulefilter-actions {
 242         display: block;
 243         overflow: auto;
 244         /* align with #qunit-modulefilter-dropdown-list */
 245         font: smaller/1.5em sans-serif;
 246 }
 247 @media (min-width: 350px) {
 248         #qunit-modulefilter-actions {
 249                 position: absolute;
 250                 right: 0;
 251         }
 252 }
 253
 254 #qunit-modulefilter-dropdown #qunit-modulefilter-actions > * {
 255         box-sizing: border-box;
 256         max-height: 2.8em;
 257         display: block;
 258         padding: 0.4em;
 259 }
 260
 261 #qunit-modulefilter-dropdown #qunit-modulefilter-actions > button {
 262         float: right;
 263         margin: 0.25em;
 264 }
 265
 266 #qunit-modulefilter-dropdown-list {
 267         margin: 0;
 268         padding: 0;
 269         font: smaller/1.5em sans-serif;
 270 }
 271
 272 #qunit-modulefilter-dropdown-list li {
 273         list-style: none;
 274 }
 275 #qunit-modulefilter-dropdown-list .clickable {
 276         display: block;
 277         padding: 0.25em 0.50em 0.25em 0.15em;
 278         white-space: nowrap;
 279         overflow: hidden;
 280         text-overflow: ellipsis;
 281 }
 282 #qunit-modulefilter-dropdown-list .clickable.checked {
 283         font-weight: bold;
 284         background-color: #E2F0F7;
 285         color: #0D3349;
 286 }
 287 #qunit-modulefilter-dropdown .clickable:hover {
 288         background-color: #FFF;
 289         color: #444;
 290 }
 291
 292
 293 /** Tests: Pass/Fail */
 294
 295 #qunit-tests {
 296         list-style-position: inside;
 297 }
 298
 299 #qunit-tests li {
 300         padding: 0.4em 1em 0.4em 1em;
 301         border-bottom: 1px solid #FFF;
 302         list-style-position: inside;
 303 }
 304
 305 #qunit-tests > li {
 306         display: none;
 307 }
 308
 309 #qunit-tests li.running,
 310 #qunit-tests li.pass,
 311 #qunit-tests li.fail,
 312 #qunit-tests li.skipped,
 313 #qunit-tests li.aborted {
 314         display: list-item;
 315 }
 316
 317 #qunit-tests.hidepass {
 318         position: relative;
 319 }
 320
 321 #qunit-tests.hidepass li.running,
 322 #qunit-tests.hidepass li.pass:not(.todo) {
 323         visibility: hidden;
 324         position: absolute;
 325         width:   0;
 326         height:  0;
 327         padding: 0;
 328         border:  0;
 329         margin:  0;
 330 }
 331
 332 #qunit-tests li strong {
 333         cursor: pointer;
 334 }
 335
 336 #qunit-tests li.skipped strong {
 337         cursor: default;
 338 }
 339
 340 #qunit-tests li a {
 341         padding: 0.5em;
 342         color: inherit;
 343         text-decoration: underline;
 344 }
 345 #qunit-tests li a:hover,
 346 #qunit-tests li a:focus {
 347         color: #0D3349;
 348 }
 349
 350 #qunit-tests li .runtime {
 351         float: right;
 352         font-size: smaller;
 353 }
 354
 355 .qunit-assert-list {
 356         margin-top: 0.5em;
 357         padding: 0.5em;
 358
 359         background-color: #FFF;
 360
 361         border-radius: 5px;
 362 }
 363
 364 .qunit-source {
 365         margin: 0.6em 0 0.3em;
 366 }
 367
 368 .qunit-collapsed {
 369         display: none;
 370 }
 371
 372 #qunit-tests table {
 373         border-collapse: collapse;
 374         margin-top: 0.2em;
 375 }
 376
 377 #qunit-tests th {
 378         text-align: right;
 379         vertical-align: top;
 380         padding: 0 0.5em 0 0;
 381 }
 382
 383 #qunit-tests td {
 384         vertical-align: top;
 385 }
 386
 387 #qunit-tests pre {
 388         margin: 0;
 389         white-space: pre-wrap;
 390         word-wrap: break-word;
 391 }
 392
 393 #qunit-tests del {
 394         color: #374E0C;
 395         background-color: #E0F2BE;
 396         text-decoration: none;
 397 }
 398
 399 #qunit-tests ins {
 400         color: #500;
 401         background-color: #FFCACA;
 402         text-decoration: none;
 403 }
 404
 405 /*** Test Counts */
 406
 407 #qunit-tests b.counts                       { color: #0D3349; }
 408 #qunit-tests b.passed                       { color: #5E740B; }
 409 #qunit-tests b.failed                       { color: #710909; }
 410
 411 #qunit-tests li li {
 412         padding: 5px;
 413         background-color: #FFF;
 414         border-bottom: none;
 415         list-style-position: inside;
 416 }
 417
 418 /*** Passing Styles */
 419
 420
 421 #qunit-tests .pass {
 422         color: #2F68DA;
 423         background-color: #E2F0F7;
 424 }
 425
 426 #qunit-tests .pass .test-name {
 427         color: #366097;
 428 }
 429
 430 #qunit-tests li li.pass {
 431         color: #3C510C;
 432         background-color: #FFF;
 433         border-left: 10px solid #C6E746;
 434 }
 435
 436 #qunit-tests .pass .test-actual,
 437 #qunit-tests .pass .test-expected           { color: #999; }
 438
 439 #qunit-banner.qunit-pass                    { background-color: #C6E746; }
 440
 441 /*** Failing Styles */
 442
 443 #qunit-tests .fail {
 444         color: #000;
 445         background-color: #EE5757;
 446 }
 447
 448 #qunit-tests li li.fail {
 449         color: #710909;
 450         background-color: #FFF;
 451         border-left: 10px solid #EE5757;
 452         white-space: pre;
 453 }
 454
 455 #qunit-tests > li:last-child {
 456         border-radius: 0 0 5px 5px;
 457 }
 458
 459 #qunit-tests .fail .test-actual             { color: #EE5757; }
 460 #qunit-tests .fail .test-expected           { color: #008000; }
 461
 462 #qunit-banner.qunit-fail                    { background-color: #EE5757; }
 463
 464
 465 /*** Aborted tests */
 466 #qunit-tests .aborted { color: #000; background-color: orange; }
 467 /*** Skipped tests */
 468
 469 #qunit-tests .skipped {
 470         background-color: #EBECE9;
 471 }
 472
 473 #qunit-tests .qunit-todo-label,
 474 #qunit-tests .qunit-skipped-label {
 475         background-color: #F4FF77;
 476         display: inline-block;
 477         font-style: normal;
 478         color: #366097;
 479         line-height: 1.8em;
 480         padding: 0 0.5em;
 481         margin: -0.4em 0.4em -0.4em 0;
 482 }
 483
 484 #qunit-tests .qunit-todo-label {
 485         background-color: #EEE;
 486 }
 487
 488 /** Result */
 489
 490 #qunit-testresult {
 491         color: #366097;
 492         background-color: #E2F0F7;
 493
 494         border-bottom: 1px solid #FFF;
 495 }
 496 #qunit-testresult a {
 497         color: #2F68DA;
 498 }
 499 #qunit-testresult .clearfix {
 500         height: 0;
 501         clear: both;
 502 }
 503 #qunit-testresult .module-name {
 504         font-weight: 700;
 505 }
 506 #qunit-testresult-display {
 507         padding: 0.5em 1em 0.5em 1em;
 508         width: 85%;
 509         float:left;
 510 }
 511 #qunit-testresult-controls {
 512         padding: 0.5em 1em 0.5em 1em;
 513   width: 10%;
 514         float:left;
 515 }
 516
 517 /** Fixture */
 518
 519 #qunit-fixture {
 520         position: absolute;
 521         top: -10000px;
 522         left: -10000px;
 523         width: 1000px;
 524         height: 1000px;
 525 }