Canvas.setBorder() breaking layout's size when CSS var() is used for color

[robikz]

When you:

1. use Canvas.setBorder() on a HLayout after the HLayout has been created
2. ... and the HLayout is placed in a VLayout
3. ... and there is another widget below this HLayout
4. ... and where the border color is set from a CSS var()

... the HLayout will resize itself incorrectly even if the size of the border remains the same.

It doesn't matter if the CSS variable actually exists or not, and it doesn't matter if I use var() with 1 argument or 2.

This problem doesn't occur when the exact same things occur but the border color is specified directly (ie. no var()).

I have two cases:

1. After the border is set, the HLayout expands to the right, beyond its containers size (shown in the example below).
2. After the border is set, the HLayout shrinks vertically, with widgets below it encroaching on its space (I can't reproduce this in a minimal example).

import com.google.gwt.user.client.Timer;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.Layout;
import com.smartgwt.client.widgets.layout.VLayout;

public class BorderWoes extends HLayout {
    public BorderWoes() {
        createVar();

        this.addMember(createCssVarLayout());
        this.addMember(createCssPlainColorLayout());

        this.setPadding(5);
        this.setMembersMargin(30);
        this.draw();
    }

    private static native void createVar() /*-{
        $doc.querySelector(":root").style.setProperty("--foo-frame", "red");
    }-*/;

    /**
     * cssVarBorder layout grows to the right after color change.
     */
    private Layout createCssVarLayout() {
        VLayout layout = new VLayout();
        layout.setBackgroundColor("yellow");
        layout.setWidth("300px");
        layout.setHeight("100px");

        HLayout cssVarBorder = new HLayout();
        cssVarBorder.addMember(new Label("CSS VAR"));
        cssVarBorder.setBorder("5px solid black");
        new Timer() {
            @Override
            public void run() {
                cssVarBorder.setBorder("5px solid var(--foo-frame, blue)");
            }
        }.schedule(1000);
        layout.addMember(cssVarBorder);

        layout.addMember(new Label("AFTER BORDER"));

        return layout;
    }

    /**
     * cssPlainColorBorder layout stays the same size
     */
    private Layout createCssPlainColorLayout() {
        VLayout layout = new VLayout();
        layout.setBackgroundColor("lightgray");
        layout.setWidth("300px");
        layout.setHeight("100px");

        HLayout cssPlainColorBorder = new HLayout();
        cssPlainColorBorder.addMember(new Label("CSS COLOR"));
        cssPlainColorBorder.setBorder("5px solid black");
        new Timer() {
            @Override
            public void run() {
                cssPlainColorBorder.setBorder("5px solid blue");
            }
        }.schedule(1000);
        layout.addMember(cssPlainColorBorder);

        layout.addMember(new Label("AFTER BORDER"));

        return layout;
    }
}

And the results look like this:
-> When first entering the page:

-> After 1 second when the Timers fire:

See how the red border is outside its constraints?

SmartClient Version: SNAPSHOT_v13.1d_2023-08-22/LGPL Development Only (built 2023-08-22)

[Isomorphic]

Unfortunately, we don't have documented support for parsing CSS var() calls in framework settings, in current versions.