1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 05:27:43 +00:00

LibWeb: Add tests for calc function nodes

This commit is contained in:
stelar7 2023-07-31 15:49:42 +02:00 committed by Andreas Kling
parent eb41f0144b
commit 9f73fc87a8
12 changed files with 166 additions and 0 deletions

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<style>
* {
width: 0px;
height: 0px;
}
.min {
width: min(150px, 80px, min(200px, 300px));
}
.max {
width: max(15px, max(75px, 100px), 50px);
}
.clamp {
width: clamp(clamp(0px, 120px, 200px), 50px, clamp(100px, 500px, 300px));
height: clamp(clamp(0px, 120px, 200px), 1000px, clamp(100px, 500px, 300px));
}
</style><div class="min"><div class="max"><div class="clamp">

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<style>
* {
width: 0px;
height: 0px;
}
.pow {
width: calc(10px * pow(2, 3));
}
.sqrt {
width: calc(10px * sqrt(100));
}
.hypot {
width: hypot(72px, 96px)
}
.log {
width: round(up, calc(100px * log(4.055)), 10px);
}
.exp {
width: round(up, calc(1px * exp(5.05)), 10px);
}
</style><div class="pow"><div class="sqrt"><div class="hypot"><div class="log"><div class="exp">

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<style>
* {
width: 0px;
height: 0px;
}
.pi {
width: round(up, pi * 25px, 10px);
}
.e {
width: round(up, e * 36px, 10px);
}
</style><div class="pi"><div class="e">

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<style>
* {
width: 0px;
height: 0px;
}
.abs {
width: calc(abs(-80px))
}
.sign {
width: calc(sign(-100px) * -100px);
}
</style><div class="abs"><div class="sign">

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<style>
* {
width: 0px;
height: 0px;
}
.round {
width: round(down, 85px, 10px);
}
.mod {
width: mod(201px, 101px);
}
.rem {
width: rem(241px, -121px);
}
</style><div class="round"><div class="mod"><div class="rem">

View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<style>
div {
position: relative;
background: red;
height: 100px;
width: 100px;
left: 0;
}
.sin {
width: calc(sin(30deg + 1.0471967rad) * 80px);
rotate: 90deg;
}
.cos {
width: calc(cos(e - 2.7182818284590452354) * 100px);
rotate: 90deg;
}
.tan {
width: calc(tan(0.7853975rad) * 120px);
rotate: 90deg;
}
.asin {
height: 140px;
rotate: calc(asin(sin(pi/2)));
}
.acos {
height: 160px;
rotate: calc(acos(cos(pi / 2)));
}
.atan {
height: 180px;
rotate: calc(atan(tan(pi / 2)));
}
.atan2 {
height: 200px;
rotate: calc(atan2(10px, 0px));
}
</style><div class="sin"></div><div class="cos"></div><div class="tan"></div><div class="asin"></div><div class="acos"></div><div class="atan"></div><div class="atan2"></div>