<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/cssom-view-1/#dom-element-getclientrects">
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
  <div>
    <span>test</span>
    <span id="vertical-align-sub-as-grand-child"
          title="sub element in a child inline box should not be included">
      <span>
        <sub class="not-include" style="vertical-align: sub">subscript</sub>
      </span>
    </span>
    <span>test</span>
  </div>
<script>
testTargetDoesNotInclude('vertical-align-sub-as-grand-child');

function testTargetDoesNotInclude(target) {
  target = document.getElementById(target);
  test(() => {
    let target_rects = target.getClientRects();

    let not_include_rects = [];
    for (let element of target.querySelectorAll('.not-include')) {
      for (let rect of element.getClientRects())
        not_include_rects.push(rect);
    }
    for (let rect of target_rects) {
      for (let not_include_rect of not_include_rects) {
        assert_rect_not_equals(rect, not_include_rect);
      }
    }
  }, target.title);
}

function assert_rect_not_equals(rect1, rect2) {
  assert_false(rectEquals(rect1, rect2),
               `${rectToString(rect1)} and ${rectToString(rect2)} are not equal`);
}

function rectEquals(rect1, rect2) {
  return rect1.x === rect2.x && rect1.y === rect2.y &&
         rect1.width === rect2.width && rect1.height === rect2.height;
}

function rectToString(rect) {
  return `{${rect.x}, ${rect.y} ${rect.width}x${rect.height}}`;
}
</script>
</body>