UserAgent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:54.0) Gecko/20100101 Firefox/54.0

Example URL:
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/webkit-margin-after-not-rendered-001.html

Steps to reproduce the problem:
2 self-explanatory reduced tests:

http://www.gtalbot.org/BrowserBugsSection/css21testsuite/webkit-margin-after-not-rendered-001.html

Steps to reproduce
- - - - - - - - -
First, resize the content area of the browser to be 700px wide by 350px tall. It does not have to be exactly 700px wide by 350px tall. What you want here is to generate a vertical scroll bar.

Second, scroll all the way down: you should be able to read "Sentence after blue bordered 600px tall block.".

Third, open Inspector tools, select the p#sentence-after .

Fourth, make sure you have the browser window and the Developer tools window side-by-side.

Fifth, toggle ON and OFF the checkbox of the commented declaration /* -webkit-margin-after: 1em; */

http://www.gtalbot.org/BrowserBugsSection/css21testsuite/webkit-margin-after-not-rendered-002.html

Steps to reproduce
- - - - - - - - - 
First, resize the content area of the browser to be 700px wide by 350px tall. It does not have to be exactly 700px wide by 350px tall. What you want here is to generate a vertical scroll bar. 

Second, scroll all the way down: you should be able to read 'Sentence after 350px tall image.'. 

Third, open Inspector tools, select the p#sentence-after . 

Fourth, make sure you have the browser window and the Developer tools window side-by-side. Fifth, toggle ON and OFF the checkbox of the commented declaration -webkit-margin-after: 1em; .

What is the expected behavior?
The bottom margin of p#sentence-after should be rendered in both cases and the scrollbar thumb should not be moving and should not be resized.

What went wrong?
The bottom margin of p#sentence-after is not rendered when -webkit-margin-after is only declared in user agent style sheet. When toggling the checkbox of the commented declaration /* -webkit-margin-after: 1em; */, the scrollbar thumb moves and is resized: the layout of -webkit-margin-after is different.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 61.0.3163.13  Channel: dev
OS Version: 
Flash Version: irrelevant

Other comment
- - - - - - -

I will link 4 screen shots (otherwise I will attach them to this bug report): 2 actual results and 2 expected results regarding the 2 tests.

Firefox 54+ always render the margin-bottom of the p#sentence-after in both code situations.

This bug affects 4 tests in CSS3 Writing Modes test suite (even though such bug *_has nothing_* to do with the CSS3 Writing Modes spec):

http://test.csswg.org/harness/test/css-writing-modes-3_dev/single/sizing-orthog-vlr-in-htb-008/format/html5/

http://test.csswg.org/harness/test/css-writing-modes-3_dev/single/sizing-orthog-vlr-in-htb-020/format/html5/

http://test.csswg.org/harness/test/css-writing-modes-3_dev/single/sizing-orthog-vrl-in-htb-008/format/html5/

http://test.csswg.org/harness/test/css-writing-modes-3_dev/single/sizing-orthog-vrl-in-htb-020/format/html5/