mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-26 17:55:07 +02:00
76 lines
3.0 KiB
HTML
76 lines
3.0 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}`);
|
|
|
|
// Reset
|
|
target.style.cssText = "width: 200px; height: 100px;";
|
|
|
|
// Test <length-percentage>{2} values
|
|
target.style.borderStartStartRadius = "50% 0%";
|
|
println(`border-start-start-radius: 50% 0% -> ${getComputedStyle(target).borderTopLeftRadius}`);
|
|
|
|
target.style.borderStartEndRadius = "45% 5%";
|
|
println(`border-start-end-radius: 45% 5% -> ${getComputedStyle(target).borderTopRightRadius}`);
|
|
|
|
target.style.borderEndStartRadius = "40% 10%";
|
|
println(`border-end-start-radius: 40% 10% -> ${getComputedStyle(target).borderBottomLeftRadius}`);
|
|
|
|
target.style.borderEndEndRadius = "35% 15%";
|
|
println(`border-end-end-radius: 35% 15% -> ${getComputedStyle(target).borderBottomRightRadius}`);
|
|
|
|
// Reset
|
|
target.style.cssText = "width: 200px; height: 100px;";
|
|
|
|
// Test <slash-separated-border-radius-syntax> values
|
|
target.style.borderStartStartRadius = "30% / 20%";
|
|
println(`border-start-start-radius: 30% / 20% -> ${getComputedStyle(target).borderTopLeftRadius}`);
|
|
|
|
target.style.borderStartEndRadius = "25% / 15%";
|
|
println(`border-start-end-radius: 25% / 15% -> ${getComputedStyle(target).borderTopRightRadius}`);
|
|
|
|
target.style.borderEndStartRadius = "20% / 10%";
|
|
println(`border-end-start-radius: 20% / 10% -> ${getComputedStyle(target).borderBottomLeftRadius}`);
|
|
|
|
target.style.borderEndEndRadius = "15% / 5%";
|
|
println(`border-end-end-radius: 15% / 5% -> ${getComputedStyle(target).borderBottomRightRadius}`);
|
|
});
|
|
</script>
|