Use explicit case-insensitive attribute-value matching in UA-stylesheets
With the "i" (case-insensitive) matching modifier introduced in
https://codereview.chromium.org/330043003/, it becomes possible to
refine the hits on the CaseInsensitiveAttrSelectorMatch use-counter
by applying the modifier to all rules in the UA-stylesheets which
perform an attribute-value match on one of the attributes that - due
to legacy reasons - should be matched case-insensitively.
Most of the modified rules involve the 'type' attribute on <input>
elements, but there are a few others as well ('dir' and 'align').
The goal of this is to be able to get rid of the legacy-induced case-
insensitive cases and leave the "i" flag as a mechanism to opt-in to
case-insensitive matching. See https://crbug.com/327060 for further info.
BUG=327060, 366563
Review URL: https://codereview.chromium.org/417353004
git-svn-id: svn://svn.chromium.org/blink/trunk@179401 bbb929c8-8fbe-4397-9dbb-9b2b20218538
diff --git a/Source/core/css/html.css b/Source/core/css/html.css
index 98ace69..b1ad9ac 100644
--- a/Source/core/css/html.css
+++ b/Source/core/css/html.css
@@ -408,11 +408,11 @@
text-align: start;
}
-input[type="hidden"] {
+input[type="hidden" i] {
display: none
}
-input, input[type="password"], input[type="search"] {
+input, input[type="password" i], input[type="search" i] {
-webkit-appearance: textfield;
padding: 1px;
background-color: white;
@@ -422,7 +422,7 @@
cursor: auto;
}
-input[type="search"] {
+input[type="search" i] {
-webkit-appearance: searchfield;
box-sizing: border-box;
}
@@ -434,7 +434,7 @@
content: none !important;
}
-input[type="search"]::-webkit-textfield-decoration-container {
+input[type="search" i]::-webkit-textfield-decoration-container {
direction: ltr;
}
@@ -453,7 +453,7 @@
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 @@
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 @@
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;
@@ -539,18 +539,18 @@
-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;
@@ -562,20 +562,20 @@
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;
@@ -583,7 +583,7 @@
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;
@@ -594,7 +594,7 @@
box-sizing: border-box
}
-input[type="range"] {
+input[type="range" i] {
-webkit-appearance: slider-horizontal;
padding: initial;
border: initial;
@@ -602,7 +602,7 @@
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;
@@ -610,7 +610,7 @@
-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;
@@ -619,25 +619,25 @@
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
}
@@ -654,17 +654,17 @@
display: none
}
-input[type="checkbox"] {
+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;
@@ -674,7 +674,7 @@
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;
@@ -683,25 +683,25 @@
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"][list] {
+input[type="color" i][list] {
-webkit-appearance: menulist;
width: 88px;
height: 23px
}
-input[type="color"][list]::-webkit-color-swatch-wrapper {
+input[type="color" i][list]::-webkit-color-swatch-wrapper {
padding-left: 8px;
padding-right: 24px;
}
-input[type="color"][list]::-webkit-color-swatch {
+input[type="color" i][list]::-webkit-color-swatch {
border-color: #000000;
}
@@ -724,23 +724,23 @@
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;
}
@@ -994,16 +994,16 @@
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
}
@@ -1083,7 +1083,7 @@
unicode-bidi: bidi-override;
}
-textarea[dir=auto] {
+textarea[dir=auto i] {
unicode-bidi: -webkit-plaintext;
}
diff --git a/Source/core/css/mediaControls.css b/Source/core/css/mediaControls.css
index d3b5536..19acd2d 100644
--- a/Source/core/css/mediaControls.css
+++ b/Source/core/css/mediaControls.css
@@ -239,7 +239,7 @@
https://code.google.com/p/chromium/issues/detail?id=112508
https://bugs.webkit.org/show_bug.cgi?id=62218
*/
-input[type="range"]::-webkit-media-slider-container {
+input[type="range" i]::-webkit-media-slider-container {
display: flex;
align-items: center;
flex-direction: row; /* This property is updated by C++ code. */
@@ -252,11 +252,11 @@
}
/* The negative right margin causes the track to overflow its container. */
-input[type="range"]::-webkit-media-slider-container > div {
+input[type="range" i]::-webkit-media-slider-container > div {
margin-right: -14px;
}
-input[type="range"]::-webkit-media-slider-thumb {
+input[type="range" i]::-webkit-media-slider-thumb {
margin-left: -7px;
margin-right: -7px;
}
diff --git a/Source/core/css/quirks.css b/Source/core/css/quirks.css
index 4845591..38e3ac8 100644
--- a/Source/core/css/quirks.css
+++ b/Source/core/css/quirks.css
@@ -22,10 +22,10 @@
*/
/* Give floated images margins of 3px */
-img[align="left"] {
+img[align="left" i] {
margin-right: 3px;
}
-img[align="right"] {
+img[align="right" i] {
margin-left: 3px;
}
@@ -43,7 +43,7 @@
}
/* This will apply only to text fields, since all other inputs already use border box sizing */
-input:not([type=image]), textarea {
+input:not([type=image i]), textarea {
box-sizing: border-box;
}
diff --git a/Source/core/css/themeChromiumAndroid.css b/Source/core/css/themeChromiumAndroid.css
index e00c340..d5b3d40 100644
--- a/Source/core/css/themeChromiumAndroid.css
+++ b/Source/core/css/themeChromiumAndroid.css
@@ -41,25 +41,25 @@
white-space: pre;
}
-input[type="date"]:disabled,
-input[type="datetime-local"]:disabled,
-input[type="month"]:disabled,
-input[type="time"]:disabled,
-input[type="week"]:disabled,
-input[type="date"]:read-only,
-input[type="datetime-local"]:read-only,
-input[type="month"]:read-only,
-input[type="time"]:read-only,
-input[type="week"]:read-only {
+input[type="date" i]:disabled,
+input[type="datetime-local" i]:disabled,
+input[type="month" i]:disabled,
+input[type="time" i]:disabled,
+input[type="week" i]:disabled,
+input[type="date" i]:read-only,
+input[type="datetime-local" i]:read-only,
+input[type="month" i]:read-only,
+input[type="time" i]:read-only,
+input[type="week" i]:read-only {
background-color: ButtonFace;
color: GrayText;
}
-input[type="date"],
-input[type="datetime-local"],
-input[type="month"],
-input[type="time"],
-input[type="week"] {
+input[type="date" i],
+input[type="datetime-local" i],
+input[type="month" i],
+input[type="time" i],
+input[type="week" i] {
align-items: center;
-webkit-appearance: menulist;
background-color: ButtonFace;
diff --git a/Source/core/css/themeChromiumLinux.css b/Source/core/css/themeChromiumLinux.css
index 7d15d64..640a5a8 100644
--- a/Source/core/css/themeChromiumLinux.css
+++ b/Source/core/css/themeChromiumLinux.css
@@ -37,6 +37,6 @@
background-color: ButtonFace;
}
-input[type=range] {
+input[type=range i] {
color: #9d968E;
}
diff --git a/Source/core/css/themeInputMultipleFields.css b/Source/core/css/themeInputMultipleFields.css
index 0150928..069d3c2 100644
--- a/Source/core/css/themeInputMultipleFields.css
+++ b/Source/core/css/themeInputMultipleFields.css
@@ -3,11 +3,11 @@
* found in the LICENSE file.
*/
-input[type="date"],
-input[type="datetime-local"],
-input[type="month"],
-input[type="time"],
-input[type="week"] {
+input[type="date" i],
+input[type="datetime-local" i],
+input[type="month" i],
+input[type="time" i],
+input[type="week" i] {
align-items: center;
display: -webkit-inline-flex;
font-family: monospace;
@@ -83,12 +83,12 @@
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 {
+input[type="date" i]::-webkit-inner-spin-button,
+input[type="datetime" i]::-webkit-inner-spin-button,
+input[type="datetime-local" i]::-webkit-inner-spin-button,
+input[type="month" i]::-webkit-inner-spin-button,
+input[type="time" i]::-webkit-inner-spin-button,
+input[type="week" i]::-webkit-inner-spin-button {
/* FIXME: Remove height. */
height: 1.5em;
-webkit-margin-start: 2px;
diff --git a/Source/core/css/themeMac.css b/Source/core/css/themeMac.css
index 96cfe5f..32e3c3a 100644
--- a/Source/core/css/themeMac.css
+++ b/Source/core/css/themeMac.css
@@ -3,7 +3,7 @@
* found in the LICENSE file.
*/
-select, input[type="color"][list] {
+select, input[type="color" i][list] {
background-color: #f8f8f8;
border: 1px solid #a6a6a6;
}
diff --git a/Source/core/css/themeWin.css b/Source/core/css/themeWin.css
index 09b348a..694c889 100644
--- a/Source/core/css/themeWin.css
+++ b/Source/core/css/themeWin.css
@@ -33,66 +33,66 @@
making our form elements match Firefox's. */
input:not([type]),
-input[type="email"],
-input[type="number"],
-input[type="password"],
-input[type="tel"],
-input[type="url"],
-input[type="text"] {
+input[type="email" i],
+input[type="number" i],
+input[type="password" i],
+input[type="tel" i],
+input[type="url" i],
+input[type="text" i] {
padding:1px 0;
}
-input[type="search"] {
+input[type="search" i] {
padding:1px;
}
-input[type="checkbox"] {
+input[type="checkbox" i] {
margin:3px 3px 3px 4px;
}
-input[type="radio"] {
+input[type="radio" i] {
margin:3px 3px 0 5px;
}
-input[type="range"] {
+input[type="range" i] {
color: #c4c4c4;
}
/* Not sure this is the right color. #EBEBE4 is what Firefox uses.
FIXME: Figure out how to support legacy input rendering.
- FIXME: Add input[type="file"] once we figure out our file inputs.
- FIXME: Add input[type="image"] once we figure out our image inputs.
+ FIXME: Add input[type="file" i] once we figure out our file inputs.
+ FIXME: Add input[type="image" i] once we figure out our image inputs.
FIXME: We probably do the wrong thing if you put an invalid input type.
do we care?
*/
textarea:disabled,
input:not([type]):disabled,
-input[type="color"]:disabled,
-input[type="date"]:disabled,
-input[type="datetime"]:disabled,
-input[type="datetime-local"]:disabled,
-input[type="email"]:disabled,
-input[type="month"]:disabled,
-input[type="password"]:disabled,
-input[type="number"]:disabled,
-input[type="search"]:disabled,
-input[type="tel"]:disabled,
-input[type="text"]:disabled,
-input[type="time"]:disabled,
-input[type="url"]:disabled,
-input[type="week"]:disabled {
+input[type="color" i]:disabled,
+input[type="date" i]:disabled,
+input[type="datetime" i]:disabled,
+input[type="datetime-local" i]:disabled,
+input[type="email" i]:disabled,
+input[type="month" i]:disabled,
+input[type="password" i]:disabled,
+input[type="number" i]:disabled,
+input[type="search" i]:disabled,
+input[type="tel" i]:disabled,
+input[type="text" i]:disabled,
+input[type="time" i]:disabled,
+input[type="url" i]:disabled,
+input[type="week" i]:disabled {
background-color: #EBEBE4;
}
-input[type="search"]::-webkit-search-cancel-button {
+input[type="search" i]::-webkit-search-cancel-button {
margin-right: 3px;
}
-input[type="search"]::-webkit-search-results-decoration {
+input[type="search" i]::-webkit-search-results-decoration {
margin: auto 3px auto 2px;
}
-input[type="search"]::-webkit-search-results-button {
+input[type="search" i]::-webkit-search-results-button {
margin: auto 3px auto 2px;
}
@@ -100,7 +100,7 @@
margin: 0;
}
-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 {
padding: 1px 6px;
}
