ImageScaleView (and ButtonView) odd behaviour on native

Stumbled upon a weird bug/behaviour with ImageScaleView.

When a ButtonView has sourceSlices that don't match exactly the image dimensions and when the view is repositioned on reflow the background is rendered in wrong dimensions and clipped.

To see the problem illustrated replace the Application.js file in the addons/examples/src/ui/button/src folder with the following:


import device;

import ui.widget.ButtonView as ButtonView;
import ui.ImageScaleView as ImageScaleView;

exports = Class(GC.Application, function () {

    this.initUI = function () {
        this.view.style.backgroundColor = "#FFFFFF";

        this._button = new ButtonView({
            superview: this.view,
            width: 200,
            height: 60,
            images: {
                up: "resources/images/blue1.png",
                down: "resources/images/blue2.png",
                disabled: "resources/images/white1.png"
            },
            scaleMethod: "9slice",
            sourceSlices: {
                // When the image is of different resolution, but the ratios are correct
                horizontal: {left: 80 / 2, center: 116 / 2, right: 80 / 2},
                vertical: {top: 10 / 2, middle: 80 / 2, bottom: 10 / 2}
            },
            destSlices: {
                horizontal: {left: 40, right: 40},
                vertical: {top: 4, bottom: 4}
            },
            title: "Button",
            text: {
                color: "#000044",
                size: 16,
                autoFontSize: false,
                autoSize: false
            }
        });

        this._img1 = new ImageScaleView({
            superview: this.view,
            width: 200,
            height: 60,
            image: "resources/images/blue1.png",
            scaleMethod: "9slice",
            sourceSlices: {
                horizontal: {left: 80 / 2, center: 116 / 2, right: 80 / 2},
                vertical: {top: 10 / 2, middle: 80 / 2, bottom: 10 / 2}
            },
            destSlices: {
                horizontal: {left: 40, right: 40},
                vertical: {top: 4, bottom: 4}
            }
        });

        this._img2 = new ImageScaleView({
            superview: this.view,
            width: 200,
            height: 60,
            scaleMethod: "9slice",
            sourceSlices: {
                horizontal: {left: 80 / 2, center: 116 / 2, right: 80 / 2},
                vertical: {top: 10 / 2, middle: 80 / 2, bottom: 10 / 2}
            },
            destSlices: {
                horizontal: {left: 40, right: 40},
                vertical: {top: 4, bottom: 4}
            }
        });
        this._img2.setImage("resources/images/blue1.png");
    };

    this.reflow = function () {
        // And we change the position on reflow
        this._button.updateOpts({
            x: device.width / 2 - 100,
            y: 150
        });

        // ImageScaleView works as expected when image is given in constructor
        this._img1.updateOpts({
            x: device.width / 2 - 100,
            y: 250
        });

        // ImageScaleView breaks when used as the ButtonView does
        this._img2.updateOpts({
            x: device.width / 2 - 100,
            y: 350
        });
    };

    this.launchUI = function () {};
});

The above code results in the following on an iPad:

The middle one is how one would expect it to be rendered.

play-co / timestep

ImageScaleView (and ButtonView) odd behaviour on native #13