Why isn't there an orange gap of 1em (50px) between the 2 blue stripes?

div#child-of-first-parent's margin-top is 2em and, after collapsing with div#first-parent's margin-top (1em), the resulting margin-top should be 2em.

div#child-of-first-parent's margin-bottom is 2em and, after collapsing with div#first-parent's margin-bottom (1em), the resulting margin-bottom should be 2em.

div#child-of-second-parent's margin-top is -2em and, after collapsing with div#second-parent's margin-top (1em), the resulting margin-top should be -1em.

Then, div#second-parent's resulting margin-top (-1em) should collapse with div#first-parent's resulting margin-bottom (2em). The resulting margin should be 1em. And so, there should be an orange gap of 1em (50px) between the 2 blue stripes.

"In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins."
coming from CSS 2.1, section 8.3.1 Collapsing margins