Fix HTML transition tests for Chrome 140 (#5426)

This PR fixes TransitionTests for Chrome 140

## Testing
 in html prpoject `./gradlew  jsTest`

## Release Notes
N/A

Author: Schahen

html/buildSrc/src/main/kotlin/SeleniumDriverPlugin.kt

@@ -4,8 +4,9 @@ import org.gradle.nativeplatform.platform.internal.DefaultNativePlatform
 import java.io.File
 import java.net.URL
 
-private val CHROME_DRIVER_VERSION = "114.0.5735.90"
-private val GECKO_DRIVER_VERSION = "0.31.0"
+// https://googlechromelabs.github.io/chrome-for-testing/
+private val CHROME_DRIVER_VERSION = "140.0.7339.82"
+private val GECKO_DRIVER_VERSION = "0.36.0"
 
 private fun download(url: String, file: File) {
     println("downloading ${url} to ${file}")
@@ -42,17 +43,18 @@ private fun resolvePath(id: String): String {
     val arch = DefaultNativePlatform.getCurrentArchitecture()
 
     val geckoRepo = "https://github.com/mozilla/geckodriver/releases/download/v$GECKO_DRIVER_VERSION/"
-    val chromeRepo = "https://chromedriver.storage.googleapis.com/$CHROME_DRIVER_VERSION/"
+    val chromeRepo = "https://storage.googleapis.com/chrome-for-testing-public/$CHROME_DRIVER_VERSION/"
 
     return when (id) {
+        //https://googlechromelabs.github.io/chrome-for-testing/
         "chrome" -> chromeRepo + when {
-            os.isWindows -> "chromedriver_win32.zip"
+            os.isWindows -> "win32/chromedriver-win32.zip"
             os.isMacOsX -> if (arch.isArm) {
-                "chromedriver_mac64_m1.zip"
+                "mac-arm64/chromedriver-mac-arm64.zip"
             } else {
-                "chromedriver_mac64.zip"
+                "mac-x64/chromedriver-mac-x64.zip"
             }
-            else -> "chromedriver_linux64.zip"
+            else -> "linux64/chromedriver-linux64.zip"
         }
         "gecko" -> geckoRepo + when {
             os.isWindows -> "geckodriver-v$GECKO_DRIVER_VERSION-win64.zip"

html/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSUnits.kt

@@ -2,6 +2,8 @@
 
 package org.jetbrains.compose.web.css
 
+// External declarations for CSS OM - https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model
+
 external interface CSSNumericValue<T : CSSUnit> : StylePropertyValue, CSSVariableValueAs<CSSNumericValue<T>>
 
 external interface CSSSizeValue<T : CSSUnit> : CSSNumericValue<T> {

html/core/src/jsTest/kotlin/css/TransitionsTests.kt

@@ -14,18 +14,34 @@ import org.jetbrains.compose.web.css.timingFunction
 import org.jetbrains.compose.web.css.transitions
 import org.jetbrains.compose.web.dom.Div
 import org.jetbrains.compose.web.testutils.runTest
+import org.w3c.dom.css.CSSStyleDeclaration
 import kotlin.test.Test
 import kotlin.test.assertEquals
 
 @ExperimentalComposeWebApi
 class TransitionsTests {
+
+    private fun CSSStyleDeclaration.computedTransition(): String {
+        val cssDelimiter = Regex(",\\s*")
+
+        // setting transition property affects subProperties, but we should check for them separately
+        val props = transitionProperty.split(cssDelimiter)
+        val durations = transitionDuration.split(cssDelimiter)
+        val timings = transitionTimingFunction.split(cssDelimiter)
+        val delays = transitionDelay.split(cssDelimiter)
+
+        return props.indices.joinToString(", ") { i ->
+            "${props[i]} ${durations[i]} ${timings[i]} ${delays[i]}"
+        }
+    }
+
 	@Test
 	fun duration() = runTest {
 		composition {
 			Div({ style { transitions { "width" { duration(1.s) } }}})
 		}
 
-		assertEquals("width 1s ease 0s", nextChild().style.transition)
+		assertEquals("width 1s ease 0s", nextChild().style.computedTransition())
 	}
 
 	@Test
@@ -34,7 +50,7 @@ class TransitionsTests {
 			Div({ style { transitions { "width" { duration(1.s) }; "height" { duration(2.s) } }}})
 		}
 
-		assertEquals("width 1s ease 0s, height 2s ease 0s", nextChild().style.transition)
+		assertEquals("width 1s ease 0s, height 2s ease 0s", nextChild().style.computedTransition())
 	}
 
 	@Test
@@ -43,7 +59,7 @@ class TransitionsTests {
 			Div({ style { transitions { all { duration(1.s) } }}})
 		}
 
-		assertEquals("all 1s ease 0s", nextChild().style.transition)
+		assertEquals("all 1s ease 0s", nextChild().style.computedTransition())
 	}
 
 	@Test
@@ -52,7 +68,7 @@ class TransitionsTests {
 			Div({ style { transitions { "width" { duration(1.s); timingFunction(AnimationTimingFunction.EaseInOut) }}}})
 		}
 
-		assertEquals("width 1s ease-in-out 0s", nextChild().style.transition)
+		assertEquals("width 1s ease-in-out 0s", nextChild().style.computedTransition())
 	}
 
 	@Test
@@ -61,7 +77,7 @@ class TransitionsTests {
 			Div({ style { transitions { "width" { duration(1.s); delay(2.s) }}}})
 		}
 
-		assertEquals("width 1s ease 2s", nextChild().style.transition)
+		assertEquals("width 1s ease 2s", nextChild().style.computedTransition())
 	}
 
 	@Test
@@ -73,8 +89,8 @@ class TransitionsTests {
 			Div({ style { transitions { defaultDuration(1.s); myList { duration(2.s) }}}})
 		}
 
-		assertEquals("width 1s ease 0s, height 1s ease 0s", nextChild().style.transition)
-		assertEquals("width 0s ease 0s, height 1s ease 0s, width 2s ease 0s", nextChild().style.transition)
-		assertEquals("width 2s ease 0s, height 2s ease 0s", nextChild().style.transition)
+		assertEquals("width 1s ease 0s, height 1s ease 0s", nextChild().style.computedTransition())
+		assertEquals("width 0s ease 0s, height 1s ease 0s, width 2s ease 0s", nextChild().style.computedTransition())
+		assertEquals("width 2s ease 0s, height 2s ease 0s", nextChild().style.computedTransition())
 	}
 }