From b9fbefe05cc65199541843153f014bf8145cce38 Mon Sep 17 00:00:00 2001 From: Bill Thiede Date: Mon, 27 Jan 2025 13:17:22 -0800 Subject: [PATCH] server: format chrome css --- server/src/chrome-default.css | 1113 ++++++++++++++++++++++----------- 1 file changed, 750 insertions(+), 363 deletions(-) diff --git a/server/src/chrome-default.css b/server/src/chrome-default.css index ddc24ae..7928c18 100644 --- a/server/src/chrome-default.css +++ b/server/src/chrome-default.css @@ -21,20 +21,25 @@ * */ @namespace "http://www.w3.org/1999/xhtml"; + html { display: block; } + :root { view-transition-name: root; } + /* generic block-level elements */ body { display: block; margin: 8px; } + body:-webkit-full-page-media { background-color: rgb(0, 0, 0) } + p { display: block; margin-block-start: 1__qem; @@ -42,19 +47,32 @@ p { margin-inline-start: 0; margin-inline-end: 0; } + div { display: block } -article, aside, footer, header, hgroup, main, nav, search, section { + +article, +aside, +footer, +header, +hgroup, +main, +nav, +search, +section { display: block } + marquee { display: inline-block; width: -webkit-fill-available; } + address { display: block } + blockquote { display: block; margin-block-start: 1__qem; @@ -62,9 +80,11 @@ blockquote { margin-inline-start: 40px; margin-inline-end: 40px; } + figcaption { display: block } + figure { display: block; margin-block-start: 1em; @@ -72,20 +92,25 @@ figure { margin-inline-start: 40px; margin-inline-end: 40px; } + q { display: inline } + q:before { content: open-quote; } + q:after { content: close-quote; } + center { display: block; /* special centering to be able to emulate the html4/netscape behaviour */ text-align: -webkit-center } + hr { display: block; overflow: hidden; @@ -96,12 +121,15 @@ hr { border-style: inset; border-width: 1px } + map { display: inline } + video { object-fit: contain; } + video:-webkit-full-page-media { margin: auto; position: absolute; @@ -112,9 +140,11 @@ video:-webkit-full-page-media { max-height: 100%; max-width: 100%; } + audio:not([controls]) { - display: none !important; + display: none !important; } + /** TODO(crbug.com/985623): Remove these hard-coded audio tag size. * This fixed audio tag width/height leads to fail the wpt tests below. * crbug.com/955170 external/wpt/css/css-contain/contain-size-replaced-003a.html @@ -122,17 +152,25 @@ audio:not([controls]) { * crbug.com/955163 external/wpt/css/css-contain/contain-size-replaced-003c.html */ audio { - width: 300px; - height: 54px; + width: 300px; + height: 54px; } -video, canvas, img { - overflow: clip; - overflow-clip-margin: content-box; + +video, +canvas, +img { + overflow: clip; + overflow-clip-margin: content-box; } -iframe, embed, object, fencedframe { - overflow: clip !important; - overflow-clip-margin: content-box !important; + +iframe, +embed, +object, +fencedframe { + overflow: clip !important; + overflow-clip-margin: content-box !important; } + /* heading elements */ h1 { display: block; @@ -143,31 +181,37 @@ h1 { margin-inline-end: 0; font-weight: bold } -:-webkit-any(article,aside,nav,section) h1 { + +:-webkit-any(article, aside, nav, section) h1 { font-size: 1.5em; margin-block-start: 0.83__qem; margin-block-end: 0.83em; } -:-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 { + +:-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) h1 { font-size: 1.17em; margin-block-start: 1__qem; margin-block-end: 1em; } -:-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 { + +:-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) h1 { font-size: 1.00em; margin-block-start: 1.33__qem; margin-block-end: 1.33em; } -:-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 { + +:-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 { font-size: .83em; margin-block-start: 1.67__qem; margin-block-end: 1.67em; } -:-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 { + +:-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 { font-size: .67em; margin-block-start: 2.33__qem; margin-block-end: 2.33em; } + h2 { display: block; font-size: 1.5em; @@ -177,6 +221,7 @@ h2 { margin-inline-end: 0; font-weight: bold } + h3 { display: block; font-size: 1.17em; @@ -186,6 +231,7 @@ h3 { margin-inline-end: 0; font-weight: bold } + h4 { display: block; margin-block-start: 1.33__qem; @@ -194,6 +240,7 @@ h4 { margin-inline-end: 0; font-weight: bold } + h5 { display: block; font-size: .83em; @@ -203,6 +250,7 @@ h5 { margin-inline-end: 0; font-weight: bold } + h6 { display: block; font-size: .67em; @@ -212,6 +260,7 @@ h6 { margin-inline-end: 0; font-weight: bold } + /* tables */ table { display: table; @@ -221,56 +270,71 @@ table { box-sizing: border-box; text-indent: initial } + thead { display: table-header-group; vertical-align: middle; border-color: inherit } + tbody { display: table-row-group; vertical-align: middle; border-color: inherit } + tfoot { display: table-footer-group; vertical-align: middle; border-color: inherit } + /* for tables without table section elements (can happen with XHTML or dynamically created tables) */ -table > tr { +table>tr { vertical-align: middle; } + col { display: table-column } + colgroup { display: table-column-group } + tr { display: table-row; vertical-align: inherit; border-color: inherit } -td, th { + +td, +th { display: table-cell; vertical-align: inherit; } + /* When the td/th are inside a table (the normal case), the padding is taken care of by HTMLTableCellElement::AdditionalPresentationAttributeStyle(). */ td:not(table td), th:not(table th) { - padding: 1px; + padding: 1px; } + th { font-weight: bold; text-align: -internal-center } + caption { display: table-caption; text-align: -webkit-center } + /* lists */ -ul, menu, dir { +ul, +menu, +dir { display: block; list-style-type: disc; margin-block-start: 1__qem; @@ -279,6 +343,7 @@ ul, menu, dir { margin-inline-end: 0; padding-inline-start: 40px } + ol { display: block; list-style-type: decimal; @@ -288,20 +353,29 @@ ol { margin-inline-end: 0; padding-inline-start: 40px } + li { display: list-item; text-align: -webkit-match-parent; } -ul ul, ol ul { + +ul ul, +ol ul { list-style-type: circle } -ol ol ul, ol ul ul, ul ol ul, ul ul ul { + +ol ol ul, +ol ul ul, +ul ol ul, +ul ul ul { list-style-type: square } + dd { display: block; margin-inline-start: 40px } + dl { display: block; margin-block-start: 1__qem; @@ -309,30 +383,40 @@ dl { margin-inline-start: 0; margin-inline-end: 0; } + dt { display: block } -ol ul, ul ol, ul ul, ol ol { + +ol ul, +ul ol, +ul ul, +ol ol { margin-block-start: 0; margin-block-end: 0 } + /* form elements */ form { display: block; margin-top: 0__qem; } -:-webkit-any(table, thead, tbody, tfoot, tr) > form:-internal-is-html { - display: none !important; + +:-webkit-any(table, thead, tbody, tfoot, tr)>form:-internal-is-html { + display: none !important; } + label { cursor: default; } + legend { display: block; padding-inline-start: 2px; padding-inline-end: 2px; border: none } + fieldset { display: block; margin-inline-start: 2px; @@ -344,14 +428,20 @@ fieldset { border: 2px groove #C0C0C0; min-inline-size: min-content; } + button { appearance: auto; -internal-align-content-block: center; } -input, textarea, select, button { + +input, +textarea, +select, +button { margin: 0__qem; font: -webkit-small-control; - text-rendering: auto; /* FIXME: Remove when tabs work with optimizeLegibility. */ + text-rendering: auto; + /* FIXME: Remove when tabs work with optimizeLegibility. */ color: FieldText; letter-spacing: normal; word-spacing: normal; @@ -362,34 +452,39 @@ input, textarea, select, button { display: inline-block; text-align: start; } + textarea { - appearance: auto; - border: 1px solid light-dark(#767676, #858585); - column-count: initial !important; - -webkit-rtl-ordering: logical; - resize: -internal-textarea-auto; - cursor: text; - padding: 2px; - white-space: pre-wrap; - word-wrap: break-word; - background-color: Field; - font-family: monospace; + appearance: auto; + border: 1px solid light-dark(#767676, #858585); + column-count: initial !important; + -webkit-rtl-ordering: logical; + resize: -internal-textarea-auto; + cursor: text; + padding: 2px; + white-space: pre-wrap; + word-wrap: break-word; + background-color: Field; + font-family: monospace; } + input { appearance: auto; - padding:1px 0; + padding: 1px 0; border: 2px inset light-dark(#767676, #858585); -webkit-rtl-ordering: logical; cursor: text; background-color: Field; } + input:not([type="file" i], [type="image" i], [type="checkbox" i], [type="radio" i]) { -internal-align-content-block: center; } + input[type="search" i] { appearance: auto; box-sizing: border-box; } + input::-webkit-textfield-decoration-container { display: flex !important; align-items: center; @@ -397,6 +492,7 @@ input::-webkit-textfield-decoration-container { content: none !important; writing-mode: inherit !important; } + input::-webkit-clear-button { appearance: auto; display: inline-block; @@ -407,10 +503,12 @@ input::-webkit-clear-button { opacity: 0; pointer-events: none; } -input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-clear-button { + +input:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-clear-button { opacity: 1; pointer-events: auto; } + input[type="search" i]::-webkit-search-cancel-button { appearance: auto; display: block; @@ -423,13 +521,16 @@ input[type="search" i]::-webkit-search-cancel-button { pointer-events: none; user-select: none !important; } -input[type="search" i]: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" i]::-webkit-search-results-decoration { - margin: auto 3px auto 2px; + margin: auto 3px auto 2px; } + input, input[type="email" i], input[type="number" i], @@ -438,12 +539,14 @@ input[type="search" i], input[type="tel" i], input[type="text" i], input[type="url" i] { - padding-block: 1px; - padding-inline: 2px; + padding-block: 1px; + padding-inline: 2px; } + input[type="tel" i] { - direction: ltr; + direction: ltr; } + input::-webkit-inner-spin-button { appearance: auto; display: inline-block; @@ -454,10 +557,12 @@ input::-webkit-inner-spin-button { opacity: 0; pointer-events: none; } -input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-inner-spin-button { + +input:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-inner-spin-button { opacity: 1; pointer-events: auto; } + ::-webkit-input-placeholder { -webkit-text-security: none; color: #757575; @@ -466,6 +571,7 @@ input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-inner-spin-button { text-orientation: inherit !important; writing-mode: inherit !important; } + input::-webkit-input-placeholder { text-overflow: inherit; line-height: initial !important; @@ -474,11 +580,13 @@ input::-webkit-input-placeholder { overflow: hidden; -webkit-user-modify: read-only !important; } + input::-internal-input-suggested { text-overflow: inherit; white-space: nowrap; overflow: hidden; } + input::-internal-input-suggested, textarea::-internal-input-suggested { font: -webkit-small-control !important; @@ -492,55 +600,68 @@ textarea::-internal-input-suggested { overflow: hidden !important; overflow-anchor: none; } + textarea::-internal-input-suggested { - font-family: monospace !important; + font-family: monospace !important; } + input[type="password" i] { -webkit-text-security: disc !important; } + input[type="password" i]::-internal-input-suggested:not(.reveal-password) { -webkit-text-security: disc !important; } + input[type="password" i]::-internal-input-suggested.reveal-password { -webkit-text-security: none; } + input[type="password" i]::-internal-input-suggested.fade-out-password { width: fit-content; -webkit-mask: linear-gradient(to right, #000 50%, #0000); mask: linear-gradient(to right, #000 50%, #0000); } + input[type="password" i]::-internal-reveal { - width: 1.3em; - height: 1.3em; - cursor: default; - flex: none; - background-image: url(images/password_reveal_on.svg); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - margin-left: 3px; - margin-right: 3px; + width: 1.3em; + height: 1.3em; + cursor: default; + flex: none; + background-image: url(images/password_reveal_on.svg); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + margin-left: 3px; + margin-right: 3px; } + input[type="password" i]::-internal-reveal.reveal { - background-image: url(images/password_reveal_off.svg); + background-image: url(images/password_reveal_off.svg); } + input[type="password" i]::-internal-reveal:hover, input[type="password" i]::-internal-reveal:focus { - border-radius: 1px; - cursor: pointer; + border-radius: 1px; + cursor: pointer; } + input[type="password" i]::-internal-strong { - color: light-dark(#0B57D0, #A8C7FA); - font-family: roboto; - -webkit-text-security: none; + color: light-dark(#0B57D0, #A8C7FA); + font-family: roboto; + -webkit-text-security: none; } -input[type="hidden" i], input[type="image" i], input[type="file" i] { + +input[type="hidden" i], +input[type="image" i], +input[type="file" i] { appearance: none; padding: initial; background-color: initial; border: initial; cursor: default; } + input[type="file" i] { align-items: baseline; color: inherit; @@ -548,34 +669,43 @@ input[type="file" i] { text-overflow: ellipsis; white-space: pre; } + input[type="image" i] { cursor: pointer; } + input[type="radio" i], input[type="checkbox" i] { - margin:3px 3px 3px 4px; + margin: 3px 3px 3px 4px; padding: initial; background-color: initial; border: initial; cursor: default; } + input[type="radio" i] { - margin:3px 3px 0 5px; + margin: 3px 3px 0 5px; } -input[type="button" i], input[type="submit" i], input[type="reset" i] { + +input[type="button" i], +input[type="submit" i], +input[type="reset" i] { -internal-empty-line-height: fabricated; appearance: auto; user-select: none; white-space: pre } + input[type="file" i]::-webkit-file-upload-button { appearance: auto; -webkit-user-modify: read-only !important; white-space: nowrap; margin: 0; - margin-inline-end: 4px; /* See FileUploadControlIntrinsicInlineSize() */ + margin-inline-end: 4px; + /* See FileUploadControlIntrinsicInlineSize() */ font-size: inherit; } + input[type="button" i], input[type="submit" i], input[type="reset" i], @@ -591,6 +721,7 @@ button { background-color: ButtonFace; color: ButtonText; } + input[type="checkbox" i]:disabled, input[type="file" i]:disabled, input[type="hidden" i]:disabled, @@ -599,6 +730,7 @@ input[type="radio" i]:disabled, input[type="range" i]:disabled { background-color: initial; } + input[type="range" i] { appearance: auto; padding: initial; @@ -607,6 +739,7 @@ input[type="range" i] { cursor: default; color: light-dark(#101010, #ffffff); } + input[type="range" i]::-webkit-slider-container, input[type="range" i]::-webkit-media-slider-container { appearance: inherit; @@ -616,6 +749,7 @@ input[type="range" i]::-webkit-media-slider-container { -webkit-user-modify: read-only !important; display: flex; } + input[type="range" i]:-internal-has-datalist::-webkit-slider-container { /* * See LayoutThemeDefault. "22px" is @@ -623,6 +757,7 @@ input[type="range" i]:-internal-has-datalist::-webkit-slider-container { */ min-block-size: 22px; } + input[type="range" i]::-webkit-slider-runnable-track { flex: 1; min-inline-size: 0; @@ -631,6 +766,7 @@ input[type="range" i]::-webkit-slider-runnable-track { -webkit-user-modify: read-only !important; display: block; } + input[type="range" i]::-webkit-slider-thumb, input[type="range" i]::-webkit-media-slider-thumb { appearance: auto; @@ -638,65 +774,100 @@ input[type="range" i]::-webkit-media-slider-thumb { -webkit-user-modify: read-only !important; display: block; } + input[type="range" i]:disabled { - color: #c5c5c5; + color: #c5c5c5; } + input[type="button" i]:disabled, input[type="submit" i]:disabled, input[type="reset" i]:disabled, input[type="color" i]:disabled, input[type="file" i]:disabled::-webkit-file-upload-button, button:disabled { - background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(19, 1, 1, 0.3)); - border-color: light-dark(rgba(118, 118, 118, 0.3), rgba(195, 195, 195, 0.3)); - color: light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3)); + background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(19, 1, 1, 0.3)); + border-color: light-dark(rgba(118, 118, 118, 0.3), rgba(195, 195, 195, 0.3)); + color: light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3)); } -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 { + +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" 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 { + +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 } -input:disabled, textarea:disabled { + +input:disabled, +textarea:disabled { cursor: default; background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3)); color: light-dark(#545454, #aaaaaa); } + option:-internal-spatial-navigation-focus { outline: light-dark(black, white) dashed 1px; outline-offset: -1px; } + input:not([type="image" i], [type="range" i], [type="checkbox" i], [type="radio" i]) { - overflow: clip !important; - overflow-clip-margin: 0px !important; + overflow: clip !important; + overflow-clip-margin: 0px !important; } + /* https://html.spec.whatwg.org/multipage/rendering.html#hidden-elements */ /* TODO(crbug.com/1231263): should be display:none. */ area { - display: inline; + display: inline; } -base, basefont, datalist, head, link, meta, noembed, -noframes, param, rp, script, style, template, title { - display: none; + +base, +basefont, +datalist, +head, +link, +meta, +noembed, +noframes, +param, +rp, +script, +style, +template, +title { + display: none; } + input[type="hidden" i] { - display: none !important; + display: none !important; } + area:-webkit-any-link { cursor: pointer; } + input[type="checkbox" i] { appearance: auto; box-sizing: border-box; } + input[type="radio" i] { appearance: auto; box-sizing: border-box; } + input[type="color" i] { appearance: auto; inline-size: 50px; - block-size: 27px; + block-size: 27px; /* Same as native_theme_base. */ border: 1px solid ButtonBorder; padding: 1px 2px; @@ -705,6 +876,7 @@ input[type="color" i] { background-color: ButtonFace; color: ButtonText; } + input[type="color" i]::-webkit-color-swatch-wrapper { display: flex; padding: 4px 2px; @@ -713,6 +885,7 @@ input[type="color" i]::-webkit-color-swatch-wrapper { width: 100%; height: 100% } + input[type="color" i]::-webkit-color-swatch { /* The swatch should not be affected by color scheme. */ color-scheme: only light; @@ -722,18 +895,22 @@ input[type="color" i]::-webkit-color-swatch { min-width: 0; -webkit-user-modify: read-only !important; } + input[type="color" i][list] { appearance: auto; inline-size: 94px; - block-size: 27px + block-size: 27px } + input[type="color" i][list]::-webkit-color-swatch-wrapper { padding-inline-start: 8px; padding-inline-end: 24px; } + input[type="color" i][list]::-webkit-color-swatch { border-color: #000000; } + input::-webkit-calendar-picker-indicator { display: inline-block; inline-size: 0.66em; @@ -745,14 +922,17 @@ input::-webkit-calendar-picker-indicator { cursor: default; pointer-events: none; } + 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" i]:disabled::-webkit-clear-button, input[type="date" i]:disabled::-webkit-inner-spin-button, input[type="datetime-local" i]:disabled::-webkit-clear-button, @@ -773,13 +953,18 @@ input[type="week" i][readonly]::-webkit-inner-spin-button, input[readonly]::-webkit-calendar-picker-indicator { visibility: hidden; } + /* Form controls that measure the inline size without doing actual layout need to disable `text-autospace`, if their content can be affected by the property. crbug.com/1484863 */ -input[type="date" i], input[type="datetime-local" i], input[type="month" i], -input[type="week" i], select { +input[type="date" i], +input[type="datetime-local" i], +input[type="month" i], +input[type="week" i], +select { text-autospace: no-autospace !important; } + select { appearance: auto; box-sizing: border-box; @@ -792,9 +977,11 @@ select { cursor: default; border-radius: 0; } + select:disabled { - opacity: 0.7; + opacity: 0.7; } + /* -internal-list-box is how we specify select[multiple] */ /* select[multiple] is an exception to the prohibition on sizes here because it is one of the few controls with borders that grow on zoom @@ -808,19 +995,23 @@ select:-internal-list-box { white-space: nowrap; border-radius: 2px; } + select:not(:-internal-list-box) { overflow: visible !important; } + /* The padding here should match the value of |extraPaddingForOptionInsideOptgroup| in list_picker.js, which is the padding for select optgroup option. */ select:-internal-list-box optgroup option { padding-inline-start: 20px; } + select:-internal-list-box option, select:-internal-list-box optgroup { line-height: initial !important; } + /* option selected, list-box focused */ /* TODO(crbug.com/1244986): We should be able to remove !important here, but it breaks some WebUI menus. */ @@ -829,38 +1020,46 @@ select:-internal-list-box:focus option:checked:hover { background-color: SelectedItem !important; color: SelectedItemText !important; } + /* TODO(crbug.com/1244986): We should be able to remove !important here, but it breaks some WebUI menus. */ select:-internal-list-box:focus option:checked:disabled { background-color: -internal-inactive-list-box-selection !important; } + /* option selected, list-box not focused */ select:-internal-list-box option:checked, select:-internal-list-box option:checked:hover { background-color: light-dark(#cecece, #545454); color: light-dark(#101010, #FFFFFF); } + select:-internal-list-box:disabled option:checked, select:-internal-list-box option:checked:disabled, select:-internal-list-box option:checked:disabled:hover { color: light-dark(gray, #aaa); } + select:-internal-list-box hr { border-style: none; margin-block-start: 0.5em; margin-block-end: 0; } + select:-internal-list-box:focus-visible option:-internal-multi-select-focus { outline: auto 1px -webkit-focus-ring-color; outline-offset: -1px; } + select:-internal-list-box option:hover { background-color: initial; } + optgroup { font-weight: bolder; display: block; } + option { font-weight: normal; display: block; @@ -870,6 +1069,7 @@ option { white-space: nowrap; min-block-size: 1.2em; } + /* The following select style rules have to go after the other select styles in order to have higher precedence. */ /* TODO(crbug.com/880258): Use different styles for @@ -880,150 +1080,172 @@ textarea:-internal-autofill-previewed, textarea:-internal-autofill-selected, select:-internal-autofill-previewed, select:-internal-autofill-selected { - appearance: menulist-button; - background-image:none !important; - background-color: light-dark(#E8F0FE, rgba(70,90,126,0.4)) !important; - color: FieldText !important; + appearance: menulist-button; + background-image: none !important; + background-color: light-dark(#E8F0FE, rgba(70, 90, 126, 0.4)) !important; + color: FieldText !important; } + input:disabled, select:disabled, textarea:disabled { - border-color: rgba(118, 118, 118, 0.3); + border-color: rgba(118, 118, 118, 0.3); } + select:disabled, optgroup:disabled, option:disabled, select[disabled]>option { color: light-dark(GrayText, #aaa); } + output { display: inline; } + /* meter */ @supports not blink-feature(MeterAppearanceNoneFallbackStyle) { - meter { - appearance: auto; - box-sizing: border-box; - display: inline-block; - block-size: 1em; - inline-size: 5em; - vertical-align: -0.2em; - -webkit-user-modify: read-only !important; - } - meter::-webkit-meter-inner-element { - appearance: inherit; - box-sizing: inherit; - display: none; - -webkit-user-modify: read-only !important; - block-size: 100%; - inline-size: 100%; - } - meter::-webkit-meter-inner-element:-internal-shadow-host-has-non-auto-appearance { - display: grid; - grid-template-rows: 1fr [line1] 2fr [line2] 1fr; - position: relative; - } - meter::-internal-fallback:-internal-shadow-host-has-non-auto-appearance { - display: none; - } - meter::-webkit-meter-bar { - block-size: 100%; - inline-size: 100%; - -webkit-user-modify: read-only !important; - background: light-dark(#efefef, #3B3B3B); - border: thin solid light-dark(rgba(118, 118, 118, 0.3), #858585); - grid-row-start: line1; - grid-row-end: line2; - border-radius: 20px; - box-sizing: border-box; - align-self: unsafe center; - position: absolute; - overflow: hidden; - } - meter::-webkit-meter-optimum-value { - block-size: 100%; - -webkit-user-modify: read-only !important; - box-sizing: border-box; - background: light-dark(#107c10, #74b374); - } - meter::-webkit-meter-suboptimum-value { - block-size: 100%; - -webkit-user-modify: read-only !important; - box-sizing: border-box; - background: light-dark(#ffb900, #f2c812); - } - meter::-webkit-meter-even-less-good-value { - block-size: 100%; - -webkit-user-modify: read-only !important; - box-sizing: border-box; - background: light-dark(#d83b01, #e98f6d); - } + meter { + appearance: auto; + box-sizing: border-box; + display: inline-block; + block-size: 1em; + inline-size: 5em; + vertical-align: -0.2em; + -webkit-user-modify: read-only !important; + } + + meter::-webkit-meter-inner-element { + appearance: inherit; + box-sizing: inherit; + display: none; + -webkit-user-modify: read-only !important; + block-size: 100%; + inline-size: 100%; + } + + meter::-webkit-meter-inner-element:-internal-shadow-host-has-non-auto-appearance { + display: grid; + grid-template-rows: 1fr [line1] 2fr [line2] 1fr; + position: relative; + } + + meter::-internal-fallback:-internal-shadow-host-has-non-auto-appearance { + display: none; + } + + meter::-webkit-meter-bar { + block-size: 100%; + inline-size: 100%; + -webkit-user-modify: read-only !important; + background: light-dark(#efefef, #3B3B3B); + border: thin solid light-dark(rgba(118, 118, 118, 0.3), #858585); + grid-row-start: line1; + grid-row-end: line2; + border-radius: 20px; + box-sizing: border-box; + align-self: unsafe center; + position: absolute; + overflow: hidden; + } + + meter::-webkit-meter-optimum-value { + block-size: 100%; + -webkit-user-modify: read-only !important; + box-sizing: border-box; + background: light-dark(#107c10, #74b374); + } + + meter::-webkit-meter-suboptimum-value { + block-size: 100%; + -webkit-user-modify: read-only !important; + box-sizing: border-box; + background: light-dark(#ffb900, #f2c812); + } + + meter::-webkit-meter-even-less-good-value { + block-size: 100%; + -webkit-user-modify: read-only !important; + box-sizing: border-box; + background: light-dark(#d83b01, #e98f6d); + } } + @supports blink-feature(MeterAppearanceNoneFallbackStyle) { - meter { - -webkit-user-modify: read-only !important; - appearance: auto; - block-size: 1em; - box-sizing: border-box; - display: inline-block; - inline-size: 5em; - vertical-align: -0.2em; - } - meter::-webkit-meter-inner-element { - -webkit-user-modify: read-only !important; - appearance: inherit; - block-size: 100%; - box-sizing: inherit; - display: grid; - grid-template-rows: 1fr [line1] 2fr [line2] 1fr; - inline-size: 100%; - position: relative; - } - meter::-webkit-meter-bar { - -webkit-user-modify: read-only !important; - align-self: unsafe center; - background: linear-gradient(to bottom, #ddd, #eee 20%, #ccc 45%, #ccc 55%, #ddd); - block-size: 100%; - box-sizing: border-box; - grid-row-end: line2; - grid-row-start: line1; - inline-size: 100%; - overflow: hidden; - position: absolute; - } - meter::-webkit-meter-bar:-internal-shadow-host-has-non-auto-appearance { - background: light-dark(#efefef, #3B3B3B); - border-radius: 20px; - border: thin solid light-dark(rgba(118, 118, 118, 0.3), #858585); - } - meter::-webkit-meter-optimum-value { - -webkit-user-modify: read-only !important; - background: linear-gradient(to bottom, #ad7, #cea 20%, #7a3 45%, #7a3 55%, #ad7); - block-size: 100%; - box-sizing: border-box; - } - meter::-webkit-meter-optimum-value:-internal-shadow-host-has-non-auto-appearance { - background: light-dark(#107c10, #74b374); - } - meter::-webkit-meter-suboptimum-value { - -webkit-user-modify: read-only !important; - background: linear-gradient(to bottom, #fe7, #ffc 20%, #db3 45%, #db3 55%, #fe7); - block-size: 100%; - box-sizing: border-box; - } - meter::-webkit-meter-suboptimum-value:-internal-shadow-host-has-non-auto-appearance { - background: light-dark(#ffb900, #f2c812); - } - meter::-webkit-meter-even-less-good-value { - -webkit-user-modify: read-only !important; - background: linear-gradient(to bottom, #f77, #fcc 20%, #d44 45%, #d44 55%, #f77); - block-size: 100%; - box-sizing: border-box; - } - meter::-webkit-meter-even-less-good-value:-internal-shadow-host-has-non-auto-appearance { - background: light-dark(#d83b01, #e98f6d); - } + meter { + -webkit-user-modify: read-only !important; + appearance: auto; + block-size: 1em; + box-sizing: border-box; + display: inline-block; + inline-size: 5em; + vertical-align: -0.2em; + } + + meter::-webkit-meter-inner-element { + -webkit-user-modify: read-only !important; + appearance: inherit; + block-size: 100%; + box-sizing: inherit; + display: grid; + grid-template-rows: 1fr [line1] 2fr [line2] 1fr; + inline-size: 100%; + position: relative; + } + + meter::-webkit-meter-bar { + -webkit-user-modify: read-only !important; + align-self: unsafe center; + background: linear-gradient(to bottom, #ddd, #eee 20%, #ccc 45%, #ccc 55%, #ddd); + block-size: 100%; + box-sizing: border-box; + grid-row-end: line2; + grid-row-start: line1; + inline-size: 100%; + overflow: hidden; + position: absolute; + } + + meter::-webkit-meter-bar:-internal-shadow-host-has-non-auto-appearance { + background: light-dark(#efefef, #3B3B3B); + border-radius: 20px; + border: thin solid light-dark(rgba(118, 118, 118, 0.3), #858585); + } + + meter::-webkit-meter-optimum-value { + -webkit-user-modify: read-only !important; + background: linear-gradient(to bottom, #ad7, #cea 20%, #7a3 45%, #7a3 55%, #ad7); + block-size: 100%; + box-sizing: border-box; + } + + meter::-webkit-meter-optimum-value:-internal-shadow-host-has-non-auto-appearance { + background: light-dark(#107c10, #74b374); + } + + meter::-webkit-meter-suboptimum-value { + -webkit-user-modify: read-only !important; + background: linear-gradient(to bottom, #fe7, #ffc 20%, #db3 45%, #db3 55%, #fe7); + block-size: 100%; + box-sizing: border-box; + } + + meter::-webkit-meter-suboptimum-value:-internal-shadow-host-has-non-auto-appearance { + background: light-dark(#ffb900, #f2c812); + } + + meter::-webkit-meter-even-less-good-value { + -webkit-user-modify: read-only !important; + background: linear-gradient(to bottom, #f77, #fcc 20%, #d44 45%, #d44 55%, #f77); + block-size: 100%; + box-sizing: border-box; + } + + meter::-webkit-meter-even-less-good-value:-internal-shadow-host-has-non-auto-appearance { + background: light-dark(#d83b01, #e98f6d); + } } + /* progress */ progress { appearance: auto; @@ -1033,12 +1255,14 @@ progress { inline-size: 10em; vertical-align: -0.2em; } + progress::-webkit-progress-inner-element { box-sizing: inherit; -webkit-user-modify: read-only; block-size: 100%; inline-size: 100%; } + progress::-webkit-progress-bar { background-color: gray; block-size: 100%; @@ -1046,75 +1270,117 @@ progress::-webkit-progress-bar { -webkit-user-modify: read-only !important; box-sizing: border-box; } + progress::-webkit-progress-value { background-color: green; block-size: 100%; - inline-size: 50%; /* should be removed later */ + inline-size: 50%; + /* should be removed later */ -webkit-user-modify: read-only !important; box-sizing: border-box; } + /* inline elements */ -u, ins { +u, +ins { text-decoration: underline } -abbr[title], acronym[title] { + +abbr[title], +acronym[title] { text-decoration: dotted underline; } -strong, b { + +strong, +b { font-weight: bold } -i, cite, em, var, address, dfn { + +i, +cite, +em, +var, +address, +dfn { font-style: italic } -tt, code, kbd, samp { + +tt, +code, +kbd, +samp { font-family: monospace } -pre, xmp, plaintext, listing { + +pre, +xmp, +plaintext, +listing { display: block; font-family: monospace; white-space: pre; margin: 1__qem 0 } + mark { background-color: Mark; color: MarkText; } + big { font-size: larger } + small { font-size: smaller } -s, strike, del { + +s, +strike, +del { text-decoration: line-through } + sub { vertical-align: sub; font-size: smaller } + sup { vertical-align: super; font-size: smaller } + nobr { white-space: nowrap } + /* states */ :-internal-selector-fragment-anchor { outline: Highlight 3px solid; } + :focus-visible { outline: auto 1px -webkit-focus-ring-color } -html:focus-visible, body:focus-visible { + +html:focus-visible, +body:focus-visible { outline: none } -embed:focus-visible, iframe:focus-visible, object:focus-visible { + +embed:focus-visible, +iframe:focus-visible, +object:focus-visible { outline: none } -input:focus-visible, textarea:focus-visible, select:focus-visible { + +input:focus-visible, +textarea:focus-visible, +select:focus-visible { outline-offset: 0; } + input[type="button" i]:focus-visible, input[type="file" i]:focus-visible, input[type="hidden" i]:focus-visible, @@ -1124,52 +1390,59 @@ input[type="submit" i]:focus-visible, input[type="file" i]:focus-visible::-webkit-file-upload-button { outline-offset: 0 } + input[type="checkbox" i]:focus-visible, input[type="radio" i]:focus-visible { - outline-offset: 2px; + outline-offset: 2px; } + input[type="date" i]::-webkit-calendar-picker-indicator, input[type="datetime-local" i]::-webkit-calendar-picker-indicator, input[type="month" i]::-webkit-calendar-picker-indicator, input[type="week" i]::-webkit-calendar-picker-indicator { - background-image: light-dark(url(images/calendar_icon.svg), url(images/calendar_icon_white.svg)); - background-origin: content-box; - background-repeat: no-repeat; - background-size: contain; - block-size: 1.0em; - inline-size: 1.0em; - opacity: 1; - outline: none; - padding: 2px; + background-image: light-dark(url(images/calendar_icon.svg), url(images/calendar_icon_white.svg)); + background-origin: content-box; + background-repeat: no-repeat; + background-size: contain; + block-size: 1.0em; + inline-size: 1.0em; + opacity: 1; + outline: none; + padding: 2px; } + input[type="date" i]::-webkit-calendar-picker-indicator:focus-visible, input[type="datetime-local" i]::-webkit-calendar-picker-indicator:focus-visible, input[type="month" i]::-webkit-calendar-picker-indicator:focus-visible, input[type="week" i]::-webkit-calendar-picker-indicator:focus-visible { - outline: solid 2px -webkit-focus-ring-color; - outline-offset: -2px; + outline: solid 2px -webkit-focus-ring-color; + outline-offset: -2px; } + input[type="time" i]::-webkit-calendar-picker-indicator { - background-image: light-dark(url(images/time_icon.svg), url(images/time_icon_white.svg)); - background-origin: content-box; - background-repeat: no-repeat; - background-size: contain; - opacity: 1; - outline: none; - margin-inline-start: 8px; - padding-inline-start: 3px; - padding-inline-end: 3px; - padding-block: 3px; - block-size: 1.05em; - inline-size: 1.05em; + background-image: light-dark(url(images/time_icon.svg), url(images/time_icon_white.svg)); + background-origin: content-box; + background-repeat: no-repeat; + background-size: contain; + opacity: 1; + outline: none; + margin-inline-start: 8px; + padding-inline-start: 3px; + padding-inline-end: 3px; + padding-block: 3px; + block-size: 1.05em; + inline-size: 1.05em; } + input[type="time" i]::-webkit-calendar-picker-indicator:focus-visible { - outline: solid 2px -webkit-focus-ring-color; - outline-offset: -2px; + outline: solid 2px -webkit-focus-ring-color; + outline-offset: -2px; } + input::-webkit-calendar-picker-indicator:hover { - background-color: initial; + background-color: initial; } + input::-webkit-datetime-edit-ampm-field:focus, input::-webkit-datetime-edit-day-field:focus, input::-webkit-datetime-edit-hour-field:focus, @@ -1183,6 +1456,7 @@ input::-webkit-datetime-edit-year-field:focus { color: light-dark(highlighttext, #000000); outline: none; } + input::-webkit-datetime-edit-year-field[disabled], input::-webkit-datetime-edit-month-field[disabled], input::-webkit-datetime-edit-week-field[disabled], @@ -1194,57 +1468,75 @@ input::-webkit-datetime-edit-minute-field[disabled], input::-webkit-datetime-edit-second-field[disabled] { color: light-dark(GrayText, rgb(165, 165, 165)); } + a:-webkit-any-link { color: -webkit-link; text-decoration: underline; cursor: pointer; } + a:-webkit-any-link:active { color: -webkit-activelink } + a:-webkit-any-link:read-write { cursor: text; } + a:-webkit-any-link:focus-visible { - outline-offset: 1px; + outline-offset: 1px; } + /* HTML5 ruby elements */ -ruby, rt { - text-indent: 0; /* blocks used for ruby rendering should not trigger this */ +ruby, +rt { + text-indent: 0; + /* blocks used for ruby rendering should not trigger this */ } + ruby { display: ruby; } + rt { line-height: normal; text-emphasis: none; } -ruby > rt { + +ruby>rt { display: ruby-text; font-size: 50%; text-align: start; } + /* other elements */ -frameset, frame { +frameset, +frame { display: block } + frameset { border-color: inherit } + iframe { border: 2px inset } + fencedframe { border: 2px inset; object-fit: contain !important; object-position: 50% 50% !important; } + details { display: block } + summary { display: block } + /* * https://html.spec.whatwg.org/C/#the-details-and-summary-elements * The specification doesn't have |details >| and |:first-of-type|. @@ -1254,31 +1546,86 @@ summary { * expect that is not a list-item. * - Firefox does so. */ -details > summary:first-of-type { +details>summary:first-of-type { display: list-item; counter-increment: list-item 0; list-style: disclosure-closed inside; } -details[open] > summary:first-of-type { + +details[open]>summary:first-of-type { list-style-type: disclosure-open; } + /* https://html.spec.whatwg.org/multipage/rendering.html#bidi-rendering */ /* This chunk of styles interacts with the `name == html_names::kDirAttr` case in HTMLElement::CollectStyleForPresentationAttribute(). Make sure any changes here are congruent with changes made there. */ -address, blockquote, center, div, figure, figcaption, footer, form, header, hr, -legend, listing, main, p, plaintext, pre, summary, xmp, article, aside, h1, h2, -h3, h4, h5, h6, hgroup, nav, section, search, table, caption, colgroup, col, -thead, tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, bdi, -output, [dir=ltr i], [dir=rtl i], [dir=auto i] { +address, +blockquote, +center, +div, +figure, +figcaption, +footer, +form, +header, +hr, +legend, +listing, +main, +p, +plaintext, +pre, +summary, +xmp, +article, +aside, +h1, +h2, +h3, +h4, +h5, +h6, +hgroup, +nav, +section, +search, +table, +caption, +colgroup, +col, +thead, +tbody, +tfoot, +tr, +td, +th, +dir, +dd, +dl, +dt, +menu, +ol, +ul, +li, +bdi, +output, +[dir=ltr i], +[dir=rtl i], +[dir=auto i] { unicode-bidi: isolate; } -bdo, bdo[dir] { + +bdo, +bdo[dir] { unicode-bidi: isolate-override; } -textarea[dir=auto i], pre[dir=auto i] { + +textarea[dir=auto i], +pre[dir=auto i] { unicode-bidi: plaintext; } + dialog { display: none; /* https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3 */ @@ -1293,9 +1640,11 @@ dialog { background-color: Canvas; color: CanvasText; } + dialog[open] { display: block; } + dialog:-internal-dialog-in-top-layer { /* https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3 */ position: fixed; @@ -1308,147 +1657,185 @@ dialog:-internal-dialog-in-top-layer { user-select: text; visibility: visible; } + dialog:modal { overlay: auto !important; } + /* TODO(foolip): In the Fullscreen spec, there's a ::backdrop block with the properties shared with :fullscreen::backdrop (see fullscreen.css). */ dialog:-internal-dialog-in-top-layer::backdrop { position: fixed; inset: 0; /* https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3 */ - background: rgba(0,0,0,0.1); + background: rgba(0, 0, 0, 0.1); } + slot { display: contents; } + [popover] { - position: fixed; - inset: 0; - width: fit-content; - height: fit-content; - margin: auto; - border: solid; - padding: 0.25em; - overflow: auto; - color: CanvasText; - background-color: Canvas; + position: fixed; + inset: 0; + width: fit-content; + height: fit-content; + margin: auto; + border: solid; + padding: 0.25em; + overflow: auto; + color: CanvasText; + background-color: Canvas; } + /* This ensures that popovers get display:none when they are not open, and we need to be careful not to affect `` when open as a dialog. */ [popover]:not(:popover-open):not(dialog[open]) { - display:none; + display: none; } + /* The UA stylesheet has a rule like dialog{display:none}, so needs this to be visible when it is open as a popover. */ dialog:popover-open { - display:block; + display: block; } + @supports blink-feature(HTMLAnchorAttribute) { - /* Popovers using anchor positioning get their inset properties reset, to make + + /* Popovers using anchor positioning get their inset properties reset, to make * it easier to position them. */ - [popover][anchor] { - inset:auto; - } + [popover][anchor] { + inset: auto; + } } + /* This rule matches popovers (dialog or not) that are currently open as a popover. */ -[popover]:popover-open:not(dialog), dialog:popover-open:not([open]) { - overlay: auto !important; +[popover]:popover-open:not(dialog), +dialog:popover-open:not([open]) { + overlay: auto !important; } + [popover]:-internal-popover-in-top-layer::backdrop { - /* From the (modified) fullscreen spec: https://fullscreen.spec.whatwg.org/#user-agent-level-style-sheet-defaults: */ - position: fixed; - inset: 0; - /* Specific to [popover]: */ - pointer-events: none !important; - background-color: transparent; + /* From the (modified) fullscreen spec: https://fullscreen.spec.whatwg.org/#user-agent-level-style-sheet-defaults: */ + position: fixed; + inset: 0; + /* Specific to [popover]: */ + pointer-events: none !important; + background-color: transparent; } + /* Pagination */ @media print { - @page { - /* https://drafts.csswg.org/css-page-3/#margin-text-alignment */ - @top-left-corner { - text-align: right; - vertical-align: middle; + @page { + + /* https://drafts.csswg.org/css-page-3/#margin-text-alignment */ + @top-left-corner { + text-align: right; + vertical-align: middle; + } + + @top-left { + text-align: left; + vertical-align: middle; + } + + @top-center { + text-align: center; + vertical-align: middle; + } + + @top-right { + text-align: right; + vertical-align: middle; + } + + @top-right-corner { + text-align: left; + vertical-align: middle; + } + + @right-top { + text-align: center; + vertical-align: top; + } + + @right-middle { + text-align: center; + vertical-align: middle; + } + + @right-bottom { + text-align: center; + vertical-align: bottom; + } + + @bottom-right-corner { + text-align: left; + vertical-align: middle; + } + + @bottom-right { + text-align: right; + vertical-align: middle; + } + + @bottom-center { + text-align: center; + vertical-align: middle; + } + + @bottom-left { + text-align: left; + vertical-align: middle; + } + + @bottom-left-corner { + text-align: right; + vertical-align: middle; + } + + @left-bottom { + text-align: center; + vertical-align: bottom; + } + + @left-middle { + text-align: center; + vertical-align: middle; + } + + @left-top { + text-align: center; + vertical-align: top; + } } - @top-left { - text-align: left; - vertical-align: middle; - } - @top-center { - text-align: center; - vertical-align: middle; - } - @top-right { - text-align: right; - vertical-align: middle; - } - @top-right-corner { - text-align: left; - vertical-align: middle; - } - @right-top { - text-align: center; - vertical-align: top; - } - @right-middle { - text-align: center; - vertical-align: middle; - } - @right-bottom { - text-align: center; - vertical-align: bottom; - } - @bottom-right-corner { - text-align: left; - vertical-align: middle; - } - @bottom-right { - text-align: right; - vertical-align: middle; - } - @bottom-center { - text-align: center; - vertical-align: middle; - } - @bottom-left { - text-align: left; - vertical-align: middle; - } - @bottom-left-corner { - text-align: right; - vertical-align: middle; - } - @left-bottom { - text-align: center; - vertical-align: bottom; - } - @left-middle { - text-align: center; - vertical-align: middle; - } - @left-top { - text-align: center; - vertical-align: top; - } - } - /* Allows table headers and footers to print at the top / bottom of each + + /* Allows table headers and footers to print at the top / bottom of each page. */ - thead { break-inside: avoid; } - tfoot { break-inside: avoid; } + thead { + break-inside: avoid; + } + + tfoot { + break-inside: avoid; + } } + /* spelling/grammar error pseudos */ html::spelling-error { text-decoration: -internal-spelling-error-color spelling-error; } + html::grammar-error { text-decoration: -internal-grammar-error-color grammar-error; } + @supports blink-feature(AutoSizeLazyLoadedImages) { - img:is([sizes="auto" i], [sizes^="auto," i]) { - contain: size !important; - contain-intrinsic-size: 300px 150px; - } + img:is([sizes="auto" i], [sizes^="auto," i]) { + contain: size !important; + contain-intrinsic-size: 300px 150px; + } } -/* noscript is handled internally, as it depends on settings. */ + +/* noscript is handled internally, as it depends on settings. */ \ No newline at end of file