Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/cssom/serialize-custom-props.html - WPT Dashboard Interop Dashboard
<body><!doctype html>
<title>Serializing Integers Never Uses Scinot</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!--
Per CSSOM, integers always serialize all their digits out.
They never serialize to scinot, regardless of size,
because that makes them stop being an integer.
This applies to custom properties as well.
-->
<body>
<script>
try {
CSS.registerProperty({
name: "--two",
value: "<integer>",
inherits: true,
initial: -1
});
}catch(e){}
testIntLength(4);
testIntLength(6);
testIntLength(8);
testIntLength(12);
// JS starts serializing with scinot at 22 digits...
testIntLength(25);
function testIntLength(len) {
let el = document.body;
const val = "1".repeat(len);
test(()=>{
el.removeAttribute("style");
const nullVal = getComputedStyle(el).zIndex;
el.style.zIndex=val;
assert_not_equals(getComputedStyle(el).zIndex, nullVal)
}, `z-index can take a ${len}-digit integer`);
test(()=>{
el.removeAttribute("style");
el.style.setProperty("--one", val);
assert_equals(getComputedStyle(el).getPropertyValue("--one"), val);
}, `An unregistered custom prop can take a ${len}-digit integer`);
test(()=>{
el.removeAttribute("style");
el.style.setProperty("--two", val);
assert_equals(getComputedStyle(el).getPropertyValue("--two"), val);
}, `An <integer> custom prop can take a ${len}-digit integer`);
test(()=>{
el.removeAttribute("style");
el.style.zIndex = val;
const standardVal = getComputedStyle(el).zIndex;
el.removeAttribute("style");
el.style.setProperty("--three", val);
el.style.zIndex = "var(--three)";
assert_equals(getComputedStyle(el).zIndex, standardVal);
}, `z-index can take a custom property set to a ${len}-digit integer`);
}
</script>