<!DOCTYPE html>
<!--
 | As a special case for handling HTML documents, if the root element has a body
 | child element, the used value of the of writing-mode and direction properties
 | on root element are taken from the computed writing-mode and direction of the
 | first such child element instead of from the root element's own values.
 |   https://www.w3.org/TR/css-writing-modes-3/#principal-flow
 -->
<html dir="ltr">
<head>
  <style>
    body {
      background-color: rgb(128, 128, 128);
      width: 200px;
      height: 200px;
      border: 10px solid rgb(255, 255, 255);
    }
    .box {
      background-color: rgb(0, 128, 0);
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body dir="rtl">
  <div class="box"></div>
</body>
</html>