wpt / css / css-overflow / hit-test-stacking-context-parent-border-radius.html

Status: FAIL | Duration: 56ms | Subtests: 0/13 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (0/13)

Data from commit:
a50cb89 wpt: run reference-named files which are themselves tests (#836) (2026-09-03)

SubtestStatusMessage
Hit testing respects border-radius clipping on elements without creating stacking contextsFAILcannot convert 'null' or 'undefined' to object
Hit testing respects border-radius clipping on elements without creating stacking contexts with perspectiveFAILcannot convert 'null' or 'undefined' to object
Hit testing respects border-radius clipping on elements with will-change transformFAILcannot convert 'null' or 'undefined' to object
Hit testing respects border-radius clipping on elements with will-change transform with perspectiveFAILcannot convert 'null' or 'undefined' to object
Hit testing respects border-radius clipping on elements with opacity < 1FAILcannot convert 'null' or 'undefined' to object
Hit testing respects border-radius clipping on elements with opacity < 1 with perspectiveFAILcannot convert 'null' or 'undefined' to object
Hit testing respects border-radius clipping on elements with a transform propertyFAILcannot convert 'null' or 'undefined' to object
Hit testing respects border-radius clipping on elements with a transform property with perspectiveFAILcannot convert 'null' or 'undefined' to object
Hit testing respects border-radius clipping on elements with a PaintOffset from the containerFAILcannot convert 'null' or 'undefined' to object
Hit testing respects border-radius clipping on elements with a PaintOffset from the container with perspectiveFAILcannot convert 'null' or 'undefined' to object
Hit testing respects border-radius clipping on elements with a PaintOffsetTranslation from the containerFAILcannot convert 'null' or 'undefined' to object
Hit testing respects border-radius clipping on elements with a PaintOffsetTranslation from the container with perspectiveFAILcannot convert 'null' or 'undefined' to object
Hit testing respects border-radius clipping on elements with a different coordinate spaceFAILcannot convert 'null' or 'undefined' to object

/css/css-overflow/hit-test-stacking-context-parent-border-radius.html

<!DOCTYPE html>
<title>Hit Test with Stacking Context</title>
<link rel="author" title="Peng Zhou" href="mailto:zhoupeng.1996@bytedance.com">
<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-radius">
<link rel="help" href="https://issues.chromium.org/issues/40811639">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#parent {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 50%;
}
#child {
  width: 100px;
  height: 100px;
  background-color: green;
}
</style>

<div id="wrapper">
  <div id="parent">
    <div id="child"></div>
  </div>
</div>

<script>
function elementFromPointOutsideParentBorderRadius() {
  const rect = document.getElementById('parent').getBoundingClientRect();
  return document.elementFromPoint(rect.left + 27, rect.bottom - 5);
}
function elementFromPointInsideParentBorderRadius() {
  const rect = document.getElementById('parent').getBoundingClientRect();
  return document.elementFromPoint(rect.left + 32, rect.bottom - 10);
}

function runTest(fn, description) {
  wrapper.style = '';
  test(fn, description);
  // reset style
  wrapper.style = 'perspective: 1px;';
  test(fn, `${description} with perspective`);
  wrapper.style = '';
}

runTest(() => {
  assert_equals(elementFromPointOutsideParentBorderRadius(), wrapper);
  assert_equals(elementFromPointInsideParentBorderRadius(), child);
}, 'Hit testing respects border-radius clipping on elements without creating stacking contexts');

runTest(() => {
  child.style = 'will-change: transform';
  assert_equals(elementFromPointOutsideParentBorderRadius(), wrapper);
  assert_equals(elementFromPointInsideParentBorderRadius(), child);
  child.style = '';
}, 'Hit testing respects border-radius clipping on elements with will-change transform');

runTest(() => {
  child.style = 'opacity: 0.2';
  assert_equals(elementFromPointOutsideParentBorderRadius(), wrapper);
  assert_equals(elementFromPointInsideParentBorderRadius(), child);
  child.style = '';
}, 'Hit testing respects border-radius clipping on elements with opacity < 1');

runTest(() => {
  child.style = 'height: 1000px; transform: translate(0, -500px);';
  assert_equals(elementFromPointOutsideParentBorderRadius(), wrapper);
  assert_equals(elementFromPointInsideParentBorderRadius(), child);
  child.style = '';
}, 'Hit testing respects border-radius clipping on elements with a transform property');

runTest(() => {
  child.style = 'position: relative; top: 30px;';
  assert_equals(elementFromPointOutsideParentBorderRadius(), wrapper);
  assert_equals(elementFromPointInsideParentBorderRadius(), child);
  child.style = '';
}, 'Hit testing respects border-radius clipping on elements with a PaintOffset from the container');

runTest(() => {
  child.style = 'position: relative; top: 30px; overflow: scroll;';
  assert_equals(elementFromPointOutsideParentBorderRadius(), wrapper);
  assert_equals(elementFromPointInsideParentBorderRadius(), child);
  child.style = '';
}, 'Hit testing respects border-radius clipping on elements with a PaintOffsetTranslation from the container');

test(() => {
  child.style = 'position: relative; top: 30px; overflow: scroll;';
  document.body.style.margin = '50px';
  const container = document.createElement('div');
  container.style.width = '50px';
  container.style.height = '50px';
  container.style.overflow = 'scroll';
  container.appendChild(document.getElementById('parent'));
  wrapper.appendChild(container);
  container.scrollTop = container.scrollHeight;
  container.scrollLeft = 0;
  const offset = container.getBoundingClientRect().left;
  const curY = offset + 10;
  assert_equals(document.elementFromPoint(offset, curY), container);
  assert_equals(document.elementFromPoint(offset + 10, curY), child);
  wrapper.style = 'perspective: 1px;';
  assert_equals(document.elementFromPoint(offset, curY), container);
  assert_equals(document.elementFromPoint(offset + 10, curY), child);
  wrapper.style = '';
  child.style = '';
}, 'Hit testing respects border-radius clipping on elements with a different coordinate space');
</script>