Skip to content

fix: Remove Skia Wasm WebView border #20605

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

Merged
merged 2 commits into from
Jun 2, 2025

Conversation

morning4coffe-dev
Copy link
Member

@morning4coffe-dev morning4coffe-dev commented May 27, 2025

GitHub Issue (If applicable): closes #20403, closes #20587

PR Type

What kind of change does this PR introduce?

  • Bugfix

What is the new behavior?

This pull request refactors the styling initialization for the WebView component in the Uno Platform. The most significant changes include replacing the SetBackground method with a new InitializeStyling method to streamline and centralize styling setup, and updating related TypeScript and C# code to reflect this change.

PR Checklist

Please check if your PR fulfills the following requirements:

@github-actions github-actions bot added the platform/wasm 🌐 Categorizes an issue or PR as relevant to the WebAssembly platform label May 27, 2025
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR fixes the WebView border issue on Skia Wasm by refactoring the styling initialization for the WebView component. The changes include replacing the old SetBackground method with a new InitializeStyling method in both TypeScript and C# code, and updating the NativeMethods interop accordingly.

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File Description
src/Uno.UI/ts/Windows/UI/Xaml/Controls/WebView.ts Replaced setBackground with initializeStyling to set transparent background and remove border
src/Uno.UI/UI/Xaml/Controls/WebView/Native/Wasm/NativeWebView.wasm.cs Updated to use InitializeStyling instead of SetBackground
src/Uno.UI/UI/Xaml/Controls/WebView/Native/Wasm/NativeWebView.Interop.wasm.cs Added import for InitializeStyling and removed import for the old SetBackground

@unodevops
Copy link
Contributor

🤖 Your WebAssembly Skia Sample App stage site is ready! Visit it here: https://unowasmprstaging.z20.web.core.windows.net/pr-20605/wasm-skia-net9/index.html

@unodevops
Copy link
Contributor

🤖 Your Docs stage site is ready! Visit it here: https://unodocsprstaging.z13.web.core.windows.net/pr-20605/docs/index.html

@unodevops
Copy link
Contributor

⚠️⚠️ The build 166970 has failed on Uno.UI - CI.

@morning4coffe-dev morning4coffe-dev marked this pull request as ready for review May 28, 2025 06:40
@github-actions github-actions bot added the area/automation Categorizes an issue or PR as relevant to project automation label May 29, 2025
@unodevops
Copy link
Contributor

🤖 Your WebAssembly Skia Sample App stage site is ready! Visit it here: https://unowasmprstaging.z20.web.core.windows.net/pr-20605/wasm-skia-net9/index.html

@unodevops
Copy link
Contributor

🤖 Your Docs stage site is ready! Visit it here: https://unodocsprstaging.z13.web.core.windows.net/pr-20605/docs/index.html

@MartinZikmund MartinZikmund enabled auto-merge May 29, 2025 16:22
@unodevops
Copy link
Contributor

⚠️⚠️ The build 167134 has failed on Uno.UI - CI.

@morning4coffe-dev morning4coffe-dev force-pushed the dev/doti/remove-skia-wasm-border branch from 4ac5503 to eb6944b Compare May 31, 2025 14:49
@unodevops
Copy link
Contributor

🤖 Your Docs stage site is ready! Visit it here: https://unodocsprstaging.z13.web.core.windows.net/pr-20605/docs/index.html

@unodevops
Copy link
Contributor

⚠️⚠️ The build 167350 has failed on Uno.UI - CI.

@nventive-devops
Copy link
Contributor

The build 167350 found UI Test snapshots differences: android-28-net8: 23, android-28-net8-Snap: 48, ios: 4, ios-Snap: 37, skia-linux-screenshots: 66, skia-windows-screenshots: 190, wasm: 85, wasm-automated-net9.0-WinUI-Benchmarks-automated: 0, wasm-automated-net9.0-WinUI-Default-automated: 16, wasm-automated-net9.0-WinUI-RuntimeTests-0: 0, wasm-automated-net9.0-WinUI-RuntimeTests-1: 1, wasm-automated-net9.0-WinUI-RuntimeTests-2: 0

Details
  • android-28-net8: 23 changed over 824

    🚨🚨 Comparison Details (first 20) 🚨🚨
    • Detereminate_ProgressRing_Validation50_[#FF0000_#008000_#008000_#FF0000]_Progress-Ring-Value-50
    • When_MultipleSelectionWithoutItemClick_Then_PointersEvents_UITests_Windows_UI_Xaml_Controls_ListView_ListView_Selection_Pointers
    • When_NoSelection_Then_PointersEvents_UITests_Windows_UI_Xaml_Controls_ListView_ListView_Selection_Pointers
    • When_Parent_PointerMoved_After_drag_on_ScrollViewer_-_touch
    • ListView_SelectedItems_SamplesApp_Windows_UI_Xaml_Controls_ListView_ListViewSelectedItems
    • UpDownTest_UITests_Shared_Microsoft_UI_Xaml_Controls_NumberBoxTests_NumberBoxPage
    • When_Parent_PointerMoved_After_drag_on_non-scrolling_ScrollViewer
    • WebView_NavigateToAnchor_Initial
    • When_SingleSelectionWithItemClick_Then_PointersEvents_UITests_Windows_UI_Xaml_Controls_ListView_ListView_Selection_Pointers
    • When_SingleSelectionWithoutItemClick_Then_PointersEvents_UITests_Windows_UI_Xaml_Controls_ListView_ListView_Selection_Pointers
    • Detereminate_ProgressRing_Validation0_[#FF0000_#FF0000_#FF0000_#FF0000]_UITests_Microsoft_UI_Xaml_Controls_ProgressRing_WinUIDeterminateProgressRing
    • ProgressRing_Visibility_Collapsed_UITests_Windows_UI_Xaml_Controls_ProgressRing_WindowsProgressRing_GH1220
    • Detereminate_ProgressRing_Validation75_[#FF0000_#008000_#008000_#008000]_Progress-Ring-Value-75
    • ListView_VirtualizePanelAdaptaterIdCache_SamplesApp_Windows_UI_Xaml_Controls_ListView_ListView_VirtualizePanelAdaptaterIdCache
    • DecimalFormatterTest_UITests_Shared_Microsoft_UI_Xaml_Controls_NumberBoxTests_NumberBoxPage
    • SelectionOnLoad_UITests_Microsoft_UI_Xaml_Controls_RadioButtonsTests_RadioButtonsInitialLoadSelected
    • SelectionTest_UITests_Microsoft_UI_Xaml_Controls_RadioButtonsTests_RadioButtonsPage
    • FlyoutTest_When_NoOverlayInputPassThroughElement_Then_DontPassThrough_woAuto_UITests_Shared_Windows_UI_Xaml_Controls_Flyout_Flyout_OverlayInputPassThroughElement
    • NativeCommandBar_Size_Uno_UI_Samples_Content_UITests_CommandBar_CommandBar_Dynamic
    • When_Tap_PressedReleasedAreHandled_UITests_Windows_UI_Xaml_Controls_ComboBox_ComboBox_Pointers
  • android-28-net8-Snap: 48 changed over 1068

    🚨🚨 Comparison Details (first 20) 🚨🚨
    • NavigationView_MUXControlsTestApp_NavigationViewTopNavOnlyPage_MUXControlsTestApp_NavigationViewTopNavOnlyPage
    • NavigationView_MUXControlsTestApp_NavigationViewTopNavPage_MUXControlsTestApp_NavigationViewTopNavPage
    • Icons_UITests_Windows_UI_Xaml_Controls_SymbolIconTests_SymbolIcon_Generic_UITests_Windows_UI_Xaml_Controls_SymbolIconTests_SymbolIcon_Generic
    • TabView_UITests_Microsoft_UI_Xaml_Controls_TabViewTests_TabViewPage_UITests_Microsoft_UI_Xaml_Controls_TabViewTests_TabViewPage
    • Animations_UITests_Windows_UI_Xaml_Media_Animation_ColorAnimation_Background_UITests_Windows_UI_Xaml_Media_Animation_ColorAnimation_Background
    • TeachingTip_UITests_Microsoft_UI_Xaml_Controls_TeachingTipTests_TeachingTipPage_UITests_Microsoft_UI_Xaml_Controls_TeachingTipTests_TeachingTipPage
    • Animations_DoubleAnimationTestsControl_Uno_UI_Samples_Content_UITests_DoubleAnimationTestsControl
    • ListView_ListViewSelectedItems_SamplesApp_Windows_UI_Xaml_Controls_ListView_ListViewSelectedItems
    • ListView_ListView_With_ListViews_Count_Measure_UITests_Shared_Windows_UI_Xaml_Controls_ListView_ListView_With_ListViews_Count_Measure
    • NavigationView_MUXControlsTestApp_NavigationViewRS4Page_MUXControlsTestApp_NavigationViewRS4Page
    • Image_UITests_Windows_UI_Xaml_Controls_ImageTests_SvgImageSource_NoSize_UITests_Windows_UI_Xaml_Controls_ImageTests_SvgImageSource_NoSize
    • MUX_NumberBox_UITests_Shared_Microsoft_UI_Xaml_Controls_NumberBoxTests_NumberBoxPage
    • SwipeControl_MUXControlsTestApp_SwipeControlPage2_MUXControlsTestApp_SwipeControlPage2
    • Pickers_UITests_Windows_UI_Xaml_Controls_CalendarView_CalendarView_Theming_UITests_Windows_UI_Xaml_Controls_CalendarView_CalendarView_Theming
    • ToggleSwitch_ToggleSwitch_Default_Style_SamplesApp_Windows_UI_Xaml_Controls_ToggleSwitchControl_ToggleSwitch_Default_Style
    • ToggleSwitch_ToggleSwitch_Header_UITests_Shared_Windows_UI_Xaml_Controls_ToggleSwitchControl_ToggleSwitch_Header
    • ToggleSwitch_ToggleSwitch_IsOn_SamplesApp_Windows_UI_Xaml_Controls_ToggleSwitchControl_ToggleSwitch_IsOn
    • ToggleSwitch_ToggleSwitch_TemplateReuse_UITests_Shared_Windows_UI_Xaml_Controls_ToggleSwitchControl_ToggleSwitch_TemplateReuse
    • Animations_UITests_Shared_Windows_UI_Xaml_Media_Animation_SetTargetProperty_UITests_Shared_Windows_UI_Xaml_Media_Animation_SetTargetProperty
    • Animations_DoubleAnimationUsingKeyFrames_TranslateX_GenericApp_Views_Content_UITests_Animations_DoubleAnimationUsingKeyFrames_TranslateX
  • ios: 4 changed over 255

    🚨🚨 Comparison Details (first 20) 🚨🚨
    • ProgressRing_Visibility_Collapsed_UITests_Windows_UI_Xaml_Controls_ProgressRing_WindowsProgressRing_GH1220
    • Check_ListView_Swallows_Measure_UITests_Shared_Windows_UI_Xaml_Controls_ListView_ListView_With_ListViews_Count_Measure
    • ProgressRing_IsEnabled_Running_UITests_Windows_UI_Xaml_Controls_ProgressRing_WindowsProgressRing_GH1220
    • TextBox_UpdatedBinding_On_OneWay_Mode_UITests_Windows_UI_Xaml_Controls_TextBox_TextBox_Bindings
  • ios-Snap: 37 changed over 985

    🚨🚨 Comparison Details (first 20) 🚨🚨
    • Image_UITests_Shared_Windows_UI_Xaml_Controls_ImageTests_Image_Stretch_Algmnt_Inf_Horizontal_UITests_Shared_Windows_UI_Xaml_Controls_ImageTests_Image_Stretch_Algmnt_Inf_Horizontal
    • Brushes_ImageBrushStretch2_Uno_UI_Samples_UITests_ImageBrushTestControl_ImageBrushStretch2
    • TextBlock_TextBlockMultilineInStarStackPanel_Uno_UI_Samples_Content_UITests_TextBlockControl_TextBlockMultilineInStarStackPanel
    • TextBlock_TextBoxSizeChanging_Uno_UI_Samples_Content_UITests_TextBlockControl_TextBoxSizeChanging
    • Brushes_ImageBrushWithCompositeTransform_Uno_UI_Samples_UITests_ImageBrushTestControl_ImageBrushWithCompositeTransform
    • Brushes_ImageBrushWithRotateTransform_Uno_UI_Samples_UITests_ImageBrushTestControl_ImageBrushWithRotateTransform
    • Brushes_RectangleStretchFill_Uno_UI_Samples_UITests_ImageBrushTestControl_RectangleStretchFill
    • Image_Uno_UI_Samples_UITests_Image_Image_Stretch_Uno_UI_Samples_UITests_Image_Image_Stretch
    • Image_Uno_UI_Samples_UITests_Image_Image_Stretch_Alignment_Bigger_Uno_UI_Samples_UITests_Image_Image_Stretch_Alignment_Bigger
    • Image_Uno_UI_Samples_UITests_Image_Image_Stretch_Alignment_Equal_Uno_UI_Samples_UITests_Image_Image_Stretch_Alignment_Equal
    • Brushes_BorderImageBrush_Uno_UI_Samples_UITests_ImageBrushTestControl_BorderImageBrush
    • ColorPicker_ColorPickerSample_UITests_Microsoft_UI_Xaml_Controls_ColorPickerTests_ColorPickerSample
    • ListView_ListView_Header_DataContextChanging_UITests_Shared_Windows_UI_Xaml_Controls_ListView_Header_DataContextChanging
    • ToggleSwitch_Native_ToggleSwitch_IsOn_SamplesApp_Windows_UI_Xaml_Controls_ToggleSwitchControl_Native_ToggleSwitch_IsOn
    • Brushes_GenericApp_Views_Content_UITests_ImageBrushTestControl_ImageBrush_UniformToFill_GenericApp_Views_Content_UITests_ImageBrushTestControl_ImageBrush_UniformToFill
    • Image_Uno_UI_Samples_UITests_Image_Image_Stretch_Alignment_Smaller_Uno_UI_Samples_UITests_Image_Image_Stretch_Alignment_Smaller
    • Image_Uno_UI_Samples_UITests_Image_Image_Stretch_Alignment_Taller_Uno_UI_Samples_UITests_Image_Image_Stretch_Alignment_Taller
    • Image_Uno_UI_Samples_UITests_Image_Image_Stretch_Alignment_Wider_Uno_UI_Samples_UITests_Image_Image_Stretch_Alignment_Wider
    • Brushes_ImageBrushLocalAsset_Uno_UI_Samples_UITests_ImageBrushTestControl_ImageBrushLocalAsset
    • Clipping_UITests_Windows_UI_Xaml_Clipping_BorderVisualClipping_UITests_Windows_UI_Xaml_Clipping_BorderVisualClipping
  • skia-linux-screenshots: 66 changed over 2248

    🚨🚨 Comparison Details (first 20) 🚨🚨
    • Examples.png-dark
    • Examples.png
    • CalendarView_Theming.png
    • Gamepad_Enumeration.png-dark
    • Gamepad_Enumeration.png
    • Buttons.png
    • Gamepad_CurrentReading.png-dark
    • CompositionEffectBrush.png-dark
    • CompositionEffectBrush.png
    • DropDownButtonPage.png-dark
    • DropDownButtonPage.png
    • ClipboardTests.png-dark
    • DisplayInformation.png-dark
    • DisplayInformation.png
    • CalendarView_Theming.png-dark
    • ClipboardTests.png
    • ButtonClippingTestsControl.png-dark
    • ExpanderColorValidationPage.png-dark
    • ExpanderColorValidationPage.png
    • ImageBrushInList.png-dark
  • skia-windows-screenshots: 190 changed over 2248

    🚨🚨 Comparison Details (first 20) 🚨🚨
    • AndroidWindowInsets.png
    • DisplayInformation.png-dark
    • DisplayInformation.png
    • ElevatedView_Levels.png-dark
    • ElevatedView_Levels.png
    • ElevatedView_Tester.png-dark
    • ElevatedView_Tester.png
    • FileSavePickerTests.png-dark
    • FileSavePickerTests.png
    • AutomationProperties_Name.png
    • CalendarView_Theming.png-dark
    • ClipboardTests.png
    • CameraCaptureUISample.png
    • EasClientDeviceInformation.png-dark
    • EasClientDeviceInformation.png
    • Expander_ScrollView.png-dark
    • Expander_ScrollView.png
    • AndroidWindowInsets.png-dark
    • ClipboardTests.png-dark
    • Gamepad_CurrentReading.png-dark
  • wasm: 85 changed over 1052

    🚨🚨 Comparison Details (first 20) 🚨🚨
    • GenericApp.Views.Content.UITests.Animations.DoubleAnimation_RenderTransformOrigin
    • SamplesApp.Windows_UI_Xaml_Controls.ListView.ListView_Image
    • UITests.Shared.Microsoft_UI_Xaml_Controls.ExpanderTests.Expander_ScrollView
    • UITests.Uno_Web.Http.CookieManagerTests
    • UITests.Windows_UI_Xaml.Performance.Performance_1000ButtonsContinuousRendering
    • UITests.Windows_UI_Xaml_Controls.ListView.ListView_Selection_Events
    • Uno.UI.Samples.Content.UITests.ButtonTestsControl.Custom_Button_With_ContentTemplate_And_StackPanel
    • initial_state
    • MUXControlsTestApp.SwipeControlPage2
    • SamplesApp.Wasm.Windows_UI_Xaml_Controls.ComboBox.ComboBox_PlaceholderText
    • SamplesApp.Windows_UI_Xaml_Controls.ListView.ListView_TextBox
    • UITests.Shared.Windows_UI_Xaml_Controls.MediaPlayerElement.MediaPlayerElement_Ogg_Extension
    • UITests.Windows_UI_Xaml_Controls.Repeater.ItemsRepeater_Nested
    • UITests.Microsoft_UI_Xaml_Controls.WebView2Tests.WebView2_ExecuteScriptAsync
    • UITests.Shared.Windows_UI_Xaml_Controls.ComboBox.ComboBox_ComboBoxItem_Selection
    • UITests.Windows_UI_Xaml_Controls.BorderTests.PanelWithNullBrushAndNonZeroThickness
    • UITests.Windows_UI_Xaml_Controls.CalendarView.CalendarView_Theming
    • UITests.Windows_UI_Xaml_Controls.ListView.ListViewItem_Click_Focus
    • UITests.Windows_UI_Xaml_Controls.ListView.ListViewItem_IsEnabled
    • SamplesApp.Microsoft_UI_Xaml_Controls.WebView2Tests.WebView2_ChromeClient
  • wasm-automated-net9.0-WinUI-Benchmarks-automated: 0 changed over 1

  • wasm-automated-net9.0-WinUI-Default-automated: 16 changed over 876

    🚨🚨 Comparison Details (first 20) 🚨🚨
    • When_MaxLines_Then_AlignmentPositionIsCorrect_Uno_UI_Samples_Content_UITests_TextBlockControl_SimpleText_MaxLines_Two_With_Wrap
    • When_SingleSelectionWithoutItemClick_Then_PointersEvents_UITests_Windows_UI_Xaml_Controls_ListView_ListView_Selection_Pointers
    • Default_StrokeThickness_MyLine
    • SequentialAnimations_SamplesApp_Windows_UI_Xaml_Media_Animation_SequentialAnimationsPage
    • When_ExtendedSelectionWithoutItemClick_Then_PointersEvents_UITests_Windows_UI_Xaml_Controls_ListView_ListView_Selection_Pointers
    • When_MultipleSelectionWithoutItemClick_Then_PointersEvents_UITests_Windows_UI_Xaml_Controls_ListView_ListView_Selection_Pointers
    • Default_StrokeThickness_MyEllipse
    • Default_StrokeThickness_MyRect
    • Validate_Offscreen_Shapes_UITests_Windows_UI_Xaml_Shapes_Offscreen_Shapes
    • Default_StrokeThickness_MyPolyline
    • TestProgressRing_InitialState_UITests_Microsoft_UI_Xaml_Controls_ProgressRing_WinUIProgressRing_Features
    • ListView_SelectedItems_SamplesApp_Windows_UI_Xaml_Controls_ListView_ListViewSelectedItems
    • When_Padding_Is_Changed_Then_Cache_Is_Missed_UITests_Windows_UI_Xaml_Controls_TextBlockControl_TextBlock_MeasureCache
    • When_Theme_Changed_No_Crash_UITests_Windows_UI_Xaml_Controls_CalendarView_CalendarView_Theming
    • When_TextTrimming_Is_Set_Then_Ellipsis_Is_Used_UITests_Windows_UI_Xaml_Controls_TextBlockControl_TextBlock_TextTrimming
    • Default_StrokeThickness_MyPath
  • wasm-automated-net9.0-WinUI-RuntimeTests-0: 0 changed over 1

  • wasm-automated-net9.0-WinUI-RuntimeTests-1: 1 changed over 1

    🚨🚨 Comparison Details (first 20) 🚨🚨
    • RunRuntimeTests_SamplesApp_Samples_UnitTests_UnitTestsPage
  • wasm-automated-net9.0-WinUI-RuntimeTests-2: 0 changed over 1

@MartinZikmund MartinZikmund merged commit 358645f into master Jun 2, 2025
91 checks passed
@MartinZikmund MartinZikmund deleted the dev/doti/remove-skia-wasm-border branch June 2, 2025 07:32
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 platform/wasm 🌐 Categorizes an issue or PR as relevant to the WebAssembly platform
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Skia][Wasm] WebView2 default border [Skia.WASM] WebView has small border
5 participants