@@ -235,11 +235,11 @@ Defining Custom Properties: the '--*' family of properties</h2>
235
235
236
236
<!--
237
237
██████ ██ ██ ██ ██ ████████ ███ ██ ██
238
- ██ ██ ██ ██ ███ ██ ██ ██ ██ ██ ██
239
- ██ ████ ████ ██ ██ ██ ██ ██ ██
240
- ██████ ██ ██ ██ ██ ██ ██ ██ ███
241
- ██ ██ ██ ████ ██ █████████ ██ ██
242
- ██ ██ ██ ██ ███ ██ ██ ██ ██ ██
238
+ ██ ██ ██ ██ ███ ██ ██ ██ ██ ██ ██
239
+ ██ ████ ████ ██ ██ ██ ██ ██ ██
240
+ ██████ ██ ██ ██ ██ ██ ██ ██ ███
241
+ ██ ██ ██ ████ ██ █████████ ██ ██
242
+ ██ ██ ██ ██ ███ ██ ██ ██ ██ ██
243
243
██████ ██ ██ ██ ██ ██ ██ ██ ██
244
244
-->
245
245
@@ -312,13 +312,13 @@ Guaranteed-Invalid Values</h3>
312
312
313
313
314
314
<!--
315
- ██████ ██ ██ ██████ ██ ████████ ██████
315
+ ██████ ██ ██ ██████ ██ ████████ ██████
316
316
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
317
- ██ ████ ██ ██ ██ ██
318
- ██ ██ ██ ██ ██████ ██████
317
+ ██ ████ ██ ██ ██ ██
318
+ ██ ██ ██ ██ ██████ ██████
319
319
██ ██ ██ ██ ██ ██
320
320
██ ██ ██ ██ ██ ██ ██ ██ ██
321
- ██████ ██ ██████ ████████ ████████ ██████
321
+ ██████ ██ ██████ ████████ ████████ ██████
322
322
-->
323
323
324
324
<h3 id='cycles'>
@@ -841,6 +841,54 @@ Serializing Custom Properties</h3>
841
841
property names are restricted to the ASCII range and are <a>ASCII case-insensitive</a> ,
842
842
so implementations typically serialize the name lowercased.
843
843
844
+ Specified values of [=custom properties=] must be serialized
845
+ <em> exactly as specified by the author</em> .
846
+ Simplifications that might occur in other properties,
847
+ such as dropping comments,
848
+ normalizing whitespace,
849
+ reserializing numeric tokens from their value,
850
+ etc.,
851
+ must not occur.
852
+
853
+ Computed values of [=custom properties=] must similarly be serialized
854
+ <em> exactly as specified by the author</em> ,
855
+ save for the replacement of any ''var()'' functions.
856
+
857
+ <div class=example>
858
+ For example, given the following properties:
859
+
860
+ <pre>
861
+ --y: /* baz */;
862
+ --x: /* foo */ var(--y) /* bar */;
863
+ </pre>
864
+
865
+ the serialization of the specified value of ''--x''
866
+ must be <code> "/* foo */ var(--y) /* bar */"</code> ,
867
+ while the serialization of the computed value of ''--x''
868
+ must be <code> "/* foo */ /* baz */ /* bar */"</code> .
869
+
870
+ (Note that the leading whitespace on the value is automatically trimmed by the CSS parser;
871
+ it's not preserved here.)
872
+ </div>
873
+
874
+ <div class=note>
875
+ This requirement exists because authors sometimes store non-CSS information in custom properties,
876
+ and "normalizing" this information can change it in ways that break author code.
877
+
878
+ For example, storing a UUID in a custom property,
879
+ like ''--uuid: 12345678-12e3-8d9b-a456-426614174000'' ,
880
+ requires the UUID to be echoed back out as written
881
+ when it's accessed by script.
882
+
883
+ This value is technically parsed by CSS as a series of adjacent numbers and dimensions.
884
+ In particular, the segment "-12e3" parses as a number, equal to -12000.
885
+ Reserializing it in that form,
886
+ as required by CSSOM in other contexts,
887
+ would fatally break the author's use of the value.
888
+ </div>
889
+
890
+
891
+
844
892
<h2 id='changes'>
845
893
Changes</h2>
846
894
0 commit comments