mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-05-01 03:57:15 +02:00
2075eddbf1
Logical border-radius properties are parsed as Percentage/Length values, not BorderRadiusStyleValue. Handle these types when applying style.
44 lines
1.6 KiB
HTML
44 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<script src="../include.js"></script>
|
|
<style>
|
|
#target {
|
|
width: 200px;
|
|
height: 100px;
|
|
}
|
|
</style>
|
|
<div id="target"></div>
|
|
<script>
|
|
test(() => {
|
|
const target = document.getElementById("target");
|
|
|
|
// Test percentage values
|
|
target.style.borderStartStartRadius = "50%";
|
|
println(`border-start-start-radius: 50% -> ${getComputedStyle(target).borderTopLeftRadius}`);
|
|
|
|
target.style.borderStartEndRadius = "25%";
|
|
println(`border-start-end-radius: 25% -> ${getComputedStyle(target).borderTopRightRadius}`);
|
|
|
|
target.style.borderEndStartRadius = "10%";
|
|
println(`border-end-start-radius: 10% -> ${getComputedStyle(target).borderBottomLeftRadius}`);
|
|
|
|
target.style.borderEndEndRadius = "75%";
|
|
println(`border-end-end-radius: 75% -> ${getComputedStyle(target).borderBottomRightRadius}`);
|
|
|
|
// Reset
|
|
target.style.cssText = "width: 200px; height: 100px;";
|
|
|
|
// Test calc() values
|
|
target.style.borderStartStartRadius = "calc(10px + 5px)";
|
|
println(`border-start-start-radius: calc(10px + 5px) -> ${getComputedStyle(target).borderTopLeftRadius}`);
|
|
|
|
target.style.borderStartEndRadius = "calc(50% - 10%)";
|
|
println(`border-start-end-radius: calc(50% - 10%) -> ${getComputedStyle(target).borderTopRightRadius}`);
|
|
|
|
target.style.borderEndStartRadius = "calc(20px * 2)";
|
|
println(`border-end-start-radius: calc(20px * 2) -> ${getComputedStyle(target).borderBottomLeftRadius}`);
|
|
|
|
target.style.borderEndEndRadius = "calc(100% / 4)";
|
|
println(`border-end-end-radius: calc(100% / 4) -> ${getComputedStyle(target).borderBottomRightRadius}`);
|
|
});
|
|
</script>
|