<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <style type="text/css" media="screen">
    .transformed {
      width: 600px;
      margin: 20px;
      padding: 10px;
      font-size: 18pt;
      -webkit-transform-origin: top left;
      -webkit-transform: rotate(10deg);
      border: 1px solid black;
    }
    #test {
      font-weight: bold;
    }
  </style>
<script src="../editing.js" language="JavaScript" type="text/JavaScript" ></script>
<script>
function editingTest() {
    if (window.layoutTestController)
        window.layoutTestController.dumpSelectionRect();
        
    var testNode = document.getElementById('test');
    setSelectionCommand(testNode, 0, testNode, 0);
    extendSelectionForwardByWordCommand();
}
</script>
</head>
<body>

  <p>Tests that selection rects take transforms into account. The red box should be the bounds of the transformed selection.</p>
  <div class="transformed">
    <p>Lorem ipsum <span id="test">dolor sit amet, consectetur adipisicing</span> elit.</p>
  </div>

<script>runEditingTest()</script>
</body>

</html>