Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-02-03 12:35:58 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1435658: Deal with appearance changes from / to none correctly. r=mats

Browse Source 
MozReview-Commit-ID: Fl6VY0rAIiD

--HG--
extra : rebase_source : 0374bb390de1caf69b2561402f956d7bd99a306d
This commit is contained in:
Emilio Cobos Álvarez 2018-02-05 14:55:31 +01:00
parent 968699126b
commit 7e4baa87cf
5 changed files with 94 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
layout/base/nsCSSFrameConstructor.cpp
View File

@ -3889,6 +3889,9 @@ nsCSSFrameConstructor::FindInputData(Element* aElement,
// radio and checkbox inputs with appearance:none should be constructed
// by display type. (Note that we're not checking that appearance is
// not (respectively) NS_THEME_RADIO and NS_THEME_CHECKBOX.)
//
// If this block ever goes away, then NS_THEME_NONE can be removed from
// AppearanceValueChangeReconstructsFrames.
if ((controlType == NS_FORM_INPUT_CHECKBOX ||
controlType == NS_FORM_INPUT_RADIO) &&
aStyleContext->StyleDisplay()->mAppearance == NS_THEME_NONE) {

41
layout/style/nsStyleStruct.cpp
View File

@ -3755,6 +3755,33 @@ CompareTransformValues(const RefPtr<nsCSSValueSharedList>& aList,
return result;
}
static bool
AppearanceValueChangeReconstructsFrames(const nsStyleDisplay& aDisplay)
{
if (aDisplay.mAppearance == NS_THEME_TEXTFIELD) {
// This is for <input type=number> where we allow authors to specify a
// |-moz-appearance:textfield| to get a control without a spinner. (The
// spinner is present for |-moz-appearance:number-input| but also other
// values such as 'none'.) We need to reframe since we want to use
// nsTextControlFrame instead of nsNumberControlFrame if the author
// specifies 'textfield'.
return true;
}
if (aDisplay.mAppearance == NS_THEME_NONE) {
// This is for checkboxes / radio buttons. Changing their appearance value
// to none makes them non-replaced elements, and thus we need to reconstruct
// the frame.
//
// TODO(emilio): It's kind of unfortunate that we can't be more granular
// about this so it really only applies to the inputs, but I guess it's not
// a huge deal.
return true;
}
return false;
}
nsChangeHint
nsStyleDisplay::CalcDifference(const nsStyleDisplay& aNewData) const
{
@ -3776,16 +3803,10 @@ nsStyleDisplay::CalcDifference(const nsStyleDisplay& aNewData) const
return nsChangeHint_ReconstructFrame;
}
if ((mAppearance == NS_THEME_TEXTFIELD &&
aNewData.mAppearance != NS_THEME_TEXTFIELD) ||
(mAppearance != NS_THEME_TEXTFIELD &&
aNewData.mAppearance == NS_THEME_TEXTFIELD)) {
// This is for <input type=number> where we allow authors to specify a
// |-moz-appearance:textfield| to get a control without a spinner. (The
// spinner is present for |-moz-appearance:number-input| but also other
// values such as 'none'.) We need to reframe since we want to use
// nsTextControlFrame instead of nsNumberControlFrame if the author
// specifies 'textfield'.
// See if we need to reframe due to our appearance changing.
if (mAppearance != aNewData.mAppearance &&
(AppearanceValueChangeReconstructsFrames(*this) ||
AppearanceValueChangeReconstructsFrames(aNewData))) {
return nsChangeHint_ReconstructFrame;
}

25
testing/web-platform/meta/MANIFEST.json
View File

@ -146545,6 +146545,18 @@
{}
]
],
"css/css-ui/appearance-dynamic-001.html": [
[
"/css/css-ui/appearance-dynamic-001.html",
[
[
"/css/css-ui/appearance-dynamic-001-ref.html",
"=="
]
],
{}
]
],
"css/css-ui/box-sizing-001.html": [
[
"/css/css-ui/box-sizing-001.html",
@ -254186,6 +254198,11 @@
{}
]
],
"css/css-ui/appearance-dynamic-001-ref.html": [
[
{}
]
],
"css/css-ui/reference/box-sizing-001-ref.html": [
[
{}
@ -514156,6 +514173,14 @@
"beeb8a77d396e48731fd1e69a922b6e2c84c2caa",
"support"
],
"css/css-ui/appearance-dynamic-001-ref.html": [
"5759d04966f969c591959f86390af98725d57f3d",
"support"
],
"css/css-ui/appearance-dynamic-001.html": [
"4a2a1333835df29e7048fa7fc115346b279cc7e5",
"reftest"
],
"css/css-ui/box-sizing-001.html": [
"5e913f2edc75ae0369eb59f67f320ec552472160",
"reftest"

12
testing/web-platform/tests/css/css-ui/appearance-dynamic-001-ref.html Normal file
View File

@ -0,0 +1,12 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Test Reference</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<p>Should see form controls with their default styling</p>
<input type="checkbox">
<input type="radio">
<input type="text">
<input type="number">
<input type="date">

23
testing/web-platform/tests/css/css-ui/appearance-dynamic-001.html Normal file
View File

@ -0,0 +1,23 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: dynamic appearance switching</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1435658">
<link rel="match" href="appearance-dynamic-001-ref.html">
<p>Should see form controls with their default styling</p>
<input style="-moz-appearance: none; appearance: none;" type="checkbox">
<input style="-moz-appearance: none; appearance: none;" type="radio">
<input style="-moz-appearance: none; appearance: none;" type="text">
<input style="-moz-appearance: none; appearance: none;" type="number">
<input style="-moz-appearance: none; appearance: none;" type="date">
<script>
document.body.offsetTop;
for (const el of Array.from(document.querySelectorAll('input'))) {
el.style.appearance = "";
el.style.MozAppearance = "";
}
</script>