UserAgent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36

Example URL:

Steps to reproduce the problem:
I can sometime reproduce it by creating an html file only consisting of:

<img 
	src="http://placehold.it/1000x1000"
	srcset="http://placehold.it/300x300 300w,
			http://placehold.it/600x600 600w,
			http://placehold.it/900x900 900w"
	sizes="300px"
>

When I load it the first time, I get the 300x300 image, and the natural width is 300 (that is, the image takes up 300px on my screen).

Then I edit the file and change sizes to be "600px" and reload. The 600x600 image is displayed and it takes up 600px pixels on my screen.

Then I change it back to sizes="300px" and reload. Now I get the 600x600 image, but the natural size is 200px. That is, the image only takes up 200px on my screen.

What is the expected behavior?
The image should take up at least the same amount of pixels as stated in the sizes. I'm fine with Chrome reusing a larger image and downscaling it, but the natural size shouldn't be smaller.

What went wrong?
The image displays as too small.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes 

Chrome version: 52.0.2743.116  Channel: stable
OS Version: 6.3
Flash Version: Shockwave Flash 22.0 r0

I was able to reproduce it every time at first. Then I disconnected my extra monitor (I use a laptop with an extra monitor) and the problem went away. When I then reconnected the extra monitor, the issue didn't come back.

But I'm not sure it's related to multiple monitors as I can reproduce it on my Android phone (Chrome 52), and both my laptop and extra monitor has the same device pixel ratio.