calc-size-parsing.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 38 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-values/calc-size/calc-size-parsing.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>calc-size() expressions</title>

<link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="../../support/parsing-testcommon.js"></script>

<script>

test_valid_value("width",        "calc-size(auto, size)");

test_valid_value("min-width",    "calc-size(auto, size)");

test_valid_value("height",       "calc-size(auto, size)");

test_valid_value("min-height",   "calc-size(auto, size)");

test_invalid_value("max-height", "calc-size(auto, size)");

test_invalid_value("max-width",  "calc-size(auto, size)");

test_invalid_value("height",     "calc-size(none, size)");

test_invalid_value("width",      "calc-size(none, size)");

test_invalid_value("min-height", "calc-size(none, size)");

test_invalid_value("min-width",  "calc-size(none, size)");

test_invalid_value("max-height", "calc-size(none, size)");

test_invalid_value("max-width",  "calc-size(none, size)");

test_valid_value("width",           "calc-size(max-content, size)");

test_valid_value("height",          "calc-size(max-content, size)");

test_valid_value("max-width",       "calc-size(max-content, size)");

test_valid_value("max-height",      "calc-size(max-content, size)");

test_valid_value("min-width",       "calc-size(max-content, size)");

test_valid_value("min-height",      "calc-size(max-content, size)");

test_valid_value("block-size",      "calc-size(max-content, size)");

test_valid_value("inline-size",     "calc-size(max-content, size)");

test_valid_value("max-block-size",  "calc-size(max-content, size)");

test_valid_value("max-inline-size", "calc-size(max-content, size)");

test_valid_value("min-block-size",  "calc-size(max-content, size)");

test_valid_value("min-inline-size", "calc-size(max-content, size)");

test_valid_value("width",      "calc-size(fit-content, size)");

test_valid_value("height",     "calc-size(min-content, size * 2)");

test_valid_value("max-width",  "calc-size(max-content, size / 2)");

test_valid_value("max-height", "calc-size(fit-content, 30px + size / 2)");

test_valid_value("width",      "calc-size(fit-content, 50% + size / 2)");

test_valid_value("width",      "calc-size(any, 25em)");

test_valid_value("width",      "calc-size(any, 40%)");

test_valid_value("width",      "calc-size(any, 50px + 30%)", "calc-size(any, 30% + 50px)");

test_valid_value("width",      "calc-size(calc-size(any, 30px), size)");

test_invalid_value("width",    "calc-size(any, size)");

test_invalid_value("width",    "calc-size(any, fit-content)");

test_invalid_value("width",    "calc-size(any, max-content)");

test_invalid_value("width",    "calc-size(any, min-content)");

test_valid_value("width",      "calc-size(10px, sign(size) * size)");

test_invalid_value("width",    "size");

test_invalid_value("width",    "sign(size)");

test_invalid_value("width",    "calc(50px * sign(size))");

test_invalid_value("width",    "calc-size(any, calc-size(10px, sign(size) * size))");

test_invalid_value("width",    "calc-size(any, calc-size(any, 10px))");

test_invalid_value("width",    "calc(calc-size(auto, size))");

test_invalid_value("width",    "calc(50px * sign(calc-size(auto, size)))");

test_invalid_value("width",    "calc(calc-size(auto, size) + calc-size(auto, size))");

test_invalid_value("width",    "calc(abs(calc-size(auto, size)))");

test_invalid_value("width",    "calc(100px * progress(calc-size(auto, size) from calc-size(auto, 0px) to calc-size(auto, size)))");

test_invalid_value("width",    "calc(100px * progress(calc-size(auto, size) from 0px to 100px))");

test_invalid_value("width",    "calc(100px * progress(50px from calc-size(auto, 0px) to calc-size(auto, size)))");

test_invalid_value("width",    "min(calc-size(auto, 0px), calc-size(auto, size))");

test_invalid_value("width",    "calc(min(calc-size(auto, 0px), calc-size(auto, size)))");

test_invalid_value("width",    "max(calc-size(auto, 0px), calc-size(auto, size))");

test_invalid_value("width",    "calc(max(calc-size(auto, 0px), calc-size(auto, size)))");

test_invalid_value("width",    "clamp(calc-size(auto, 0px), calc-size(auto, 30px), calc-size(auto, size))");

test_invalid_value("width",    "calc(clamp(calc-size(auto, 0px), calc-size(auto, 30px), calc-size(auto, size)))");

test_invalid_value("width",    "calc(cos(calc-size(auto, 0px)))");

test_invalid_value("width",    "calc(atan2(calc-size(auto, size), calc-size(auto, 50px)))");

test_invalid_value("width",    "calc(sqrt(calc-size(auto, 0px)))");

test_invalid_value("width",    "calc(hypot(calc-size(auto, size * 0.5), calc-size(auto, size)))");

test_invalid_value("width",    "calc(round(calc-size(auto, size * 0.5), calc-size(auto, size)))");

test_invalid_value("width",    "calc(round(calc-size(auto, size * 0.5)))");

test_invalid_value("width",    "calc(mod(calc-size(auto, size * 0.5), calc-size(auto, size)))");

test_invalid_value("width",    "calc(rem(calc-size(auto, size * 0.5), calc-size(auto, size)))");

test_valid_value("width", "calc-size(30px, 25em)");

test_valid_value("width", "calc-size(calc-size(any, 30px), 25em)");

test_valid_value("width", "calc-size(calc-size(2in, 30px), 25em)", "calc-size(calc-size(192px, 30px), 25em)");

test_valid_value("width", "calc-size(calc-size(min-content, 30px), 25em)");

test_valid_value("width", "calc-size(calc-size(min-content, size), size)");

test_invalid_value("height", "calc(12% + calc-size(any, 31%))");

test_invalid_value("width", "calc-size(30px)");

test_invalid_value("width", "calc-size(min(30px, 2em))");

test_invalid_value("width", "calc-size(any)");

test_invalid_value("width", "calc-size(calc-size(any, 30px))");

test_invalid_value("width", "calc-size(size)");

test_invalid_value("width", "calc-size(fit-content)");

test_invalid_value("width", "calc-size(calc-size(fit-content, size * 2))");

test_invalid_value("width", "calc-size(calc-size(30px))");

test_valid_value("flex-basis", "calc-size(any, 50px)");

test_valid_value("flex-basis", "calc-size(auto, size)");

test_valid_value("flex-basis", "calc-size(min-content, size)");

test_valid_value("flex-basis", "calc-size(max-content, size)");

test_valid_value("flex-basis", "calc-size(fit-content, size)");

test_valid_value("flex-basis", "calc-size(content, size)");

test_invalid_value("width", "calc-size(content, size)");

test_invalid_value("height", "calc-size(content, size)");

test_invalid_value("max-width", "calc-size(content, size)");

test_invalid_value("max-height", "calc-size(content, size)");

test_invalid_value("min-width", "calc-size(content, size)");

test_invalid_value("min-height", "calc-size(content, size)");

test_valid_value("width", "calc-size(0px, 0px)");

test_invalid_value("width", "calc-size(0, 0px)");

test_invalid_value("width", "calc-size(0px, 0)");

test_invalid_value("width", "calc-size(0, 0)");

</script>