calc-parentheses.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-values/calc-parentheses.html - WPT Dashboard Interop Dashboard

<!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>