css/css-values/calc-serialize.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>Serialization of min() and max() with nested calc()</title>
<link rel="help" href="https://drafts.csswg.org/css-values-4/#calc-serialize">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Regression test for https://github.com/jsdom/jsdom/issues/4225 -->

<div id="target"></div>

<script>
"use strict";

const el = document.getElementById("target");

test(() => {
  el.style.width = "min(180px, calc(80vw - 24px))";
  assert_equals(el.style.width, "min(180px, -24px + 80vw)", "Serialized min");
}, "min() with nested calc()");

test(() => {
  el.style.width = "min(180px, calc(80vw - 24px + 1em))";
  assert_equals(el.style.width, "min(180px, 1em - 24px + 80vw)", "Serialized min");
}, "min() with nested complex calc()");

test(() => {
  el.style.width = "max(10px, calc(1vw + 1px))";
  assert_equals(el.style.width, "max(10px, 1px + 1vw)", "Serialized max");
}, "max() with nested calc()");

test(() => {
  el.style.width = "max(10px, calc(1vw + 1px - 1em))";
  assert_equals(el.style.width, "max(10px, -1em + 1px + 1vw)", "Serialized max");
}, "max() with nested complex calc()");
</script>