diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-typed-om/stylevalue-serialization | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-typed-om/stylevalue-serialization')
11 files changed, 545 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/crashtests/cssInvertValue-convert-crash.html b/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/crashtests/cssInvertValue-convert-crash.html new file mode 100644 index 0000000000..8ca27efc3a --- /dev/null +++ b/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/crashtests/cssInvertValue-convert-crash.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" href="mailto:0xdevssh@gmail.com"> +<link rel="help" href="https://crbug.com/1238543"> +<link rel="help" href="https://www.w3.org/TR/css-typed-om-1/"> +<meta name="assert" content="The renderer should not crash."> + +<p>This test passes if it does not crash.</p> +<script> + var inverted = new CSSMathInvert(CSS.number(0)); + var converted = inverted.to('number'); + converted.toString() +</script>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/crashtests/cssInvertValue-zero.html b/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/crashtests/cssInvertValue-zero.html new file mode 100644 index 0000000000..b767cf69c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/crashtests/cssInvertValue-zero.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1232775"> +<title>Do not crash when serializing inverted zero via CSSTransformValue</title> +<script> + const inverted = new CSSMathInvert(new CSSUnitValue(0, 'number')); + const rotate = new CSSRotate(inverted, 0, 0, CSS.deg(0)); + const transform = new CSSTransformValue([rotate]); + inverted.toString(); + rotate.toString(); + transform.toString(); +</script> diff --git a/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/crashtests/cssTransform-Internal-value.html b/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/crashtests/cssTransform-Internal-value.html new file mode 100644 index 0000000000..96097e4f94 --- /dev/null +++ b/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/crashtests/cssTransform-Internal-value.html @@ -0,0 +1,12 @@ +<!doctype html> +<meta charset="utf-8"> +<link rel="help" href="https://crbug.com/1204782"> +<title>Serialize transform components must not crash when the internal CSS value is null</title> + +<script> + var v98 = new CSSUnitValue(1, "px"); + var v100 = v98.div(CSS.px(1)); + var v106 = v98.mul(v100); + var v201 = new CSSTranslate(v106, v98, v98); + v201.toString() +</script>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/cssImageValue.html b/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/cssImageValue.html new file mode 100644 index 0000000000..92256e5967 --- /dev/null +++ b/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/cssImageValue.html @@ -0,0 +1,19 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSSURLImageValue serialization tests</title> +<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#urlimagevalue-serialization"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/testhelper.js"></script> +<body> +<div id="log"></div> +<div id="testUrl" style="background-image: url('/media/1x1-green.png')"></div> +<script> +'use strict'; + +test(() => { + const result = document.getElementById('testUrl').attributeStyleMap.get('background-image'); + assert_equals(result.toString(), 'url("/media/1x1-green.png")'); +}, 'CSSUrlImageValue serializes correctly'); + +</script> diff --git a/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/cssKeywordValue.tentative.html b/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/cssKeywordValue.tentative.html new file mode 100644 index 0000000000..1e2041d80d --- /dev/null +++ b/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/cssKeywordValue.tentative.html @@ -0,0 +1,35 @@ +<!doctype html> +<meta charset="utf-8"> +<title>IDL-constructed CSSKeywordValue serialization tests</title> +<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#unparsedvalue-serialization"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/testhelper.js"></script> +<body> +<script> +'use strict'; + +test(() => { + assert_equals(new CSSKeywordValue('auto').toString(), 'auto'); + assert_equals(new CSSKeywordValue('inherit').toString(), 'inherit'); + assert_equals(new CSSKeywordValue('lemon').toString(), 'lemon'); +}, 'CSSKeywordValue constructed from IDL serializes correctly'); + +test(() => { + assert_equals(new CSSKeywordValue(' Hello World').toString(), CSS.escape(' Hello World')); + assert_equals(new CSSKeywordValue('3').toString(), CSS.escape('3')); +}, 'CSSKeywordValue constructed from IDL serializes to escaped strings'); + +test(() => { + let result = CSSStyleValue.parse('width', 'auto'); + result.value = 'lemon'; + assert_equals(result.toString(), 'lemon'); +}, 'CSSKeywordValue from DOMString modified through "value" setter serializes correctly'); + +test(t => { + let result = createInlineStyleMap(t, 'width: auto').get('width'); + result.value = 'lemon'; + assert_equals(result.toString(), 'lemon'); +}, 'CSSKeywordValue from CSSOM modified through "value" setter serializes correctly'); + +</script> diff --git a/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/cssMathValue.tentative.html b/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/cssMathValue.tentative.html new file mode 100644 index 0000000000..7ee4e8137e --- /dev/null +++ b/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/cssMathValue.tentative.html @@ -0,0 +1,145 @@ +<!doctype html> +<meta charset="utf-8"> +<title>IDL-constructed CSSMathValue serialization tests</title> +<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#calc-serialization"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/testhelper.js"></script> +<script> +'use strict'; + +const gTestCases = [ + { + description: 'CSSMathMax with one argument', + value: new CSSMathMax(1), + cssText: 'max(1)', + }, + { + description: 'CSSMathMax with more than one argument', + value: new CSSMathMax(1, 2, 3), + cssText: 'max(1, 2, 3)', + }, + { + description: 'CSSMathMax with pixel arguments', + value: new CSSMathMin(CSS.px(100), CSS.px(110)), + cssText: 'min(100px, 110px)', + }, + { + description: 'CSSMathMax containing nested CSSMathValues', + value: new CSSMathMax(new CSSMathSum(1, 2), 3), + cssText: 'max(1 + 2, 3)', + }, + { + description: 'CSSMathMin with one argument', + value: new CSSMathMin(1), + cssText: 'min(1)', + }, + { + description: 'CSSMathMin with more than one argument', + value: new CSSMathMin(1, 2, 3), + cssText: 'min(1, 2, 3)', + }, + { + description: 'CSSMathMin with pixel arguments', + value: new CSSMathMin(CSS.px(90), CSS.px(100)), + cssText: 'min(90px, 100px)', + }, + { + description: 'CSSMathMin containing nested CSSMathValues', + value: new CSSMathMin(new CSSMathSum(1, 2), 3), + cssText: 'min(1 + 2, 3)', + }, + { + description: 'CSSMathClamp with lower, value and upper arguments', + value: new CSSMathClamp(1, 2, 3), + cssText: 'clamp(1, 2, 3)', + }, + { + description: 'CSSMathClamp with pixel arguments', + value: new CSSMathClamp(CSS.px(90), CSS.px(100), CSS.px(110)), + cssText: 'clamp(90px, 100px, 110px)', + }, + { + description: 'CSSMathClamp containing nested CSSMathValues', + value: new CSSMathClamp(new CSSMathSum(1, 2), 3, 4), + cssText: 'clamp(1 + 2, 3, 4)', + }, + { + description: 'CSSMathSum with one argument', + value: new CSSMathSum(1), + cssText: 'calc(1)', + }, + { + description: 'CSSMathSum with more than one argument', + value: new CSSMathSum(1, 2, 3), + cssText: 'calc(1 + 2 + 3)', + }, + { + description: 'CSSMathSum with a CSSMathNegate as first value', + value: new CSSMathSum(new CSSMathNegate(1), 2, 3), + cssText: 'calc((-1) + 2 + 3)', + }, + { + description: 'CSSMathSum containing a CSSMathNegate after first value', + value: new CSSMathSum(1, new CSSMathNegate(2), 3), + cssText: 'calc(1 - 2 + 3)', + }, + { + description: 'CSSMathSum nested inside a CSSMathValue', + value: new CSSMathSum(new CSSMathSum(1, 2), 3), + cssText: 'calc((1 + 2) + 3)', + }, + { + description: 'CSSMathNegate', + value: new CSSMathNegate(1), + cssText: 'calc(-1)', + }, + { + description: 'CSSMathNegate nested inside a CSSMathValue', + value: new CSSMathProduct(new CSSMathNegate(1)), + cssText: 'calc((-1))', + }, + { + description: 'CSSMathProduct with one argument', + value: new CSSMathProduct(1), + cssText: 'calc(1)', + }, + { + description: 'CSSMathProduct with more than one argument', + value: new CSSMathProduct(1, 2, 3), + cssText: 'calc(1 * 2 * 3)', + }, + { + description: 'CSSMathProduct with a CSSMathInvert as first value', + value: new CSSMathProduct(new CSSMathInvert(1), 2, 3), + cssText: 'calc((1 / 1) * 2 * 3)', + }, + { + description: 'CSSMathProduct containing a CSSMathInvert after first value', + value: new CSSMathProduct(1, new CSSMathInvert(2), 3), + cssText: 'calc(1 / 2 * 3)', + }, + { + description: 'CSSMathProduct nested inside a CSSMathValue', + value: new CSSMathProduct(new CSSMathProduct(1, 2), 3), + cssText: 'calc((1 * 2) * 3)', + }, + { + description: 'CSSMathInvert', + value: new CSSMathInvert(1), + cssText: 'calc(1 / 1)', + }, + { + description: 'CSSMathInvert nested inside a CSSMathValue', + value: new CSSMathSum(new CSSMathInvert(1)), + cssText: 'calc((1 / 1))', + }, +]; + +for (const {value, cssText, description} of gTestCases) { + test(() => { + assert_equals(value.toString(), cssText); + }, description + ' serializes correctly'); +} + +</script> diff --git a/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/cssStyleValue-cssom.html b/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/cssStyleValue-cssom.html new file mode 100644 index 0000000000..5f21bfaa61 --- /dev/null +++ b/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/cssStyleValue-cssom.html @@ -0,0 +1,33 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSSStyleValue serialization from CSSOM</title> +<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#stylevalue-serialization"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/testhelper.js"></script> +<body> +<div id="log"></div> +<script> +'use strict'; + +test(t => { + const result = createInlineStyleMap(t, 'color: red').get('color'); + assert_equals(result.toString(), 'red'); +}, 'CSSStyleValue from specified CSSOM serializes correctly'); + +test(t => { + const result = createComputedStyleMap(t, 'color: red').get('color'); + assert_equals(result.toString(), 'rgb(255, 0, 0)'); +}, 'CSSStyleValue from computed CSSOM serializes correctly'); + +test(t => { + const result = createInlineStyleMap(t, 'background: blue').get('background'); + assert_equals(result.toString(), 'blue'); +}, 'Shorthand CSSStyleValue from inline CSSOM serializes correctly'); + +test(t => { + const result = createComputedStyleMap(t, 'background: blue').get('background'); + assert_equals(result.toString(), 'rgb(0, 0, 255) none repeat scroll 0% 0% / auto padding-box border-box'); +}, 'Shorthand CSSStyleValue from computed CSSOM serializes correctly'); + +</script> diff --git a/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/cssStyleValue-string.html b/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/cssStyleValue-string.html new file mode 100644 index 0000000000..747635d319 --- /dev/null +++ b/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/cssStyleValue-string.html @@ -0,0 +1,23 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSSStyleValue serialization from parsing</title> +<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#stylevalue-serialization"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/testhelper.js"></script> +<body> +<div id="log"></div> +<script> +'use strict'; + +test(() => { + const result = CSSStyleValue.parse('color', 'red'); + assert_equals(result.toString(), 'red'); +}, 'CSSStyleValue parsed from string serializes to given string'); + +test(() => { + const result = CSSStyleValue.parse('background', 'blue'); + assert_equals(result.toString(), 'blue'); +}, 'Shorthand CSSStyleValue parsed from string serializes to given string'); + +</script> diff --git a/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/cssTransformValue.tentative.html b/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/cssTransformValue.tentative.html new file mode 100644 index 0000000000..89330b8e1c --- /dev/null +++ b/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/cssTransformValue.tentative.html @@ -0,0 +1,167 @@ +<!doctype html> +<meta charset="utf-8"> +<title>IDL-constructed CSSTransformValue serialization tests</title> +<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#positionvalue-serialization"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/testhelper.js"></script> +<script> +'use strict'; + +const gTestCases = [ + { + value: new CSSTranslate(CSS.percent(1), CSS.px(1)), + cssText: 'translate(1%, 1px)', + desc: 'CSSTranslate with 2 arguments' + }, + { + value: new CSSTranslate(CSS.px(1), CSS.percent(2), CSS.px(3)), + cssText: 'translate3d(1px, 2%, 3px)', + desc: 'CSSTranslate with 3 arguments' + }, + { + value: new CSSScale(CSS.number(2), CSS.number(3)), + cssText: 'scale(2, 3)', + desc: 'CSSScale with 2 arguments' + }, + { + value: new CSSScale(CSS.number(1), CSS.number(2), CSS.number(3)), + cssText: 'scale3d(1, 2, 3)', + desc: 'CSSScale with 3 arguments' + }, + { + value: new CSSRotate(CSS.deg(90)), + cssText: 'rotate(90deg)', + desc: 'CSSRotate with 1 argument' + }, + { + value: new CSSRotate(CSS.number(1), CSS.number(2), CSS.number(3), CSS.deg(90)), + cssText: 'rotate3d(1, 2, 3, 90deg)', + desc: 'CSSRotate with 4 arguments' + }, + { + value: new CSSSkew(CSS.deg(90), CSS.deg(45)), + cssText: 'skew(90deg, 45deg)', + desc: 'CSSSkew' + }, + { + value: new CSSSkew(CSS.deg(90), CSS.turn(0)), + cssText: 'skew(90deg)', + desc: 'CSSSkew with Y which is 0 value' + }, + { + value: new CSSSkewX(CSS.deg(90)), + cssText: 'skewX(90deg)', + desc: 'CSSSkewX' + }, + { + value: new CSSSkewY(CSS.deg(90)), + cssText: 'skewY(90deg)', + desc: 'CSSSkewY' + }, + { + value: new CSSPerspective(CSS.px(1)), + cssText: 'perspective(1px)', + desc: 'CSSPerspective' + }, + { + value: new CSSPerspective(CSS.px(-1)), + cssText: 'perspective(calc(-1px))', + desc: 'CSSPerspective with negative length' + }, + { + value: new CSSPerspective("none"), + cssText: 'perspective(none)', + desc: 'CSSPerspective with none as string' + }, + { + value: new CSSPerspective(new CSSKeywordValue("none")), + cssText: 'perspective(none)', + desc: 'CSSPerspective with none as CSSKeyword' + }, + { + value: new CSSTransformValue([new CSSPerspective(CSS.px(1))]), + cssText: 'perspective(1px)', + desc: 'CSSTransformValue with a single transform' + }, + { + value: new CSSTransformValue([ + new CSSTranslate(CSS.px(1), CSS.px(0)), + new CSSRotate(CSS.deg(90)), + new CSSPerspective(CSS.px(1)), + new CSSSkew(CSS.deg(90), CSS.deg(45)), + new CSSScale(CSS.number(1), CSS.number(2), CSS.number(3)), + ]), + cssText: 'translate(1px, 0px) rotate(90deg) perspective(1px) skew(90deg, 45deg) scale3d(1, 2, 3)', + desc: 'CSSTransformValue with multiple transforms' + }, + { + value: new CSSTransformValue([ + new CSSTranslate(new CSSMathSum(CSS.px(1), CSS.em(1)), CSS.px(0)), + new CSSRotate(new CSSMathSum(CSS.deg(90), CSS.turn(1))), + new CSSPerspective(new CSSMathSum(CSS.px(1), CSS.em(1))), + new CSSSkew(new CSSMathProduct(CSS.deg(90), 2), new CSSMathProduct(CSS.turn(1), 2)), + new CSSScale( + new CSSMathProduct(CSS.number(1), CSS.number(2)), + new CSSMathSum(CSS.number(1), CSS.number(1)), + new CSSMathProduct(CSS.number(3)) + ), + ]), + cssText: 'translate(calc(1em + 1px), 0px) rotate(calc(90deg + 360deg)) perspective(calc(1em + 1px)) skew(calc(90deg * 2), calc(360deg * 2)) scale3d(calc(1 * 2), calc(1 + 1), calc(3))', + desc: 'CSSTransformValue containing CSSMathValues' + }, + { + value: new CSSTransformValue([ + new CSSRotate( + new CSSMathInvert( + new CSSUnitValue(0, 'number')), + 0, 0, CSS.deg(0)) + ]), + cssText:'rotate3d(calc(1 / 0), 0, 0, 0deg)', + desc: 'CSSMathInvert with 0 parameter' + }, + { + value: new CSSTransformValue([ + new CSSRotate( + 0, 0, 0, + new CSSMathProduct(CSS.deg(1), + new CSSMathInvert( + new CSSUnitValue(0, 'number'))) + ) + ]), + cssText:'rotate3d(0, 0, 0, calc(1deg / 0))', + desc: 'CSSMathInvert with 0 parameter and nested' + }, + { + value: new CSSMatrixComponent(new DOMMatrixReadOnly([1, 2, 3, 4, 5, 6])), + cssText: 'matrix(1, 2, 3, 4, 5, 6)', + desc: 'CSSMatrixComponent with 6 elements' + }, + { + value: new CSSMatrixComponent(new DOMMatrixReadOnly([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16])), + cssText: 'matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16)', + desc: 'CSSMatrixComponent with 16 elements' + }, +]; + +for (const {value, cssText, desc} of gTestCases) { + test(() => { + assert_equals(value.toString(), cssText); + }, desc + ' serializes correctly'); +} + +test(() => { + let result = new CSSTransformValue([ + new CSSTranslate(CSS.px(1), CSS.px(2), CSS.px(3)), + new CSSRotate(1, 2, 3, CSS.deg(90)), + new CSSScale(1, 2, 3), + ]); + + for (const transform of result) { + transform.is2D = true; + } + + assert_equals(result.toString(), 'translate(1px, 2px) rotate(90deg) scale(1, 2)'); +}, 'CSSTransformValue with updated is2D serializes as 2D transforms'); + +</script> diff --git a/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/cssUnitValue.tentative.html b/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/cssUnitValue.tentative.html new file mode 100644 index 0000000000..fc798ddbbf --- /dev/null +++ b/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/cssUnitValue.tentative.html @@ -0,0 +1,43 @@ +<!doctype html> +<meta charset="utf-8"> +<title>IDL-constructed CSSUnitValue serialization tests</title> +<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#numericvalue-serialization"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../resources/testhelper.js"></script> +<body> +<script> +'use strict'; + +test(() => { + assert_equals(new CSSUnitValue(3.14, 'px').toString(), '3.14px'); + assert_equals(CSS.px(3.14).toString(), '3.14px'); +}, 'CSSUnitValue with length unit constructed from IDL serializes correctly'); + +test(() => { + assert_equals(new CSSUnitValue(3.14, 'percent').toString(), '3.14%'); + assert_equals(CSS.percent(3.14).toString(), '3.14%'); +}, 'CSSUnitValue with unit "percent" constructed from IDL serializes correctly'); + +test(() => { + assert_equals(new CSSUnitValue(3.14, 'number').toString(), '3.14'); + assert_equals(CSS.number(3.14).toString(), '3.14'); +}, 'CSSUnitValue with unit "number" constructed from IDL serializes correctly'); + +test(() => { + assert_equals(new CSSUnitValue(3, 'number').toString(), '3'); +}, 'CSSUnitValue with integer values constructed from IDL serializes correctly'); + +test(() => { + let result = CSSStyleValue.parse('width', '1px'); + result.value = 3.14; + assert_equals(result.toString(), '3.14px'); +}, 'CSSKeywordValue from DOMString modified by "value" setter serializes correctly'); + +test(t => { + let result = createInlineStyleMap(t, 'width: 1px').get('width'); + result.value = 3.14; + assert_equals(result.toString(), '3.14px'); +}, 'CSSKeywordValue from CSSOM modified by "value" setter serializes correctly'); + +</script> diff --git a/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/cssUnparsedValue.html b/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/cssUnparsedValue.html new file mode 100644 index 0000000000..c87553dd91 --- /dev/null +++ b/testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/cssUnparsedValue.html @@ -0,0 +1,44 @@ +<!doctype html> +<meta charset="utf-8"> +<title>IDL-constructed CSSUnparsedValue serialization tests</title> +<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#unparsedvalue-serialization"> +<meta name="assert" content="Test CSSUnparsedValue are serialized similar to getComputedStyle()" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> +<div id="tag"></div> +<div id="elem" style="color-scheme: bar/*comment*/var(--foo)"></div> +<script> +'use strict'; + +test(() => { + assert_equals(new CSSUnparsedValue(['lem', 'on', 'ade']).toString(), 'lem/**/on/**/ade'); +}, 'CSSUnparsedValue containing strings serializes to its tokenized contents'); + +test(() => { + assert_equals(new CSSUnparsedValue([ + new CSSVariableReferenceValue('--A', + new CSSUnparsedValue([new CSSVariableReferenceValue('--B')])), + new CSSVariableReferenceValue('--C')]).toString(), + 'var(--A,var(--B))var(--C)'); +}, 'CSSUnparsedValue containing variable references serializes its ' + + 'tokenized contents'); + +test(() => { + assert_equals(new CSSUnparsedValue(['foo', 'bar ', + new CSSVariableReferenceValue('--A', + new CSSUnparsedValue(['baz ', + new CSSVariableReferenceValue('--B'), 'lemon'])), + new CSSVariableReferenceValue('--C', + new CSSUnparsedValue(['ade']))]).toString(), + 'foo/**/bar var(--A,baz var(--B)lemon)var(--C,ade)'); +}, 'CSSUnparsedValue containing mix of strings and variable references ' + + 'serializes to its tokenized contents'); + +test(() => { + assert_equals( + elem.attributeStyleMap.get("color-scheme").toString(), + 'bar/**/var(--foo)'); +}, 'attributeStyleMap round-trips correctly, though the comment is gone'); + +</script> |