diff options
Diffstat (limited to 'tests/wpt/tests/css/css-values/calc-size/calc-size-parsing.html')
-rw-r--r-- | tests/wpt/tests/css/css-values/calc-size/calc-size-parsing.html | 112 |
1 files changed, 112 insertions, 0 deletions
diff --git a/tests/wpt/tests/css/css-values/calc-size/calc-size-parsing.html b/tests/wpt/tests/css/css-values/calc-size/calc-size-parsing.html new file mode 100644 index 00000000000..37eb933c713 --- /dev/null +++ b/tests/wpt/tests/css/css-values/calc-size/calc-size-parsing.html @@ -0,0 +1,112 @@ +<!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_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%))"); + +// Based on the discussion in https://github.com/w3c/csswg-drafts/issues/10259 +// this presumes parse-time conversion of the one-argument form to the +// two-argument form, but this isn't yet specified. +test_valid_value("width", "calc-size(30px)", "calc-size(any, 30px)"); +test_valid_value("width", "calc-size(min(30px, 2em))", "calc-size(any, min(30px, 2em))"); +test_invalid_value("width", "calc-size(any)"); +test_valid_value("width", "calc-size(calc-size(any, 30px))", "calc-size(calc-size(any, 30px), size)"); +test_invalid_value("width", "calc-size(size)"); +test_valid_value("width", "calc-size(fit-content)", "calc-size(fit-content, size)"); +test_valid_value("width", "calc-size(calc-size(fit-content, size * 2))", "calc-size(calc-size(fit-content, size * 2), size)"); +test_valid_value("width", "calc-size(calc-size(30px))", "calc-size(calc-size(any, 30px), size)"); + +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)"); + +</script> |