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

Steps to reproduce the problem:
1. Write a style tag with the following contents:

    .my-class {
      all: initial;
      display: block;
      border: 1px solid #ccc;
      padding: 10px;
    }

2. Try to read the cssText property of the rule:

    var styleSheet = document.styleSheets[0];
    var cssText = styleSheet.cssRules[0].style.cssText;

3. Try to copy the styles to another css rule and insert it into stylesheet:

    styleSheet.insertRule('.my-class-clone ' + '{' + cssText + '}', 1);

What is the expected behavior?
cssText should returned the ordered properties so that it first lists the properties that are set to initial, then the specific styles. 

When copying the styles to another CSS rule, it should be equal in terms of result to the first rule set.

What went wrong?
The list of the properties in the cssText string are mixed up, the initial values going after the specific properties sometimes. For example you get this output:

    border: 1px solid rgb(204, 204, 204); border-radius: initial; border-collapse: initial; border-inline-end: initial; border-inline-start: initial;

The left and right side borders do not show on .my-class-clone elements. This is because the properties border-inline-end: initial; border-inline-start: initial; are set after our custom border property is set.

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 69.0.3497.100  Channel: stable
OS Version: OS X 10.13.6
Flash Version: 

See a reproducible case here: https://codepen.io/zinkkrysty/pen/KxJXYB

This works as expected in Firefox.