Bug 1687202 - Tweak <input type="color"> tests so they work with the non-native theme. r=spohl

Differential Revision: https://phabricator.services.mozilla.com/D102124
This commit is contained in:
Cameron McCormack 2021-01-18 03:14:17 +00:00
Родитель 1baf91ec07
Коммит 1db33852e6
8 изменённых файлов: 62 добавлений и 12 удалений

Просмотреть файл

@ -2,9 +2,6 @@
<html>
<link rel='stylesheet' type='text/css' href='reference-style.css'>
<style>
button.input-color {
-moz-appearance: button;
}
div.input-color-swatch {
margin-top: 3px;
margin-bottom: 3px;

Просмотреть файл

@ -1,9 +1,6 @@
<!DOCTYPE html>
<html>
<style>
input[type="color"] {
-moz-appearance: button;
}
input[type="color"]::-moz-color-swatch {
margin-top: 3px;
margin-bottom: 3px;

Просмотреть файл

@ -18,6 +18,32 @@
body > button:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
body > button:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
body > button:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
@supports -moz-bool-pref("widget.disable-native-theme-for-content") {
/* The non-native theme has different widget-supplied padding values
* for <input type="color"> and <button>, and so we must calculate
* the color swatch height explicitly. These are computed as the
* widget-supplied min-height (32px) minus padding+border (padding
* as set above, and the 2px of widget-supplied border), clamped to be
* non-negative.
*/
body > button:nth-child(1) .input-color-swatch { height: 30px; }
body > button:nth-child(2) .input-color-swatch { height: 10px; }
body > button:nth-child(3) .input-color-swatch { height: 10px; }
body > button:nth-child(4) .input-color-swatch { height: 20px; }
body > button:nth-child(5) .input-color-swatch { height: 0px; }
body > button:nth-child(6) .input-color-swatch { height: 0px; }
body > button:nth-child(7) .input-color-swatch { height: 30px; }
body > button:nth-child(8) .input-color-swatch { height: 30px; }
body > button:nth-child(9) .input-color-swatch { height: 30px; }
body > button:nth-child(10) .input-color-swatch { height: 30px; }
body > button:nth-child(11) .input-color-swatch { height: 20px; }
body > button:nth-child(12) .input-color-swatch { height: 30px; }
body > button:nth-child(13) .input-color-swatch { height: 20px; }
body > button:nth-child(14) .input-color-swatch { height: 30px; }
body > button:nth-child(15) .input-color-swatch { height: 22px; }
body > button:nth-child(16) .input-color-swatch { height: 30px; }
}
</style>
<body>
<button class="input-color">

Просмотреть файл

@ -14,3 +14,21 @@ button.input-color {
width: 64px;
height: 23px;
}
@supports -moz-bool-pref("widget.disable-native-theme-for-content") {
/* The non-native theme has different widget-supplied padding values
* for <input type="color"> and <button> -- `4px 4px 4px 4px` for the
* former, and `1px 4px 1px 4px` for the latter. So we size the
* references elements a bit differently to account for this.
*/
button.input-color {
min-height: 32px; /* widget-supplied min-height */
padding: 4px; /* widget-supplied padding */
}
div.input-color-swatch {
height: 22px; /* for a real ::-moz-color-swatch, its 100% height computes to
the widget-supplied min-height (32px) minus
padding+border (10px) */
}
}

Просмотреть файл

@ -1,8 +1,8 @@
== input-color-1.html input-color-1-ref.html
== input-color-1.html chrome://reftest/content/forms/input/color/input-color-1-ref.html
fuzzy-if(!nativeThemePref,0-1,0-2) == margin-padding-1.html margin-padding-1-ref.html
fuzzy-if(!nativeThemePref,0-1,0-2) == margin-padding-1.html chrome://reftest/content/forms/input/color/margin-padding-1-ref.html
== block-invalidate-1.html block-invalidate-1-ref.html
== block-invalidate-2.html block-invalidate-2-ref.html
fuzzy-if(skiaContent,0-8,0-80) fuzzy-if(gtkWidget,0-8,0-113) == transformations-1.html transformations-1-ref.html # Bug 1600790 for gtkWidget
== custom-style-1.html custom-style-1-ref.html
== custom-style-2.html custom-style-2-ref.html
fuzzy-if(skiaContent,0-8,0-80) fuzzy-if(gtkWidget,0-8,0-113) == transformations-1.html chrome://reftest/content/forms/input/color/transformations-1-ref.html # Bug 1600790 for gtkWidget
== custom-style-1.html chrome://reftest/content/forms/input/color/custom-style-1-ref.html
== custom-style-2.html chrome://reftest/content/forms/input/color/custom-style-2-ref.html

Просмотреть файл

@ -73,7 +73,7 @@ fuzzy-if(Android,0-1,0-18) == ua-style-sheet-checkbox-radio-1.html ua-style-shee
skip-if(Android) fuzzy-if(skiaContent&&!Android,0-2,0-6) == ua-style-sheet-button-1.html ua-style-sheet-button-1a-ref.html
# Android uses different margins for buttons compared to the ref.
skip-if(Android) == ua-style-sheet-input-color-1.html ua-style-sheet-input-color-1-ref.html
skip-if(Android) == ua-style-sheet-input-color-1.html chrome://reftest/content/writing-mode/ua-style-sheet-input-color-1-ref.html
fuzzy-if(gtkWidget,0-1,0-15) == ua-style-sheet-input-number-1.html ua-style-sheet-input-number-1-ref.html
== 1127488-align-default-horizontal-tb-ltr.html 1127488-align-top-left-ref.html

Просмотреть файл

@ -18,6 +18,16 @@
width: 23px;
padding: 8px 0px;
}
@supports -moz-bool-pref("widget.disable-native-theme-for-content") {
/* The non-native theme has 4px of widget-supplied padding on all four
* sides. */
.ltr input[type="color"]:not(.a),
.rtl input[type="color"]:not(.a),
.v-rl input[type="color"]:not(.a) {
padding: 4px;
}
}
</style>
<div class=ltr>
<input type=color><br>

Просмотреть файл

@ -7,6 +7,7 @@ reftest.jar:
content/box-shadow (../../reftests/box-shadow/*)
content/bugs (../../reftests/bugs/*)
content/css-display (../../reftests/css-display/*)
content/forms/input/color (../../reftests/forms/input/color/*)
content/forms/input/file (../../reftests/forms/input/file/*)
content/forms/input/text (../../reftests/forms/input/text/*)
content/forms/placeholder (../../reftests/forms/placeholder/*)
@ -16,6 +17,7 @@ reftest.jar:
content/native-theme (../../reftests/native-theme/*)
content/reftest-sanity (../../reftests/reftest-sanity/*)
content/text-shadow (../../reftests/text-shadow/*)
content/writing-mode (../../reftests/writing-mode/*)
content/xul-document-load (../../reftests/xul-document-load/*)
content/xul (../../reftests/xul/*)
content/xul/reftest (../../xul/reftest/*)