Background-repeat doesn't repeat properly with border on VisualElement

Unity Engine
, , , ,
1

With UI Toolkit, I can’t get a background repeat to work properly if my VisualElement has a border (border-with or border-radius).
The problem is that the border is added for each repetition of the background image.

My test image “background-carbon.png” is 24x22 pixels.
background-carbon
Test code :

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <ui:VisualElement style="flex-grow: 1; align-items: center; justify-content: center; background-color: rgb(132, 132, 132);">

        <ui:VisualElement style="
            flex-grow: 1;
            height: 50px; margin: 10px; width: 400px;
            background-image: url(&quot;project://database/Assets/UI%20Toolkit/Images/background-carbon.png&quot;);
            background-repeat: repeat;
            background-size: auto;
        ">
            <ui:Label text="Test without border and radius" style="-unity-text-align: middle-center;" />
        </ui:VisualElement>

        <ui:VisualElement style="
            flex-grow: 1; border-width: 2px; border-color: rgb(200, 0, 0);
            height: 50px; margin: 10px; width: 400px;
            background-image: url(&quot;project://database/Assets/UI%20Toolkit/Images/background-carbon.png&quot;);
            background-repeat: repeat;
            background-size: auto;
        ">
            <ui:Label text="Test with border" style="-unity-text-align: middle-center;" />
        </ui:VisualElement>

        <ui:VisualElement style="
            flex-grow: 1; border-width: 2px; border-color: rgb(200, 0, 0);
            height: 50px; margin: 10px; width: 400px; border-radius: 20px;
            background-image: url(&quot;project://database/Assets/UI%20Toolkit/Images/background-carbon.png&quot;);
            background-repeat: repeat;
            background-size: auto;
        ">
            <ui:Label text="Test with border and radius" style="-unity-text-align: middle-center;" />
        </ui:VisualElement>

        <ui:VisualElement style="
            flex-grow: 1; border-width: 2px; border-color: rgb(200, 0, 0);
            height: 50px; margin-top: 10px; margin: 10px; width: 400px; border-radius: 20px;">
            <ui:VisualElement style="
                flex-grow: 1;
                background-image: url(&quot;project://database/Assets/UI%20Toolkit/Images/background-carbon.png&quot;);
                background-repeat: repeat;
                background-size: auto;
            ">
                <ui:Label text="Test a Workaround with 2 VisualElements" style="-unity-text-align: middle-center;" />
            </ui:VisualElement>
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

Result :
result

Is there something I’m doing wrong? Is there a workaround?

2

I forgot to specify the overflow on my workaround. (overflow: hidden;)

<ui:VisualElement style="
    flex-grow: 1; border-width: 2px; border-color: rgb(200, 0, 0);
    height: 50px; margin-top: 10px; margin: 10px; width: 400px; border-radius: 20px;
    overflow: hidden;
">
    <ui:VisualElement style="
        flex-grow: 1;
        background-image: url(&quot;project://database/Assets/UI%20Toolkit/Images/background-carbon.png&quot;);
        background-repeat: repeat;
        background-size: auto;
    ">
        <ui:Label text="Test a Workaround with 2 VisualElements" style="-unity-text-align: middle-center;" />
    </ui:VisualElement>
</ui:VisualElement>

Result with the good workaround :

workaround
workaround892×230 12.4 KB

This background-repeat bug is therefore not blocking.