css/css-values/calc-parentheses.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>calc() expressions with parentheses</title>
<link rel="help" href="https://drafts.csswg.org/css-values-4/#calc-func">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Regression test for https://github.com/jsdom/jsdom/issues/3538 -->

<p id="p1" style="width: calc(1px);"></p>
<p id="p2" style="width: calc((1px));"></p>
<p id="p3" style="width: calc(1px + 4px);"></p>
<p id="p4" style="width: calc(1px + (4px));"></p>
<p id="p5" style="width: calc(1px + 4px / 2);"></p>
<p id="p6" style="width: calc(1px + (7px - 3px) / 2);"></p>

<script>
"use strict";

test(() => {
  const style = window.getComputedStyle(document.getElementById("p1"));
  assert_equals(style.width, "1px");
}, "calc(1px)");

test(() => {
  const style = window.getComputedStyle(document.getElementById("p2"));
  assert_equals(style.width, "1px");
}, "calc((1px))");

test(() => {
  const style = window.getComputedStyle(document.getElementById("p3"));
  assert_equals(style.width, "5px");
}, "calc(1px + 4px)");

test(() => {
  const style = window.getComputedStyle(document.getElementById("p4"));
  assert_equals(style.width, "5px");
}, "calc(1px + (4px))");

test(() => {
  const style = window.getComputedStyle(document.getElementById("p5"));
  assert_equals(style.width, "3px");
}, "calc(1px + 4px / 2)");

test(() => {
  const style = window.getComputedStyle(document.getElementById("p6"));
  assert_equals(style.width, "3px");
}, "calc(1px + (7px - 3px) / 2)");
</script>