Noam Rosenthal
54f246505e
Automatic update from web-platform-tests Apply new border-radius/spread algo Use the new coverage-based algorithm that takes into account the percentage of the radius from the overall width/height. Also rename OutsetForMarginOrShadow to OutsetWithCornerCorrection, as it better describes what it does. See https://github.com/w3c/csswg-drafts/pull/12896 Bug: 448651073 Change-Id: I1eaca184c94bf9ad5b7c37a2091eb1f428406efc Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7013748 Reviewed-by: Kyle Charbonneau <kylechar@chromium.org> Commit-Queue: Noam Rosenthal <nrosenthal@google.com> Reviewed-by: Philip Rogers <pdr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1531048} -- wpt-commits: cc6a94ac8793499299b00dde8b97c41aa5c95216 wpt-pr: 55490
71 lines
2.2 KiB
HTML
71 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<title>Box Shadow Border Radius (Outset)</title>
|
|
<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#shadow-shape">
|
|
<div id="shadow"></div>
|
|
<div id="target"></div><style>
|
|
#shadow {
|
|
position: absolute;
|
|
background: black;
|
|
top: calc(100px - var(--spread) * 1px);
|
|
left: calc(100px - var(--spread) * 1px);
|
|
width: calc((var(--width) + var(--spread) * 2) * 1px);
|
|
height: calc((var(--height) + var(--spread) * 2) * 1px);
|
|
}
|
|
|
|
#target {
|
|
position: absolute;
|
|
top: 100px;
|
|
left: 100px;
|
|
width: calc(var(--width) * 1px);
|
|
height: calc(var(--height) * 1px);
|
|
border-radius: var(--radius);
|
|
box-shadow: 0 0 0 var(--spread) black;
|
|
background: green;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
const {searchParams} = new URL(location.href);
|
|
const width = +searchParams.get('width');
|
|
const height = +searchParams.get('height');
|
|
const spread = +searchParams.get('spread');
|
|
for (const param of searchParams) {
|
|
document.documentElement.style.setProperty(`--${param[0]}`, param[1]);
|
|
}
|
|
function adjusted_radius(radius_css) {
|
|
let [radius_width, radius_height] = radius_css.split(' ');
|
|
if (typeof radius_height === 'undefined')
|
|
radius_height = radius_width;
|
|
|
|
if (radius_width.endsWith('%'))
|
|
radius_width = parseFloat(radius_width) / 100 * width;
|
|
else
|
|
radius_width = parseFloat(radius_width);
|
|
|
|
if (radius_height.endsWith('%'))
|
|
radius_height = parseFloat(radius_height) / 100 * height;
|
|
else
|
|
radius_height = parseFloat(radius_height);
|
|
|
|
const coverage = Math.min(
|
|
2 * radius_width / width,
|
|
2 * radius_height / height
|
|
) || 0;
|
|
|
|
return [radius_width, radius_height].map(value => {
|
|
if (value > spread || coverage > 1)
|
|
return value + spread;
|
|
else
|
|
return value + spread * (1 - (1 - value / spread)**3 * (1 - coverage ** 3));
|
|
}).map(v => v + 'px').join(' ');
|
|
}
|
|
|
|
const target = document.getElementById('target');
|
|
const shadow = document.getElementById('shadow');
|
|
const computed_style = getComputedStyle(target);
|
|
for (const radius_prop of ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius'])
|
|
shadow.style[radius_prop] = adjusted_radius(computed_style[radius_prop]);
|
|
|
|
</script>
|
|
|