diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-values')
14 files changed, 610 insertions, 7 deletions
diff --git a/testing/web-platform/tests/css/css-values/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-values/WEB_FEATURES.yml new file mode 100644 index 0000000000..ca3c0ff91b --- /dev/null +++ b/testing/web-platform/tests/css/css-values/WEB_FEATURES.yml @@ -0,0 +1,17 @@ +features: +- name: abs-sign + files: + - signs-abs-* +- name: cap + files: + - cap-* +- name: ic + files: + - ic-* +- name: lh + files: + - lh-* +- name: round-mod-rem + files: + - round-function.html + - round-mod-rem-* diff --git a/testing/web-platform/tests/css/css-values/calc-rounding-003-ref.html b/testing/web-platform/tests/css/css-values/calc-rounding-003-ref.html new file mode 100644 index 0000000000..e80dd7b95c --- /dev/null +++ b/testing/web-platform/tests/css/css-values/calc-rounding-003-ref.html @@ -0,0 +1,10 @@ +<!doctype html> +<meta charset="utf-8"> +<style> + .outer { + width: 100px; + height: 40px; + border: 1px solid; + } +</style> +<div class="outer"></div> diff --git a/testing/web-platform/tests/css/css-values/calc-rounding-003.html b/testing/web-platform/tests/css/css-values/calc-rounding-003.html new file mode 100644 index 0000000000..bf609e1c1d --- /dev/null +++ b/testing/web-platform/tests/css/css-values/calc-rounding-003.html @@ -0,0 +1,25 @@ +<!doctype html> +<meta charset="utf-8"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1893127"> +<link rel="help" href="https://drafts.csswg.org/css-values/#funcdef-calc"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="match" href="calc-rounding-003-ref.html"> +<style> + .outer { + width: 100px; + border: 1px solid; + } + .inner { + height: 40px; + vertical-align: top; + display: inline-block; + --margin: 4.009px; + width: calc(50% - 2 * var(--margin)); + margin-inline: var(--margin); + } +</style> +<div class="outer" + ><div class="inner"></div + ><div class="inner"></div +></div> 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> diff --git a/testing/web-platform/tests/css/css-values/container-progress-computed.tentative.html b/testing/web-platform/tests/css/css-values/container-progress-computed.tentative.html new file mode 100644 index 0000000000..9ab537cad6 --- /dev/null +++ b/testing/web-platform/tests/css/css-values/container-progress-computed.tentative.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#container-progress-func"> +<link rel="author" title="sakhapov@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../support/numeric-testcommon.js"></script> +<div id="out-of-scope-container"></div> +<div id="extra-container"> + <div id="outer-container"> + <div id="inner-container"> + <div id=target></div> + </div> + </div> +</div> +<style> +:root { + font-size: 10px; +} +#out-of-scope-container { + container: my-container-3 / size; + width: 1px; + height: 1px; +} +#extra-container { + container: my-container-2 / size; + width: 5051px; + height: 1337px; +} +#outer-container { + container: my-container / size; + width: 322px; + height: 228px; +} +#inner-container { + container-type: size; + width: 228px; + height: 322px; +} +#target { + font-size: 10px; +} +</style> +<script> + +let width = window.innerWidth; +let height = window.innerHeight; + +let extraWidth = 5051; +let extraHeight = 1337; +let innerWidth = 228; +let innerHeight = 322; +let outerWidth = 322; +let outerHeight = 228; + +// Identity tests +test_math_used('container-progress(height from 0px to 1px)', innerHeight, {type:'number'}); +test_math_used('container-progress(width of my-container from 0px to 1px)', outerWidth, {type:'number'}); + +// Nestings +test_math_used('container-progress(height from container-progress(height from 0px to 1px) * 1px to container-progress(height from 0px to 1px) * 1px)', '0', {type:'number'}); +test_math_used('container-progress(height from container-progress(height from 0px to 1px) * 0.5px to container-progress(height from 0px to 1px) * 1px)', '1', {type:'number'}); +test_math_used('container-progress(height from container-progress(width of my-container from 0px to 1px) * 1px to container-progress(height of my-container-2 from 0px to 1px) * 1px)', (innerHeight - outerWidth) / (extraHeight - outerWidth), {type:'number'}); + +// General calculations +test_math_used('calc(container-progress(width from 0px to 50px) * 10px + 100px)', (innerWidth / 50 * 10 + 100) + 'px'); +test_math_used('calc(container-progress(height from 10px to sign(50px - 500em) * 10px))', (innerHeight - 10) / (-10 - 10), {type:'number'}); +test_math_used('calc(container-progress(width of my-container from 0px to 50px) * 10px + 100px)', (outerWidth / 50 * 10 + 100) + 'px'); +test_math_used('calc(container-progress(height of my-container from 10px to sign(50px - 500em) * 10px))', (outerHeight - 10) / (-10 - 10), {type:'number'}); + +// Fallback +test_math_used('container-progress(width of non-existing-container from 0px to 1px)', width, {type:'number'}); +test_math_used('container-progress(height of non-existing-container from 0px to 1px)', height, {type:'number'}); +test_math_used('container-progress(width of out-of-scope-container from 0px to 1px)', width, {type:'number'}); +test_math_used('container-progress(height of out-of-scope-container from 0px to 1px)', height, {type:'number'}); + +// Type checking +test_math_used('calc(container-progress(width from 0px to 1px) * 1px)', innerWidth + 'px'); +test_math_used('calc(container-progress(height of my-container from 0px to 1px) * 1s)', outerHeight + 's', {type:'time'}); +test_math_used('calc(container-progress(width of my-container-2 from 0px to 1px) * 1deg)', extraWidth + 'deg', {type:'angle', approx:0.001}); +</script> diff --git a/testing/web-platform/tests/css/css-values/container-progress-invalid.tentative.html b/testing/web-platform/tests/css/css-values/container-progress-invalid.tentative.html new file mode 100644 index 0000000000..a78fd34426 --- /dev/null +++ b/testing/web-platform/tests/css/css-values/container-progress-invalid.tentative.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#container-progress-func"> +<link rel="author" title="sakhapov@chromuim.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../support/parsing-testcommon.js"></script> +<script> +function test_invalid_number(value) { + test_invalid_value('opacity', value); +} +function test_invalid_length(value) { + // 'letter-spacing' accepts <length> only, not <percentage> or any mixes. + test_invalid_value('letter-spacing', value); +} + +// Syntax checking +test_invalid_number('container-progress()'); +test_invalid_number('container-progress( )'); +test_invalid_number('container-progress(,)'); +test_invalid_number('container-progress(1 from )'); +test_invalid_number('container-progress(1)'); +test_invalid_number('container-progress(50% to 0)'); +test_invalid_number('container-progress(0 from 1 to)'); +test_invalid_number('container-progress(from to)'); +test_invalid_number('container-progress(from 1 to 0)'); +test_invalid_number('container-progress(3 of 2 from 1 to 0)'); +test_invalid_number('container-progress(width of 2 from 1 to 0)'); +test_invalid_number('container-progress(from 1 to 0 1)'); +test_invalid_number('container-progress(from 1 0)'); +test_invalid_number('container-progress(0 from to 0)'); +test_invalid_number('container-progress(to to to to to)'); +test_invalid_number('container-progress(0, from, 10, to 200)'); +test_invalid_number('container-progress(0, from, 10, to, 200)'); +test_invalid_number('container-progress(0, from 10, to 200)'); +test_invalid_number('container-progress(0, 10, 200)'); + +// General tests +test_invalid_number('container-progress(height from 0 to 8'); +test_invalid_number('container-progress(height container from 0 to 8'); +test_invalid_number('container-progress(height of from 0 to 8'); +test_invalid_number('container-progress(depth from 0px to 8px'); +test_invalid_number('container-progress(width of 10 from 0px to 8px'); +test_invalid_number('container-progress(height of 10 from 0px to 8px'); +test_invalid_number('container-progress(height of name from 0deg to 8deg'); +test_invalid_number('container-progress(height of name from 0 to 8px'); +test_invalid_number('container-progress(10px from 0px to 8px'); +test_invalid_number('container-progress(depth of name from 0px to 8px'); +test_invalid_number('container-progress(width from 0deg to 8deg'); +test_invalid_number('container-progress(5 from 0deg to 8deg'); +test_invalid_number('container-progress(5 from 0% to 8deg'); +test_invalid_number('container-progress(height from 0% to sign(10px)'); +test_invalid_number('container-progress(5% from 0px to 10px'); +test_invalid_length('calc(1px * container-progress(10deg from 0 to 10))'); +test_invalid_length('calc(1px * container-progress(10 from 0px to 10))'); +</script> diff --git a/testing/web-platform/tests/css/css-values/container-progress-serialize.tentative.html b/testing/web-platform/tests/css/css-values/container-progress-serialize.tentative.html new file mode 100644 index 0000000000..181054c653 --- /dev/null +++ b/testing/web-platform/tests/css/css-values/container-progress-serialize.tentative.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#container-progress-func"> +<link rel="author" title="sakhapov@chromuim.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../support/serialize-testcommon.js"></script> +<div id="outer-container"> + <div id="inner-container"> + <div id=target></div> + </div> +</div> +<style> +:root { + font-size: 10px; +} +#outer-container { + container: my-container / size; + width: 322px; + height: 228px; +} +#inner-container { + container-type: size; + width: 228px; + height: 322px; +} +#target { + font-size: 10px; +} +</style> +<script> +function test_serialization(t,s,c) { + test_specified_serialization('opacity', t, s); + test_specified_serialization('transform', `scale(${t})`, `scale(${s})`); + test_computed_serialization('opacity', t, c); + test_computed_serialization('transform', `scale(${t})`, `matrix(${c}, 0, 0, ${c}, 0, 0)`); +} + +test_serialization( + 'calc(container-progress(width from 0px to 1px) / 1000)', + 'calc(container-progress(width from 0px to 1px) / 1000)', + '0.228', +); +test_serialization( + 'calc(0.1 * container-progress(height of my-container from 0px to 10em))', + 'calc(0.1 * container-progress(height of my-container from 0px to 10em))', + '0.228', +); +</script> diff --git a/testing/web-platform/tests/css/css-values/media-progress-computed.tentative.html b/testing/web-platform/tests/css/css-values/media-progress-computed.tentative.html new file mode 100644 index 0000000000..b2b9c6662a --- /dev/null +++ b/testing/web-platform/tests/css/css-values/media-progress-computed.tentative.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width, initial-scale=1"> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#media-progress-func"> +<link rel="author" title="sakhapov@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../support/numeric-testcommon.js"></script> +<div id="target"></div> +<style> +#target { + font-size: 10px; +} +:root { + width: 100vw; + height: 100vh; +} +</style> +<script> +// innerWidth and innerHeight have lossy precision, see +// https://github.com/w3c/csswg-drafts/issues/5260. +let { width, height } = document.documentElement.getBoundingClientRect(); + +// Identity tests +// NOTE(emilio): We provide custom messages so that the test name doesn't +// depend on the viewport size (since in testharness.js files the viewport size is +// not guaranteed to be fixed, unlike in reftests). +test_math_used('media-progress(height from 0px to 1px)', height, { type:'number', 'msg': 'media-progress() identity check' }); + +// Nestings +test_math_used('media-progress(height from media-progress(height from 0px to 1px) * 1px to media-progress(height from 0px to 1px) * 1px)', '0', {type:'number'}); + +test_math_used('media-progress(height from media-progress(height from 0px to 1px) * 0.5px to media-progress(height from 0px to 1px) * 1px)', '1', {type:'number'}); + +// General calculations. +test_math_used('calc(media-progress(width from 0px to 50px) * 10px + 100px)', (width / 50 * 10 + 100) + 'px', { msg: 'media-progress() with length product' }); +test_math_used('calc(media-progress(height from 10px to sign(50px - 500em) * 10px))', (height - 10) / (-10 - 10), { type:'number', msg: 'media-progress with complex to calculation' }); + +// Type checking +test_math_used('calc(media-progress(width from 0px to 1px) * 1px)', width + 'px', { msg: 'media-progress() as length' }); +test_math_used('calc(media-progress(height from 0px to 1px) * 1s)', height + 's', { type:'time', msg: 'media-progress() as time' }); +test_math_used('calc(media-progress(width from 0px to 1px) * 1deg)', width + 'deg', { type:'angle', approx:0.001, msg: 'media-progress() as angle' }); +</script> diff --git a/testing/web-platform/tests/css/css-values/media-progress-invalid.tentative.html b/testing/web-platform/tests/css/css-values/media-progress-invalid.tentative.html new file mode 100644 index 0000000000..10d40bcbfb --- /dev/null +++ b/testing/web-platform/tests/css/css-values/media-progress-invalid.tentative.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#media-progress"> +<link rel="author" title="sakhapov@chromuim.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../support/parsing-testcommon.js"></script> +<script> +function test_invalid_number(value) { + test_invalid_value('opacity', value); +} +function test_invalid_length(value) { + // 'letter-spacing' accepts <length> only, not <percentage> or any mixes. + test_invalid_value('letter-spacing', value); +} + +// Syntax checking +test_invalid_number('media-progress()'); +test_invalid_number('media-progress( )'); +test_invalid_number('media-progress(,)'); +test_invalid_number('media-progress(1 from )'); +test_invalid_number('media-progress(1)'); +test_invalid_number('media-progress(50% to 0)'); +test_invalid_number('media-progress(0 from 1 to)'); +test_invalid_number('media-progress(from to)'); +test_invalid_number('media-progress(from 1 to 0)'); +test_invalid_number('media-progress(from 1 to 0 1)'); +test_invalid_number('media-progress(from 1 0)'); +test_invalid_number('media-progress(0 from to 0)'); +test_invalid_number('media-progress(to to to to to)'); +test_invalid_number('media-progress(0, from, 10, to 200)'); +test_invalid_number('media-progress(0, from, 10, to, 200)'); +test_invalid_number('media-progress(0, from 10, to 200)'); +test_invalid_number('media-progress(0, 10, 200)'); + +// General tests +test_invalid_number('media-progress(height from 0 to 8'); +test_invalid_number('media-progress(depth from 0px to 8px'); +test_invalid_number('media-progress(width from 0deg to 8deg'); +test_invalid_number('media-progress(5 from 0deg to 8deg'); +test_invalid_number('media-progress(5 from 0% to 8deg'); +test_invalid_number('media-progress(height from 0% to sign(10px)'); +test_invalid_number('media-progress(5% from 0px to 10px'); +test_invalid_length('calc(1px * media-progress(10deg from 0 to 10))'); +test_invalid_length('calc(1px * media-progress(10 from 0px to 10))'); +</script> diff --git a/testing/web-platform/tests/css/css-values/media-progress-serialize.tentative.html b/testing/web-platform/tests/css/css-values/media-progress-serialize.tentative.html new file mode 100644 index 0000000000..354dda25b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-values/media-progress-serialize.tentative.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#progress"> +<link rel="author" title="sakhapov@chromuim.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../support/serialize-testcommon.js"></script> +<div id=target></div> +<style> +:root { + font-size: 10px; +} +#target { + font-size: 10px; +} +</style> +<script> +function test_serialization(t,s,c) { + test_specified_serialization('opacity', t, s); + test_specified_serialization('transform', `scale(${t})`, `scale(${s})`); + test_computed_serialization('opacity', t, c); + test_computed_serialization('transform', `scale(${t})`, `matrix(${c}, 0, 0, ${c}, 0, 0)`); +} + +test_serialization( + 'media-progress(width from 0px to 1000px)', + 'media-progress(width from 0px to 1000px)', + '0.8', +); +test_serialization( + 'calc(0.1 * media-progress(height from 0px to 10em))', + 'calc(0.1 * media-progress(height from 0px to 10em))', + '0.6', +); +test_serialization( + 'calc(media-progress(width from 0px to 100px) / 20)', + 'calc(media-progress(width from 0px to 100px) / 20)', + '0.4' +); +test_computed_serialization( + 'width', + 'calc(1px * media-progress(height from abs(11em - 10rem) to 110px / 10))', + '590px', +); +</script> diff --git a/testing/web-platform/tests/css/css-values/progress-serialize.tentative.html b/testing/web-platform/tests/css/css-values/progress-serialize.tentative.html index 6ea12f2b75..d2090cb7f8 100644 --- a/testing/web-platform/tests/css/css-values/progress-serialize.tentative.html +++ b/testing/web-platform/tests/css/css-values/progress-serialize.tentative.html @@ -20,12 +20,12 @@ test_serialization( ); test_serialization( 'progress(10em from 0px to 10em)', - 'calc(progress(10em from 0px to 10em))', + 'progress(10em from 0px to 10em)', '1', ); test_serialization( 'progress(10em from 0px to 10rem)', - 'calc(progress(10em from 0px to 10rem))', + 'progress(10em from 0px to 10rem)', '1', ); test_serialization( |