transformed-selection-rects.html | Explore in Territory

<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;
      transform: rotate(10deg);
      border: 1px solid black;
    }
    #test {
      font-weight: bold;
    }
  </style>
<script>
if (window.internals)
    internals.settings.setEditingBehavior('mac');
function editingTest() {
    if (window.testRunner)
        testRunner.dumpSelectionRect();

    var selection = window.getSelection();
    var testNode = document.getElementById('test');
    selection.collapse(testNode, 0);
    selection.modify('extend', 'forward', 'word');
}
</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>editingTest()</script>
</body>

</html>

chromium/third_party/blink/web_tests/editing/selection/transformed-selection-rects.html