<!DOCTYPE html>
<html>
<head>
<title>It tests that fixed (auto)positioned element is placed properly when the parent element is relative positioned.</title>
<script>
    if (window.testRunner)
	    testRunner.waitUntilDone();
</script>
</head>
<body>
<div style="position: relative; left: 10px; width: 20px; height: 20px; border: 1px solid green;">
  <div class=fixed style="width: 20px; height: 20px; background-color: green;"></div>
</div>

<div style="-webkit-writing-mode: vertical-lr; margin-top: 1px; position: relative; left: 10px; width: 20px; height: 20px; border: 1px solid green;">
  <div class=fixed style="width: 20px; height: 20px; background-color: green;"></div>
</div>

<div style="position: relative; left: 10px; width: 20px; height: 20px; margin-top: 1px; border: 1px solid green;">
  <div class=fixed style="width: 20px; height: 20px; background-color: green;"></div>
</div>

<div style="-webkit-writing-mode: vertical-lr; position: relative; left: 10px; width: 20px; height: 20px; margin-top: 1px; border: 1px solid green;">
  <div class=fixed style="width: 20px; height: 20px; background-color: green;"></div>
</div>

<div style="position: absolute; left: 13px; margin-top: 1px;">
  <div style="position: relative; left: 5px; width: 20px; height: 20px; border: 1px solid green;">
    <div class=fixed style="width: 20px; height: 20px; background-color: green;"></div>
  </div>
</div>

<div style="position: absolute; margin-top: 24px; left: 8px;">
  <span style="position: relative; left: 10px;">
    <div class=fixed style="width: 22px; height: 22px; background-color: green;"></div>
  </span>
  <span style="position: relative; left: 10px; margin: 1px;">
    <div class=fixed style="width: 22px; height: 22px; background-color: green; margin-top: 5px;"></div>
  </span>
  <div style="position: absolute; left: 5px;">
    <span style="position: relative; left: 5px;">
      <div class=fixed style="width: 22px; height: 22px; margin-top: 10px; background-color: green;"></div>
    </span>
  </div>
</div>

<div dir=rtl>
  <div style="position: relative; top: 0px; right: 10px; width: 20px; height: 20px; border: 1px solid green;">
    <div class=fixed style="width: 20px; height: 20px; background-color: green;"></div>
  </div>

  <div style="position: relative; right: 10px; width: 20px; height: 20px; margin-top: 1px; border: 1px solid green;">
    <div class=fixed style="width: 20px; height: 20px; background-color: green;"></div>
  </div>

  <div style="position: absolute; margin-top: 1px;">
    <div style="position: relative; right: 10px; width: 20px; height: 20px; border: 1px solid green;">
      <div class=fixed style="width: 20px; height: 20px; background-color: green;"></div>
    </div>
  </div>
  <span style="position: relative; right: 10px; top: 24px;">
      <div class=fixed style="width: 22px; height: 22px; background-color: green;"></div>
  </span>

  <span style="position: relative; right: 10px; top: 47px">
      <div class=fixed style="width: 22px; height: 22px; background-color: green;"></div>
  </span>

  <div style="position: absolute; right: 13px;">
    <span style="position: relative; right: 5px; top: 70px;">
      <div class=fixed style="width: 22px; height: 22px; background-color: green;"></div>
    </span>
  </div>
</div>
<script>
setTimeout(function() {
    var elements = document.getElementsByClassName("fixed");
    for (var i = 0; i < elements.length; ++i)
        elements[i].style.position = "fixed";
    if (window.testRunner)
        testRunner.notifyDone();
}, 0);
</script>
</body>
</html>
