horizontalCenter/verticalCenter acts differently depending on clipAndEnableScrolling when components should be positioned in negative space

Steps to reproduce:
1. Compile and run this application:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">

<s:controlBarContent>
<s:Button label="toggle clipAndEnableScrolling" click="myGroup.clipAndEnableScrolling = !myGroup.clipAndEnableScrolling" />
</s:controlBarContent>

<s:layout>
<s:VerticalLayout />
</s:layout>

<s:Group width="100%" height="100%">
<s:BorderContainer left="10" top="10" bottom="10" right="10">
<mx:Canvas id="myCanvas" width="100%" height="100%">
<s:Button width="200" height="200"
horizontalCenter="-100"
verticalCenter="-100"/>

<s:BorderContainer width="5" height="5" borderVisible="false"
horizontalCenter="0"
verticalCenter="0"
backgroundColor="red"/>

</mx:Canvas>
</s:BorderContainer>
</s:Group>

<s:Group width="100%" height="100%">
<s:BorderContainer left="10" top="10" bottom="10" right="10">
<s:Group id="myGroup" width="100%" height="100%">
<s:Button width="200" height="200"
horizontalCenter="-100"
verticalCenter="-100"/>

<s:BorderContainer width="5" height="5" borderVisible="false"
horizontalCenter="0"
verticalCenter="0"
backgroundColor="red"/>
</s:Group>
</s:BorderContainer>
</s:Group>

</s:Application>

2. Resize the browser window smaller
3. Click toggle clipAndEnableScrolling

Actual Results:

The Group positions the button and red square at the correct location only when clipAndEnableScrolling is true.

Expected Results:

The Group should position the button and red square in the same place regardless of clipAndEnableScrolling.

Workaround (if any):