LayoutTests/accessibility/element-path-with-css-transforms.html

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../resources/accessibility-helper.js"></script>
<script src="../resources/js-test.js"></script>
<style>
/* Minimal repro: elements share the same static position (top:50%, left:50%)
   and are distinguished only by CSS transforms. Without using transforms in the
   path origin computation (localToAbsolute), all elements get identical
   accessibility paths pinned to the untransformed center. */
.container {
    position: relative;
    width: 300px;
    height: 300px;
}
.item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin: -40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Three items at 120-degree intervals around a circle. */
#item1 { transform: rotate(0deg) translateX(-120px) rotate(0deg); }
#item2 { transform: rotate(120deg) translateX(-120px) rotate(-120deg); }
#item3 { transform: rotate(240deg) translateX(-120px) rotate(-240deg); }
</style>
</head>
<body>

<div id="content">
<div class="container">
    <div class="item" id="item1" role="button">A</div>
    <div class="item" id="item2" role="button">B</div>
    <div class="item" id="item3" role="button">C</div>
</div>
</div>

<script>
var output = "This test verifies that accessibility paths for border-radius elements with CSS transforms are correctly positioned. The three items share the same static position and are placed in a circle purely via CSS transforms. Their path bounds must reflect the transformed positions, not the shared untransformed origin.\n\n";

if (window.accessibilityController) {
    window.jsTestIsAsync = true;

    (async () => {
        // Wait for paths to be cached (they require a paint).
        await waitUntilIDHasPathWith("item1", 1, "Curve to");

        output += "--- All items should have curve paths (border-radius: 50%) ---\n";
        output += expect("pathSegmentCountOfID('item1', 'Curve to') > 0", "true");
        output += expect("pathSegmentCountOfID('item2', 'Curve to') > 0", "true");
        output += expect("pathSegmentCountOfID('item3', 'Curve to') > 0", "true");

        window.bounds1 = pathAsBoundsOfID("item1");
        window.bounds2 = pathAsBoundsOfID("item2");
        window.bounds3 = pathAsBoundsOfID("item3");

        // All items are 80x80 circles, so their path sizes should be similar.
        // But their origins must differ because they're at different transformed
        // positions. Before the fix, all three had identical path bounds.
        output += "\n--- Path bounds should have similar sizes (all are 80x80 circles) ---\n";
        output += expect("Math.abs(bounds1.width - bounds2.width) < 2", "true");
        output += expect("Math.abs(bounds1.height - bounds2.height) < 2", "true");

        output += "\n--- Path bounds must have different positions (CSS transforms applied) ---\n";
        // Item1 is translated straight up, item2 is at 120deg, item3 is at 240deg.
        // No two should share the same (x, y) origin.
        window.tolerance = 5;
        output += expect("Math.abs(bounds1.x - bounds2.x) > tolerance || Math.abs(bounds1.y - bounds2.y) > tolerance", "true");
        output += expect("Math.abs(bounds1.x - bounds3.x) > tolerance || Math.abs(bounds1.y - bounds3.y) > tolerance", "true");
        output += expect("Math.abs(bounds2.x - bounds3.x) > tolerance || Math.abs(bounds2.y - bounds3.y) > tolerance", "true");

        document.getElementById("content").style.visibility = "hidden";
        debug(output);
        finishJSTest();
    })();
}
</script>
</body>
</html>