diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-values/calc-size')
4 files changed, 242 insertions, 5 deletions
diff --git a/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-height-interpolation.tentative.html b/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-height-interpolation.tentative.html index 04c44d0904..06277376e9 100644 --- a/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-height-interpolation.tentative.html +++ b/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-height-interpolation.tentative.html @@ -2,12 +2,17 @@ <meta charset="UTF-8"> <title>height: calc-size() animations</title> <link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size"> - +<meta name="timeout" content="long"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="../../../support/interpolation-testcommon.js"></script> <style> +.parent { + display: block; + width: 600px; + height: 300px; +} .target { display: block; } @@ -92,4 +97,96 @@ { at: 1.25, expect: '125px' }, ]); + const KEYWORDS = { + "auto": 100, + "min-content": 100, + "fit-content": 100, + "max-content": 100, + "stretch": 300, + }; + + for (const keyword in KEYWORDS) { + let expected = KEYWORDS[keyword]; + test_interpolation({ + property: 'height', + from: keyword, + to: `calc-size(${keyword}, size * 2)`, + }, [ + { at: -0.25, expect: `${expected * 0.75}px` }, + { at: 0, expect: `${expected}px` }, + { at: 0.75, expect: `${expected * 1.75}px` }, + { at: 1, expect: `${expected * 2}px` }, + { at: 1.25, expect: `${expected * 2.25}px` }, + ]); + + test_interpolation({ + property: 'height', + from: keyword, + to: 'calc-size(any, 50px)', + }, [ + { at: -0.25, expect: `${expected * 1.25 - 50 * 0.25}px` }, + { at: 0, expect: `${expected}px` }, + { at: 0.75, expect: `${expected * 0.25 + 50 * 0.75}px` }, + { at: 1, expect: `50px` }, + { at: 1.25, expect: `${50 * 1.25 - expected * 0.25}px` }, + ]); + + test_interpolation({ + property: 'height', + from: 'calc-size(any, 50px)', + to: `calc-size(${keyword}, size * 2)`, + }, [ + { at: -0.1, expect: `${50 * 1.1 - expected * 0.2}px` }, + { at: 0, expect: "50px" }, + { at: 0.75, expect: `${50 * 0.25 + expected * 1.5}px` }, + { at: 1, expect: `${expected * 2}px` }, + { at: 1.25, expect: `${expected * 2.5 - 50 * 0.25}px` }, + ]); + + test_no_interpolation({ + property: 'height', + from: keyword, + to: 'calc-size(50px, size)', + }); + } + + const KEYWORD_PAIRS = [ + [ "auto", "fit-content" ], + [ "fit-content", "min-content" ], + [ "stretch", "auto" ], + [ "max-content", "stretch" ], + ]; + + for (const pair of KEYWORD_PAIRS) { + test_no_interpolation({ + property: 'height', + from: pair[0], + to: `calc-size(${pair[1]}, size)`, + }); + } + + test_no_interpolation({ + property: 'height', + from: 'calc-size(20px, size)', + to: 'calc-size(50px, size)', + }); + + test_no_interpolation({ + property: 'height', + from: 'calc-size(50%, size)', + to: 'calc-size(50px, size)', + }); + + test_interpolation({ + property: 'height', + from: 'calc-size(37px, 200px)', + to: `calc-size(37px, size * 2 + 3% + 17px)`, /* adds to 100px */ + }, [ + { at: -0.25, expect: '225px' }, + { at: 0, expect: '200px' }, + { at: 0.75, expect: '125px' }, + { at: 1, expect: '100px' }, + { at: 1.25, expect: '75px' }, + ]); + </script> diff --git a/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-width-interpolation.tentative.html b/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-width-interpolation.tentative.html index b8b24935c3..88373306c4 100644 --- a/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-width-interpolation.tentative.html +++ b/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-width-interpolation.tentative.html @@ -2,7 +2,7 @@ <meta charset="UTF-8"> <title>width: calc-size() animations</title> <link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size"> - +<meta name="timeout" content="long"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="../../../support/interpolation-testcommon.js"></script> @@ -67,4 +67,118 @@ { at: 1.25, expect: '125px' }, ]); + const KEYWORDS = { + "auto": 200, + "min-content": 100, + "fit-content": 100, + "max-content": 100, + "stretch": 200, + }; + + for (const keyword in KEYWORDS) { + let expected = KEYWORDS[keyword]; + test_interpolation({ + property: 'width', + from: keyword, + to: `calc-size(${keyword}, size * 2)`, + }, [ + { at: -0.25, expect: `${expected * 0.75}px` }, + { at: 0, expect: `${expected}px` }, + { at: 0.75, expect: `${expected * 1.75}px` }, + { at: 1, expect: `${expected * 2}px` }, + { at: 1.25, expect: `${expected * 2.25}px` }, + ]); + + test_interpolation({ + property: 'width', + from: keyword, + to: 'calc-size(any, 50px)', + }, [ + { at: -0.25, expect: `${expected * 1.25 - 50 * 0.25}px` }, + { at: 0, expect: `${expected}px` }, + { at: 0.75, expect: `${expected * 0.25 + 50 * 0.75}px` }, + { at: 1, expect: `50px` }, + { at: 1.25, expect: `${50 * 1.25 - expected * 0.25}px` }, + ]); + + test_interpolation({ + property: 'width', + from: 'calc-size(any, 50px)', + to: `calc-size(${keyword}, size * 2)`, + }, [ + { at: -0.1, expect: `${50 * 1.1 - expected * 0.2}px` }, + { at: 0, expect: "50px" }, + { at: 0.75, expect: `${50 * 0.25 + expected * 1.5}px` }, + { at: 1, expect: `${expected * 2}px` }, + { at: 1.25, expect: `${expected * 2.5 - 50 * 0.25}px` }, + ]); + + test_no_interpolation({ + property: 'width', + from: keyword, + to: 'calc-size(50px, size)', + }); + } + + const KEYWORD_PAIRS = [ + [ "auto", "fit-content" ], + [ "fit-content", "min-content" ], + [ "stretch", "auto" ], + [ "max-content", "stretch" ], + ]; + + for (const pair of KEYWORD_PAIRS) { + test_no_interpolation({ + property: 'width', + from: pair[0], + to: `calc-size(${pair[1]}, size)`, + }); + } + + test_no_interpolation({ + property: 'width', + from: 'calc-size(20px, size)', + to: 'calc-size(50px, size)', + }); + + test_no_interpolation({ + property: 'width', + from: 'calc-size(50%, size)', + to: 'calc-size(50px, size)', + }); + + test_interpolation({ + property: 'width', + from: 'calc-size(37px, 200px)', + to: `calc-size(37px, size * 2 + 7% + 12px)`, /* adds to 100px */ + }, [ + { at: -0.25, expect: '225px' }, + { at: 0, expect: '200px' }, + { at: 0.75, expect: '125px' }, + { at: 1, expect: '100px' }, + { at: 1.25, expect: '75px' }, + ]); + + let parent_auto_style = document.createElement("style"); + parent_auto_style.innerText = ` + body { width: 300px; } + .parent { width: auto; } + `; + document.head.append(parent_auto_style); + + test_interpolation({ + property: 'width', + from: 'inherit', + to: `calc-size(auto, size * 0.5)`, + }, [ + { at: -0.25, expect: '337.5px' }, + { at: 0, expect: '300px' }, + { at: 0.75, expect: '187.5px' }, + { at: 1, expect: '150px' }, + { at: 1.25, expect: '112.5px' }, + ]); + + parent_auto_style.remove(); + + </script> diff --git a/testing/web-platform/tests/css/css-values/calc-size/calc-size-height.tentative.html b/testing/web-platform/tests/css/css-values/calc-size/calc-size-height.tentative.html index 61e59f83db..c3d58931b8 100644 --- a/testing/web-platform/tests/css/css-values/calc-size/calc-size-height.tentative.html +++ b/testing/web-platform/tests/css/css-values/calc-size/calc-size-height.tentative.html @@ -37,7 +37,6 @@ let basic_tests = [ { value: "calc-size(calc-size(2in, 30px), 15em)", expected: "300px" }, { value: "calc-size(calc-size(min-content, 30px), 15em)", expected: "300px" }, { value: "calc-size(calc-size(min-content, size), size)", expected: "10px" }, - { value: "calc(12% + calc-size(any, 31%))", expected_auto: "10px", expected_definite: "43px" }, { value: "calc-size(any, 31% + 12px)", expected_auto: "12px", expected_definite: "43px" }, { value: "calc-size(auto, size * 1.5)", expected: "15px" }, ]; diff --git a/testing/web-platform/tests/css/css-values/calc-size/calc-size-parsing.tentative.html b/testing/web-platform/tests/css/css-values/calc-size/calc-size-parsing.tentative.html index e51247c872..afcb200424 100644 --- a/testing/web-platform/tests/css/css-values/calc-size/calc-size-parsing.tentative.html +++ b/testing/web-platform/tests/css/css-values/calc-size/calc-size-parsing.tentative.html @@ -34,8 +34,33 @@ 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(any, calc-size(10px, sign(size) * size))"); -test_invalid_value("width", "calc-size(any, calc-size(10px, sign(size) * size) * sign(size))"); +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)"); @@ -43,4 +68,6 @@ test_valid_value("width", "calc-size(calc-size(2in, 30px), 25em)", "calc-size(ca 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%))"); + </script> |