Upstream version 10.39.225.0
[platform/framework/web/crosswalk.git] / src / third_party / WebKit / Source / core / css / html.css
index 86d7cbb..00df892 100644 (file)
@@ -390,11 +390,11 @@ button {
 }
 
 /* Form controls don't go vertical. */
-input, textarea, keygen, select, button, isindex, meter, progress {
+input, textarea, keygen, select, button, meter, progress {
     -webkit-writing-mode: horizontal-tb !important;
 }
 
-input, textarea, keygen, select, button, isindex {
+input, textarea, keygen, select, button {
     margin: 0__qem;
     font: -webkit-small-control;
     color: initial;
@@ -408,11 +408,11 @@ input, textarea, keygen, select, button, isindex {
     text-align: start;
 }
 
-input[type="hidden"] {
+input[type="hidden" i] {
     display: none
 }
 
-input, input[type="password"], input[type="search"], isindex {
+input, input[type="password" i], input[type="search" i] {
     -webkit-appearance: textfield;
     padding: 1px;
     background-color: white;
@@ -422,7 +422,7 @@ input, input[type="password"], input[type="search"], isindex {
     cursor: auto;
 }
 
-input[type="search"] {
+input[type="search" i] {
     -webkit-appearance: searchfield;
     box-sizing: border-box;
 }
@@ -434,7 +434,7 @@ input::-webkit-textfield-decoration-container {
     content: none !important;
 }
 
-input[type="search"]::-webkit-textfield-decoration-container {
+input[type="search" i]::-webkit-textfield-decoration-container {
     direction: ltr;
 }
 
@@ -453,7 +453,7 @@ input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-clear-button {
     pointer-events: auto;
 }
 
-input[type="search"]::-webkit-search-cancel-button {
+input[type="search" i]::-webkit-search-cancel-button {
     -webkit-appearance: searchfield-cancel-button;
     display: block;
     flex: none;
@@ -463,12 +463,12 @@ input[type="search"]::-webkit-search-cancel-button {
     pointer-events: none;
 }
 
-input[type="search"]:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-search-cancel-button {
+input[type="search" i]:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-search-cancel-button {
     opacity: 1;
     pointer-events: auto;
 }
 
-input[type="search"]::-webkit-search-decoration {
+input[type="search" i]::-webkit-search-decoration {
     -webkit-appearance: searchfield-decoration;
     display: block;
     flex: none;
@@ -477,7 +477,7 @@ input[type="search"]::-webkit-search-decoration {
     margin: auto 0;
 }
 
-input[type="search"]::-webkit-search-results-decoration {
+input[type="search" i]::-webkit-search-results-decoration {
     -webkit-appearance: searchfield-results-decoration;
     display: block;
     flex: none;
@@ -486,128 +486,12 @@ input[type="search"]::-webkit-search-results-decoration {
     margin: auto 0;
 }
 
-#if defined(ENABLE_INPUT_MULTIPLE_FIELDS_UI) && ENABLE_INPUT_MULTIPLE_FIELDS_UI
-input[type="date"],
-input[type="datetime-local"],
-input[type="month"],
-input[type="time"],
-input[type="week"] {
-    align-items: center;
-    display: -webkit-inline-flex;
-    font-family: monospace;
-    overflow: hidden;
-    padding: 0;
-    -webkit-padding-start: 1px;
-}
-
-input::-webkit-datetime-edit {
-    flex: 1;
-    -webkit-user-modify: read-only !important;
-    display: inline-block;
-    overflow: hidden;
-}
-
-input::-webkit-datetime-edit-fields-wrapper {
-    -webkit-user-modify: read-only !important;
-    display: inline-block;
-    padding: 1px 0;
-    white-space: pre;
-}
-
-/* If you update padding, border, or margin in the following ruleset, update
-   DateTimeFieldElement::maximumWidth too. */
-input::-webkit-datetime-edit-ampm-field,
-input::-webkit-datetime-edit-day-field,
-input::-webkit-datetime-edit-hour-field,
-input::-webkit-datetime-edit-millisecond-field,
-input::-webkit-datetime-edit-minute-field,
-input::-webkit-datetime-edit-month-field,
-input::-webkit-datetime-edit-second-field,
-input::-webkit-datetime-edit-week-field,
-input::-webkit-datetime-edit-year-field {
-    -webkit-user-modify: read-only !important;
-    border: none;
-    display: inline;
-    font: inherit !important;
-    padding: 1px;
-}
-
-/* Remove focus ring from fields and use highlight color */
-input::-webkit-datetime-edit-ampm-field:focus,
-input::-webkit-datetime-edit-day-field:focus,
-input::-webkit-datetime-edit-hour-field:focus,
-input::-webkit-datetime-edit-millisecond-field:focus,
-input::-webkit-datetime-edit-minute-field:focus,
-input::-webkit-datetime-edit-month-field:focus,
-input::-webkit-datetime-edit-second-field:focus,
-input::-webkit-datetime-edit-week-field:focus,
-input::-webkit-datetime-edit-year-field:focus {
-    background-color: highlight;
-    color: highlighttext;
-    outline: none;
-}
-
-input::-webkit-datetime-edit-year-field[disabled],
-input::-webkit-datetime-edit-month-field[disabled],
-input::-webkit-datetime-edit-week-field[disabled],
-input::-webkit-datetime-edit-day-field[disabled],
-input::-webkit-datetime-edit-ampm-field[disabled],
-input::-webkit-datetime-edit-hour-field[disabled],
-input::-webkit-datetime-edit-millisecond-field[disabled],
-input::-webkit-datetime-edit-minute-field[disabled],
-input::-webkit-datetime-edit-second-field[disabled] {
-    color: GrayText;
-}
-
-/* If you update padding, border, or margin in the following ruleset, update
-   DateTimeEditElement::customStyelForRenderer too. */
-input::-webkit-datetime-edit-text {
-    -webkit-user-modify: read-only !important;
-    display: inline;
-    font: inherit !important;
-}
-
-input[type="date"]::-webkit-inner-spin-button,
-input[type="datetime"]::-webkit-inner-spin-button,
-input[type="datetime-local"]::-webkit-inner-spin-button,
-input[type="month"]::-webkit-inner-spin-button,
-input[type="time"]::-webkit-inner-spin-button,
-input[type="week"]::-webkit-inner-spin-button {
-    display: inline-block;
-    position: static;
-    -webkit-margin-start: 2px;
-}
-
-#else
-input[type="date"],
-input[type="datetime-local"],
-input[type="month"],
-input[type="time"],
-input[type="week"] {
-    align-items: center;
-    -webkit-appearance: menulist-button;
-    display: -webkit-inline-flex;
-    overflow: hidden;
-    width: 10em;
-}
-
-input::-webkit-date-and-time-value {
-    margin: 1px 24px 1px 4px;
-    white-space: pre;
-}
-#endif
-
 input::-webkit-inner-spin-button {
     -webkit-appearance: inner-spin-button;
-    display: block;
-    position: relative;
+    display: inline-block;
     cursor: default;
-    /* This height property is ignored for input type "number" and others which
-     * use RenderTextControlSingleLine as renderer which sets height of spin
-     * button in layout(). */
-    height: 1.5em;
-    vertical-align: top;
     flex: none;
+    align-self: stretch;
     -webkit-user-select: none;
     -webkit-user-modify: read-only !important;
     opacity: 0;
@@ -619,25 +503,6 @@ input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-inner-spin-button {
     pointer-events: auto;
 }
 
-#if defined(ENABLE_INPUT_SPEECH) && ENABLE_INPUT_SPEECH
-input::-webkit-input-speech-button {
-    -webkit-appearance: -webkit-input-speech-button;
-    display: block;
-    vertical-align: top;
-    flex: none;
-    -webkit-user-modify: read-only !important;
-    -webkit-align-self: flex-start;
-    margin: auto 0;
-    opacity: 0;
-    pointer-events: none;
-}
-
-input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-input-speech-button {
-    opacity: 1;
-    pointer-events: auto;
-}
-#endif
-
 keygen, select {
     border-radius: 5px;
 }
@@ -667,50 +532,50 @@ textarea {
     pointer-events: none !important;
 }
 
-input::-webkit-input-placeholder, isindex::-webkit-input-placeholder {
+input::-webkit-input-placeholder {
     white-space: pre;
     word-wrap: normal;
     overflow: hidden;
     -webkit-user-modify: read-only !important;
 }
 
-input[type="password"] {
+input[type="password" i] {
     -webkit-text-security: disc !important;
 }
 
-input[type="hidden"], input[type="image"], input[type="file"] {
+input[type="hidden" i], input[type="image" i], input[type="file" i] {
     -webkit-appearance: initial;
     padding: initial;
     background-color: initial;
     border: initial;
 }
 
-input[type="file"] {
+input[type="file" i] {
     align-items: baseline;
     color: inherit;
     text-align: start !important;
 }
 
-input:-webkit-autofill, textarea:-webkit-autofill {
+input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
     background-color: #FAFFBD !important;
     background-image:none !important;
     color: #000000 !important;
 }
 
-input[type="radio"], input[type="checkbox"] {
+input[type="radio" i], input[type="checkbox" i] {
     margin: 3px 0.5ex;
     padding: initial;
     background-color: initial;
     border: initial;
 }
 
-input[type="button"], input[type="submit"], input[type="reset"] {
+input[type="button" i], input[type="submit" i], input[type="reset" i] {
     -webkit-appearance: push-button;
     -webkit-user-select: none;
     white-space: pre
 }
 
-input[type="file"]::-webkit-file-upload-button {
+input[type="file" i]::-webkit-file-upload-button {
     -webkit-appearance: push-button;
     -webkit-user-modify: read-only !important;
     white-space: nowrap;
@@ -718,7 +583,7 @@ input[type="file"]::-webkit-file-upload-button {
     font-size: inherit;
 }
 
-input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
+input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
     align-items: flex-start;
     text-align: center;
     cursor: default;
@@ -729,7 +594,7 @@ input[type="button"], input[type="submit"], input[type="reset"], input[type="fil
     box-sizing: border-box
 }
 
-input[type="range"] {
+input[type="range" i] {
     -webkit-appearance: slider-horizontal;
     padding: initial;
     border: initial;
@@ -737,7 +602,7 @@ input[type="range"] {
     color: #909090;
 }
 
-input[type="range"]::-webkit-slider-container, input[type="range"]::-webkit-media-slider-container {
+input[type="range" i]::-webkit-slider-container, input[type="range" i]::-webkit-media-slider-container {
     flex: 1;
     box-sizing: border-box;
     -webkit-user-modify: read-only !important;
@@ -745,7 +610,7 @@ input[type="range"]::-webkit-slider-container, input[type="range"]::-webkit-medi
     -webkit-align-contents: center;
 }
 
-input[type="range"]::-webkit-slider-runnable-track {
+input[type="range" i]::-webkit-slider-runnable-track {
     flex: 1;
     -webkit-align-self: center;
 
@@ -754,49 +619,66 @@ input[type="range"]::-webkit-slider-runnable-track {
     display: block;
 }
 
-input[type="range"]::-webkit-slider-thumb, input[type="range"]::-webkit-media-slider-thumb {
+input[type="range" i]::-webkit-slider-thumb, input[type="range" i]::-webkit-media-slider-thumb {
     -webkit-appearance: sliderthumb-horizontal;
     box-sizing: border-box;
     -webkit-user-modify: read-only !important;
     display: block;
 }
 
-input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled,
-input[type="file"]:disabled::-webkit-file-upload-button, button:disabled,
+input[type="button" i]:disabled, input[type="submit" i]:disabled, input[type="reset" i]:disabled,
+input[type="file" i]:disabled::-webkit-file-upload-button, button:disabled,
 select:disabled, keygen:disabled, optgroup:disabled, option:disabled,
 select[disabled]>option {
     color: GrayText
 }
 
-input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, input[type="file"]:active::-webkit-file-upload-button, button:active {
+input[type="button" i]:active, input[type="submit" i]:active, input[type="reset" i]:active, input[type="file" i]:active::-webkit-file-upload-button, button:active {
     border-style: inset
 }
 
-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 {
+input[type="button" i]:active:disabled, input[type="submit" i]:active:disabled, input[type="reset" i]:active:disabled, input[type="file" i]:active:disabled::-webkit-file-upload-button, button:active:disabled {
     border-style: outset
 }
 
-area, param {
+option:-internal-spatial-navigation-focus {
+    outline: black dashed 1px;
+    outline-offset: -1px;
+}
+
+datalist {
     display: none
 }
 
-input[type="checkbox"] {
+area {
+    display: inline
+}
+
+param {
+    display: none
+}
+
+input[type="checkbox" i] {
     -webkit-appearance: checkbox;
     box-sizing: border-box;
 }
 
-input[type="radio"] {
+input[type="radio" i] {
     -webkit-appearance: radio;
     box-sizing: border-box;
 }
 
-input[type="color"] {
+input[type="color" i] {
     -webkit-appearance: square-button;
     width: 44px;
     height: 23px;
+    background-color: ButtonFace;
+    /* Same as native_theme_base. */
+    border: 1px #a9a9a9 solid;
+    padding: 1px 2px;
 }
 
-input[type="color"]::-webkit-color-swatch-wrapper {
+input[type="color" i]::-webkit-color-swatch-wrapper {
     display:flex;
     padding: 4px 2px;
     box-sizing: border-box;
@@ -805,13 +687,28 @@ input[type="color"]::-webkit-color-swatch-wrapper {
     height: 100%
 }
 
-input[type="color"]::-webkit-color-swatch {
+input[type="color" i]::-webkit-color-swatch {
     background-color: #000000;
     border: 1px solid #777777;
     flex: 1;
     -webkit-user-modify: read-only !important;
 }
 
+input[type="color" i][list] {
+    -webkit-appearance: menulist;
+    width: 88px;
+    height: 23px
+}
+
+input[type="color" i][list]::-webkit-color-swatch-wrapper {
+    padding-left: 8px;
+    padding-right: 24px;
+}
+
+input[type="color" i][list]::-webkit-color-swatch {
+    border-color: #000000;
+}
+
 input::-webkit-calendar-picker-indicator {
     display: inline-block;
     width: 0.66em;
@@ -826,28 +723,29 @@ input::-webkit-calendar-picker-indicator:hover {
     background-color: #eee;
 }
 
-input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-calendar-picker-indicator {
+input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-calendar-picker-indicator,
+input::-webkit-calendar-picker-indicator:focus {
     opacity: 1;
     pointer-events: auto;
 }
 
-input[type="date"]:disabled::-webkit-clear-button,
-input[type="date"]:disabled::-webkit-inner-spin-button,
-input[type="datetime-local"]:disabled::-webkit-clear-button,
-input[type="datetime-local"]:disabled::-webkit-inner-spin-button,
-input[type="month"]:disabled::-webkit-clear-button,
-input[type="month"]:disabled::-webkit-inner-spin-button,
-input[type="week"]:disabled::-webkit-clear-button,
-input[type="week"]:disabled::-webkit-inner-spin-button,
+input[type="date" i]:disabled::-webkit-clear-button,
+input[type="date" i]:disabled::-webkit-inner-spin-button,
+input[type="datetime-local" i]:disabled::-webkit-clear-button,
+input[type="datetime-local" i]:disabled::-webkit-inner-spin-button,
+input[type="month" i]:disabled::-webkit-clear-button,
+input[type="month" i]:disabled::-webkit-inner-spin-button,
+input[type="week" i]:disabled::-webkit-clear-button,
+input[type="week" i]:disabled::-webkit-inner-spin-button,
 input:disabled::-webkit-calendar-picker-indicator,
-input[type="date"][readonly]::-webkit-clear-button,
-input[type="date"][readonly]::-webkit-inner-spin-button,
-input[type="datetime-local"][readonly]::-webkit-clear-button,
-input[type="datetime-local"][readonly]::-webkit-inner-spin-button,
-input[type="month"][readonly]::-webkit-clear-button,
-input[type="month"][readonly]::-webkit-inner-spin-button,
-input[type="week"][readonly]::-webkit-clear-button,
-input[type="week"][readonly]::-webkit-inner-spin-button,
+input[type="date" i][readonly]::-webkit-clear-button,
+input[type="date" i][readonly]::-webkit-inner-spin-button,
+input[type="datetime-local" i][readonly]::-webkit-clear-button,
+input[type="datetime-local" i][readonly]::-webkit-inner-spin-button,
+input[type="month" i][readonly]::-webkit-clear-button,
+input[type="month" i][readonly]::-webkit-inner-spin-button,
+input[type="week" i][readonly]::-webkit-clear-button,
+input[type="week" i][readonly]::-webkit-inner-spin-button,
 input[readonly]::-webkit-calendar-picker-indicator {
     visibility: hidden;
 }
@@ -864,33 +762,52 @@ select {
     cursor: default;
 }
 
-select[size],
-select[multiple],
-select[size][multiple] {
+select:-internal-list-box {
     -webkit-appearance: listbox;
     align-items: flex-start;
     border: 1px inset gray;
     border-radius: initial;
-    white-space: initial;
-}
-
-select[size="0"],
-select[size="1"] {
-    -webkit-appearance: menulist;
-    align-items: center;
-    border: 1px solid;
-    border-radius: 5px;
-    white-space: pre;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    vertical-align: text-bottom;
+    -webkit-user-select: none;
+    white-space: nowrap;
 }
 
 optgroup {
     font-weight: bolder;
+    display: block;
 }
 
 option {
     font-weight: normal;
+    display: block;
+    padding: 0 2px 1px 2px;
+    white-space: pre;
+    min-height: 1.2em;
+}
+
+select:-internal-list-box option,
+select:-internal-list-box optgroup {
+    line-height: initial !important;
+}
+
+select:-internal-list-box:focus option:checked {
+    background-color: -internal-active-list-box-selection !important;
+    color: -internal-active-list-box-selection-text !important;
+}
+
+select:-internal-list-box option:checked {
+    background-color: -internal-inactive-list-box-selection !important;
+    color: -internal-inactive-list-box-selection-text !important;
 }
 
+select:-internal-list-box:disabled option:checked,
+select:-internal-list-box option:checked:disabled {
+    color: gray !important;
+}
+
+
 output {
     display: inline;
 }
@@ -915,7 +832,7 @@ meter::-webkit-meter-inner-element {
 }
 
 meter::-webkit-meter-bar {
-    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));
+    background: linear-gradient(to bottom, #ddd, #eee 20%, #ccc 45%, #ccc 55%, #ddd);
     height: 100%;
     width: 100%;
     -webkit-user-modify: read-only !important;
@@ -923,21 +840,21 @@ meter::-webkit-meter-bar {
 }
 
 meter::-webkit-meter-optimum-value {
-    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));
+    background: linear-gradient(to bottom, #ad7, #cea 20%, #7a3 45%, #7a3 55%, #ad7);
     height: 100%;
     -webkit-user-modify: read-only !important;
     box-sizing: border-box;
 }
 
 meter::-webkit-meter-suboptimum-value {
-    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));
+    background: linear-gradient(to bottom, #fe7, #ffc 20%, #db3 45%, #db3 55%, #fe7);
     height: 100%;
     -webkit-user-modify: read-only !important;
     box-sizing: border-box;
 }
 
 meter::-webkit-meter-even-less-good-value {
-    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));
+    background: linear-gradient(to bottom, #f77, #fcc 20%, #d44 45%, #d44 55%, #f77);
     height: 100%;
     -webkit-user-modify: read-only !important;
     box-sizing: border-box;
@@ -1049,20 +966,20 @@ applet:focus, embed:focus, iframe:focus, object:focus {
     outline: none
 }
   
-input:focus, textarea:focus, isindex:focus, keygen:focus, select:focus {
+input:focus, textarea:focus, keygen:focus, select:focus {
     outline-offset: -2px
 }
 
-input[type="button"]:focus,
-input[type="checkbox"]:focus,
-input[type="file"]:focus,
-input[type="hidden"]:focus,
-input[type="image"]:focus,
-input[type="radio"]:focus,
-input[type="reset"]:focus,
-input[type="search"]:focus,
-input[type="submit"]:focus,
-input[type="file"]:focus::-webkit-file-upload-button {
+input[type="button" i]:focus,
+input[type="checkbox" i]:focus,
+input[type="file" i]:focus,
+input[type="hidden" i]:focus,
+input[type="image" i]:focus,
+input[type="radio" i]:focus,
+input[type="reset" i]:focus,
+input[type="search" i]:focus,
+input[type="submit" i]:focus,
+input[type="file" i]:focus::-webkit-file-upload-button {
     outline-offset: 0
 }
     
@@ -1127,7 +1044,7 @@ summary::-webkit-details-marker {
     display: inline-block;
     width: 0.66em;
     height: 0.66em;
-    margin-right: 0.4em;
+    -webkit-margin-end: 0.4em;
 }
 
 template {
@@ -1142,10 +1059,36 @@ bdo {
     unicode-bidi: bidi-override;
 }
 
-textarea[dir=auto] {
+textarea[dir=auto i] {
     unicode-bidi: -webkit-plaintext;
 }
 
+dialog:not([open]) {
+    display: none
+}
+
+dialog {
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: -webkit-fit-content;
+    height: -webkit-fit-content;
+    margin: auto;
+    border: solid;
+    padding: 1em;
+    background: white;
+    color: black
+}
+
+dialog::backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: rgba(0,0,0,0.1)
+}
+
 /* page */
 
 @page {