[css3-sizing] intrinsic widths of replaced elements inside flexboxes

TL;DR: I think we need to add something like the following to the
css3-sizing spec: The min-measure *contribution* of a replaced element with
a percentage width to the min-content measure of a table cell is 0.

Somewhere, we also need to add a bit about the actual used width for
percentage width replaced elements inside table cells being 0. I'm not sure
where that would go.

Also, this quirk only applies to percentage width, not percentage
min-width/max-width (e.g. <img style="min-width: 100%"> does not apply this
quirk).

DETAILS:
There's a bit of an obscure quirk on the intrinsic size of replaced
elements with a percentage width. Their min content measure is set to 0. I
believe it only applies to replaced elements inside table cells, but I'm
not 100% sure.

First, neither http://dev.w3.org/csswg/css3-sizing/#replaced-intrinsic nor
http://dev.w3.org/csswg/css3-images/#concrete-size-resolution mention this
quirk and I'm pretty sure web content relies on this. WebKit has a bug
where we don't shrink the replaced element itself to 0 width, but we do
shrink-wrap the table as if we did. Ignore that for the sake of this
discussion. I plan to fix that shortly.

Second, Gecko and WebKit also apply this quirk to replaced elements inside
flexboxes, Opera does not. None of Gecko, WebKit, Opera or IE apply this
quirk to replaced elements anywhere else as best I can tell (e.g. inside
inline-blocks, position:absolutes or floats). As such, it seems to me like
we should match the Opera behavior and limit this behavior to replaced
elements inside table cells.

Apologies in advance if I confused any of the compat testing for this.

http://jsfiddle.net/tEZcS/

Test case:
<table>
    <td>
        <div style="display: -webkit-flex; display: flex; border: 2px solid
blue;">
            <img style="width: 100%; background-color: grey" src="
http://jsfiddle.net/img/logo.png">
        </div>
    </td>
    <td style="width: 100%; border: 2px solid red;"></td>
</table>

<table>
    <td style="border: 2px solid green">
        <img style="width: 100%; background-color: grey" src="
http://jsfiddle.net/img/logo.png">
    </td>
    <td style="width: 100%; border: 2px solid red;"></td>
</table>

<div style="position: absolute; border: 2px solid orange;">
    <img style="width: 100%; background-color: grey" src="
http://jsfiddle.net/img/logo.png">
</div>

<div style="float:right; border: 2px solid orange;">
    <img style="width: 100%; background-color: grey" src="
http://jsfiddle.net/img/logo.png">
</div>

<div style="clear:both"></div>
<div style="display: inline-block; border: 2px solid orange;">
    <img style="width: 100%; background-color: grey" src="
http://jsfiddle.net/img/logo.png">
</div>