UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36

Example URL:
http://jsbin.com/rubeqeviqo/edit?html,css,output

Steps to reproduce the problem:
1. visit http://output.jsbin.com/yuxekidanu
2. open the development tools, inspect the fieldset and the legend element, look at the style, specifically the style applied from "useragent stylesheet"
3. visit http://jsbin.com/rubeqeviqo/

What is the expected behavior?
ALL the style rules that were listed in the first example as being applied to the fieldset and legend elements, from user-agent stylesheet, have been copied to the "fieldset" and "legend" classes in the second example. Hence, by definition, the second example should look exactly the same as the first.

What went wrong?
The second example doesn't achieve the special positioning of the legend across the top border of the fieldset and interrupting the border. Of course you wouldn't expect that css code to achieve that, but that's the issue. 

EITHER 
there's no way to achieve that effect via pure CSS (either standard or via -webkit-whatever properties), which is fundamentally wrong as there shouldn't exist ANYTHING purely stylistic about the rendering of a particular tag that you shouldn't be able to achieve on any other tag by CSS,
OR
there is, and whatever it is, it is not listed in the style panel when inspecting the element, which means there's something wrong in the Developer Tools.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? No 

Does this work in other browsers? N/A

Chrome version: 55.0.2883.87  Channel: stable
OS Version: 
Flash Version: Shockwave Flash 24.0 r0

Note that there's not even a shadow dom in the legend element, or at least it's not displayed in the developer tools