UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3013.0 Safari/537.36

Steps to reproduce the problem:
I have written a case on jsfiddle.

https://jsfiddle.net/arzyu/6yrqbd76/

====================================
<style>
.container {
	display: inline-block;
}
#test {
	padding-right: 100%;
	background: #def;
}
.indent {
	text-indent: -100%;
}
</style>

<div class="container">
	<div id="test" class="indent">#test</div>
</div>
====================================

When I toggle class `indent`, the `#test` box grows bigger.

What is the expected behavior?

What went wrong?
This didn't happen on safari.  Maybe a problem of Blink.

Did this work before? N/A 

Does this work in other browsers? N/A

Chrome version: 58.0.3013.0  Channel: canary
OS Version: OS X 10.12.3
Flash Version: Shockwave Flash 24.0 r0