Introduce HTMLElement.computedStyle: CSSStyleDeclaration helper function (#1815)

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

@@ -5,7 +5,6 @@
 
 package org.jetbrains.compose.web.core.tests
 
-import kotlinx.browser.window
 import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.Div
 import org.jetbrains.compose.web.dom.stringPresentation
@@ -156,7 +155,7 @@ class CSSVariableTests {
 
         val el = root.children[1] as HTMLElement
         val boundingRect = el.getBoundingClientRect()
-        assertEquals("4", window.getComputedStyle(el).order)
+        assertEquals("4", el.computedStyle.order)
         assertEquals(150.toDouble(), boundingRect.width)
         assertEquals(170.toDouble(), boundingRect.height)
     }
@@ -184,9 +183,10 @@ class CSSVariableTests {
             })
         }
 
-        root.children[1]?.let { el ->
+
-            assertEquals("rgb(0, 255, 0)", window.getComputedStyle(el).color)
+        (root.children[1] as HTMLElement?)?.let { el ->
-            assertEquals("rgb(0, 128, 0)", window.getComputedStyle(el).backgroundColor)
+            assertEquals("rgb(0, 255, 0)", el.computedStyle.color)
+            assertEquals("rgb(0, 128, 0)", el.computedStyle.backgroundColor)
         }
     }
 

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

@@ -6,7 +6,9 @@ import org.jetbrains.compose.web.css.selectors.*
 import org.jetbrains.compose.web.dom.Div
 import org.jetbrains.compose.web.dom.P
 import org.jetbrains.compose.web.dom.Span
+import org.jetbrains.compose.web.testutils.computedStyle
 import org.jetbrains.compose.web.testutils.runTest
+import org.w3c.dom.HTMLElement
 import org.w3c.dom.HTMLParagraphElement
 import org.w3c.dom.HTMLSpanElement
 import org.w3c.dom.get
@@ -69,12 +71,11 @@ class CssSelectorsTests {
 
         root.children[1]!!.let { el ->
             val pEl = el.firstChild as HTMLParagraphElement
-            assertEquals("rgb(255, 0, 0)", window.getComputedStyle(pEl).color)
+            assertEquals("rgb(255, 0, 0)", pEl.computedStyle.color)
         }
 
-        root.children[2]!!.let { el ->
+        (root.children[2] as HTMLElement).let { el ->
-            val pEl = el
+            assertEquals("rgb(0, 0, 0)", el.computedStyle.color)
-            assertEquals("rgb(0, 0, 0)", window.getComputedStyle(pEl).color)
         }
     }
 
@@ -115,16 +116,15 @@ class CssSelectorsTests {
             val pEl = el.firstChild as HTMLParagraphElement
             val spanInPel = pEl.firstChild as HTMLSpanElement
 
-            assertEquals("rgb(255, 0, 0)", window.getComputedStyle(pEl).color)
+            assertEquals("rgb(255, 0, 0)", pEl.computedStyle.color)
-            assertEquals("rgb(0, 0, 255)", window.getComputedStyle(spanInPel).color)
+            assertEquals("rgb(0, 0, 255)", spanInPel.computedStyle.color)
         }
 
-        root.children[2]!!.let { el ->
+        (root.children[2] as HTMLElement).let { el ->
-            val pEl = el
+            val spanEl = el.firstChild as HTMLSpanElement
-            val spanEl = pEl.firstChild as HTMLSpanElement
 
-            assertEquals("rgb(0, 0, 0)", window.getComputedStyle(pEl).color)
+            assertEquals("rgb(0, 0, 0)", el.computedStyle.color)
-            assertEquals("rgb(0, 0, 0)", window.getComputedStyle(spanEl).color)
+            assertEquals("rgb(0, 0, 0)", spanEl.computedStyle.color)
         }
     }
 
@@ -167,19 +167,18 @@ class CssSelectorsTests {
             val pEl = el.firstChild as HTMLParagraphElement
             val spanInPel = pEl.firstChild as HTMLSpanElement
 
-            assertEquals("rgb(255, 0, 0)", window.getComputedStyle(pEl).color)
+            assertEquals("rgb(255, 0, 0)", pEl.computedStyle.color)
-            assertEquals("rgb(0, 0, 255)", window.getComputedStyle(spanInPel).color)
+            assertEquals("rgb(0, 0, 255)", spanInPel.computedStyle.color)
 
 
             val spanInClsEl = el.children[1] as HTMLSpanElement
-            assertEquals("rgb(100, 100, 200)", window.getComputedStyle(spanInClsEl).color)
+            assertEquals("rgb(100, 100, 200)", spanInClsEl.computedStyle.color)
         }
 
-        root.children[2]!!.let { el ->
+        (root.children[2] as HTMLParagraphElement).let { el ->
-            val pEl = el
+            val spanEl = el.firstChild as HTMLSpanElement
-            val spanEl = pEl.firstChild as HTMLSpanElement
 
-            assertEquals("rgb(0, 0, 0)", window.getComputedStyle(pEl).color)
+            assertEquals("rgb(0, 0, 0)", el.computedStyle.color)
             assertEquals("rgb(0, 0, 0)", window.getComputedStyle(spanEl).color)
         }
     }

web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt

@@ -5,7 +5,6 @@
 
 package org.jetbrains.compose.web.core.tests.css
 
-import kotlinx.browser.window
 import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.Div
 import kotlin.test.Test
@@ -24,8 +23,8 @@ class CSSBackgroundTests {
             }})
         }
 
-        assertEquals("rgb(0, 128, 0)", window.getComputedStyle(nextChild()).backgroundColor)
+        assertEquals("rgb(0, 128, 0)", nextChild().computedStyle.backgroundColor)
-        assertEquals("rgba(0, 129, 0, 0.2)", window.getComputedStyle(nextChild()).backgroundColor)
+        assertEquals("rgba(0, 129, 0, 0.2)", nextChild().computedStyle.backgroundColor)
     }
 
     @Test
@@ -42,9 +41,9 @@ class CSSBackgroundTests {
             }})
         }
 
-        assertEquals("scroll", window.getComputedStyle(nextChild()).backgroundAttachment)
+        assertEquals("scroll", nextChild().computedStyle.backgroundAttachment)
-        assertEquals("fixed", window.getComputedStyle(nextChild()).backgroundAttachment)
+        assertEquals("fixed", nextChild().computedStyle.backgroundAttachment)
-        assertEquals("local", window.getComputedStyle(nextChild()).backgroundAttachment)
+        assertEquals("local", nextChild().computedStyle.backgroundAttachment)
     }
 
     @Test
@@ -61,9 +60,9 @@ class CSSBackgroundTests {
             }})
         }
 
-        assertEquals("url(\"https://localhost:3333/media/examples/lizard.png\")", window.getComputedStyle(nextChild()).backgroundImage)
+        assertEquals("url(\"https://localhost:3333/media/examples/lizard.png\")", nextChild().computedStyle.backgroundImage)
-        assertEquals("url(\"https://localhost:3333/media/examples/lizard.png\"), url(\"https://localhost:3333/media/examples/star.png\")", window.getComputedStyle(nextChild()).backgroundImage)
+        assertEquals("url(\"https://localhost:3333/media/examples/lizard.png\"), url(\"https://localhost:3333/media/examples/star.png\")", nextChild().computedStyle.backgroundImage)
-        assertEquals("linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5))", window.getComputedStyle(nextChild()).backgroundImage)
+        assertEquals("linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5))", nextChild().computedStyle.backgroundImage)
     }
 
     @Test
@@ -83,10 +82,10 @@ class CSSBackgroundTests {
             }})
         }
 
-        assertEquals("50% 0%", window.getComputedStyle(nextChild()).backgroundPosition)
+        assertEquals("50% 0%", nextChild().computedStyle.backgroundPosition)
-        assertEquals("0% 50%", window.getComputedStyle(nextChild()).backgroundPosition)
+        assertEquals("0% 50%", nextChild().computedStyle.backgroundPosition)
-        assertEquals("50% 50%", window.getComputedStyle(nextChild()).backgroundPosition)
+        assertEquals("50% 50%", nextChild().computedStyle.backgroundPosition)
-        assertEquals("25% 75%", window.getComputedStyle(nextChild()).backgroundPosition)
+        assertEquals("25% 75%", nextChild().computedStyle.backgroundPosition)
     }
 
     @Test
@@ -97,7 +96,7 @@ class CSSBackgroundTests {
             }})
         }
 
-        assertEquals("space repeat", window.getComputedStyle(nextChild()).backgroundRepeat)
+        assertEquals("space repeat", nextChild().computedStyle.backgroundRepeat)
     }
 
 
@@ -116,9 +115,9 @@ class CSSBackgroundTests {
         }
 
 
-        assertEquals("border-box", window.getComputedStyle(nextChild()).backgroundClip)
+        assertEquals("border-box", nextChild().computedStyle.backgroundClip)
-        assertEquals("padding-box", window.getComputedStyle(nextChild()).backgroundClip)
+        assertEquals("padding-box", nextChild().computedStyle.backgroundClip)
-        assertEquals("content-box", window.getComputedStyle(nextChild()).backgroundClip)
+        assertEquals("content-box", nextChild().computedStyle.backgroundClip)
     }
 
     @Test
@@ -136,9 +135,9 @@ class CSSBackgroundTests {
         }
 
 
-        assertEquals("border-box", window.getComputedStyle(nextChild()).backgroundOrigin)
+        assertEquals("border-box", nextChild().computedStyle.backgroundOrigin)
-        assertEquals("padding-box", window.getComputedStyle(nextChild()).backgroundOrigin)
+        assertEquals("padding-box", nextChild().computedStyle.backgroundOrigin)
-        assertEquals("content-box", window.getComputedStyle(nextChild()).backgroundOrigin)
+        assertEquals("content-box", nextChild().computedStyle.backgroundOrigin)
     }
 
 
@@ -159,10 +158,10 @@ class CSSBackgroundTests {
             }})
         }
 
-        assertEquals("contain", window.getComputedStyle(nextChild()).backgroundSize)
+        assertEquals("contain", nextChild().computedStyle.backgroundSize)
-        assertEquals("cover", window.getComputedStyle(nextChild()).backgroundSize)
+        assertEquals("cover", nextChild().computedStyle.backgroundSize)
-        assertEquals("50%", window.getComputedStyle(nextChild()).backgroundSize)
+        assertEquals("50%", nextChild().computedStyle.backgroundSize)
-        assertEquals("auto 50px", window.getComputedStyle(nextChild()).backgroundSize)
+        assertEquals("auto 50px", nextChild().computedStyle.backgroundSize)
     }
 
     @Test
@@ -179,10 +178,14 @@ class CSSBackgroundTests {
             }})
         }
 
-        assertEquals("rgb(0, 128, 0)", window.getComputedStyle(nextChild()).backgroundColor)
+        assertEquals("rgb(0, 128, 0)", nextChild().computedStyle.backgroundColor)
-        assertEquals("content-box", window.getComputedStyle(nextChild()).backgroundOrigin)
+
-        assertEquals("radial-gradient(rgb(220, 20, 60), rgb(135, 206, 235))", window.getComputedStyle(currentChild()).backgroundImage)
+        with(nextChild().computedStyle) {
-        assertEquals("no-repeat", window.getComputedStyle(nextChild()).backgroundRepeat)
+            assertEquals("content-box", backgroundOrigin)
+            assertEquals("radial-gradient(rgb(220, 20, 60), rgb(135, 206, 235))", backgroundImage)
+        }
+
+        assertEquals("no-repeat", nextChild().computedStyle.backgroundRepeat)
     }
 
 }

web/core/src/jsTest/kotlin/css/CSSListStyleTests.kt

@@ -101,8 +101,10 @@ class CSSListStyleTests {
             })
         }
 
-        assertEquals("inside", (nextChild()).style.listStylePosition)
+        nextChild().style.apply {
-        assertEquals("georgian", (currentChild()).style.listStyleType)
+            assertEquals("inside", listStylePosition)
+            assertEquals("georgian", listStyleType)
+        }
     }
 
 }

web/core/src/jsTest/kotlin/css/CSSMarginTests.kt

@@ -5,7 +5,6 @@
 
 package org.jetbrains.compose.web.core.tests.css
 
-import kotlinx.browser.window
 import org.jetbrains.compose.web.testutils.*
 import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.Div
@@ -75,7 +74,7 @@ class CSSMarginTests {
             })
         }
 
-        val el = window.getComputedStyle(nextChild())
+        val el = nextChild().computedStyle
 
         assertEquals("4px", el.marginTop, "marginTop")
         assertEquals("4px", el.marginRight, "marginRight")
@@ -93,7 +92,7 @@ class CSSMarginTests {
             })
         }
 
-        val el = window.getComputedStyle(nextChild())
+        val el = nextChild().computedStyle
 
         assertEquals("4px", el.marginTop, "marginTop")
         assertEquals("6px", el.marginRight, "marginRight")
@@ -111,7 +110,7 @@ class CSSMarginTests {
             })
         }
 
-        val el = window.getComputedStyle(nextChild())
+        val el = nextChild().computedStyle
 
         assertEquals("4px", el.marginTop, "marginTop")
         assertEquals("6px", el.marginRight, "marginRight")
@@ -129,7 +128,7 @@ class CSSMarginTests {
             })
         }
 
-        val el = window.getComputedStyle(nextChild())
+        val el = nextChild().computedStyle
 
         assertEquals("4px", el.marginTop, "marginTop")
         assertEquals("6px", el.marginRight, "marginRight")

web/core/src/jsTest/kotlin/css/CSSPaddingTests.kt

@@ -5,10 +5,17 @@
 
 package org.jetbrains.compose.web.core.tests.css
 
-import kotlinx.browser.window
+import org.jetbrains.compose.web.css.padding
-import org.jetbrains.compose.web.testutils.*
+import org.jetbrains.compose.web.css.paddingBottom
-import org.jetbrains.compose.web.css.*
+import org.jetbrains.compose.web.css.paddingLeft
+import org.jetbrains.compose.web.css.paddingRight
+import org.jetbrains.compose.web.css.paddingTop
+import org.jetbrains.compose.web.css.percent
+import org.jetbrains.compose.web.css.px
+import org.jetbrains.compose.web.css.vw
 import org.jetbrains.compose.web.dom.Div
+import org.jetbrains.compose.web.testutils.computedStyle
+import org.jetbrains.compose.web.testutils.runTest
 import kotlin.test.Test
 import kotlin.test.assertEquals
 
@@ -75,7 +82,7 @@ class CSSPaddingTests {
             })
         }
 
-        val el = window.getComputedStyle(nextChild())
+        val el = nextChild().computedStyle
 
         assertEquals("4px", el.paddingTop, "paddingTop")
         assertEquals("4px", el.paddingRight, "paddingRight")
@@ -93,7 +100,7 @@ class CSSPaddingTests {
             })
         }
 
-        val el = window.getComputedStyle(nextChild())
+        val el = nextChild().computedStyle
 
         assertEquals("4px", el.paddingTop, "paddingTop")
         assertEquals("6px", el.paddingRight, "paddingRight")
@@ -111,7 +118,7 @@ class CSSPaddingTests {
             })
         }
 
-        val el = window.getComputedStyle(nextChild())
+        val el = nextChild().computedStyle
 
         assertEquals("4px", el.paddingTop, "paddingTop")
         assertEquals("6px", el.paddingRight, "paddingRight")
@@ -129,7 +136,7 @@ class CSSPaddingTests {
             })
         }
 
-        val el = window.getComputedStyle(nextChild())
+        val el = nextChild().computedStyle
 
         assertEquals("4px", el.paddingTop, "paddingTop")
         assertEquals("6px", el.paddingRight, "paddingRight")

web/core/src/jsTest/kotlin/css/GridTests.kt

@@ -42,8 +42,11 @@ class GridColumnTests {
         }
 
         assertEquals("main-start", nextChild().style.asDynamic().gridColumnStart)
-        assertEquals("main-start", nextChild().style.asDynamic().gridColumnStart)
+
-        assertEquals("main-end", currentChild().style.asDynamic().gridColumnEnd)
+        nextChild().style.apply {
+            assertEquals("main-start", asDynamic().gridColumnStart)
+            assertEquals("main-end", asDynamic().gridColumnEnd)
+        }
     }
 
 

web/core/src/jsTest/kotlin/elements/AttributesTests.kt

@@ -491,7 +491,8 @@ class AttributesTests {
             }
         }
 
-        with(nextChild()) {
+        val child = nextChild()
+        with(child) {
             val attrs = getAttributeNames().toList()
             assertEquals(2, attrs.size)
             assertTrue(attrs.containsAll(listOf("style", "class",)))
@@ -505,7 +506,7 @@ class AttributesTests {
         hasValue = true
         waitForRecompositionComplete()
 
-        with(currentChild()) {
+        with(child) {
             val attrs = getAttributeNames().toList()
             assertEquals(3, attrs.size)
             assertTrue(attrs.containsAll(listOf("style", "class", "value")))

web/test-utils/src/jsMain/kotlin/org/jetbrains/compose/web/testutils/TestUtils.kt

@@ -13,7 +13,7 @@ import org.w3c.dom.HTMLElement
 import org.w3c.dom.MutationObserver
 import org.w3c.dom.MutationObserverInit
 import org.w3c.dom.asList
-import org.w3c.dom.get
+import org.w3c.dom.css.CSSStyleDeclaration
 import kotlin.coroutines.Continuation
 import kotlin.coroutines.resume
 import kotlin.coroutines.suspendCoroutine
@@ -68,24 +68,11 @@ class TestScope : CoroutineScope by MainScope() {
      * @return a reference to the next child element of the root.
      * Subsequent calls will return next child reference every time.
      */
-    fun nextChild() = childrenIterator.next() as HTMLElement
+    fun nextChild() = nextChild<HTMLElement>()
 
     @Suppress("UNCHECKED_CAST")
     fun <T> nextChild() = childrenIterator.next() as T
 
-    /**
-     * @return a reference to current child.
-     * Calling this subsequently returns the same reference every time.
-     */
-    fun currentChild() = root.children[childrenIterator.previousIndex()] as HTMLElement
-
-    /**
-     * Suspends until [root] observes any change to its html.
-     */
-    suspend fun waitForChanges() {
-        waitForChanges(root)
-    }
-
     /**
      * Suspends until element with [elementId] observes any change to its html.
      */
@@ -96,7 +83,7 @@ class TestScope : CoroutineScope by MainScope() {
     /**
      * Suspends until [element] observes any change to its html.
      */
-    suspend fun waitForChanges(element: HTMLElement) {
+    suspend fun waitForChanges(element: HTMLElement = root) {
         suspendCoroutine<Unit> { continuation ->
             val observer = MutationObserver { _, observer ->
                 continuation.resume(Unit)
@@ -178,3 +165,6 @@ private class TestMonotonicClockImpl(
         }
     }
 }
+
+val HTMLElement.computedStyle: CSSStyleDeclaration
+    get() = window.getComputedStyle(this)