<!DOCTYPE html>
<html>
<head>
  <style type="text/css" media="screen">
    body {
      margin: 0;
    }

    .box {
      position: relative;
      width: 100px;
      height: 100px;
      left: 0;
      background-color: green;
    }
    
    .indicator {
      position: absolute;
      width: 100px;
      height: 100px;
      left: 100px;
      background-color: red;
    }
    #indicator1 {
      top: 0;
    }
    #indicator2 {
      top: 100px;
    }
    
    #box1 {
      left: 100px;
    }
    
    #box2 {
      transform: translateX(100px);
    }
    
  </style>
</head>
<body>
  <!-- In the pixel result, you should see two vertically adjacent green squares. There should be no red.
  Test is only reliable when run in DRT. -->
  <div class="indicator" id="indicator1"></div>
  <div class="indicator" id="indicator2"></div>

  <div class="box" id="box1"></div>
  <div class="box" id="box2"></div>

  <div id="result">
    PASS - "left" property for "box1" element at 7.5s saw something close to: 100<br>
    PASS - "transform.4" property for "box2" element at 7.5s saw something close to: 100
  </div>
</body>
</html>