html - Why baseline of `inline-block` element with `overflow:hidden` is set to its bottom margin?

Question

After reading two great answers explaining the behaviour of inline-block elements (Why is this inline-block element pushed downward? and why the span's line-height is useless) I still have two unexplained questions.

1. What the reason to change baseline of inline-block element from baseline of its line box to bottom margin edge?

http://www.w3.org/TR/CSS2/visudet.html#leading

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

2. How to calculate this shift?

Important: I don't try to find a solution how to fix it. I try to understand what was the reason to change positioning behaviour of inline-block element when it is applied overflow: hidden. So please, don't post answers for dummies.

UPDATE

Unfortunately I didn't get what I want although I accepted the answer. I think the problem in the questions itself. Regarding the first question: I wanted to understand why inline-block can't preserve baseline of its line box even if it has overflow:hidden (despite of W3C specification of course). I wanted to hear the design decisions - not just it must be set to something, because W3C it mandates. The second one: I want to get a formula where we can paste font-size and line-height of an element and get the correct result.

Anyway thanks to anybody :)

UPDATE 2

Fortunately and subjectively the answer is found! See the first re-accepted answer. Thank you, @pallxk!)

Answer 1

1. What the reason to change baseline of inline-block element from baseline of its line box to bottom margin edge?

The baseline of an 'inline-block' is changed to its bottom margin edge when its overflow property is set to hidden (full specification here).

As for the reason for this decision, I think since the overflown part is hidden, user agents (browsers) may choose to render that overflown part and not display it, or choose to not render it at all. And when the overflown part is not rendered, user agents have no way to tell the baseline of its last line box, as it is not rendered, where it goes is not known.

If the baseline of 'inline-block' whose overflow is set to hidden is still kept as the baseline of its last line box, user agents are forced to render what is hidden to user, which may hinder performance, or at least, put extra restrictions on user agents. What's more, in such case, other inline texts in the same line box are aligned to such a baseline where texts around the overflow-hidden inline-box is hidden, which is kind of stange and not intuitive.

I made a simple demo emulating that inline-block with overflow hidden still has its baseline set to the baseline of its last line box.

var isOverflowHidden = false;
document.querySelector('button').onclick = function() {
  document.getElementById('inline-box').style.overflow = isOverflowHidden ? '' : 'hidden';
  isOverflowHidden = !isOverflowHidden;
}

html { background: white; }
#inline-box { display: inline-block; height: 18px; }
.overflown { color: white; }

<p><button id="toggle">Toggle 'overflow: hidden;' on 'inline-block'</button></p>

<span>
  texts sit
  <span id="inline-box">
    texts in inline-block <br>
    <span class="overflown">
      line 2 <br>
      line 3
    </span>
  </span>
  on baseline
</span>