diff options
Diffstat (limited to 'tests/wpt/tests/css/css-values')
16 files changed, 220 insertions, 6 deletions
diff --git a/tests/wpt/tests/css/css-values/attr-all-types.html b/tests/wpt/tests/css/css-values/attr-all-types.html index 4e9dd9a6bd9..9418ed0865d 100644 --- a/tests/wpt/tests/css/css-values/attr-all-types.html +++ b/tests/wpt/tests/css/css-values/attr-all-types.html @@ -30,10 +30,10 @@ function test_valid_attr(property, attrString, attrValue, expectedValue) { var elem = document.getElementById("attr"); elem.setAttribute("data-foo", attrValue); - elem.style[property]= attrString; + elem.style.setProperty(property, attrString); var expectedElem = document.getElementById("expected"); - expectedElem.style[property] = expectedValue; + expectedElem.style.setProperty(property, expectedValue); test(() => { assert_equals(window.getComputedStyle(elem).getPropertyValue(property), @@ -42,8 +42,8 @@ "\' should be valid for the property \'" + property + "\'."); }); - elem.style[property] = null; - expectedElem.style[property] = null; + elem.style.setProperty(property, null); + expectedElem.style.setProperty(property, null); } function test_invalid_attr(property, attrString, attrValue) { @@ -51,14 +51,14 @@ var expectedValue = window.getComputedStyle(elem).getPropertyValue(property); elem.setAttribute("data-foo", attrValue); - elem.style[property]= attrString; + elem.style.setProperty(property, attrString); test(() => { assert_equals(window.getComputedStyle(elem).getPropertyValue(property), expectedValue, "Setting property \'" + property + "\' to the value \'" + attrString + "\', where \'data-foo=" + attrValue + "\' should not change it's value."); }); - elem.style[property] = null; + elem.style.setProperty(property, null); } function test_dimension_types_and_units() { diff --git a/tests/wpt/tests/css/css-values/calc-size/animation/calc-size-height-interpolation.html b/tests/wpt/tests/css/css-values/calc-size/animation/calc-size-height-interpolation.html index b37b57bf26d..2126bd8faed 100644 --- a/tests/wpt/tests/css/css-values/calc-size/animation/calc-size-height-interpolation.html +++ b/tests/wpt/tests/css/css-values/calc-size/animation/calc-size-height-interpolation.html @@ -13,6 +13,9 @@ width: 600px; height: 300px; } +html.no-parent-height .parent { + height: auto; +} .target { display: block; } @@ -332,4 +335,65 @@ to: 'calc-size(auto, size * 3)', }); + test_interpolation({ + property: 'height', + from: 'calc-size(20%, size)', + to: 'calc-size(60%, size)', + }, [ + { at: 0, expect: '60px' }, + { at: 0.5, expect: '120px' }, + { at: 1, expect: '180px' }, + ]); + + document.documentElement.classList.add("no-parent-height"); + + // repeat the previous test, but with height:auto on the parent + test_interpolation({ + property: 'height', + from: 'calc-size(20%, size)', + to: 'calc-size(60%, size)', + }, [ + { at: 0, expect: '100px' }, + { at: 0.5, expect: '100px' }, + { at: 1, expect: '100px' }, + ]); + + test_interpolation({ + property: 'height', + from: 'calc-size(50px, size)', + to: 'calc-size(60%, size)', + }, [ + { at: 0, expect: '100px' }, + { at: 0.5, expect: '100px' }, + { at: 1, expect: '100px' }, + ]); + + test_interpolation({ + property: 'height', + from: 'calc-size(50px, size)', + to: 'calc-size(200px, size)', + }, [ + { at: 0, expect: '50px' }, + { at: 0.5, expect: '125px' }, + { at: 1, expect: '200px' }, + ]); + + document.documentElement.classList.remove("no-parent-height"); + + test_no_interpolation({ + property: 'height', + from: 'calc-size(50%, size)', + to: 'calc-size(min-content, size)', + }); + + test_interpolation({ + property: 'height', + from: 'calc-size(50px, size)', + to: 'calc-size(min-content, size)', + }, [ + { at: 0, expect: '50px' }, + { at: 0.5, expect: '75px' }, + { at: 1, expect: '100px' }, + ]); + </script> diff --git a/tests/wpt/tests/css/css-values/calc-size/animation/calc-size-interpolation-expansion.html b/tests/wpt/tests/css/css-values/calc-size/animation/calc-size-interpolation-expansion.html index b761cb04661..354d108f1da 100644 --- a/tests/wpt/tests/css/css-values/calc-size/animation/calc-size-interpolation-expansion.html +++ b/tests/wpt/tests/css/css-values/calc-size/animation/calc-size-interpolation-expansion.html @@ -95,6 +95,38 @@ var TESTS = [ 0.75: "calc-size(fit-content, 5px + (80px + min(10px + 20px + size * 3, -30px + (10px + size * 3) * 2) + (10px + size * 3) * 2) * 0.75)", }, }, + { + property: "width", + start: "calc-size(50%, size)", + end: "calc-size(calc-size(45%, (size * 2)), size + 20px)", + expected: { + 0.75: "calc-size(100%, size * 0.5 * 0.25 + (20px + size * 0.45 * 2) * 0.75)", + }, + }, + { + property: "width", + start: "calc-size(40%, size)", + end: "calc-size(calc-size(10px, (size * 2)), size + 20px)", + expected: { + 0.75: "calc-size(100%, 30px + size * 0.4 * 0.25)", + }, + }, + { + property: "width", + start: "calc-size(80px, size)", + end: "calc-size(calc-size(10px, (size * 2)), size + 20px)", + expected: { + 0.75: "calc-size(any, 50px)", + }, + }, + { + property: "width", + start: "calc-size(80px, size)", + end: "calc-size(calc-size(any, 20px), size + 20px)", + expected: { + 0.75: "calc-size(any, 50px)", + }, + }, ]; let e = document.getElementById("test"); diff --git a/tests/wpt/tests/css/css-values/calc-size/calc-size-aspect-ratio-003.html b/tests/wpt/tests/css/css-values/calc-size/calc-size-aspect-ratio-003.html new file mode 100644 index 00000000000..3a91792fbd2 --- /dev/null +++ b/tests/wpt/tests/css/css-values/calc-size/calc-size-aspect-ratio-003.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<!-- The auto height is 50px, the auto min-size is 150px, which passing through the calc-size() yields 100px. --> +<div style="aspect-ratio: 2/1; width: 100px; min-height: calc-size(auto, size - 50px); background: green;"> + <div style="height: 150px;"></div> +</div> diff --git a/tests/wpt/tests/css/css-values/calc-size/calc-size-aspect-ratio-004.html b/tests/wpt/tests/css/css-values/calc-size/calc-size-aspect-ratio-004.html new file mode 100644 index 00000000000..f4f0b66b1ea --- /dev/null +++ b/tests/wpt/tests/css/css-values/calc-size/calc-size-aspect-ratio-004.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<!-- The auto width is 50px, the auto min-size is 150px, which passing through the calc-size() yields 100px. --> +<div style="aspect-ratio: 1/2; height: 100px; min-width: calc-size(auto, size - 50px); background: green;"> + <div style="width: 150px;"></div> +</div> diff --git a/tests/wpt/tests/css/css-values/calc-size/calc-size-aspect-ratio-005.html b/tests/wpt/tests/css/css-values/calc-size/calc-size-aspect-ratio-005.html new file mode 100644 index 00000000000..70f0ffe9a3f --- /dev/null +++ b/tests/wpt/tests/css/css-values/calc-size/calc-size-aspect-ratio-005.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="width: fit-content; background: green;"> + <!-- The auto width is 50px, the auto min-size is 150px, which passing through the calc-size() yields 100px. --> + <div style="aspect-ratio: 1/2; height: 100px; min-width: calc-size(auto, size - 50px);"> + <div style="width: 150px;"></div> + </div> +</div> diff --git a/tests/wpt/tests/css/css-values/calc-size/calc-size-flex-001.html b/tests/wpt/tests/css/css-values/calc-size/calc-size-flex-001.html new file mode 100644 index 00000000000..22aa9d90bb5 --- /dev/null +++ b/tests/wpt/tests/css/css-values/calc-size/calc-size-flex-001.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display: flex; width: 0px; height: 100px;"> + <!-- The auto min-size is 80px, then through the calc-size() is 100px. --> + <div style="min-width: calc-size(auto, size + 20px); background: green;"> + <div style="width: 80px;"></div> + </div> +</div> diff --git a/tests/wpt/tests/css/css-values/calc-size/calc-size-flex-002.html b/tests/wpt/tests/css/css-values/calc-size/calc-size-flex-002.html new file mode 100644 index 00000000000..0b93341fc0b --- /dev/null +++ b/tests/wpt/tests/css/css-values/calc-size/calc-size-flex-002.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display: flex; width: 0px; height: 100px;"> + <!-- The auto min-size is 60px (the specified-size suggestion), then through the calc-size() is 100px. --> + <div style="min-width: calc-size(auto, size + 40px); width: 60px; background: green;"> + <div style="width: 80px;"></div> + </div> +</div> diff --git a/tests/wpt/tests/css/css-values/calc-size/calc-size-flex-003.html b/tests/wpt/tests/css/css-values/calc-size/calc-size-flex-003.html new file mode 100644 index 00000000000..22858da4735 --- /dev/null +++ b/tests/wpt/tests/css/css-values/calc-size/calc-size-flex-003.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display: flex; width: 0px; height: 100px;"> + <!-- The auto min-size is 60px (the content-size suggestion), then through the calc-size() is 100px. --> + <div style="min-width: calc-size(auto, size + 40px); width: 80px; background: green;"> + <div style="width: 60px;"></div> + </div> +</div> diff --git a/tests/wpt/tests/css/css-values/calc-size/calc-size-flex-004.html b/tests/wpt/tests/css/css-values/calc-size/calc-size-flex-004.html new file mode 100644 index 00000000000..759fc326859 --- /dev/null +++ b/tests/wpt/tests/css/css-values/calc-size/calc-size-flex-004.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display: flex; flex-direction: column; width: 100px; height: 0px;"> + <!-- The auto min-size is 80px, then through the calc-size() is 100px. --> + <div style="min-height: calc-size(auto, size + 20px); background: green;"> + <div style="height: 80px;"></div> + </div> +</div> diff --git a/tests/wpt/tests/css/css-values/calc-size/calc-size-flex-005.html b/tests/wpt/tests/css/css-values/calc-size/calc-size-flex-005.html new file mode 100644 index 00000000000..01f142e16e1 --- /dev/null +++ b/tests/wpt/tests/css/css-values/calc-size/calc-size-flex-005.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display: flex; flex-direction: column; height: 0px; width: 100px;"> + <!-- The auto min-size is 60px (the specified-size suggestion), then through the calc-size() is 100px. --> + <div style="min-height: calc-size(auto, size + 40px); height: 60px; background: green;"> + <div style="height: 80px;"></div> + </div> +</div> diff --git a/tests/wpt/tests/css/css-values/calc-size/calc-size-flex-006.html b/tests/wpt/tests/css/css-values/calc-size/calc-size-flex-006.html new file mode 100644 index 00000000000..02e9f993bd9 --- /dev/null +++ b/tests/wpt/tests/css/css-values/calc-size/calc-size-flex-006.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display: flex; flex-direction: column; height: 0px; width: 100px;"> + <!-- The auto min-size is 60px (the content-size suggestion), then through the calc-size() is 100px. --> + <div style="min-height: calc-size(auto, size + 40px); height: 80px; background: green;"> + <div style="height: 60px;"></div> + </div> +</div> diff --git a/tests/wpt/tests/css/css-values/calc-size/calc-size-flex-007.html b/tests/wpt/tests/css/css-values/calc-size/calc-size-flex-007.html new file mode 100644 index 00000000000..987764e7213 --- /dev/null +++ b/tests/wpt/tests/css/css-values/calc-size/calc-size-flex-007.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>. +<div style="display: flex; flex-wrap: wrap-reverse; width: 100px; height: 100px; position: relative;"> + <div style="background: red; max-height: 80px; height: calc-size(auto, size / 2); flex: 1;"></div> + <div style="background: green; position: absolute; inset: 0;"></div> +</div> diff --git a/tests/wpt/tests/css/css-values/calc-size/calc-size-grid-repeat.html b/tests/wpt/tests/css/css-values/calc-size/calc-size-grid-repeat.html new file mode 100644 index 00000000000..a6526507aab --- /dev/null +++ b/tests/wpt/tests/css/css-values/calc-size/calc-size-grid-repeat.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="width: fit-content; background: green; height: 100px;"> + <!-- During the min/max content size calculation, the min-content isn't resolvable. --> + <div style="box-sizing: border-box; padding: 5px; display: grid; grid-template-columns: repeat(auto-fill, 90px); min-width: 60px; max-width: calc-size(min-content, size * 1000);"></div> +</div> diff --git a/tests/wpt/tests/css/css-values/calc-size/calc-size-height.html b/tests/wpt/tests/css/css-values/calc-size/calc-size-height.html index f2232943bd3..540280c872a 100644 --- a/tests/wpt/tests/css/css-values/calc-size/calc-size-height.html +++ b/tests/wpt/tests/css/css-values/calc-size/calc-size-height.html @@ -35,6 +35,7 @@ let basic_tests = [ { value: "calc-size(30px, 15em)", expected: "300px" }, { value: "calc-size(calc-size(any, 30px), 15em)", expected: "300px" }, { value: "calc-size(calc-size(2in, 30px), 15em)", expected: "300px" }, + { value: "calc-size(calc-size(any, 300px), size * 2)", expected: "600px" }, { value: "calc-size(calc-size(min-content, 30px), 15em)", expected: "300px" }, { value: "calc-size(calc-size(min-content, size), size)", expected: "10px" }, { value: "calc-size(any, 31% + 12px)", expected_auto: "12px", expected_definite: "43px" }, 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 index 0cc34923dd3..6db2635e5ef 100644 --- 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 @@ -43,6 +43,7 @@ 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)"); @@ -106,4 +107,9 @@ 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> |