Jason Leo
6ebb032a8b
Automatic update from web-platform-tests Fix polygon() rounding radius clamping formula The clamping formula in ComputeRoundedPolygonVertex used tan(θ/2) where θ is the angle between the edge direction vectors, but the spec defines the clamp in terms of the interior angle α = π − θ, giving tan(α/2) = 1/tan(θ/2). This caused max_radius and tangent_distance to use inverted factors: multiplication instead of division and vice-versa. The bug was invisible at 90° vertices (tan(45°) = 1) but produced wrong clamping at all other angles — triangles, pentagons, and other non-rectangular polygons. The fix computes the interior angle directly (by negating the dot product) so the clamping and tangent-distance formulas read exactly as the spec writes them: max_radius = tan(α/2) × segment / 2 tangent_distance = radius / tan(α/2) A WPT reftest under css-shapes/shape-functions exercises clamping across five polygon shapes using clip-path. The reference uses exact clamped radii where possible (rectangle, equilateral triangle, diamond) and overclamped 9999px for shapes with non-uniform vertex angles (pentagon, isosceles triangle). Bug: 329302249 Change-Id: I1e55f843d07b5688ad045e1b062461381379c5d5 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7738471 Commit-Queue: Jason Leo <cgqaq@chromium.org> Reviewed-by: Fredrik Söderquist <fs@opera.com> Cr-Commit-Position: refs/heads/main@{#1615110} -- wpt-commits: d05572f617fe347cbe32f12a678f738099450fa1 wpt-pr: 59236
50 lines
1.6 KiB
HTML
50 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Shapes: polygon() rounding clamping</title>
|
|
<link rel="author" title="Jason Leo" href="mailto:cgqaq@chromium.org">
|
|
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-polygon">
|
|
<link rel="match" href="polygon-function-rounding-clamp-ref.html">
|
|
<meta name="assert" content="The rounding radius of a polygon() is clamped so it never exceeds tan(angle/2) * segment / 2 for either adjacent line segment.">
|
|
<meta name="fuzzy" content="maxDifference=0-35;totalPixels=0-500">
|
|
<style>
|
|
.test {
|
|
display: inline-block;
|
|
width: 200px;
|
|
height: 200px;
|
|
background: green;
|
|
margin: 10px;
|
|
}
|
|
|
|
/* Rectangle: round 320px, clamped to 100px at 90-degree vertices. */
|
|
.t1 {
|
|
clip-path: polygon(round 320px, 0 0, 100% 0, 100% 100%, 0 100%);
|
|
}
|
|
|
|
/* Pentagon: round 320px, overclamped at each vertex. */
|
|
.t2 {
|
|
clip-path: polygon(round 320px, 50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
|
|
}
|
|
|
|
/* Isosceles triangle: round 200px, overclamped at each vertex. */
|
|
.t3 {
|
|
clip-path: polygon(round 200px, 50% 0%, 0% 100%, 100% 100%);
|
|
}
|
|
|
|
/* Equilateral triangle: round 280px, overclamped at 60-degree vertices. */
|
|
.t4 {
|
|
height: auto;
|
|
aspect-ratio: 1 / sin(60deg);
|
|
clip-path: polygon(round 280px, 50% 0%, 0% 100%, 100% 100%);
|
|
}
|
|
|
|
/* Diamond: round 300px, clamped at 90-degree vertices. */
|
|
.t5 {
|
|
clip-path: polygon(round 300px, 50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
|
}
|
|
</style>
|
|
<p>The test passes if all five shapes match their references.</p>
|
|
<div class="test t1"></div>
|
|
<div class="test t2"></div>
|
|
<div class="test t3"></div>
|
|
<div class="test t4"></div>
|
|
<div class="test t5"></div>
|