Source/WebCore/css/html.css

   1 /*
   2  * The default style sheet used to render HTML.
   3  *
   4  * Copyright (C) 2000 Lars Knoll (knoll@kde.org)
   5  * Copyright (C) 2003-2011, 2014 Apple Inc. All rights reserved.
   6  *
   7  * This library is free software; you can redistribute it and/or
   8  * modify it under the terms of the GNU Library General Public
   9  * License as published by the Free Software Foundation; either
  10  * version 2 of the License, or (at your option) any later version.
  11  *
  12  * This library is distributed in the hope that it will be useful,
  13  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  14  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  15  * Library General Public License for more details.
  16  *
  17  * You should have received a copy of the GNU Library General Public License
  18  * along with this library; see the file COPYING.LIB.  If not, write to
  19  * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
  20  * Boston, MA 02110-1301, USA.
  21  *
  22  */
  23
  24 @namespace "http://www.w3.org/1999/xhtml";
  25
  26 html {
  27     display: block
  28 }
  29
  30 /* children of the <head> element all have display:none */
  31 head {
  32     display: none
  33 }
  34
  35 meta {
  36     display: none
  37 }
  38
  39 title {
  40     display: none
  41 }
  42
  43 link {
  44     display: none
  45 }
  46
  47 style {
  48     display: none
  49 }
  50
  51 script {
  52     display: none
  53 }
  54
  55 /* generic block-level elements */
  56
  57 body {
  58     display: block;
  59     margin: 8px
  60 }
  61
  62 p {
  63     display: block;
  64     -webkit-margin-before: 1__qem;
  65     -webkit-margin-after: 1__qem;
  66     -webkit-margin-start: 0;
  67     -webkit-margin-end: 0;
  68 }
  69
  70 div {
  71     display: block
  72 }
  73
  74 layer {
  75     display: block
  76 }
  77
  78 article, aside, footer, header, hgroup, main, nav, section {
  79     display: block
  80 }
  81
  82 marquee {
  83     display: inline-block;
  84     overflow: -webkit-marquee
  85 }
  86
  87 address {
  88     display: block
  89 }
  90
  91 blockquote {
  92     display: block;
  93     -webkit-margin-before: 1__qem;
  94     -webkit-margin-after: 1em;
  95     -webkit-margin-start: 40px;
  96     -webkit-margin-end: 40px;
  97 }
  98
  99 figcaption {
 100     display: block
 101 }
 102
 103 figure {
 104     display: block;
 105     -webkit-margin-before: 1em;
 106     -webkit-margin-after: 1em;
 107     -webkit-margin-start: 40px;
 108     -webkit-margin-end: 40px;
 109 }
 110
 111 q {
 112     display: inline
 113 }
 114
 115 q::before {
 116     content: open-quote;
 117 }
 118
 119 q::after {
 120     content: close-quote;
 121 }
 122
 123 center {
 124     display: block;
 125     /* special centering to be able to emulate the html4/netscape behaviour */
 126     text-align: -webkit-center
 127 }
 128
 129 hr {
 130     display: block;
 131     -webkit-margin-before: 0.5em;
 132     -webkit-margin-after: 0.5em;
 133     -webkit-margin-start: auto;
 134     -webkit-margin-end: auto;
 135     border-style: inset;
 136     border-width: 1px
 137 }
 138
 139 map {
 140     display: inline
 141 }
 142
 143 video {
 144     object-fit: contain;
 145 }
 146
 147 /* heading elements */
 148
 149 h1 {
 150     display: block;
 151     font-size: 2em;
 152     -webkit-margin-before: 0.67__qem;
 153     -webkit-margin-after: 0.67em;
 154     -webkit-margin-start: 0;
 155     -webkit-margin-end: 0;
 156     font-weight: bold
 157 }
 158
 159 :-webkit-any(article,aside,nav,section) h1 {
 160     font-size: 1.5em;
 161     -webkit-margin-before: 0.83__qem;
 162     -webkit-margin-after: 0.83em;
 163 }
 164
 165 :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
 166     font-size: 1.17em;
 167     -webkit-margin-before: 1__qem;
 168     -webkit-margin-after: 1em;
 169 }
 170
 171 :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
 172     font-size: 1.00em;
 173     -webkit-margin-before: 1.33__qem;
 174     -webkit-margin-after: 1.33em;
 175 }
 176
 177 :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
 178     font-size: .83em;
 179     -webkit-margin-before: 1.67__qem;
 180     -webkit-margin-after: 1.67em;
 181 }
 182
 183 :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
 184     font-size: .67em;
 185     -webkit-margin-before: 2.33__qem;
 186     -webkit-margin-after: 2.33em;
 187 }
 188
 189 h2 {
 190     display: block;
 191     font-size: 1.5em;
 192     -webkit-margin-before: 0.83__qem;
 193     -webkit-margin-after: 0.83em;
 194     -webkit-margin-start: 0;
 195     -webkit-margin-end: 0;
 196     font-weight: bold
 197 }
 198
 199 h3 {
 200     display: block;
 201     font-size: 1.17em;
 202     -webkit-margin-before: 1__qem;
 203     -webkit-margin-after: 1em;
 204     -webkit-margin-start: 0;
 205     -webkit-margin-end: 0;
 206     font-weight: bold
 207 }
 208
 209 h4 {
 210     display: block;
 211     -webkit-margin-before: 1.33__qem;
 212     -webkit-margin-after: 1.33em;
 213     -webkit-margin-start: 0;
 214     -webkit-margin-end: 0;
 215     font-weight: bold
 216 }
 217
 218 h5 {
 219     display: block;
 220     font-size: .83em;
 221     -webkit-margin-before: 1.67__qem;
 222     -webkit-margin-after: 1.67em;
 223     -webkit-margin-start: 0;
 224     -webkit-margin-end: 0;
 225     font-weight: bold
 226 }
 227
 228 h6 {
 229     display: block;
 230     font-size: .67em;
 231     -webkit-margin-before: 2.33__qem;
 232     -webkit-margin-after: 2.33em;
 233     -webkit-margin-start: 0;
 234     -webkit-margin-end: 0;
 235     font-weight: bold
 236 }
 237
 238 /* tables */
 239
 240 table {
 241     display: table;
 242     border-collapse: separate;
 243     border-spacing: 2px;
 244     border-color: gray
 245 }
 246
 247 thead {
 248     display: table-header-group;
 249     vertical-align: middle;
 250     border-color: inherit
 251 }
 252
 253 tbody {
 254     display: table-row-group;
 255     vertical-align: middle;
 256     border-color: inherit
 257 }
 258
 259 tfoot {
 260     display: table-footer-group;
 261     vertical-align: middle;
 262     border-color: inherit
 263 }
 264
 265 /* for tables without table section elements (can happen with XHTML or dynamically created tables) */
 266 table > tr {
 267     vertical-align: middle;
 268 }
 269
 270 col {
 271     display: table-column
 272 }
 273
 274 colgroup {
 275     display: table-column-group
 276 }
 277
 278 tr {
 279     display: table-row;
 280     vertical-align: inherit;
 281     border-color: inherit
 282 }
 283
 284 td, th {
 285     display: table-cell;
 286     vertical-align: inherit
 287 }
 288
 289 th {
 290     font-weight: bold
 291 }
 292
 293 caption {
 294     display: table-caption;
 295     text-align: -webkit-center
 296 }
 297
 298 /* lists */
 299
 300 ul, menu, dir {
 301     display: block;
 302     list-style-type: disc;
 303     -webkit-margin-before: 1__qem;
 304     -webkit-margin-after: 1em;
 305     -webkit-margin-start: 0;
 306     -webkit-margin-end: 0;
 307     -webkit-padding-start: 40px
 308 }
 309
 310 ol {
 311     display: block;
 312     list-style-type: decimal;
 313     -webkit-margin-before: 1__qem;
 314     -webkit-margin-after: 1em;
 315     -webkit-margin-start: 0;
 316     -webkit-margin-end: 0;
 317     -webkit-padding-start: 40px
 318 }
 319
 320 li {
 321     display: list-item;
 322     text-align: -webkit-match-parent;
 323 }
 324
 325 ul ul, ol ul {
 326     list-style-type: circle
 327 }
 328
 329 ol ol ul, ol ul ul, ul ol ul, ul ul ul {
 330     list-style-type: square
 331 }
 332
 333 dd {
 334     display: block;
 335     -webkit-margin-start: 40px
 336 }
 337
 338 dl {
 339     display: block;
 340     -webkit-margin-before: 1__qem;
 341     -webkit-margin-after: 1em;
 342     -webkit-margin-start: 0;
 343     -webkit-margin-end: 0;
 344 }
 345
 346 dt {
 347     display: block
 348 }
 349
 350 ol ul, ul ol, ul ul, ol ol {
 351     -webkit-margin-before: 0;
 352     -webkit-margin-after: 0
 353 }
 354
 355 /* form elements */
 356
 357 form {
 358     display: block;
 359     margin-top: 0__qem;
 360 }
 361
 362 label {
 363     cursor: default;
 364 }
 365
 366 legend {
 367     display: block;
 368     -webkit-padding-start: 2px;
 369     -webkit-padding-end: 2px;
 370     border: none
 371 }
 372
 373 fieldset {
 374     display: block;
 375     -webkit-margin-start: 2px;
 376     -webkit-margin-end: 2px;
 377     -webkit-padding-before: 0.35em;
 378     -webkit-padding-start: 0.75em;
 379     -webkit-padding-end: 0.75em;
 380     -webkit-padding-after: 0.625em;
 381     border: 2px groove ThreeDFace;
 382     min-width: -webkit-min-content;
 383 }
 384
 385 button {
 386     -webkit-appearance: button;
 387 }
 388
 389 /* Form controls don't go vertical. */
 390 input, textarea, keygen, select, button, isindex, meter, progress {
 391     -webkit-writing-mode: horizontal-tb !important;
 392 }
 393
 394 input, textarea, keygen, select, button, isindex {
 395     margin: 0__qem;
 396 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
 397     font: -webkit-small-control;
 398 #endif
 399     color: initial;
 400     letter-spacing: normal;
 401     word-spacing: normal;
 402     line-height: normal;
 403     text-transform: none;
 404     text-indent: 0;
 405     text-shadow: none;
 406     display: inline-block;
 407     text-align: start;
 408 }
 409
 410 input[type="hidden"] {
 411     display: none
 412 }
 413
 414 input,
 415 input[type="password"],
 416 input[type="search"],
 417 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
 418 textarea,
 419 input[type="range"],
 420 #endif
 421 isindex {
 422     -webkit-appearance: textfield;
 423     background-color: white;
 424 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
 425     border-radius: 5px;
 426     font: 11px Helvetica, -webkit-pictograph;
 427     border: 1px solid #4c4c4c;
 428     padding: 0.2em 0.5em 0.3em 0.5em;
 429 #else
 430     border: 2px inset;
 431     padding: 1px;
 432 #endif
 433     -webkit-rtl-ordering: logical;
 434     -webkit-user-select: text;
 435     cursor: auto;
 436 }
 437
 438 input[type="search"] {
 439     -webkit-appearance: searchfield;
 440     box-sizing: border-box;
 441 }
 442
 443 input::-webkit-textfield-decoration-container {
 444     display: -webkit-flex;
 445     -webkit-align-items: center;
 446     content: none !important;
 447 }
 448
 449 input[type="search"]::-webkit-textfield-decoration-container {
 450     direction: ltr;
 451 }
 452
 453 input::-webkit-clear-button {
 454     -webkit-appearance: searchfield-cancel-button;
 455     display: inline-block;
 456     -webkit-flex: none;
 457     margin-left: 2px;
 458 }
 459
 460 input[type="search"]::-webkit-search-cancel-button {
 461     -webkit-appearance: searchfield-cancel-button;
 462     display: block;
 463     -webkit-flex: none;
 464     -webkit-align-self: flex-start;
 465     margin: auto 0;
 466 }
 467
 468 input[type="search"]::-webkit-search-decoration {
 469     -webkit-appearance: searchfield-decoration;
 470     display: block;
 471     -webkit-flex: none;
 472     -webkit-align-self: flex-start;
 473     margin: auto 0;
 474 }
 475
 476 input[type="search"]::-webkit-search-results-decoration {
 477     -webkit-appearance: searchfield-results-decoration;
 478     display: block;
 479     -webkit-flex: none;
 480     -webkit-align-self: flex-start;
 481     margin: auto 0;
 482 }
 483
 484 input[type="search"]::-webkit-search-results-button {
 485     -webkit-appearance: searchfield-results-button;
 486     display: block;
 487     -webkit-flex: none;
 488 }
 489
 490 #if defined(ENABLE_DATALIST_ELEMENT) && ENABLE_DATALIST_ELEMENT
 491 datalist {
 492     display: none;
 493 }
 494 #endif
 495
 496 #if defined(ENABLE_INPUT_TYPE_DATE) && ENABLE_INPUT_TYPE_DATE
 497 input[type="date"] {
 498     -webkit-align-items: center;
 499     -webkit-appearance: menulist-button;
 500     display: -webkit-inline-flex;
 501     overflow: hidden;
 502 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
 503     width: 10em;
 504 #endif
 505 }
 506 #endif
 507 #if defined(ENABLE_INPUT_TYPE_DATETIME_INCOMPLETE) && ENABLE_INPUT_TYPE_DATETIME_INCOMPLETE
 508 input[type="datetime"] {
 509     -webkit-align-items: center;
 510     -webkit-appearance: menulist-button;
 511     display: -webkit-inline-flex;
 512     overflow: hidden;
 513 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
 514     width: 10em;
 515 #endif
 516 }
 517 #endif
 518 #if defined(ENABLE_INPUT_TYPE_DATETIMELOCAL) && ENABLE_INPUT_TYPE_DATETIMELOCAL
 519 input[type="datetime-local"] {
 520     -webkit-align-items: center;
 521     -webkit-appearance: menulist-button;
 522     display: -webkit-inline-flex;
 523     overflow: hidden;
 524 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
 525     width: 10em;
 526 #endif
 527 }
 528 #endif
 529 #if defined(ENABLE_INPUT_TYPE_MONTH) && ENABLE_INPUT_TYPE_MONTH
 530 input[type="month"] {
 531     -webkit-align-items: center;
 532     -webkit-appearance: menulist-button;
 533     display: -webkit-inline-flex;
 534     overflow: hidden;
 535 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
 536     width: 10em;
 537 #endif
 538 }
 539 #endif
 540 #if defined(ENABLE_INPUT_TYPE_TIME) && ENABLE_INPUT_TYPE_TIME
 541 input[type="time"] {
 542     -webkit-align-items: center;
 543     -webkit-appearance: menulist-button;
 544     display: -webkit-inline-flex;
 545     overflow: hidden;
 546 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
 547     width: 10em;
 548 #endif
 549 }
 550 #endif
 551 #if defined(ENABLE_INPUT_TYPE_WEEK) && ENABLE_INPUT_TYPE_WEEK
 552 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
 553 input[type="week"] {
 554     -webkit-align-items: center;
 555     -webkit-appearance: menulist-button;
 556     display: -webkit-inline-flex;
 557     overflow: hidden;
 558     width: 10em;
 559 }
 560 #endif
 561 #endif
 562
 563 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
 564 input::-webkit-date-and-time-value {
 565     margin: 1px 24px 1px 4px;
 566     white-space: pre;
 567 }
 568 #endif
 569
 570 input::-webkit-inner-spin-button {
 571     -webkit-appearance: inner-spin-button;
 572     display: block;
 573     position: relative;
 574     cursor: default;
 575     /* This height property is ignored for input type "number" and others which
 576      * use RenderTextControlSingleLine as renderer which sets height of spin
 577      * button in layout(). */
 578     height: 1.5em;
 579     vertical-align: top;
 580     -webkit-flex: none;
 581     -webkit-user-select: none;
 582 }
 583
 584 keygen, select {
 585     border-radius: 5px;
 586 }
 587
 588 keygen::-webkit-keygen-select {
 589     margin: 0px;
 590 }
 591
 592 textarea {
 593     -webkit-appearance: textarea;
 594 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
 595     background-color: white;
 596     border: 1px solid;
 597     -webkit-rtl-ordering: logical;
 598     -webkit-user-select: text;
 599 #else
 600     -webkit-nbsp-mode: space;
 601     -webkit-line-break: after-white-space;
 602 #endif
 603     -webkit-flex-direction: column;
 604     resize: auto;
 605     cursor: auto;
 606     padding: 2px;
 607     white-space: pre-wrap;
 608     word-wrap: break-word;
 609 }
 610
 611 ::-webkit-input-placeholder {
 612     -webkit-text-security: none;
 613     color: darkGray;
 614     pointer-events: none !important;
 615 }
 616
 617 input::-webkit-input-placeholder, isindex::-webkit-input-placeholder {
 618     white-space: pre;
 619     word-wrap: normal;
 620     overflow: hidden;
 621 }
 622
 623 input[type="password"] {
 624     -webkit-text-security: disc !important;
 625 }
 626
 627 input[type="hidden"], input[type="image"], input[type="file"] {
 628     -webkit-appearance: initial;
 629     padding: initial;
 630     background-color: initial;
 631     border: initial;
 632 }
 633
 634 input[type="file"] {
 635     -webkit-align-items: baseline;
 636     color: inherit;
 637     text-align: start !important;
 638 }
 639
 640 input:-webkit-autofill {
 641 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
 642     background-color: #F7EC87 !important;
 643 #else
 644     background-color: #FAFFBD !important;
 645 #endif
 646     background-image:none !important;
 647     color: #000000 !important;
 648 }
 649
 650 input[type="radio"], input[type="checkbox"] {
 651     margin: 3px 2px;
 652 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
 653     border: 1px solid #4c4c4c;
 654     box-sizing: border-box;
 655 #else
 656     padding: initial;
 657     background-color: initial;
 658     border: initial;
 659 #endif
 660 }
 661
 662 input[type="button"], input[type="submit"], input[type="reset"] {
 663     -webkit-appearance: push-button;
 664     white-space: pre
 665 }
 666
 667 input[type="file"]::-webkit-file-upload-button {
 668     -webkit-appearance: push-button;
 669     white-space: nowrap;
 670     margin: 0;
 671     font-size: inherit;
 672 }
 673
 674 input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
 675     -webkit-align-items: flex-start;
 676     text-align: center;
 677     cursor: default;
 678     color: ButtonText;
 679 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
 680     padding: 2px 6px 3px 6px;
 681     border: 2px outset ButtonFace;
 682     background-color: ButtonFace;
 683 #else
 684     padding: 0 1.0em;
 685     border: 1px solid #4c4c4c;
 686     /* We want to be as close to background-color:transparent as possible without actually being transparent. */
 687     background-color: rgba(255, 255, 255, 0.01);
 688     font: 11px Helvetica;
 689 #endif
 690     box-sizing: border-box
 691 }
 692
 693 input[type="range"] {
 694     -webkit-appearance: slider-horizontal;
 695     padding: initial;
 696     border: initial;
 697     margin: 2px;
 698     color: #909090;
 699 }
 700
 701 input[type="range"]::-webkit-slider-container, input[type="range"]::-webkit-media-slider-container {
 702     -webkit-flex: 1;
 703     box-sizing: border-box;
 704     display: -webkit-flex;
 705     -webkit-align-contents: center;
 706 }
 707
 708 input[type="range"]::-webkit-slider-runnable-track {
 709     -webkit-flex: 1;
 710     -webkit-align-self: center;
 711
 712     box-sizing: border-box;
 713     display: block;
 714 }
 715
 716 input[type="range"]::-webkit-slider-thumb, input[type="range"]::-webkit-media-slider-thumb {
 717     -webkit-appearance: sliderthumb-horizontal;
 718     box-sizing: border-box;
 719     display: block;
 720 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
 721     background-color: white;
 722     border: 1px solid rgb(66, 66, 66);
 723     padding: 0px;
 724 #endif
 725 }
 726
 727 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
 728 input[type="range"]::-webkit-slider-thumb:active {
 729     background-color: black;
 730 }
 731
 732 input:disabled, textarea:disabled {
 733     opacity: 0.4;
 734 }
 735
 736 input[readonly], textarea[readonly] {
 737     border-color: rgb(188, 188, 188);
 738 }
 739
 740 textarea::-webkit-input-placeholder {
 741     text-indent: 2px;
 742 }
 743 #endif
 744
 745 input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled,
 746 input[type="file"]:disabled::-webkit-file-upload-button, button:disabled,
 747 select:disabled, keygen:disabled, optgroup:disabled, option:disabled,
 748 select[disabled]>option {
 749     color: GrayText
 750 }
 751
 752 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
 753 input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, input[type="file"]:active::-webkit-file-upload-button, button:active {
 754     border-style: inset
 755 }
 756
 757 input[type="button"]:active:disabled, input[type="submit"]:active:disabled, input[type="reset"]:active:disabled, input[type="file"]:active:disabled::-webkit-file-upload-button, button:active:disabled {
 758     border-style: outset
 759 }
 760 #endif
 761
 762 area, param {
 763     display: none
 764 }
 765
 766 input[type="checkbox"] {
 767     -webkit-appearance: checkbox;
 768 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
 769     box-sizing: border-box;
 770 #else
 771     border-radius: 5px;
 772     width: 16px;
 773     height: 16px;
 774     padding: 0px;
 775     /* We want to be as close to background:transparent as possible without actually being transparent */
 776     background-color: rgba(255, 255, 255, 0.01);
 777 #endif
 778 }
 779
 780 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
 781 input[type="radio"] {
 782     -webkit-appearance: radio;
 783     border-radius: 8px;
 784     width: 16px;
 785     height: 16px;
 786     padding: 0px;
 787     /* We want to be as close to background:transparent as possible without actually being transparent */
 788     background-color: rgba(255, 255, 255, 0.01);
 789 }
 790
 791 input[type="checkbox"]:checked, input[type="radio"]:checked {
 792     background:rgba(0, 0, 0, 0.8);
 793     border-color:rgba(255, 255, 255, 0.0);
 794 }
 795
 796 input[type="checkbox"]:checked:disabled, input[type="radio"]:checked:disabled {
 797     opacity:0.4;
 798     background:rgba(0, 0, 0, 0.8);
 799 }
 800 #endif
 801
 802 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
 803 input[type="radio"] {
 804     -webkit-appearance: radio;
 805     box-sizing: border-box;
 806 }
 807 #endif
 808
 809 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
 810 select:focus {
 811     border-color: rgb(17, 46, 135);
 812 }
 813 #endif
 814
 815 #if defined(ENABLE_INPUT_TYPE_COLOR) && ENABLE_INPUT_TYPE_COLOR
 816
 817 input[type="color"] {
 818     -webkit-appearance: square-button;
 819     width: 44px;
 820     height: 23px;
 821 }
 822
 823 input[type="color"]::-webkit-color-swatch-wrapper {
 824     display:-webkit-flex;
 825     padding: 4px 2px;
 826     box-sizing: border-box;
 827     width: 100%;
 828     height: 100%
 829 }
 830
 831 input[type="color"]::-webkit-color-swatch {
 832     background-color: #000000;
 833     border: 1px solid #777777;
 834     -webkit-flex: 1;
 835 }
 836
 837 #if defined(ENABLE_DATALIST_ELEMENT) && ENABLE_DATALIST_ELEMENT
 838
 839 input[type="color"][list] {
 840     -webkit-appearance: menulist;
 841     width: 88px;
 842     height: 23px;
 843 }
 844
 845 input[type="color"][list]::-webkit-color-swatch-wrapper {
 846     padding-left: 8px;
 847     padding-right: 24px;
 848 }
 849
 850 input[type="color"][list]::-webkit-color-swatch {
 851     border-color: #000000;
 852 }
 853
 854 #endif // defined(ENABLE_DATALIST_ELEMENT) && ENABLE_DATALIST_ELEMENT
 855
 856 #endif // defined(ENABLE_INPUT_TYPE_COLOR) && ENABLE_INPUT_TYPE_COLOR
 857
 858 select {
 859     box-sizing: border-box;
 860 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
 861     -webkit-appearance: menulist-button;
 862     letter-spacing: normal;
 863     word-spacing: normal;
 864     line-height: normal;
 865     border: 1px solid #4c4c4c;
 866     /* We want to be as close to background:transparent as possible without actually being transparent */
 867     background-color: rgba(255, 255, 255, 0.01);
 868     font: 11px Helvetica;
 869     padding: 0 0.4em 0 0.4em;
 870 #else
 871     -webkit-appearance: menulist;
 872     border: 1px solid;
 873     color: black;
 874     background-color: white;
 875 #endif
 876     -webkit-align-items: center;
 877     white-space: pre;
 878     -webkit-rtl-ordering: logical;
 879     cursor: default;
 880 }
 881
 882 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
 883 select[size],
 884 select[multiple],
 885 select[size][multiple] {
 886     -webkit-appearance: listbox;
 887     -webkit-align-items: flex-start;
 888     border: 1px inset gray;
 889     border-radius: initial;
 890     white-space: initial;
 891 }
 892
 893 select[size="0"],
 894 select[size="1"] {
 895     -webkit-appearance: menulist;
 896     -webkit-align-items: center;
 897     border: 1px solid;
 898     border-radius: 5px;
 899     white-space: pre;
 900 }
 901 #endif
 902
 903 optgroup {
 904     font-weight: bolder;
 905 }
 906
 907 option {
 908     font-weight: normal;
 909 }
 910
 911 output {
 912     display: inline;
 913 }
 914
 915 /* form validation message bubble */
 916
 917 ::-webkit-validation-bubble {
 918     display: inline-block;
 919     z-index: 2147483647;
 920     position: absolute;
 921     opacity: 0.95;
 922     line-height: 0;
 923     margin: 0;
 924     -webkit-text-security: none;
 925     -webkit-transition: opacity 05.5s ease;
 926 }
 927
 928 ::-webkit-validation-bubble-message {
 929     display: -webkit-flex;
 930     position: relative;
 931     top: -4px;
 932     font: message-box;
 933     color: black;
 934     min-width: 50px;
 935     max-width: 200px;
 936     border: solid 2px #400;
 937     background: -webkit-gradient(linear, left top, left bottom, from(#f8ecec), to(#e8cccc));
 938     padding: 8px;
 939     border-radius: 8px;
 940     -webkit-box-shadow: 4px 4px 4px rgba(100,100,100,0.6),
 941         inset -2px -2px 1px #d0c4c4,
 942         inset 2px 2px 1px white;
 943     line-height: normal;
 944     white-space: normal;
 945     z-index: 2147483644;
 946 }
 947
 948 ::-webkit-validation-bubble-text-block {
 949     -webkit-flex: 1;
 950 }
 951
 952 ::-webkit-validation-bubble-heading {
 953     font-weight: bold;
 954 }
 955
 956 ::-webkit-validation-bubble-arrow {
 957     display: inline-block;
 958     position: relative;
 959     left: 32px;
 960     width: 16px;
 961     height: 16px;
 962     background-color: #f8ecec;
 963     border-width: 2px 0 0 2px;
 964     border-style: solid;
 965     border-color: #400;
 966     box-shadow: inset 2px 2px 1px white;
 967     -webkit-transform-origin: 0 0;
 968     -webkit-transform: rotate(45deg);
 969     z-index: 2147483645;
 970 }
 971
 972 ::-webkit-validation-bubble-arrow-clipper {
 973     display: block;
 974     overflow: hidden;
 975     height: 16px;
 976 }
 977
 978 #if defined(ENABLE_METER_ELEMENT) && ENABLE_METER_ELEMENT
 979 /* meter */
 980
 981 meter {
 982     -webkit-appearance: meter;
 983     box-sizing: border-box;
 984     display: inline-block;
 985     height: 1em;
 986     width: 5em;
 987     vertical-align: -0.2em;
 988 }
 989
 990 meter::-webkit-meter-inner-element {
 991     -webkit-appearance: inherit;
 992     box-sizing: inherit;
 993     height: 100%;
 994     width: 100%;
 995 }
 996
 997 meter::-webkit-meter-bar {
 998     background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#ddd), color-stop(0.20, #eee), color-stop(0.45, #ccc), color-stop(0.55, #ccc));
 999     height: 100%;
1000     width: 100%;
1001     box-sizing: border-box;
1002 }
1003
1004 meter::-webkit-meter-optimum-value {
1005     background: -webkit-gradient(linear, left top, left bottom, from(#ad7), to(#ad7), color-stop(0.20, #cea), color-stop(0.45, #7a3), color-stop(0.55, #7a3));
1006     height: 100%;
1007     box-sizing: border-box;
1008 }
1009
1010 meter::-webkit-meter-suboptimum-value {
1011     background: -webkit-gradient(linear, left top, left bottom, from(#fe7), to(#fe7), color-stop(0.20, #ffc), color-stop(0.45, #db3), color-stop(0.55, #db3));
1012     height: 100%;
1013     box-sizing: border-box;
1014 }
1015
1016 meter::-webkit-meter-even-less-good-value {
1017     background: -webkit-gradient(linear, left top, left bottom, from(#f77), to(#f77), color-stop(0.20, #fcc), color-stop(0.45, #d44), color-stop(0.55, #d44));
1018     height: 100%;
1019     box-sizing: border-box;
1020 }
1021 #endif
1022
1023 /* progress */
1024
1025 progress {
1026     -webkit-appearance: progress-bar;
1027     box-sizing: border-box;
1028     display: inline-block;
1029     height: 1em;
1030     width: 10em;
1031     vertical-align: -0.2em;
1032 }
1033
1034 progress::-webkit-progress-inner-element {
1035     -webkit-appearance: inherit;
1036     box-sizing: inherit;
1037     height: 100%;
1038     width: 100%;
1039 }
1040
1041 progress::-webkit-progress-bar {
1042     background-color: gray;
1043     height: 100%;
1044     width: 100%;
1045     box-sizing: border-box;
1046 }
1047
1048 progress::-webkit-progress-value {
1049     background-color: green;
1050     height: 100%;
1051     width: 50%; /* should be removed later */
1052     box-sizing: border-box;
1053 }
1054
1055 /* inline elements */
1056
1057 u, ins {
1058     text-decoration: underline
1059 }
1060
1061 strong, b {
1062     font-weight: bold
1063 }
1064
1065 i, cite, em, var, address, dfn {
1066     font-style: italic
1067 }
1068
1069 tt, code, kbd, samp {
1070     font-family: monospace
1071 }
1072
1073 pre, xmp, plaintext, listing {
1074     display: block;
1075     font-family: monospace;
1076     white-space: pre;
1077     margin: 1__qem 0
1078 }
1079
1080 mark {
1081     background-color: yellow;
1082     color: black
1083 }
1084
1085 big {
1086     font-size: larger
1087 }
1088
1089 small {
1090     font-size: smaller
1091 }
1092
1093 s, strike, del {
1094     text-decoration: line-through
1095 }
1096
1097 sub {
1098     vertical-align: sub;
1099     font-size: smaller
1100 }
1101
1102 sup {
1103     vertical-align: super;
1104     font-size: smaller
1105 }
1106
1107 nobr {
1108     white-space: nowrap
1109 }
1110
1111 /* states */
1112
1113 :focus {
1114     outline: auto 5px -webkit-focus-ring-color
1115 }
1116
1117 /* Read-only text fields do not show a focus ring but do still receive focus */
1118 html:focus, body:focus, input[readonly]:focus {
1119     outline: none
1120 }
1121
1122 applet:focus, embed:focus, iframe:focus, object:focus {
1123     outline: none
1124 }
1125
1126 input:focus, textarea:focus, isindex:focus, keygen:focus, select:focus {
1127     outline-offset: -2px
1128 }
1129
1130 input[type="button"]:focus,
1131 input[type="checkbox"]:focus,
1132 input[type="file"]:focus,
1133 input[type="hidden"]:focus,
1134 input[type="image"]:focus,
1135 input[type="radio"]:focus,
1136 input[type="reset"]:focus,
1137 input[type="search"]:focus,
1138 input[type="submit"]:focus,
1139 input[type="file"]:focus::-webkit-file-upload-button {
1140     outline-offset: 0
1141 }
1142
1143 a:-webkit-any-link {
1144     color: -webkit-link;
1145     text-decoration: underline;
1146     cursor: auto;
1147 }
1148
1149 a:-webkit-any-link:active {
1150     color: -webkit-activelink
1151 }
1152
1153 /* HTML5 ruby elements */
1154
1155 ruby, rt {
1156     text-indent: 0; /* blocks used for ruby rendering should not trigger this */
1157 }
1158
1159 rt {
1160     line-height: normal;
1161     -webkit-text-emphasis: none;
1162 }
1163
1164 ruby > rt {
1165     display: block;
1166     font-size: -webkit-ruby-text;
1167     text-align: start;
1168 }
1169
1170 ruby > rp {
1171     display: none;
1172 }
1173
1174 /* other elements */
1175
1176 noframes {
1177     display: none
1178 }
1179
1180 frameset, frame {
1181     display: block
1182 }
1183
1184 frameset {
1185     border-color: inherit
1186 }
1187
1188 iframe {
1189     border: 2px inset
1190 }
1191
1192 details {
1193     display: block
1194 }
1195
1196 summary {
1197     display: block
1198 }
1199
1200 summary::-webkit-details-marker {
1201     display: inline-block;
1202     width: 0.66em;
1203     height: 0.66em;
1204     margin-right: 0.4em;
1205 }
1206
1207 #if defined(ENABLE_TEMPLATE_ELEMENT) && ENABLE_TEMPLATE_ELEMENT
1208 template {
1209     display: none
1210 }
1211 #endif
1212
1213 bdi, output {
1214     unicode-bidi: -webkit-isolate;
1215 }
1216
1217 bdo {
1218     unicode-bidi: bidi-override;
1219 }
1220
1221 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
1222 applet, embed, object, img {
1223     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1224 }
1225 :-webkit-any-link img {
1226     -webkit-tap-highlight-color: inherit;
1227 }
1228 #endif
1229
1230 /* page */
1231
1232 @page {
1233     /* FIXME: Define the right default values for page properties. */
1234     size: auto;
1235     margin: auto;
1236     padding: 0px;
1237     border-width: 0px;
1238 }
1239
1240 /* noscript is handled internally, as it depends on settings. */
1241