Add more calc shortcuts (#798)

web/core/src/jsMain/kotlin/androidx/compose/web/css/CSSOperations.kt

@@ -61,4 +61,9 @@ operator fun <T: CSSUnit> CSSNumericValue<out T>.minus(b: CSSCalcValue<out T>):
 operator fun <T: CSSUnit> CSSCalcValue<out T>.times(b: Number): CSSCalcValue<T> = CSSCalcValue(CSSTimes(this.op, b))
 operator fun <T: CSSUnit> Number.times(b: CSSCalcValue<out T>): CSSCalcValue<T> = CSSCalcValue(CSSTimes(b.op, this, false))
 
+operator fun <T: CSSUnit> CSSNumericValue<T>.div(b: Number): CSSCalcValue<T> = CSSCalcValue(CSSDiv(this, b))
 operator fun <T: CSSUnit> CSSCalcValue<out T>.div(b: Number): CSSCalcValue<T> = CSSCalcValue(CSSDiv(this.op, b))
+
+operator fun <T: CSSUnit> CSSNumericValue<T>.times(b: Number): CSSCalcValue<T> = CSSCalcValue(CSSTimes(this, b))
+operator fun <T: CSSUnit> Number.times(b: CSSNumericValue<T>): CSSCalcValue<T> = CSSCalcValue(CSSTimes(b, this, false))
+

web/core/src/jsTest/kotlin/CSSUnitApiTests.kt

@@ -427,6 +427,12 @@ class CSSUnitApiTests {
 
         val typedResultLengthFallback: CSSNumericValue<CSSUnitLength> = 4.pt + variables.pxVar.value(4.px)
         assertEquals("calc(4pt + var(--pxVar, 4px))", typedResultLengthFallback.toString())
+
+        val typedResultLengthMultiplyLeft: CSSNumericValue<CSSUnit.px> = variables.pxVar.value(4.px) * 4
+        assertEquals("calc(var(--pxVar, 4px) * 4)", typedResultLengthMultiplyLeft.toString())
+
+        val typedResultLengthMultiplyRight: CSSNumericValue<CSSUnit.px> = 4 * variables.pxVar.value(4.px)
+        assertEquals("calc(4 * var(--pxVar, 4px))", typedResultLengthMultiplyRight.toString())
     }
 
     @Test