mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 14:27:35 +00:00
LibWeb: Add tests for calc function nodes
This commit is contained in:
stelar7
Andreas Kling
parent
eb41f0144b
commit
9f73fc87a8
12 changed files with 166 additions and 0 deletions
|
|
@ -0,0 +1,7 @@
|
||||||
|
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
|
BlockContainer <html> at (0,0) content-size 0x0 [BFC] children: not-inline
|
||||||
|
BlockContainer <body> at (8,8) content-size 0x0 children: not-inline
|
||||||
|
BlockContainer <div.min> at (8,8) content-size 80x0 children: not-inline
|
||||||
|
BlockContainer <div.max> at (8,8) content-size 100x0 children: not-inline
|
||||||
|
BlockContainer <div.clamp> at (8,8) content-size 120x300 children: inline
|
||||||
|
TextNode <#text>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
|
BlockContainer <html> at (0,0) content-size 0x0 [BFC] children: not-inline
|
||||||
|
BlockContainer <body> at (8,8) content-size 0x0 children: not-inline
|
||||||
|
BlockContainer <div.pow> at (8,8) content-size 80x0 children: not-inline
|
||||||
|
BlockContainer <div.sqrt> at (8,8) content-size 100x0 children: not-inline
|
||||||
|
BlockContainer <div.hypot> at (8,8) content-size 120x0 children: not-inline
|
||||||
|
BlockContainer <div.log> at (8,8) content-size 140x0 children: not-inline
|
||||||
|
BlockContainer <div.exp> at (8,8) content-size 160x0 children: inline
|
||||||
|
TextNode <#text>
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
|
BlockContainer <html> at (0,0) content-size 0x0 [BFC] children: not-inline
|
||||||
|
BlockContainer <body> at (8,8) content-size 0x0 children: not-inline
|
||||||
|
BlockContainer <div.pi> at (8,8) content-size 80x0 children: not-inline
|
||||||
|
BlockContainer <div.e> at (8,8) content-size 100x0 children: inline
|
||||||
|
TextNode <#text>
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
|
BlockContainer <html> at (0,0) content-size 0x0 [BFC] children: not-inline
|
||||||
|
BlockContainer <body> at (8,8) content-size 0x0 children: not-inline
|
||||||
|
BlockContainer <div.abs> at (8,8) content-size 80x0 children: not-inline
|
||||||
|
BlockContainer <div.sign> at (8,8) content-size 100x0 children: inline
|
||||||
|
TextNode <#text>
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
|
BlockContainer <html> at (0,0) content-size 0x0 [BFC] children: not-inline
|
||||||
|
BlockContainer <body> at (8,8) content-size 0x0 children: not-inline
|
||||||
|
BlockContainer <div.round> at (8,8) content-size 80x0 children: not-inline
|
||||||
|
BlockContainer <div.mod> at (8,8) content-size 100x0 children: not-inline
|
||||||
|
BlockContainer <div.rem> at (8,8) content-size 120x0 children: inline
|
||||||
|
TextNode <#text>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
|
BlockContainer <html> at (0,0) content-size 800x996 [BFC] children: not-inline
|
||||||
|
BlockContainer <body> at (8,8) content-size 784x980 children: not-inline
|
||||||
|
BlockContainer <div.sin> at (8,8) content-size 79.984375x100 positioned children: not-inline
|
||||||
|
BlockContainer <div.cos> at (8,108) content-size 99.984375x100 positioned children: not-inline
|
||||||
|
BlockContainer <div.tan> at (8,208) content-size 119.984375x100 positioned children: not-inline
|
||||||
|
BlockContainer <div.asin> at (8,308) content-size 100x140 positioned children: not-inline
|
||||||
|
BlockContainer <div.acos> at (8,448) content-size 100x160 positioned children: not-inline
|
||||||
|
BlockContainer <div.atan> at (8,608) content-size 100x180 positioned children: not-inline
|
||||||
|
BlockContainer <div.atan2> at (8,788) content-size 100x200 positioned children: not-inline
|
||||||
|
BlockContainer <(anonymous)> at (8,988) content-size 784x0 children: inline
|
||||||
|
TextNode <#text>
|
||||||
|
|
@ -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">
|
||||||
|
|
@ -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">
|
||||||
13
Tests/LibWeb/Layout/input/css-values/numeric-constants.html
Normal file
13
Tests/LibWeb/Layout/input/css-values/numeric-constants.html
Normal 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">
|
||||||
|
|
@ -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">
|
||||||
|
|
@ -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">
|
||||||
|
|
@ -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>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue