Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[iOS] Fix border thickness with corner radius set #2750

Merged
merged 3 commits into from
Mar 7, 2020

Conversation

davidjohnoliver
Copy link
Contributor

@davidjohnoliver davidjohnoliver commented Mar 6, 2020

Fixed the clipping mask calculation when non-zero CornerRadius is set on a border.

Enabled the existing Border_CornerRadius_Toggle UI test for iOS, which covers this case.

GitHub Issue (If applicable): fixes #2746

PR Type

  • Bugfix

What kind of change does this PR introduce?

What is the current behavior?

What is the new behavior?

PR Checklist

Please check if your PR fulfills the following requirements:

  • Tested code with current supported SDKs
  • Docs have been added/updated which fit documentation template (for bug fixes / features)
  • Unit Tests and/or UI Tests for the changes have been added (for bug fixes / features) (if applicable)
  • Wasm UI Tests are not showing unexpected any differences. Validate PR Screenshots Compare Test Run results.
  • Contains NO breaking changes
  • Updated the Release Notes
  • Associated with an issue (GitHub or internal)

Other information

Internal Issue (If applicable):

Fixed the clipping mask calculation when non-zero CornerRadius is set on a border.

Enabled the existing Border_CornerRadius_Toggle UI test for iOS, which covers this case.
@gitpod-io
Copy link

gitpod-io bot commented Mar 6, 2020

@github-actions github-actions bot added area/build Categorizes an issue or PR as relevant to build infrastructure kind/documentation labels Mar 6, 2020
@nventive-devops
Copy link
Contributor

The build 12831 found UI Test snapshots differences.

  • android-28: 8 changed over 316

    🚨🚨 Comparison Details (first 20) 🚨🚨
    • ComboBoxTests_VisibleBounds_UITests_Shared_Windows_UI_Xaml_Controls_ComboBox_ComboBox_VisibleBounds
    • CommandBar_LongTitle_Validation_CommandBar_-_LongTitle_-_3_-_Orientation_Portrait
    • Keyboard_Textbox_NoScrollViewer_Validation_4_-_Remove_Focus_on_multilineTextBox
    • PopupWithOverlay_After
    • SequentialAnimations_SamplesApp_Windows_UI_Xaml_Media_Animation_SequentialAnimationsPage
    • TestManipulation_Result
    • ToggleSwitch_TemplateReuseTest_UITests_Shared_Windows_UI_Xaml_Controls_ToggleSwitchControl_ToggleSwitch_TemplateReuse
    • XamlCommandBar_Automated_UITests_Shared_Windows_UI_Xaml_Controls_CommandBar_CommandBar_Xaml_Automated
  • android-28-Snap: 679 changed over 679

    🚨🚨 Comparison Details (first 20) 🚨🚨
    • Animations_DoubleAnimationTestsControl_Uno_UI_Samples_Content_UITests_DoubleAnimationTestsControl
    • Animations_DoubleAnimationUsingKeyFrames_TranslateX_GenericApp_Views_Content_UITests_Animations_DoubleAnimationUsingKeyFrames_TranslateX
    • Animations_DoubleAnimation_BeginTime_Uno_UI_Samples_Content_UITests_Animations_DoubleAnimation_BeginTime
    • Animations_DoubleAnimation_Cumulative_Uno_UI_Samples_Content_UITests_Animations_DoubleAnimation_Cumulative
    • Animations_DoubleAnimation_opacity_final_state_UITests_Windows_UI_Xaml_Media_Animation_DoubleAnimation_FinalState_Opacity
    • Animations_DoubleAnimation_Opacity_TextBlock_GenericApp_Views_Content_UITests_Animations_DoubleAnimation_Opacity_TextBlock
    • Animations_DoubleAnimation_RenderTransformOrigin_GenericApp_Views_Content_UITests_Animations_DoubleAnimation_RenderTransformOrigin
    • Animations_DoubleAnimation_transforms_final_state_UITests_Windows_UI_Xaml_Media_Animation_DoubleAnimation_FinalState_Transforms
    • Animations_DoubleAnimation_TranslateX_GenericApp_Views_Content_UITests_Animations_DoubleAnimation_TranslateX
    • Animations_DoubleAnimation_VisualStates_Uno_UI_Samples_Content_UITests_Animations_DoubleAnimation_VisualStates
    • Automation_AutomationProperties_AutomationId_UITests_Shared_Windows_UI_Xaml_Automation_AutomationProperties_AutomationId
    • AutoSuggestBox_BasicAutoSuggestBox_UITests_Shared_Windows_UI_Xaml_Controls_AutoSuggestBoxTests_BasicAutoSuggestBox
    • BitmapIcon_BitmapIcon_Generic_UITests_Shared_Windows_UI_Xaml_Controls_BitmapIconTests_BitmapIcon_Generic
    • Border_AutoBorderStretchwithbottommargin_Uno_UI_Samples_UITests_BorderTestsControl_AutoBorderStretchwithbottommargin
    • Border_AutoBorderStretchwithleftmargin_Uno_UI_Samples_UITests_BorderTestsControl_AutoBorderStretchwithleftmargin
    • Border_AutoBorderStretchwithrightmargin_Uno_UI_Samples_UITests_BorderTestsControl_AutoBorderStretchwithrightmargin
    • Border_AutoBorderStretchwithtopmargin_Uno_UI_Samples_UITests_BorderTestsControl_AutoBorderStretchwithtopmargin
    • Border_BorderCenteredwithmargins_Uno_UI_Samples_UITests_BorderTestsControl_BorderCenteredwithmargins
    • Border_BorderBottomwithmargins_Uno_UI_Samples_UITests_BorderTestsControl_BorderBottomwithmargins
    • Border_BorderLeftwithmargins_Uno_UI_Samples_UITests_BorderTestsControl_BorderLeftwithmargins
  • ios: 4 changed over 172

    🚨🚨 Comparison Details (first 20) 🚨🚨
    • Keyboard_Textbox_InsideScrollViewer_Validation_1_-_Remove_Focus_on_filledTextBox
    • Keyboard_Textbox_InsideScrollViewer_Validation_5_-_Remove_Focus_on_numberTextBox
    • SequentialAnimations_SamplesApp_Windows_UI_Xaml_Media_Animation_SequentialAnimationsPage
    • TextBox_RoundedCorners_UITests_Shared_Windows_UI_Xaml_Controls_TextBoxTests_TextBox_RoundedCorners
  • ios-Snap: 31 changed over 671

    🚨🚨 Comparison Details (first 20) 🚨🚨
    • Border_Border_CornerRadius_Alignments_Uno_UI_Samples_UITests_BorderTestsControl_Border_CornerRadius_Alignments
    • Border_Border_CornerRadius_Uno_UI_Samples_UITests_BorderTestsControl_Border_CornerRadius
    • Border_Circle_Uno_UI_Samples_UITests_BorderTestsControl_Circle
    • Border_NonUniformThicknessandRadius_Uno_UI_Samples_UITests_BorderTestsControl_NonUniformThicknessandRadius
    • Border_OnepxThicknessandRadiusAndTextBlock_Uno_UI_Samples_UITests_BorderTestsControl_OnepxThicknessandRadiusAndTextBlock
    • Border_OnepxThicknessandRadius_Uno_UI_Samples_UITests_BorderTestsControl_OnepxThicknessandRadius
    • Border_UITests_Shared_Windows_UI_Xaml_Controls_BorderTests_Border_Clipped_Change_Property_UITests_Shared_Windows_UI_Xaml_Controls_BorderTests_Border_Clipped_Change_Property
    • Border_UniformThicknessandNonUniformRadius_Uno_UI_Samples_UITests_BorderTestsControl_UniformThicknessandNonUniformRadius
    • Border_Uniform_Thickness_and_Large_Radius_Uno_UI_Samples_UITests_BorderTestsControl_Uniform_Thickness_and_Large_Radius
    • Border_Uniform_Thickness_and_Small_Radius_Uno_UI_Samples_UITests_BorderTestsControl_Uniform_Thickness_and_Small_Radius
    • ComboBox_ComboBox_CornerRadius_SamplesApp_Wasm_Windows_UI_Xaml_Controls_ComboBox_ComboBox_CornerRadius
    • ContentPresenter_ContentPresenter_Background_Uno_UI_Samples_Content_UITests_ContentPresenter_ContentPresenter_Background
    • Default_UITests_Shared_Windows_UI_Xaml_Controls_ListView_ListView_ProportionalPanel_UITests_Shared_Windows_UI_Xaml_Controls_ListView_ListView_ProportionalPanel
    • Default_Uno_UI_Samples_UITests_Image_Image_Stretch_Uno_UI_Samples_UITests_Image_Image_Stretch
    • FrameworkElement_UITests_Shared_Windows_UI_Xaml_FrameworkElementTests_FrameworkElement_NativeLayout_UITests_Shared_Windows_UI_Xaml_FrameworkElementTests_FrameworkElement_NativeLayout
    • ImageBrushTestControl_BorderImageBrush_Uno_UI_Samples_UITests_ImageBrushTestControl_BorderImageBrush
    • ImageBrushTestControl_ImageBrushAlignmentXY_Uno_UI_Samples_UITests_ImageBrushTestControl_ImageBrushAlignmentXY
    • ImageBrushTestControl_ImageBrushChangingCornerRadius_Uno_UI_Samples_UITests_ImageBrushTestControl_ImageBrushChangingCornerRadius
    • ImageBrushTestControl_ImageBrushLocalAsset_Uno_UI_Samples_UITests_ImageBrushTestControl_ImageBrushLocalAsset
    • ImageBrushTestControl_ImageBrushStretch_Uno_UI_Samples_UITests_ImageBrushTestControl_ImageBrushStretch
  • wasm: 2 changed over 681

    🚨🚨 Comparison Details (first 20) 🚨🚨
    • initial_state
    • Uno.UI.Samples.UITests.Image.Image_Margin
  • wasm-automated: 5 changed over 353

    🚨🚨 Comparison Details (first 20) 🚨🚨
    • PopupWithOverlay_During
    • SequentialAnimations_SamplesApp_Windows_UI_Xaml_Media_Animation_SequentialAnimationsPage
    • Simple_ContentDialog_01_Primary_Disabled_Primary_Button
    • Simple_ContentDialog_06_Reuse_Primary_Button
    • When_TransformToVisual_ScrollViewer_UITests_Shared_Windows_UI_Xaml_UIElementTests_TransformToVisual_ScrollViewer

@davidjohnoliver
Copy link
Contributor Author

Snapshot review: most of the iOS changes reflect the fix (previous shot was incorrect, new is correct), a few reveal remaining issues that will be fixed shortly

Don't call FrameworkElement.OnBackgroundChanged() for ContentPresenter. This brings it in line with similar controls (Border, Panel) and fixes bug where a few pixels of the background would protrude from the border if BorderBrush and CornerRadius were set (corresponding sample: ContentPresenter_Background).
Restore fillMask when drawing LinearGradientBrush and ImageBrush. This is required to prevent a 1-2 pixel-thick protrusion outside the BorderBrush.
@github-actions github-actions bot added the area/automation Categorizes an issue or PR as relevant to project automation label Mar 6, 2020
@nventive-devops
Copy link
Contributor

The build 12833 found UI Test snapshots differences.

  • android-28: 9 changed over 316

    🚨🚨 Comparison Details (first 20) 🚨🚨
    • BasicNavigationView_SamplesApp_Samples_Windows_UI_Xaml_Controls_NavigationViewTests_NavigationView_Pane_Automated
    • ComboBoxTests_VisibleBounds_UITests_Shared_Windows_UI_Xaml_Controls_ComboBox_ComboBox_VisibleBounds
    • ImageStretch_None_Uno_UI_Samples_UITests_ImageTestsControl_Image_Stretch_None
    • Keyboard_Textbox_NoScrollViewer_Validation_4_-_Remove_Focus_on_multilineTextBox
    • PopupWithOverlay_After
    • SequentialAnimations_SamplesApp_Windows_UI_Xaml_Media_Animation_SequentialAnimationsPage
    • TestManipulation_Result
    • ToggleSwitch_TemplateReuseTest_UITests_Shared_Windows_UI_Xaml_Controls_ToggleSwitchControl_ToggleSwitch_TemplateReuse
    • XamlCommandBar_Automated_UITests_Shared_Windows_UI_Xaml_Controls_CommandBar_CommandBar_Xaml_Automated
  • android-28-Snap: 679 changed over 680

    🚨🚨 Comparison Details (first 20) 🚨🚨
    • Animations_DoubleAnimationTestsControl_Uno_UI_Samples_Content_UITests_DoubleAnimationTestsControl
    • Animations_DoubleAnimationUsingKeyFrames_TranslateX_GenericApp_Views_Content_UITests_Animations_DoubleAnimationUsingKeyFrames_TranslateX
    • Animations_DoubleAnimation_BeginTime_Uno_UI_Samples_Content_UITests_Animations_DoubleAnimation_BeginTime
    • Animations_DoubleAnimation_Cumulative_Uno_UI_Samples_Content_UITests_Animations_DoubleAnimation_Cumulative
    • Animations_DoubleAnimation_opacity_final_state_UITests_Windows_UI_Xaml_Media_Animation_DoubleAnimation_FinalState_Opacity
    • Animations_DoubleAnimation_Opacity_TextBlock_GenericApp_Views_Content_UITests_Animations_DoubleAnimation_Opacity_TextBlock
    • Animations_DoubleAnimation_RenderTransformOrigin_GenericApp_Views_Content_UITests_Animations_DoubleAnimation_RenderTransformOrigin
    • Animations_DoubleAnimation_transforms_final_state_UITests_Windows_UI_Xaml_Media_Animation_DoubleAnimation_FinalState_Transforms
    • Animations_DoubleAnimation_TranslateX_GenericApp_Views_Content_UITests_Animations_DoubleAnimation_TranslateX
    • Animations_DoubleAnimation_VisualStates_Uno_UI_Samples_Content_UITests_Animations_DoubleAnimation_VisualStates
    • Automation_AutomationProperties_AutomationId_UITests_Shared_Windows_UI_Xaml_Automation_AutomationProperties_AutomationId
    • AutoSuggestBox_BasicAutoSuggestBox_UITests_Shared_Windows_UI_Xaml_Controls_AutoSuggestBoxTests_BasicAutoSuggestBox
    • BitmapIcon_BitmapIcon_Generic_UITests_Shared_Windows_UI_Xaml_Controls_BitmapIconTests_BitmapIcon_Generic
    • Border_AutoBorderStretchwithbottommargin_Uno_UI_Samples_UITests_BorderTestsControl_AutoBorderStretchwithbottommargin
    • Border_AutoBorderStretchwithleftmargin_Uno_UI_Samples_UITests_BorderTestsControl_AutoBorderStretchwithleftmargin
    • Border_AutoBorderStretchwithrightmargin_Uno_UI_Samples_UITests_BorderTestsControl_AutoBorderStretchwithrightmargin
    • Border_AutoBorderStretchwithtopmargin_Uno_UI_Samples_UITests_BorderTestsControl_AutoBorderStretchwithtopmargin
    • Border_BorderBottomwithmargins_Uno_UI_Samples_UITests_BorderTestsControl_BorderBottomwithmargins
    • Border_BorderCenteredwithmargins_Uno_UI_Samples_UITests_BorderTestsControl_BorderCenteredwithmargins
    • Border_BorderLeftwithmargins_Uno_UI_Samples_UITests_BorderTestsControl_BorderLeftwithmargins
  • ios: 7 changed over 172

    🚨🚨 Comparison Details (first 20) 🚨🚨
    • Keyboard_Textbox_InsideScrollViewer_Validation_2_-_Remove_Focus_on_placeholderTextTextBox
    • Keyboard_Textbox_InsideScrollViewer_Validation_4_-_Remove_Focus_on_multilineTextBox
    • Keyboard_Textbox_NoScrollViewer_Validation_1_-_Remove_Focus_on_filledTextBox
    • SequentialAnimations_SamplesApp_Windows_UI_Xaml_Media_Animation_SequentialAnimationsPage
    • TextBox_RoundedCorners_UITests_Shared_Windows_UI_Xaml_Controls_TextBoxTests_TextBox_RoundedCorners
    • Keyboard_Textbox_InsideScrollViewer_Validation_1_-_Remove_Focus_on_filledTextBox
    • Keyboard_Textbox_NoScrollViewer_Validation_2_-_Remove_Focus_on_placeholderTextTextBox
  • ios-Snap: 36 changed over 672

    🚨🚨 Comparison Details (first 20) 🚨🚨
    • Border_Border_CornerRadius_Alignments_Uno_UI_Samples_UITests_BorderTestsControl_Border_CornerRadius_Alignments
    • Border_Border_CornerRadius_Uno_UI_Samples_UITests_BorderTestsControl_Border_CornerRadius
    • Border_Circle_Uno_UI_Samples_UITests_BorderTestsControl_Circle
    • Border_NonUniformThicknessandRadius_Uno_UI_Samples_UITests_BorderTestsControl_NonUniformThicknessandRadius
    • Border_OnepxThicknessandRadiusAndTextBlock_Uno_UI_Samples_UITests_BorderTestsControl_OnepxThicknessandRadiusAndTextBlock
    • Border_OnepxThicknessandRadius_Uno_UI_Samples_UITests_BorderTestsControl_OnepxThicknessandRadius
    • Border_UniformThicknessandNonUniformRadius_Uno_UI_Samples_UITests_BorderTestsControl_UniformThicknessandNonUniformRadius
    • Border_UITests_Shared_Windows_UI_Xaml_Controls_BorderTests_Border_Clipped_Change_Property_UITests_Shared_Windows_UI_Xaml_Controls_BorderTests_Border_Clipped_Change_Property
    • Border_Uniform_Thickness_and_Large_Radius_Uno_UI_Samples_UITests_BorderTestsControl_Uniform_Thickness_and_Large_Radius
    • Border_Uniform_Thickness_and_Small_Radius_Uno_UI_Samples_UITests_BorderTestsControl_Uniform_Thickness_and_Small_Radius
    • ComboBox_ComboBox_CornerRadius_SamplesApp_Wasm_Windows_UI_Xaml_Controls_ComboBox_ComboBox_CornerRadius
    • Clipping_SamplesApp_Windows_UI_Xaml_Clipping_XamlButtonWithClipping_Scrollable_SamplesApp_Windows_UI_Xaml_Clipping_XamlButtonWithClipping_Scrollable
    • Clipping_UITests_Shared_Windows_UI_Xaml_Clipping_ClippingRoundedCorners_UITests_Shared_Windows_UI_Xaml_Clipping_ClippingRoundedCorners
    • ContentPresenter_ContentPresenter_Background_Uno_UI_Samples_Content_UITests_ContentPresenter_ContentPresenter_Background
    • Default_UITests_Shared_Windows_UI_Xaml_Controls_ListView_ListView_ProportionalPanel_UITests_Shared_Windows_UI_Xaml_Controls_ListView_ListView_ProportionalPanel
    • Default_Uno_UI_Samples_UITests_Image_Image_Stretch_Uno_UI_Samples_UITests_Image_Image_Stretch
    • FrameworkElement_UITests_Shared_Windows_UI_Xaml_FrameworkElementTests_FrameworkElement_NativeLayout_UITests_Shared_Windows_UI_Xaml_FrameworkElementTests_FrameworkElement_NativeLayout
    • ImageBrushTestControl_ImageBrushAlignmentXY_Uno_UI_Samples_UITests_ImageBrushTestControl_ImageBrushAlignmentXY
    • ImageBrushTestControl_ImageBrushChangingCornerRadius_Uno_UI_Samples_UITests_ImageBrushTestControl_ImageBrushChangingCornerRadius
    • ImageBrushTestControl_BorderImageBrush_Uno_UI_Samples_UITests_ImageBrushTestControl_BorderImageBrush
  • wasm: 8 changed over 682

    🚨🚨 Comparison Details (first 20) 🚨🚨
    • initial_state
    • UITests.Shared.Windows_UI_Xaml.Clipping.ClippingRoundedCorners
    • UITests.Shared.Windows_UI_Xaml_Controls.RepeatButton_Automated
    • UITests.Shared.Windows_UI_Xaml_Controls.TimePicker.TimePicker_Flyout_Automated
    • Uno.UI.Samples.Content.UITests.ContentPresenter.ContentPresenter_Background
    • Uno.UI.Samples.Content.UITests.Transform.Image_With_RotateTransform
    • Uno.UI.Samples.UITests.Image.Image_Margin
    • Uno.UI.Samples.UITests.Image.Image_Stretch
  • wasm-automated: 16 changed over 353

    🚨🚨 Comparison Details (first 20) 🚨🚨
    • ContentDialog_Simple_NotLightDismissible_1_ContentDialog_Opened
    • ContentDialog_Simple_NotLightDismissible_2_ContentDialog_Still_Opened
    • ImageStretch_None_Uno_UI_Samples_UITests_ImageTestsControl_Image_Stretch_None
    • NoToolTip_On_Open_opened-textonly-tooltip
    • NoToolTip_On_Open_opened-tooltip
    • SequentialAnimations_SamplesApp_Windows_UI_Xaml_Media_Animation_SequentialAnimationsPage
    • Simple_ContentDialog_01_Close_Close_Button
    • Simple_ContentDialog_01_PrimaryCommand_Primary_Button
    • Simple_ContentDialog_01_Primary_Disabled_Primary_Button
    • Simple_ContentDialog_01_Primary_Disabled_Secondary_Button
    • Simple_ContentDialog_01_Primary_Primary_Button
    • Simple_ContentDialog_01_Secondary_Secondary_Button
    • Simple_ContentDialog_01_TypeInner_Secondary_Button
    • Simple_ContentDialog_06_Reuse_Primary_Button
    • Simple_ContentDialog_06_Reuse_Secondary_Button
    • When_TransformToVisual_ScrollViewer_UITests_Shared_Windows_UI_Xaml_UIElementTests_TransformToVisual_ScrollViewer

@davidjohnoliver davidjohnoliver merged commit 77ebfd7 into master Mar 7, 2020
@davidjohnoliver davidjohnoliver deleted the dev/djo/border-ios-fix branch March 7, 2020 17:59
@jeromelaban
Copy link
Member

@Mergifyio backport release/beta/2.1

@mergify
Copy link
Contributor

mergify bot commented Mar 11, 2020

Command backport release/beta/2.1: success

Backports have been created

jeromelaban added a commit that referenced this pull request Mar 11, 2020
…/pr-2750

[iOS] Fix border thickness with corner radius set (bp #2750)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/automation Categorizes an issue or PR as relevant to project automation area/build Categorizes an issue or PR as relevant to build infrastructure
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[iOS] Incorrect sub-pixel alignment
5 participants