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

Steps to reproduce the problem:
1. On a HTML5 page add an iframe which has a HTML5 document on it and references an external css file
2. Open the page, Inspect the content of the iframe
3. Modify a property of the css (e.g. div on the body)
4. Right-click the iframe, perform a "Reload Frame"
5. Go back to the property area: the property is now shown with a grey background (un-editable, similar to user agent stylesheet styles).
6. Shift-clicking a colour property still changes the colour format, but it remains un-editable

What is the expected behavior?
User-added CSS and properties should be editable at all times.

What went wrong?
Trying to modify properties using the css style editor in DevTools after a frame-based reload seems to be the only replicable path I can come up with. It seems to happen for properties that are internally defined by the user agent stylesheet (in my case figcaption and figure) as if the browser is seeing it as the user agent version and marking it as un-editable. The screenshot shows it editable to begin with, then after the iframe is reloaded the property becomes in-editable.

Did this work before? N/A 

Chrome version: 59.0.3071.109  Channel: stable
OS Version: OS X 10.12.5
Flash Version:
 

Deleted: Screen Shot 2017-06-23 at 10.20.44 pm.png 68.7 KB

	Screen Shot 2017-06-23 at 10.20.44 pm.png 68.7 KB View Download

Deleted: Screen Shot 2017-06-23 at 10.25.06 pm.png 70.2 KB

	Screen Shot 2017-06-23 at 10.25.06 pm.png 70.2 KB View Download