Rectangle do not display ImageFill image when reading Color via ReadProperty

Bug Reports
1

Fuse version 1.1.1 (build 13893)

MacOS

Steps to reproduce:

  • run code below
  • there will be 3 cards, each card is missing top left image
  • Top left image rectangle is setting Color via {ReadProperty EmptyColor}
  • if I change top left rectangle Color to Color="#e8e8e8" then I’m able to see image
  • I expect to have the same behavior when using {ReadProperty EmptyColor} 
<App>
	<ClientPanel>
		<Grid ux:Class="UserCollection" Rows="auto,1*" Width="116" Height="190" Margin="16,0,0,10" EmptyColor="#e8e8e8">
	    <float4 ux:Property="EmptyColor" />
	    <object ux:Property="Collection" />
	    <JavaScript>
	    var collection = this.Collection.value;
	    module.exports = {
	        one: true,
	        two: true,
	        three: true,
	        collection: collection
	    }
	    </JavaScript>                           
	    <Rectangle Layer="Background" Color="#fff" CornerRadius="10">
	        <Shadow Distance="2" Size="4" Color="#00000019" />
	    </Rectangle>
	    <WrapPanel ItemWidth="58" ItemHeight="45">
	        <Rectangle Layer="Background"  CornerRadius="10">
	        </Rectangle>
	        
	        <!-- One Image -->
	        <Match Value="{one}">
	            <Case Bool="true">
	                <Rectangle Color="{ReadProperty EmptyColor}" CornerRadius="10,0,0,0">
	                    <ImageFill Url="https://unsplash.it/58/45?image=12" />
	                </Rectangle>
	            </Case>
	            <Case Bool="false">
	                <Rectangle Color="#e8e8e8" />
	            </Case>
	        </Match>

	        <!-- Two Image -->
	        <Match Value="{two}">
	            <Case Bool="true">
	                <Rectangle Color="#e8e8e8" CornerRadius="0,10,0,0" Margin="1,0,0,0">
	                    <ImageFill Url="https://unsplash.it/58/45?image=12" />
	                </Rectangle>
	            </Case>
	            <Case Bool="false">
	                <Rectangle Color="#e8e8e8" />
	            </Case>
	        </Match>

	        <!-- Three Image -->
	        <Rectangle Color="#e8e8e8" Margin="1,0,0,0">
                <ImageFill Url="https://unsplash.it/58/45?image=12" />
            </Rectangle>
	    </WrapPanel>
	    <!-- Collection Name -->
	    <Panel>
	        <Text Value="{collection.name}" FontSize="16"  Alignment="Center"/>
	    </Panel>
	</Grid>

	<JavaScript>
	var collections = [
		    {
		        id: 1,
		        name: 'Cofee'
		    },
		    {
		        id: 2,
		        name: 'Books'
		    },
		    {
		        id: 3,
		        name: 'Cars'
		    }
		];
		module.exports = {
			collections: collections
		}
	</JavaScript>

	<StackPanel Orientation="Horizontal">
		<Each Items="{collections}">
			<UserCollection Collection="{}" EmptyColor="#f00" />
		</Each>
	</StackPanel>
	</ClientPanel>
</App>
2

Thanks for reporting! A ticket has been logged.