Houdini CSS - Division eines <number> Wertes

[Rolf B]

Hallo alle,

die registrierten Properties aus Houdini CSS sind nichts für schwache Nerven. Ich habe dieses CSS:

@property --wert1 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --wert2 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --weg1 { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --weg2 { syntax: "<length>"; inherits: true; initial-value: 0px; }

:root {
   --wert1: 149;
   --wert2: calc(var(--wert) / 100);

   --weg1: calc(var(--wert1) / 100 * 5em);
   --weg2: calc(var(--wert2) * 5em);
}

span { display: inline-block; } /* damit transform etwas tut */

#foo { transform: translateY(var(--weg1)); }
#bar { transform: translateY(var(--weg2)); }

Also: Für weg1 wird alles in einem Rutsch berechnet, bei weg2 wird die Division separat ausgeführt und zwischengespeichert.

Und nun dieses HTML:

<span id="foo">Huhu</span><span id="bar">Hallo</span>

Stehen beide spans auf einer Höhe? Na? Was meint ihr?

Wenn ihr das ausprobieren wollt, beachtet bitte dies

Ich habe mal einen Chromium-Bug dazu aufgemacht - wenn ihr das auch als Bug seht, gebt ihm gerne ein Sternchen. Oder erklärt mir, warum es kein Bug ist…

Ein weiterer Punkt: Das Schöne an registrierten Properties ist ja, dass man sie animieren kann. Zusammen mit calc ist es aber nicht mehr ganz so einfach:

@property --wert1 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --weg1 {  syntax: "<length>"; inherits: true; initial-value: 0px; }

:root {
   --wert1: 149;
   --weg1: calc(var(--wert1) / 100 * 5em);
}
@keyframes transdown { from { --wert1: 0; } to { --wert2: 500} }

#foo {
  display: inline-block;
  transform: translateY(var(--weg1));
  animation: transdown 1s ease-in-out alternate infinite;
}

Die Keyframes-Animation variiert --wert1 zwischen 0 und 500. Aber das #foo Element rührt sich nicht. Ist irgendwo auch logisch, die Animation erzeugt das variierende --wert1 in #foo und --weg1 ist in :root, verwendet also das dortige --wert1. Das nicht animiert wird.

Lösung 1: Verschiebe die animation-Eigenschaft nach :root Lösung 2: Verschiebe die --weg1 Zuweisung nach #foo

Was merkwürdigerweise nicht hilft, ist das Entfernen der @property Deklaration für --weg1. Eigentlich müsste das gehen, denn nun enthält --weg1 nicht mehr den berechneten Wert, sondern den calc-Ausdruck als CssUnparsedValue, und bisher hatte ich custom propertys so verstanden, dass sie mit einem #define aus C vergleichbar sind (nicht ganz, an der Stelle wo das var() steht muss auch vor der Property-Einsetzung immer noch valide CSS Syntax stehen). Aber offenbar übernimmt --weg1 den Inhalt von --wert1 nicht von der Stelle, wo es eingesetzt wird, sondern von dort, wo es definiert wurde. Schade. Ist das ein Bug? Gibt die Spec was her?

Rolf