How to compute lh and rlh?

How is the value of lh and rlh computed? Regardless of the value that I put for the span, the computed value shown by chrome's computed tab is 12px.

<!DOCTYPE html>
<head>
<style>
body {
  font-size: 16px;
  border: 1px solid black;
}

div {
  font-size: 12px;
}

span {
  font-size: 1.5lh; // 15lh, 1.5rlh, 150rlh still gives a value of 12px
}
</style>
</head>
<body>

<div>Hello <span>world</span></div>

</body>
</html>