ladybird/Base/res/html/misc/calc.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>
Base: Add a test page for CSS 'calc()' values 2021-07-22 20:22:07 +00:00			`<!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>`

LibWeb: Reimplement CalculatedStyleValue as a calculation node tree 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. 2023-04-11 14:48:06 +00:00			`<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>`

Base: Add a test page for CSS 'calc()' values 2021-07-22 20:22:07 +00:00			`<p>calc(50% + 60px)</p>`
			`<div class="container">`
Base: Fix label/actual style mismatches in calc.html 2022-06-29 22:33:41 +00:00			`<div class="box" style="width: calc(50% + 60px);"></div>`
Base: Add a test page for CSS 'calc()' values 2021-07-22 20:22:07 +00:00			`</div>`

Base: Add example for `calc(<percentage> - <length>)` to calc.html `calc(<percentage> + -<length>)` did work before, but a direct `calc(<percentage> - <length>)` was broken. Let's have a test for both. 2022-06-29 22:35:32 +00:00			`<p>calc(50% - 60px)</p>`
			`<div class="container">`
			`<div class="box" style="width: calc(50% - 60px);"></div>`
			`</div>`

Base: Add a test page for CSS 'calc()' values 2021-07-22 20:22:07 +00:00			`<p>calc(50% + -60px)</p>`
			`<div class="container">`
			`<div class="box" style="width: calc(50% + -60px);"></div>`
			`</div>`

Base: Fix label/actual style mismatches in calc.html 2022-06-29 22:33:41 +00:00			`<p>calc(50% + 50px - 10px)</p>`
Base: Add a test page for CSS 'calc()' values 2021-07-22 20:22:07 +00:00			`<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>`