Oriol Brufau
3206dd7ebd
Automatic update from web-platform-tests layout: Fix resolution of percentage shape-radius argument of `circle()` The logic was resolving percentages first against the width, and then against the height. And finally, it was assuming that both values were the same, taking the former. Instead, percentages should resolve against the direction-agnostic size: https://www.w3.org/TR/css-shapes-1/#direction-agnostic-size √(width² + height²) / √2 While I'm at it, I'm also simplifying percentage resolution to no longer convert back and forth into app units. Signed-off-by: Oriol Brufau <obrufau@igalia.com> -- wpt-commits: 4b3c879855bd36c8257fe38f03437221d20e7cfc wpt-pr: 60388
17 lines
1.0 KiB
HTML
17 lines
1.0 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Masking: Test clip-path property and circle function with percentage shape-radius</title>
|
|
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
|
<link rel="help" href="https://www.w3.org/TR/css-masking-1/#clipping-paths">
|
|
<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
|
|
<link rel="help" href="https://www.w3.org/TR/css-shapes/#direction-agnostic-size">
|
|
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/14009">
|
|
<link rel="match" href="reference/clip-path-circle-ref.html">
|
|
<meta name="assert" content="The shape-radius argument of circle()
|
|
should resolve percentages against the 'direction-agnostic size'.
|
|
In this case, `√(1400 + 200²) / √2 = 1000`, so 10% is 100px.">
|
|
<meta name="fuzzy" content="maxDifference=0-60; totalPixels=0-900">
|
|
<p>The test passes if there is a full green circle.</p>
|
|
<div style="overflow: hidden">
|
|
<div style="width: 1400px; height: 200px; background: green; clip-path: circle(10% at 100px 100px)"></div>
|
|
</div>
|