mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-21 18:15:58 +00:00
d0f80b40b2
VALUES-4 defines the internal representation of `calc()` as a tree of calculation nodes. ( https://www.w3.org/TR/css-values-4/#calc-internal ) VALUES-3 lacked any definition here, so we had our own ad-hoc implementation based around the spec grammar. This commit replaces that with CalculationNodes representing each possible node in the tree. There are no intended functional changes, though we do now support nested calc() which previously did not work. For example: `width: calc( 42 * calc(3 + 7) );` I have added an example of this to our test page. A couple of the layout tests that used `calc()` now return values that are 0.5px different from before. There's no visual difference, so I have updated the tests to use the new results.
84 lines
2.1 KiB
HTML
84 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Calc</title>
|
|
<style>
|
|
.container {
|
|
border: 1px solid pink;
|
|
width: 250px;
|
|
}
|
|
|
|
.box {
|
|
border: 1px solid black;
|
|
height: 100px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>CSS calc() Tests</h1>
|
|
<p>The boxes change their width property.</p>
|
|
<p>calc(100px)</p>
|
|
<div class="container">
|
|
<div class="box" style="width: calc(100px);"></div>
|
|
</div>
|
|
|
|
<p>calc(100px + 30% - (2rem * 3 + 20px))</p>
|
|
<div class="container">
|
|
<div class="box" style="width: calc(100px + 30% - (2rem * 3 + 20px));"></div>
|
|
</div>
|
|
|
|
<p>calc(100px + 30% - (120px / (2*4 + 3 )))</p>
|
|
<div class="container">
|
|
<div class="box" style="width: calc(100px + 30% - (120px / (2*4 + 3 )));"></div>
|
|
</div>
|
|
|
|
<p>calc(100px + 30% - calc(120px / calc(2*4 + 3 )))</p>
|
|
<div class="container">
|
|
<div class="box" style="width: calc(100px + 30% - calc(120px / calc(2*4 + 3 )));"></div>
|
|
</div>
|
|
|
|
<p>calc(50% + 60px)</p>
|
|
<div class="container">
|
|
<div class="box" style="width: calc(50% + 60px);"></div>
|
|
</div>
|
|
|
|
<p>calc(50% - 60px)</p>
|
|
<div class="container">
|
|
<div class="box" style="width: calc(50% - 60px);"></div>
|
|
</div>
|
|
|
|
<p>calc(50% + -60px)</p>
|
|
<div class="container">
|
|
<div class="box" style="width: calc(50% + -60px);"></div>
|
|
</div>
|
|
|
|
<p>calc(50% + 50px - 10px)</p>
|
|
<div class="container">
|
|
<div class="box" style="width: calc(50% + 50px - 10px);"></div>
|
|
</div>
|
|
|
|
<p>calc(50% + 3*20px)</p>
|
|
<div class="container">
|
|
<div class="box" style="width: calc(50% + 3*20px);"></div>
|
|
</div>
|
|
|
|
<p>calc(50% + 3 * 20px)</p>
|
|
<div class="container">
|
|
<div class="box" style="width: calc(50% + 3 * 20px);"></div>
|
|
</div>
|
|
|
|
<p>calc(50% + 10.5pt)</p>
|
|
<div class="container">
|
|
<div class="box" style="width: calc(50% + 10.5pt);"></div>
|
|
</div>
|
|
|
|
<p>calc(50% + .5pt)</p>
|
|
<div class="container">
|
|
<div class="box" style="width: calc(50% + .5pt);"></div>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|