Introduce helper function to the test scope to iterate through root children

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

@@ -8,9 +8,7 @@ import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.MainScope
 import kotlinx.coroutines.promise
 import kotlinx.dom.clear
-import org.w3c.dom.HTMLElement
-import org.w3c.dom.MutationObserver
-import org.w3c.dom.MutationObserverInit
+import org.w3c.dom.*
 import kotlin.coroutines.resume
 import kotlin.coroutines.suspendCoroutine
 
@@ -30,6 +28,11 @@ class TestScope : CoroutineScope by testScope {
         }
     }
 
+
+    private val childrenIterator = root.children.asList().listIterator()
+    fun nextChild() = childrenIterator.next() as HTMLElement
+    fun currentChild() = root.children[childrenIterator.previousIndex()] as HTMLElement
+
     suspend fun waitChanges() {
         waitForChanges(root)
     }

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

@@ -26,8 +26,8 @@ class CSSBackgroundTests {
             }})
         }
 
-        assertEquals("rgb(0, 128, 0)", window.getComputedStyle(root.children[0] as HTMLElement).backgroundColor)
-        assertEquals("rgba(0, 129, 0, 0.2)", window.getComputedStyle(root.children[1] as HTMLElement).backgroundColor)
+        assertEquals("rgb(0, 128, 0)", window.getComputedStyle(nextChild()).backgroundColor)
+        assertEquals("rgba(0, 129, 0, 0.2)", window.getComputedStyle(nextChild()).backgroundColor)
     }
 
     @Test
@@ -44,9 +44,9 @@ class CSSBackgroundTests {
             }})
         }
 
-        assertEquals("scroll", window.getComputedStyle(root.children[0] as HTMLElement).backgroundAttachment)
-        assertEquals("fixed", window.getComputedStyle(root.children[1] as HTMLElement).backgroundAttachment)
-        assertEquals("local", window.getComputedStyle(root.children[2] as HTMLElement).backgroundAttachment)
+        assertEquals("scroll", window.getComputedStyle(nextChild()).backgroundAttachment)
+        assertEquals("fixed", window.getComputedStyle(nextChild()).backgroundAttachment)
+        assertEquals("local", window.getComputedStyle(nextChild()).backgroundAttachment)
     }
 
     @Test
@@ -63,9 +63,9 @@ class CSSBackgroundTests {
             }})
         }
 
-        assertEquals("url(\"https://localhost:3333/media/examples/lizard.png\")", window.getComputedStyle(root.children[0] as HTMLElement).backgroundImage)
-        assertEquals("url(\"https://localhost:3333/media/examples/lizard.png\"), url(\"https://localhost:3333/media/examples/star.png\")", window.getComputedStyle(root.children[1] as HTMLElement).backgroundImage)
-        assertEquals("linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5))", window.getComputedStyle(root.children[2] as HTMLElement).backgroundImage)
+        assertEquals("url(\"https://localhost:3333/media/examples/lizard.png\")", window.getComputedStyle(nextChild()).backgroundImage)
+        assertEquals("url(\"https://localhost:3333/media/examples/lizard.png\"), url(\"https://localhost:3333/media/examples/star.png\")", window.getComputedStyle(nextChild()).backgroundImage)
+        assertEquals("linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5))", window.getComputedStyle(nextChild()).backgroundImage)
     }
 
     @Test
@@ -85,10 +85,10 @@ class CSSBackgroundTests {
             }})
         }
 
-        assertEquals("50% 0%", window.getComputedStyle(root.children[0] as HTMLElement).backgroundPosition)
-        assertEquals("0% 50%", window.getComputedStyle(root.children[1] as HTMLElement).backgroundPosition)
-        assertEquals("50% 50%", window.getComputedStyle(root.children[2] as HTMLElement).backgroundPosition)
-        assertEquals("25% 75%", window.getComputedStyle(root.children[3] as HTMLElement).backgroundPosition)
+        assertEquals("50% 0%", window.getComputedStyle(nextChild()).backgroundPosition)
+        assertEquals("0% 50%", window.getComputedStyle(nextChild()).backgroundPosition)
+        assertEquals("50% 50%", window.getComputedStyle(nextChild()).backgroundPosition)
+        assertEquals("25% 75%", window.getComputedStyle(nextChild()).backgroundPosition)
     }
 
     @Test
@@ -99,7 +99,7 @@ class CSSBackgroundTests {
             }})
         }
 
-        assertEquals("space repeat", window.getComputedStyle(root.children[0] as HTMLElement).backgroundRepeat)
+        assertEquals("space repeat", window.getComputedStyle(nextChild()).backgroundRepeat)
     }
 
 
@@ -118,9 +118,9 @@ class CSSBackgroundTests {
         }
 
 
-        assertEquals("border-box", window.getComputedStyle(root.children[0] as HTMLElement).backgroundClip)
-        assertEquals("padding-box", window.getComputedStyle(root.children[1] as HTMLElement).backgroundClip)
-        assertEquals("content-box", window.getComputedStyle(root.children[2] as HTMLElement).backgroundClip)
+        assertEquals("border-box", window.getComputedStyle(nextChild()).backgroundClip)
+        assertEquals("padding-box", window.getComputedStyle(nextChild()).backgroundClip)
+        assertEquals("content-box", window.getComputedStyle(nextChild()).backgroundClip)
     }
 
     @Test
@@ -138,9 +138,9 @@ class CSSBackgroundTests {
         }
 
 
-        assertEquals("border-box", window.getComputedStyle(root.children[0] as HTMLElement).backgroundOrigin)
-        assertEquals("padding-box", window.getComputedStyle(root.children[1] as HTMLElement).backgroundOrigin)
-        assertEquals("content-box", window.getComputedStyle(root.children[2] as HTMLElement).backgroundOrigin)
+        assertEquals("border-box", window.getComputedStyle(nextChild()).backgroundOrigin)
+        assertEquals("padding-box", window.getComputedStyle(nextChild()).backgroundOrigin)
+        assertEquals("content-box", window.getComputedStyle(nextChild()).backgroundOrigin)
     }
 
 
@@ -161,10 +161,10 @@ class CSSBackgroundTests {
             }})
         }
 
-        assertEquals("contain", window.getComputedStyle(root.children[0] as HTMLElement).backgroundSize)
-        assertEquals("cover", window.getComputedStyle(root.children[1] as HTMLElement).backgroundSize)
-        assertEquals("50%", window.getComputedStyle(root.children[2] as HTMLElement).backgroundSize)
-        assertEquals("auto 50px", window.getComputedStyle(root.children[3] as HTMLElement).backgroundSize)
+        assertEquals("contain", window.getComputedStyle(nextChild()).backgroundSize)
+        assertEquals("cover", window.getComputedStyle(nextChild()).backgroundSize)
+        assertEquals("50%", window.getComputedStyle(nextChild()).backgroundSize)
+        assertEquals("auto 50px", window.getComputedStyle(nextChild()).backgroundSize)
     }
 
     @Test
@@ -181,10 +181,10 @@ class CSSBackgroundTests {
             }})
         }
 
-        assertEquals("rgb(0, 128, 0)", window.getComputedStyle(root.children[0] as HTMLElement).backgroundColor)
-        assertEquals("content-box", window.getComputedStyle(root.children[1] as HTMLElement).backgroundOrigin)
-        assertEquals("radial-gradient(rgb(220, 20, 60), rgb(135, 206, 235))", window.getComputedStyle(root.children[1] as HTMLElement).backgroundImage)
-        assertEquals("no-repeat", window.getComputedStyle(root.children[2] as HTMLElement).backgroundRepeat)
+        assertEquals("rgb(0, 128, 0)", window.getComputedStyle(nextChild()).backgroundColor)
+        assertEquals("content-box", window.getComputedStyle(nextChild()).backgroundOrigin)
+        assertEquals("radial-gradient(rgb(220, 20, 60), rgb(135, 206, 235))", window.getComputedStyle(currentChild()).backgroundImage)
+        assertEquals("no-repeat", window.getComputedStyle(nextChild()).backgroundRepeat)
     }
 
 }

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

@@ -5,12 +5,9 @@
 
 package org.jetbrains.compose.web.core.tests.css
 
-import kotlinx.browser.window
 import org.jetbrains.compose.web.core.tests.runTest
 import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.Div
-import org.w3c.dom.HTMLElement
-import org.w3c.dom.get
 import kotlin.test.Test
 import kotlin.test.assertEquals
 
@@ -23,8 +20,8 @@ class CSSBorderTests {
             Div({ style { border(3.px, color = Color("green")) } })
         }
 
-        assertEquals("1px solid red", (root.children[0] as HTMLElement).style.border)
-        (root.children[1] as HTMLElement).let { el ->
+        assertEquals("1px solid red", (nextChild()).style.border)
+        (nextChild()).let { el ->
             assertEquals("green", el.style.getPropertyValue("border-color"))
             assertEquals("3px", el.style.getPropertyValue("border-width"))
         }
@@ -36,7 +33,7 @@ class CSSBorderTests {
             Div({ style { border(3.px, LineStyle.Dotted, Color("green")) } })
         }
 
-        assertEquals("3px dotted green", (root.children[0] as HTMLElement).style.border)
+        assertEquals("3px dotted green", (nextChild()).style.border)
     }
 
     @Test
@@ -48,10 +45,10 @@ class CSSBorderTests {
             Div({ style { borderRadius(3.px, 5.px, 4.px, 1.px) } })
         }
 
-        assertEquals("3px", (root.children[0] as HTMLElement).style.borderRadius)
-        assertEquals("3px 5px", (root.children[1] as HTMLElement).style.borderRadius)
-        assertEquals("3px 5px 4px", (root.children[2] as HTMLElement).style.borderRadius)
-        assertEquals("3px 5px 4px 1px", (root.children[3] as HTMLElement).style.borderRadius)
+        assertEquals("3px", (nextChild()).style.borderRadius)
+        assertEquals("3px 5px", (nextChild()).style.borderRadius)
+        assertEquals("3px 5px 4px", (nextChild()).style.borderRadius)
+        assertEquals("3px 5px 4px 1px", (nextChild()).style.borderRadius)
     }
 
 
@@ -64,9 +61,9 @@ class CSSBorderTests {
             Div({ style { borderWidth(3.px, 5.px, 4.px, 2.px) } })
         }
 
-        assertEquals("2px", (root.children[0] as HTMLElement).style.borderWidth)
-        assertEquals("3px 7px", (root.children[1] as HTMLElement).style.borderWidth)
-        assertEquals("3px 5px 4px", (root.children[2] as HTMLElement).style.borderWidth)
-        assertEquals("3px 5px 4px 2px", (root.children[3] as HTMLElement).style.borderWidth)
+        assertEquals("2px", (nextChild()).style.borderWidth)
+        assertEquals("3px 7px", (nextChild()).style.borderWidth)
+        assertEquals("3px 5px 4px", (nextChild()).style.borderWidth)
+        assertEquals("3px 5px 4px 2px", (nextChild()).style.borderWidth)
     }
 }

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

@@ -29,7 +29,7 @@ class CSSBoxTests {
             )
         }
 
-        assertEquals("100px", (root.children[0] as HTMLElement).style.width)
+        assertEquals("100px", (nextChild()).style.width)
     }
 
     @Test
@@ -44,7 +44,7 @@ class CSSBoxTests {
             )
         }
 
-        assertEquals("90px", (root.children[0] as HTMLElement).style.height)
+        assertEquals("90px", (nextChild()).style.height)
     }
 
     @Test
@@ -66,8 +66,8 @@ class CSSBoxTests {
             )
         }
 
-        assertEquals("border-box", (root.children[0] as HTMLElement).style.boxSizing)
-        assertEquals("content-box", (root.children[1] as HTMLElement).style.boxSizing)
+        assertEquals("border-box", (nextChild()).style.boxSizing)
+        assertEquals("content-box", (nextChild()).style.boxSizing)
     }
 
     @Test
@@ -110,10 +110,10 @@ class CSSBoxTests {
             )
         }
 
-        assertEquals("thin", (root.children[0] as HTMLElement).style.outlineWidth)
-        assertEquals("medium", (root.children[1] as HTMLElement).style.outlineWidth)
-        assertEquals("thick", (root.children[2] as HTMLElement).style.outlineWidth)
-        assertEquals("8px", (root.children[3] as HTMLElement).style.outlineWidth)
+        assertEquals("thin", (nextChild()).style.outlineWidth)
+        assertEquals("medium", (nextChild()).style.outlineWidth)
+        assertEquals("thick", (nextChild()).style.outlineWidth)
+        assertEquals("8px", (nextChild()).style.outlineWidth)
         assertEquals("0.1em", (root.children[4] as HTMLElement).style.outlineWidth)
     }
 
@@ -132,8 +132,8 @@ class CSSBoxTests {
             })
         }
 
-        assertEquals("red", (root.children[0] as HTMLElement).style.outlineColor)
-        assertEquals("rgb(50, 161, 206)", (root.children[1] as HTMLElement).style.outlineColor)
+        assertEquals("red", (nextChild()).style.outlineColor)
+        assertEquals("rgb(50, 161, 206)", (nextChild()).style.outlineColor)
     }
 
     @Test
@@ -149,10 +149,10 @@ class CSSBoxTests {
             Div({ style { outlineStyle("inset") } })
         }
 
-        assertEquals("dotted", (root.children[0] as HTMLElement).style.outlineStyle)
-        assertEquals("dashed", (root.children[1] as HTMLElement).style.outlineStyle)
-        assertEquals("solid", (root.children[2] as HTMLElement).style.outlineStyle)
-        assertEquals("double", (root.children[3] as HTMLElement).style.outlineStyle)
+        assertEquals("dotted", (nextChild()).style.outlineStyle)
+        assertEquals("dashed", (nextChild()).style.outlineStyle)
+        assertEquals("solid", (nextChild()).style.outlineStyle)
+        assertEquals("double", (nextChild()).style.outlineStyle)
         assertEquals("groove", (root.children[4] as HTMLElement).style.outlineStyle)
         assertEquals("ridge", (root.children[5] as HTMLElement).style.outlineStyle)
         assertEquals("outset", (root.children[6] as HTMLElement).style.outlineStyle)
@@ -165,7 +165,7 @@ class CSSBoxTests {
             Div({ style { outline("dotted") } })
         }
 
-        assertEquals("dotted", (root.children[0] as HTMLElement).style.outlineStyle)
+        assertEquals("dotted", (nextChild()).style.outlineStyle)
     }
 
     @Test
@@ -176,17 +176,17 @@ class CSSBoxTests {
             Div({ style { outline("ridge", 3.px) } })
         }
 
-        (root.children[0] as HTMLElement).let {
+        (nextChild()).let {
             assertEquals("rgb(255, 102, 102)", it.style.outlineColor)
             assertEquals("dashed", it.style.outlineStyle)
         }
 
-        (root.children[1] as HTMLElement).let {
+        (nextChild()).let {
             assertEquals("inset", it.style.outlineStyle)
             assertEquals("thick", it.style.outlineWidth)
         }
 
-        (root.children[2] as HTMLElement).let {
+        (nextChild()).let {
             assertEquals("ridge", it.style.outlineStyle)
             assertEquals("3px", it.style.outlineWidth)
         }
@@ -201,10 +201,10 @@ class CSSBoxTests {
             Div({ style { outline("yellow", "inset", 8.px) } })
         }
 
-        assertEquals("rgb(0, 20, 100) dashed thick", (root.children[0] as HTMLElement).style.outline)
-        assertEquals("rgb(0, 100, 20) double 4px", (root.children[1] as HTMLElement).style.outline)
-        assertEquals("red outset thin", (root.children[2] as HTMLElement).style.outline)
-        assertEquals("yellow inset 8px", (root.children[3] as HTMLElement).style.outline)
+        assertEquals("rgb(0, 20, 100) dashed thick", (nextChild()).style.outline)
+        assertEquals("rgb(0, 100, 20) double 4px", (nextChild()).style.outline)
+        assertEquals("red outset thin", (nextChild()).style.outline)
+        assertEquals("yellow inset 8px", (nextChild()).style.outline)
     }
 
     @Test
@@ -216,10 +216,10 @@ class CSSBoxTests {
             Div({ style { minWidth("min-content") } })
         }
 
-        assertEquals("3.5em", (root.children[0] as HTMLElement).style.minWidth)
-        assertEquals("75%", (root.children[1] as HTMLElement).style.minWidth)
-        assertEquals("max-content", (root.children[2] as HTMLElement).style.minWidth)
-        assertEquals("min-content", (root.children[3] as HTMLElement).style.minWidth)
+        assertEquals("3.5em", (nextChild()).style.minWidth)
+        assertEquals("75%", (nextChild()).style.minWidth)
+        assertEquals("max-content", (nextChild()).style.minWidth)
+        assertEquals("min-content", (nextChild()).style.minWidth)
     }
 
     @Test
@@ -231,10 +231,10 @@ class CSSBoxTests {
             Div({ style { maxWidth("min-content") } })
         }
 
-        assertEquals("0.5em", (root.children[0] as HTMLElement).style.maxWidth)
-        assertEquals("10%", (root.children[1] as HTMLElement).style.maxWidth)
-        assertEquals("max-content", (root.children[2] as HTMLElement).style.maxWidth)
-        assertEquals("min-content", (root.children[3] as HTMLElement).style.maxWidth)
+        assertEquals("0.5em", (nextChild()).style.maxWidth)
+        assertEquals("10%", (nextChild()).style.maxWidth)
+        assertEquals("max-content", (nextChild()).style.maxWidth)
+        assertEquals("min-content", (nextChild()).style.maxWidth)
     }
 
     @Test
@@ -246,10 +246,10 @@ class CSSBoxTests {
             Div({ style { minHeight("min-content") } })
         }
 
-        assertEquals("5px", (root.children[0] as HTMLElement).style.minHeight)
-        assertEquals("25%", (root.children[1] as HTMLElement).style.minHeight)
-        assertEquals("max-content", (root.children[2] as HTMLElement).style.minHeight)
-        assertEquals("min-content", (root.children[3] as HTMLElement).style.minHeight)
+        assertEquals("5px", (nextChild()).style.minHeight)
+        assertEquals("25%", (nextChild()).style.minHeight)
+        assertEquals("max-content", (nextChild()).style.minHeight)
+        assertEquals("min-content", (nextChild()).style.minHeight)
     }
 
     @Test
@@ -261,9 +261,9 @@ class CSSBoxTests {
             Div({ style { maxHeight("min-content") } })
         }
 
-        assertEquals("15px", (root.children[0] as HTMLElement).style.maxHeight)
-        assertEquals("35%", (root.children[1] as HTMLElement).style.maxHeight)
-        assertEquals("max-content", (root.children[2] as HTMLElement).style.maxHeight)
-        assertEquals("min-content", (root.children[3] as HTMLElement).style.maxHeight)
+        assertEquals("15px", (nextChild()).style.maxHeight)
+        assertEquals("35%", (nextChild()).style.maxHeight)
+        assertEquals("max-content", (nextChild()).style.maxHeight)
+        assertEquals("min-content", (nextChild()).style.maxHeight)
     }
 }

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

@@ -37,7 +37,7 @@ class CSSDisplayTests {
         enumValues.forEachIndexed { index, displayStyle ->
             assertEquals(
                 displayStyle.value,
-                (root.children[index] as HTMLElement).style.display
+                (nextChild()).style.display
             )
         }
     }

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

@@ -36,8 +36,8 @@ class CSSFlexTests {
             )
         }
 
-        assertEquals("-4", (root.children[0] as HTMLElement).style.order)
-        assertEquals("3", (root.children[1] as HTMLElement).style.order)
+        assertEquals("-4", (nextChild()).style.order)
+        assertEquals("3", (nextChild()).style.order)
     }
 
     @Test
@@ -73,10 +73,10 @@ class CSSFlexTests {
             )
         }
 
-        assertEquals("3", (root.children[0] as HTMLElement).style.flexGrow)
-        assertEquals("2.5", (root.children[1] as HTMLElement).style.flexGrow)
-        assertEquals("100", (root.children[2] as HTMLElement).style.flexGrow)
-        assertEquals("0.6", (root.children[3] as HTMLElement).style.flexGrow)
+        assertEquals("3", (nextChild()).style.flexGrow)
+        assertEquals("2.5", (nextChild()).style.flexGrow)
+        assertEquals("100", (nextChild()).style.flexGrow)
+        assertEquals("0.6", (nextChild()).style.flexGrow)
     }
 
     @Test
@@ -112,10 +112,10 @@ class CSSFlexTests {
             )
         }
 
-        assertEquals("3", (root.children[0] as HTMLElement).style.flexShrink)
-        assertEquals("2.5", (root.children[1] as HTMLElement).style.flexShrink)
-        assertEquals("100", (root.children[2] as HTMLElement).style.flexShrink)
-        assertEquals("0.6", (root.children[3] as HTMLElement).style.flexShrink)
+        assertEquals("3", (nextChild()).style.flexShrink)
+        assertEquals("2.5", (nextChild()).style.flexShrink)
+        assertEquals("100", (nextChild()).style.flexShrink)
+        assertEquals("0.6", (nextChild()).style.flexShrink)
     }
 
     @Test
@@ -300,8 +300,8 @@ class CSSFlexTests {
             })
         }
 
-        assertEquals("10em", (root.children[0] as HTMLElement).style.flexBasis)
-        assertEquals("auto", (root.children[1] as HTMLElement).style.flexBasis)
+        assertEquals("10em", (nextChild()).style.flexBasis)
+        assertEquals("auto", (nextChild()).style.flexBasis)
     }
 
     @Test
@@ -329,10 +329,10 @@ class CSSFlexTests {
             })
         }
 
-        assertEquals("auto", (root.children[0] as HTMLElement).style.flexBasis)
-        assertEquals("initial", (root.children[1] as HTMLElement).style.flexBasis)
-        assertEquals("2", (root.children[2] as HTMLElement).style.flexGrow)
-        assertEquals("10em", (root.children[3] as HTMLElement).style.flexBasis)
+        assertEquals("auto", (nextChild()).style.flexBasis)
+        assertEquals("initial", (nextChild()).style.flexBasis)
+        assertEquals("2", (nextChild()).style.flexGrow)
+        assertEquals("10em", (nextChild()).style.flexBasis)
     }
 
     @Test
@@ -350,12 +350,12 @@ class CSSFlexTests {
             })
         }
 
-        (root.children[0] as HTMLElement).let {
+        (nextChild()).let {
             assertEquals("3", it.style.flexGrow)
             assertEquals("30px", it.style.flexBasis)
         }
 
-        (root.children[1] as HTMLElement).let {
+        (nextChild()).let {
             assertEquals("3", it.style.flexGrow)
             assertEquals("5", it.style.flexShrink)
         }
@@ -371,7 +371,7 @@ class CSSFlexTests {
             })
         }
 
-        (root.children[0] as HTMLElement).let {
+        (nextChild()).let {
             assertEquals("2", it.style.flexGrow)
             assertEquals("3", it.style.flexShrink)
             assertEquals("10%", it.style.flexBasis)

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

@@ -35,9 +35,9 @@ class CSSListStyleTests {
 
         }
 
-        assertEquals("none", (root.children[0] as HTMLElement).style.listStyleImage)
-        assertEquals("url(\"starsolid.gif\")", (root.children[1] as HTMLElement).style.listStyleImage)
-        assertEquals("linear-gradient(to left bottom, red, blue)", (root.children[2] as HTMLElement).style.listStyleImage)
+        assertEquals("none", (nextChild()).style.listStyleImage)
+        assertEquals("url(\"starsolid.gif\")", (nextChild()).style.listStyleImage)
+        assertEquals("linear-gradient(to left bottom, red, blue)", (nextChild()).style.listStyleImage)
     }
 
     @Test
@@ -55,8 +55,8 @@ class CSSListStyleTests {
             })
         }
 
-        assertEquals("inside", (root.children[0] as HTMLElement).style.listStylePosition)
-        assertEquals("outside", (root.children[1] as HTMLElement).style.listStylePosition)
+        assertEquals("inside", (nextChild()).style.listStylePosition)
+        assertEquals("outside", (nextChild()).style.listStylePosition)
     }
 
 
@@ -85,10 +85,10 @@ class CSSListStyleTests {
             })
         }
 
-        assertEquals("armenian", (root.children[0] as HTMLElement).style.listStyleType)
-        assertEquals("disc", (root.children[1] as HTMLElement).style.listStyleType)
-        assertEquals("circle", (root.children[2] as HTMLElement).style.listStyleType)
-        assertEquals("square", (root.children[3] as HTMLElement).style.listStyleType)
+        assertEquals("armenian", (nextChild()).style.listStyleType)
+        assertEquals("disc", (nextChild()).style.listStyleType)
+        assertEquals("circle", (nextChild()).style.listStyleType)
+        assertEquals("square", (nextChild()).style.listStyleType)
     }
 
     @Test
@@ -101,8 +101,8 @@ class CSSListStyleTests {
             })
         }
 
-        assertEquals("inside", (root.children[0] as HTMLElement).style.listStylePosition)
-        assertEquals("georgian", (root.children[0] as HTMLElement).style.listStyleType)
+        assertEquals("inside", (nextChild()).style.listStylePosition)
+        assertEquals("georgian", (currentChild()).style.listStyleType)
     }
 
 }

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

@@ -25,7 +25,7 @@ class CSSMarginTests {
             })
         }
 
-        assertEquals("5px", (root.children[0] as HTMLElement).style.marginLeft)
+        assertEquals("5px", (nextChild()).style.marginLeft)
     }
 
     @Test
@@ -38,7 +38,7 @@ class CSSMarginTests {
             })
         }
 
-        assertEquals("15px", (root.children[0] as HTMLElement).style.marginTop)
+        assertEquals("15px", (nextChild()).style.marginTop)
     }
 
     @Test
@@ -51,7 +51,7 @@ class CSSMarginTests {
             })
         }
 
-        assertEquals("12vw", (root.children[0] as HTMLElement).style.marginRight)
+        assertEquals("12vw", (nextChild()).style.marginRight)
     }
 
     @Test
@@ -64,7 +64,7 @@ class CSSMarginTests {
             })
         }
 
-        assertEquals("12%", (root.children[0] as HTMLElement).style.marginBottom)
+        assertEquals("12%", (nextChild()).style.marginBottom)
     }
 
     @Test
@@ -77,7 +77,7 @@ class CSSMarginTests {
             })
         }
 
-        val el = window.getComputedStyle(root.children[0] as HTMLElement)
+        val el = window.getComputedStyle(nextChild())
 
         assertEquals("4px", el.marginTop, "marginTop")
         assertEquals("4px", el.marginRight, "marginRight")
@@ -95,7 +95,7 @@ class CSSMarginTests {
             })
         }
 
-        val el = window.getComputedStyle(root.children[0] as HTMLElement)
+        val el = window.getComputedStyle(nextChild())
 
         assertEquals("4px", el.marginTop, "marginTop")
         assertEquals("6px", el.marginRight, "marginRight")
@@ -113,7 +113,7 @@ class CSSMarginTests {
             })
         }
 
-        val el = window.getComputedStyle(root.children[0] as HTMLElement)
+        val el = window.getComputedStyle(nextChild())
 
         assertEquals("4px", el.marginTop, "marginTop")
         assertEquals("6px", el.marginRight, "marginRight")
@@ -131,7 +131,7 @@ class CSSMarginTests {
             })
         }
 
-        val el = window.getComputedStyle(root.children[0] as HTMLElement)
+        val el = window.getComputedStyle(nextChild())
 
         assertEquals("4px", el.marginTop, "marginTop")
         assertEquals("6px", el.marginRight, "marginRight")

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

@@ -44,11 +44,11 @@ class CSSOverflowTests {
             })
         }
 
-        assertEquals("visible", (root.children[0] as HTMLElement).style.overflowX)
-        assertEquals("hidden", (root.children[1] as HTMLElement).style.overflowX)
-        assertEquals("clip", (root.children[2] as HTMLElement).style.overflowX)
-        assertEquals("scroll", (root.children[3] as HTMLElement).style.overflowX)
-        assertEquals("auto", (root.children[4] as HTMLElement).style.overflowX)
+        assertEquals("visible", (nextChild()).style.overflowX)
+        assertEquals("hidden", (nextChild()).style.overflowX)
+        assertEquals("clip", (nextChild()).style.overflowX)
+        assertEquals("scroll", (nextChild()).style.overflowX)
+        assertEquals("auto", (nextChild()).style.overflowX)
     }
 
     @Test
@@ -81,11 +81,11 @@ class CSSOverflowTests {
             })
         }
 
-        assertEquals("visible", (root.children[0] as HTMLElement).style.overflowY)
-        assertEquals("hidden", (root.children[1] as HTMLElement).style.overflowY)
-        assertEquals("clip", (root.children[2] as HTMLElement).style.overflowY)
-        assertEquals("scroll", (root.children[3] as HTMLElement).style.overflowY)
-        assertEquals("auto", (root.children[4] as HTMLElement).style.overflowY)
+        assertEquals("visible", (nextChild()).style.overflowY)
+        assertEquals("hidden", (nextChild()).style.overflowY)
+        assertEquals("clip", (nextChild()).style.overflowY)
+        assertEquals("scroll", (nextChild()).style.overflowY)
+        assertEquals("auto", (nextChild()).style.overflowY)
     }
 
     @Test
@@ -98,7 +98,7 @@ class CSSOverflowTests {
             })
         }
 
-        val style = (root.children[0] as HTMLElement).style
+        val style = (nextChild()).style
         assertEquals("clip", style.overflowX)
         assertEquals("clip", style.overflowY)
     }

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

@@ -25,7 +25,7 @@ class CSSPaddingTests {
             })
         }
 
-        assertEquals("5px", (root.children[0] as HTMLElement).style.paddingLeft)
+        assertEquals("5px", (nextChild()).style.paddingLeft)
     }
 
     @Test
@@ -38,7 +38,7 @@ class CSSPaddingTests {
             })
         }
 
-        assertEquals("15px", (root.children[0] as HTMLElement).style.paddingTop)
+        assertEquals("15px", (nextChild()).style.paddingTop)
     }
 
     @Test
@@ -51,7 +51,7 @@ class CSSPaddingTests {
             })
         }
 
-        assertEquals("12vw", (root.children[0] as HTMLElement).style.paddingRight)
+        assertEquals("12vw", (nextChild()).style.paddingRight)
     }
 
     @Test
@@ -64,7 +64,7 @@ class CSSPaddingTests {
             })
         }
 
-        assertEquals("12%", (root.children[0] as HTMLElement).style.paddingBottom)
+        assertEquals("12%", (nextChild()).style.paddingBottom)
     }
 
     @Test
@@ -77,7 +77,7 @@ class CSSPaddingTests {
             })
         }
 
-        val el = window.getComputedStyle(root.children[0] as HTMLElement)
+        val el = window.getComputedStyle(nextChild())
 
         assertEquals("4px", el.paddingTop, "paddingTop")
         assertEquals("4px", el.paddingRight, "paddingRight")
@@ -95,7 +95,7 @@ class CSSPaddingTests {
             })
         }
 
-        val el = window.getComputedStyle(root.children[0] as HTMLElement)
+        val el = window.getComputedStyle(nextChild())
 
         assertEquals("4px", el.paddingTop, "paddingTop")
         assertEquals("6px", el.paddingRight, "paddingRight")
@@ -113,7 +113,7 @@ class CSSPaddingTests {
             })
         }
 
-        val el = window.getComputedStyle(root.children[0] as HTMLElement)
+        val el = window.getComputedStyle(nextChild())
 
         assertEquals("4px", el.paddingTop, "paddingTop")
         assertEquals("6px", el.paddingRight, "paddingRight")
@@ -131,7 +131,7 @@ class CSSPaddingTests {
             })
         }
 
-        val el = window.getComputedStyle(root.children[0] as HTMLElement)
+        val el = window.getComputedStyle(nextChild())
 
         assertEquals("4px", el.paddingTop, "paddingTop")
         assertEquals("6px", el.paddingRight, "paddingRight")

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

@@ -26,7 +26,7 @@ class CSSTextTests {
             })
         }
 
-        assertEquals("20em", (root.children[0] as HTMLElement).style.fontSize)
+        assertEquals("20em", (nextChild()).style.fontSize)
     }
 
     @Test
@@ -44,8 +44,8 @@ class CSSTextTests {
             })
         }
 
-        assertEquals("italic", (root.children[0] as HTMLElement).style.fontStyle)
-        assertEquals("oblique", (root.children[1] as HTMLElement).style.fontStyle)
+        assertEquals("italic", (nextChild()).style.fontStyle)
+        assertEquals("oblique", (nextChild()).style.fontStyle)
     }
 
     @Test
@@ -78,11 +78,11 @@ class CSSTextTests {
             })
         }
 
-        assertEquals("bold", (root.children[0] as HTMLElement).style.fontWeight)
-        assertEquals("bolder", (root.children[1] as HTMLElement).style.fontWeight)
-        assertEquals("lighter", (root.children[2] as HTMLElement).style.fontWeight)
-        assertEquals("100", (root.children[3] as HTMLElement).style.fontWeight)
-        assertEquals("800", (root.children[4] as HTMLElement).style.fontWeight)
+        assertEquals("bold", (nextChild()).style.fontWeight)
+        assertEquals("bolder", (nextChild()).style.fontWeight)
+        assertEquals("lighter", (nextChild()).style.fontWeight)
+        assertEquals("100", (nextChild()).style.fontWeight)
+        assertEquals("800", (nextChild()).style.fontWeight)
     }
 
     @Test
@@ -100,8 +100,8 @@ class CSSTextTests {
             })
         }
 
-        assertEquals("normal", (root.children[0] as HTMLElement).style.lineHeight)
-        assertEquals("2em", (root.children[1] as HTMLElement).style.lineHeight)
+        assertEquals("normal", (nextChild()).style.lineHeight)
+        assertEquals("2em", (nextChild()).style.lineHeight)
     }
 
     @Test
@@ -119,8 +119,8 @@ class CSSTextTests {
             })
         }
 
-        assertEquals("normal", (root.children[0] as HTMLElement).style.letterSpacing)
-        assertEquals("2em", (root.children[1] as HTMLElement).style.letterSpacing)
+        assertEquals("normal", (nextChild()).style.letterSpacing)
+        assertEquals("2em", (nextChild()).style.letterSpacing)
     }
 
     @Test
@@ -138,8 +138,8 @@ class CSSTextTests {
             })
         }
 
-        assertEquals("\"Gill Sans Extrabold\", sans-serif", (root.children[0] as HTMLElement).style.fontFamily)
-        assertEquals("sans-serif", (root.children[1] as HTMLElement).style.fontFamily)
+        assertEquals("\"Gill Sans Extrabold\", sans-serif", (nextChild()).style.fontFamily)
+        assertEquals("sans-serif", (nextChild()).style.fontFamily)
     }
 
     @Test
@@ -152,7 +152,7 @@ class CSSTextTests {
             })
         }
 
-        assertEquals("italic bold 0.8em / 1.2 Arial, sans-serif", (root.children[0] as HTMLElement).style.font)
+        assertEquals("italic bold 0.8em / 1.2 Arial, sans-serif", (nextChild()).style.font)
     }
 
     @Test
@@ -190,12 +190,12 @@ class CSSTextTests {
             })
         }
 
-        assertEquals("left", (root.children[0] as HTMLElement).style.textAlign)
-        assertEquals("right", (root.children[1] as HTMLElement).style.textAlign)
-        assertEquals("center", (root.children[2] as HTMLElement).style.textAlign)
-        assertEquals("justify", (root.children[3] as HTMLElement).style.textAlign)
-        assertEquals("start", (root.children[4] as HTMLElement).style.textAlign)
-        assertEquals("end", (root.children[5] as HTMLElement).style.textAlign)
+        assertEquals("left", (nextChild()).style.textAlign)
+        assertEquals("right", (nextChild()).style.textAlign)
+        assertEquals("center", (nextChild()).style.textAlign)
+        assertEquals("justify", (nextChild()).style.textAlign)
+        assertEquals("start", (nextChild()).style.textAlign)
+        assertEquals("end", (nextChild()).style.textAlign)
     }
 
 
@@ -214,8 +214,8 @@ class CSSTextTests {
             })
         }
 
-        assertEquals("red", (root.children[0] as HTMLElement).style.textDecorationColor)
-        assertEquals("rgba(0, 200, 20, 0.85)", (root.children[1] as HTMLElement).style.textDecorationColor)
+        assertEquals("red", (nextChild()).style.textDecorationColor)
+        assertEquals("rgba(0, 200, 20, 0.85)", (nextChild()).style.textDecorationColor)
     }
 
     @Test
@@ -248,11 +248,11 @@ class CSSTextTests {
             })
         }
 
-        assertEquals("solid", (root.children[0] as HTMLElement).style.textDecorationStyle)
-        assertEquals("double", (root.children[1] as HTMLElement).style.textDecorationStyle)
-        assertEquals("dotted", (root.children[2] as HTMLElement).style.textDecorationStyle)
-        assertEquals("dashed", (root.children[3] as HTMLElement).style.textDecorationStyle)
-        assertEquals("wavy", (root.children[4] as HTMLElement).style.textDecorationStyle)
+        assertEquals("solid", (nextChild()).style.textDecorationStyle)
+        assertEquals("double", (nextChild()).style.textDecorationStyle)
+        assertEquals("dotted", (nextChild()).style.textDecorationStyle)
+        assertEquals("dashed", (nextChild()).style.textDecorationStyle)
+        assertEquals("wavy", (nextChild()).style.textDecorationStyle)
     }
 
     @Test
@@ -280,10 +280,10 @@ class CSSTextTests {
             })
         }
 
-        assertEquals("text-decoration-thickness: auto;", (root.children[0] as HTMLElement).style.cssText)
-        assertEquals("text-decoration-thickness: from-font;", (root.children[1] as HTMLElement).style.cssText)
-        assertEquals("text-decoration-thickness: 10px;", (root.children[2] as HTMLElement).style.cssText)
-        assertEquals("text-decoration-thickness: 2%;", (root.children[3] as HTMLElement).style.cssText)
+        assertEquals("text-decoration-thickness: auto;", (nextChild()).style.cssText)
+        assertEquals("text-decoration-thickness: from-font;", (nextChild()).style.cssText)
+        assertEquals("text-decoration-thickness: 10px;", (nextChild()).style.cssText)
+        assertEquals("text-decoration-thickness: 2%;", (nextChild()).style.cssText)
     }
 
     @Test
@@ -316,11 +316,11 @@ class CSSTextTests {
             })
         }
 
-        assertEquals("none", (root.children[0] as HTMLElement).style.textDecorationLine)
-        assertEquals("underline", (root.children[1] as HTMLElement).style.textDecorationLine)
-        assertEquals("overline", (root.children[2] as HTMLElement).style.textDecorationLine)
-        assertEquals("line-through", (root.children[3] as HTMLElement).style.textDecorationLine)
-        assertEquals("blink", (root.children[4] as HTMLElement).style.textDecorationLine)
+        assertEquals("none", (nextChild()).style.textDecorationLine)
+        assertEquals("underline", (nextChild()).style.textDecorationLine)
+        assertEquals("overline", (nextChild()).style.textDecorationLine)
+        assertEquals("line-through", (nextChild()).style.textDecorationLine)
+        assertEquals("blink", (nextChild()).style.textDecorationLine)
     }
 
     @Test
@@ -348,10 +348,10 @@ class CSSTextTests {
             })
         }
 
-        assertEquals("underline red", (root.children[0] as HTMLElement).style.textDecoration)
-        assertEquals("overline wavy lime", (root.children[1] as HTMLElement).style.textDecoration)
-        assertEquals("line-through", (root.children[2] as HTMLElement).style.textDecoration)
-        assertEquals("underline overline dashed", (root.children[3] as HTMLElement).style.textDecoration)
+        assertEquals("underline red", (nextChild()).style.textDecoration)
+        assertEquals("overline wavy lime", (nextChild()).style.textDecoration)
+        assertEquals("line-through", (nextChild()).style.textDecoration)
+        assertEquals("underline overline dashed", (nextChild()).style.textDecoration)
     }
 
     @Test
@@ -389,12 +389,12 @@ class CSSTextTests {
             })
         }
 
-        assertEquals("normal", (root.children[0] as HTMLElement).style.whiteSpace)
-        assertEquals("nowrap", (root.children[1] as HTMLElement).style.whiteSpace)
-        assertEquals("pre", (root.children[2] as HTMLElement).style.whiteSpace)
-        assertEquals("pre-wrap", (root.children[3] as HTMLElement).style.whiteSpace)
-        assertEquals("pre-line", (root.children[4] as HTMLElement).style.whiteSpace)
-        assertEquals("break-spaces", (root.children[5] as HTMLElement).style.whiteSpace)
+        assertEquals("normal", (nextChild()).style.whiteSpace)
+        assertEquals("nowrap", (nextChild()).style.whiteSpace)
+        assertEquals("pre", (nextChild()).style.whiteSpace)
+        assertEquals("pre-wrap", (nextChild()).style.whiteSpace)
+        assertEquals("pre-line", (nextChild()).style.whiteSpace)
+        assertEquals("break-spaces", (nextChild()).style.whiteSpace)
     }
 
 }

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

@@ -39,9 +39,9 @@ class CSSUiTests {
             })
         }
 
-        assertEquals("pointer", (root.children[0] as HTMLElement).style.cursor)
-        assertEquals("auto", (root.children[1] as HTMLElement).style.cursor)
-        assertEquals("url(\"hand.cur\"), pointer", (root.children[2] as HTMLElement).style.cursor)
-        assertEquals("url(\"cursor2.png\") 2 2, pointer", (root.children[3] as HTMLElement).style.cursor)
+        assertEquals("pointer", (nextChild()).style.cursor)
+        assertEquals("auto", (nextChild()).style.cursor)
+        assertEquals("url(\"hand.cur\"), pointer", (nextChild()).style.cursor)
+        assertEquals("url(\"cursor2.png\") 2 2, pointer", (nextChild()).style.cursor)
     }
 }

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

@@ -23,8 +23,8 @@ class ColorTests {
             Div({ style { color(Color.RGB(200, 10, 20)) } })
         }
 
-        assertEquals("rgb(0, 0, 0)", (root.children[0] as HTMLElement).style.color)
-        assertEquals("rgb(200, 10, 20)", (root.children[1] as HTMLElement).style.color)
+        assertEquals("rgb(0, 0, 0)", nextChild().style.color)
+        assertEquals("rgb(200, 10, 20)", nextChild().style.color)
     }
 
 
@@ -35,8 +35,8 @@ class ColorTests {
             Div({ style { color(rgb(200, 10, 20)) } })
         }
 
-        assertEquals("rgb(0, 0, 0)", (root.children[0] as HTMLElement).style.color)
-        assertEquals("rgb(200, 10, 20)", (root.children[1] as HTMLElement).style.color)
+        assertEquals("rgb(0, 0, 0)", nextChild().style.color)
+        assertEquals("rgb(200, 10, 20)", nextChild().style.color)
     }
 
     @Test
@@ -48,8 +48,8 @@ class ColorTests {
             Div({ style { color(Color.RGBA(200, 10, 20, 0.3)) } })
         }
 
-        assertEquals("rgba(0, 220, 0, 0.2)", (root.children[0] as HTMLElement).style.color)
-        assertEquals("rgb(200, 10, 20)", (root.children[1] as HTMLElement).style.color)
+        assertEquals("rgba(0, 220, 0, 0.2)", nextChild().style.color)
+        assertEquals("rgb(200, 10, 20)", nextChild().style.color)
         assertEquals("rgba(200, 10, 20, 0.3)", (root.children[2] as HTMLElement).style.color)
     }
 
@@ -62,8 +62,8 @@ class ColorTests {
             Div({ style { color(rgba(200, 10, 20, 0.3)) } })
         }
 
-        assertEquals("rgba(0, 220, 0, 0.2)", (root.children[0] as HTMLElement).style.color)
-        assertEquals("rgb(200, 10, 20)", (root.children[1] as HTMLElement).style.color)
+        assertEquals("rgba(0, 220, 0, 0.2)", nextChild().style.color)
+        assertEquals("rgb(200, 10, 20)", nextChild().style.color)
         assertEquals("rgba(200, 10, 20, 0.3)", (root.children[2] as HTMLElement).style.color)
     }
 
@@ -75,8 +75,8 @@ class ColorTests {
             Div({ style { color(Color.HSL(235, 100, 50)) } })
         }
 
-        assertEquals("rgb(85, 255, 0)", (root.children[0] as HTMLElement).style.color)
-        assertEquals("rgb(0, 21, 255)", (root.children[1] as HTMLElement).style.color)
+        assertEquals("rgb(85, 255, 0)", nextChild().style.color)
+        assertEquals("rgb(0, 21, 255)", nextChild().style.color)
     }
 
     @Test
@@ -86,8 +86,8 @@ class ColorTests {
             Div({ style { color(hsl(235, 100, 50)) } })
         }
 
-        assertEquals("rgb(85, 255, 0)", (root.children[0] as HTMLElement).style.color)
-        assertEquals("rgb(0, 21, 255)", (root.children[1] as HTMLElement).style.color)
+        assertEquals("rgb(85, 255, 0)", nextChild().style.color)
+        assertEquals("rgb(0, 21, 255)", nextChild().style.color)
     }
 
     @Test
@@ -98,8 +98,8 @@ class ColorTests {
             Div({ style { color(Color.HSLA(235, 100, 50, .5)) } })
         }
 
-        assertEquals("rgb(85, 255, 0)", (root.children[0] as HTMLElement).style.color)
-        assertEquals("rgba(0, 21, 255, 0.5)", (root.children[1] as HTMLElement).style.color)
+        assertEquals("rgb(85, 255, 0)", nextChild().style.color)
+        assertEquals("rgba(0, 21, 255, 0.5)", nextChild().style.color)
     }
 
 
@@ -110,8 +110,8 @@ class ColorTests {
             Div({ style { color(hsla(235, 100, 50, .5)) } })
         }
 
-        assertEquals("rgb(85, 255, 0)", (root.children[0] as HTMLElement).style.color)
-        assertEquals("rgba(0, 21, 255, 0.5)", (root.children[1] as HTMLElement).style.color)
+        assertEquals("rgb(85, 255, 0)", nextChild().style.color)
+        assertEquals("rgba(0, 21, 255, 0.5)", nextChild().style.color)
     }
 
 
@@ -259,144 +259,143 @@ class ColorTests {
             Div({ style { color(Color.currentColor) } })
         }
 
-        var counter = 0
-        assertEquals("aliceblue", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("antiquewhite", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("aquamarine", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("azure", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("beige", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("bisque", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("black", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("blanchedalmond", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("blue", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("blueviolet", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("brown", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("burlywood", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("cadetblue", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("chartreuse", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("chocolate", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("cornflowerblue", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("cornsilk", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("crimson", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("cyan", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("darkblue", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("darkcyan", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("darkgoldenrod", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("darkgray", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("darkgreen", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("darkkhaki", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("darkmagenta", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("darkolivegreen", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("darkorange", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("darkorchid", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("darkred", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("darksalmon", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("darkslateblue", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("darkslategray", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("darkturquoise", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("darkviolet", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("deeppink", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("deepskyblue", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("dimgray", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("dodgerblue", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("firebrick", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("floralwhite", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("forestgreen", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("fuchsia", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("gainsboro", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("ghostwhite", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("goldenrod", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("gold", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("gray", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("green", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("greenyellow", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("honeydew", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("hotpink", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("indianred", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("indigo", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("ivory", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("khaki", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("lavenderblush", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("lavender", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("lawngreen", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("lemonchiffon", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("lightblue", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("lightcoral", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("lightcyan", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("lightgoldenrodyellow", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("lightgray", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("lightgreen", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("lightpink", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("lightsalmon", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("lightseagreen", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("lightskyblue", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("lightslategray", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("lightsteelblue", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("lightyellow", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("limegreen", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("lime", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("linen", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("magenta", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("maroon", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("mediumaquamarine", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("mediumblue", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("mediumorchid", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("mediumpurple", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("mediumseagreen", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("mediumslateblue", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("mediumspringgreen", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("mediumturquoise", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("mediumvioletred", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("midnightblue", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("mintcream", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("mistyrose", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("moccasin", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("navajowhite", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("oldlace", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("olivedrab", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("olive", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("orange", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("orangered", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("orchid", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("palegoldenrod", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("palegreen", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("paleturquoise", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("palevioletred", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("papayawhip", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("peachpuff", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("peru", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("pink", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("plum", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("powderblue", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("purple", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("rebeccapurple", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("red", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("rosybrown", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("royalblue", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("saddlebrown", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("salmon", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("sandybrown", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("seagreen", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("seashell", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("sienna", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("silver", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("skyblue", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("slateblue", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("slategray", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("snow", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("springgreen", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("steelblue", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("teal", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("thistle", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("tomato", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("turquoise", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("violet", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("wheat", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("white", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("whitesmoke", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("yellowgreen", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("yellow", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("transparent", (root.children[counter++] as HTMLElement).style.color)
-        assertEquals("currentcolor", (root.children[counter] as HTMLElement).style.color)
+        assertEquals("aliceblue", nextChild().style.color)
+        assertEquals("antiquewhite", nextChild().style.color)
+        assertEquals("aquamarine", nextChild().style.color)
+        assertEquals("azure", nextChild().style.color)
+        assertEquals("beige", nextChild().style.color)
+        assertEquals("bisque", nextChild().style.color)
+        assertEquals("black", nextChild().style.color)
+        assertEquals("blanchedalmond", nextChild().style.color)
+        assertEquals("blue", nextChild().style.color)
+        assertEquals("blueviolet", nextChild().style.color)
+        assertEquals("brown", nextChild().style.color)
+        assertEquals("burlywood", nextChild().style.color)
+        assertEquals("cadetblue", nextChild().style.color)
+        assertEquals("chartreuse", nextChild().style.color)
+        assertEquals("chocolate", nextChild().style.color)
+        assertEquals("cornflowerblue", nextChild().style.color)
+        assertEquals("cornsilk", nextChild().style.color)
+        assertEquals("crimson", nextChild().style.color)
+        assertEquals("cyan", nextChild().style.color)
+        assertEquals("darkblue", nextChild().style.color)
+        assertEquals("darkcyan", nextChild().style.color)
+        assertEquals("darkgoldenrod", nextChild().style.color)
+        assertEquals("darkgray", nextChild().style.color)
+        assertEquals("darkgreen", nextChild().style.color)
+        assertEquals("darkkhaki", nextChild().style.color)
+        assertEquals("darkmagenta", nextChild().style.color)
+        assertEquals("darkolivegreen", nextChild().style.color)
+        assertEquals("darkorange", nextChild().style.color)
+        assertEquals("darkorchid", nextChild().style.color)
+        assertEquals("darkred", nextChild().style.color)
+        assertEquals("darksalmon", nextChild().style.color)
+        assertEquals("darkslateblue", nextChild().style.color)
+        assertEquals("darkslategray", nextChild().style.color)
+        assertEquals("darkturquoise", nextChild().style.color)
+        assertEquals("darkviolet", nextChild().style.color)
+        assertEquals("deeppink", nextChild().style.color)
+        assertEquals("deepskyblue", nextChild().style.color)
+        assertEquals("dimgray", nextChild().style.color)
+        assertEquals("dodgerblue", nextChild().style.color)
+        assertEquals("firebrick", nextChild().style.color)
+        assertEquals("floralwhite", nextChild().style.color)
+        assertEquals("forestgreen", nextChild().style.color)
+        assertEquals("fuchsia", nextChild().style.color)
+        assertEquals("gainsboro", nextChild().style.color)
+        assertEquals("ghostwhite", nextChild().style.color)
+        assertEquals("goldenrod", nextChild().style.color)
+        assertEquals("gold", nextChild().style.color)
+        assertEquals("gray", nextChild().style.color)
+        assertEquals("green", nextChild().style.color)
+        assertEquals("greenyellow", nextChild().style.color)
+        assertEquals("honeydew", nextChild().style.color)
+        assertEquals("hotpink", nextChild().style.color)
+        assertEquals("indianred", nextChild().style.color)
+        assertEquals("indigo", nextChild().style.color)
+        assertEquals("ivory", nextChild().style.color)
+        assertEquals("khaki", nextChild().style.color)
+        assertEquals("lavenderblush", nextChild().style.color)
+        assertEquals("lavender", nextChild().style.color)
+        assertEquals("lawngreen", nextChild().style.color)
+        assertEquals("lemonchiffon", nextChild().style.color)
+        assertEquals("lightblue", nextChild().style.color)
+        assertEquals("lightcoral", nextChild().style.color)
+        assertEquals("lightcyan", nextChild().style.color)
+        assertEquals("lightgoldenrodyellow", nextChild().style.color)
+        assertEquals("lightgray", nextChild().style.color)
+        assertEquals("lightgreen", nextChild().style.color)
+        assertEquals("lightpink", nextChild().style.color)
+        assertEquals("lightsalmon", nextChild().style.color)
+        assertEquals("lightseagreen", nextChild().style.color)
+        assertEquals("lightskyblue", nextChild().style.color)
+        assertEquals("lightslategray", nextChild().style.color)
+        assertEquals("lightsteelblue", nextChild().style.color)
+        assertEquals("lightyellow", nextChild().style.color)
+        assertEquals("limegreen", nextChild().style.color)
+        assertEquals("lime", nextChild().style.color)
+        assertEquals("linen", nextChild().style.color)
+        assertEquals("magenta", nextChild().style.color)
+        assertEquals("maroon", nextChild().style.color)
+        assertEquals("mediumaquamarine", nextChild().style.color)
+        assertEquals("mediumblue", nextChild().style.color)
+        assertEquals("mediumorchid", nextChild().style.color)
+        assertEquals("mediumpurple", nextChild().style.color)
+        assertEquals("mediumseagreen", nextChild().style.color)
+        assertEquals("mediumslateblue", nextChild().style.color)
+        assertEquals("mediumspringgreen", nextChild().style.color)
+        assertEquals("mediumturquoise", nextChild().style.color)
+        assertEquals("mediumvioletred", nextChild().style.color)
+        assertEquals("midnightblue", nextChild().style.color)
+        assertEquals("mintcream", nextChild().style.color)
+        assertEquals("mistyrose", nextChild().style.color)
+        assertEquals("moccasin", nextChild().style.color)
+        assertEquals("navajowhite", nextChild().style.color)
+        assertEquals("oldlace", nextChild().style.color)
+        assertEquals("olivedrab", nextChild().style.color)
+        assertEquals("olive", nextChild().style.color)
+        assertEquals("orange", nextChild().style.color)
+        assertEquals("orangered", nextChild().style.color)
+        assertEquals("orchid", nextChild().style.color)
+        assertEquals("palegoldenrod", nextChild().style.color)
+        assertEquals("palegreen", nextChild().style.color)
+        assertEquals("paleturquoise", nextChild().style.color)
+        assertEquals("palevioletred", nextChild().style.color)
+        assertEquals("papayawhip", nextChild().style.color)
+        assertEquals("peachpuff", nextChild().style.color)
+        assertEquals("peru", nextChild().style.color)
+        assertEquals("pink", nextChild().style.color)
+        assertEquals("plum", nextChild().style.color)
+        assertEquals("powderblue", nextChild().style.color)
+        assertEquals("purple", nextChild().style.color)
+        assertEquals("rebeccapurple", nextChild().style.color)
+        assertEquals("red", nextChild().style.color)
+        assertEquals("rosybrown", nextChild().style.color)
+        assertEquals("royalblue", nextChild().style.color)
+        assertEquals("saddlebrown", nextChild().style.color)
+        assertEquals("salmon", nextChild().style.color)
+        assertEquals("sandybrown", nextChild().style.color)
+        assertEquals("seagreen", nextChild().style.color)
+        assertEquals("seashell", nextChild().style.color)
+        assertEquals("sienna", nextChild().style.color)
+        assertEquals("silver", nextChild().style.color)
+        assertEquals("skyblue", nextChild().style.color)
+        assertEquals("slateblue", nextChild().style.color)
+        assertEquals("slategray", nextChild().style.color)
+        assertEquals("snow", nextChild().style.color)
+        assertEquals("springgreen", nextChild().style.color)
+        assertEquals("steelblue", nextChild().style.color)
+        assertEquals("teal", nextChild().style.color)
+        assertEquals("thistle", nextChild().style.color)
+        assertEquals("tomato", nextChild().style.color)
+        assertEquals("turquoise", nextChild().style.color)
+        assertEquals("violet", nextChild().style.color)
+        assertEquals("wheat", nextChild().style.color)
+        assertEquals("white", nextChild().style.color)
+        assertEquals("whitesmoke", nextChild().style.color)
+        assertEquals("yellowgreen", nextChild().style.color)
+        assertEquals("yellow", nextChild().style.color)
+        assertEquals("transparent", nextChild().style.color)
+        assertEquals("currentcolor", nextChild().style.color)
     }
 }

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

@@ -8,8 +8,6 @@ package org.jetbrains.compose.web.core.tests.css
 import org.jetbrains.compose.web.core.tests.runTest
 import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.Div
-import org.w3c.dom.HTMLElement
-import org.w3c.dom.get
 import kotlin.test.Test
 import kotlin.test.assertEquals
 
@@ -20,7 +18,7 @@ class GridColumnTests {
             Div({ style { gridColumn("1") } })
         }
 
-        val el = (root.children[0] as HTMLElement).style.asDynamic()
+        val el = nextChild().style.asDynamic()
         assertEquals("1", el.gridColumnStart)
         assertEquals("auto", el.gridColumnEnd)
     }
@@ -31,7 +29,7 @@ class GridColumnTests {
             Div({ style { gridColumn(1, 3) } })
         }
 
-        val el = (root.children[0] as HTMLElement).style.asDynamic()
+        val el = nextChild().style.asDynamic()
         assertEquals("1", el.gridColumnStart)
         assertEquals("3", el.gridColumnEnd)
     }
@@ -43,9 +41,9 @@ class GridColumnTests {
             Div({ style { gridColumn("main-start", "main-end") } })
         }
 
-        assertEquals("main-start", (root.children[0] as HTMLElement).style.asDynamic().gridColumnStart)
-        assertEquals("main-start", (root.children[1] as HTMLElement).style.asDynamic().gridColumnStart)
-        assertEquals("main-end", (root.children[1] as HTMLElement).style.asDynamic().gridColumnEnd)
+        assertEquals("main-start", nextChild().style.asDynamic().gridColumnStart)
+        assertEquals("main-start", nextChild().style.asDynamic().gridColumnStart)
+        assertEquals("main-end", currentChild().style.asDynamic().gridColumnEnd)
     }
 
 
@@ -58,10 +56,10 @@ class GridColumnTests {
             Div({ style { gridColumn("unset") } })
         }
 
-        assertEquals("inherit", (root.children[0] as HTMLElement).style.asDynamic().gridColumnStart)
-        assertEquals("initial", (root.children[1] as HTMLElement).style.asDynamic().gridColumnStart)
-        assertEquals("revert", (root.children[2] as HTMLElement).style.asDynamic().gridColumnStart)
-        assertEquals("unset", (root.children[3] as HTMLElement).style.asDynamic().gridColumnStart)
+        assertEquals("inherit", nextChild().style.asDynamic().gridColumnStart)
+        assertEquals("initial", nextChild().style.asDynamic().gridColumnStart)
+        assertEquals("revert", nextChild().style.asDynamic().gridColumnStart)
+        assertEquals("unset", nextChild().style.asDynamic().gridColumnStart)
     }
 }
 
@@ -73,7 +71,7 @@ class GridRawTests {
             Div({ style { gridRow("1") } })
         }
 
-        val el = (root.children[0] as HTMLElement).style.asDynamic()
+        val el = nextChild().style.asDynamic()
         assertEquals("1", el.gridRowStart)
         assertEquals("auto", el.gridRowEnd)
     }
@@ -84,7 +82,7 @@ class GridRawTests {
             Div({ style { gridRow(2, -1) } })
         }
 
-        val el = (root.children[0] as HTMLElement).style.asDynamic()
+        val el = nextChild().style.asDynamic()
         assertEquals("2", el.gridRowStart)
         assertEquals("-1", el.gridRowEnd)
     }
@@ -95,7 +93,7 @@ class GridRawTests {
             Div({ style { gridRow("4 somegridarea", 6) } })
         }
 
-        val el = (root.children[0] as HTMLElement).style.asDynamic()
+        val el = nextChild().style.asDynamic()
         assertEquals("4 somegridarea", el.gridRowStart)
         assertEquals("6", el.gridRowEnd)
     }
@@ -106,7 +104,7 @@ class GridRawTests {
             Div({ style { gridRow(5, "4 somegridarea") } })
         }
 
-        val el = (root.children[0] as HTMLElement).style.asDynamic()
+        val el = nextChild().style.asDynamic()
         assertEquals("5", el.gridRowStart)
         assertEquals("4 somegridarea", el.gridRowEnd)
     }
@@ -121,10 +119,10 @@ class GridRawTests {
             Div({ style { gridRow("unset") } })
         }
 
-        assertEquals("inherit", (root.children[0] as HTMLElement).style.asDynamic().gridRowStart)
-        assertEquals("initial", (root.children[1] as HTMLElement).style.asDynamic().gridRowStart)
-        assertEquals("revert", (root.children[2] as HTMLElement).style.asDynamic().gridRowStart)
-        assertEquals("unset", (root.children[3] as HTMLElement).style.asDynamic().gridRowStart)
+        assertEquals("inherit", nextChild().style.asDynamic().gridRowStart)
+        assertEquals("initial", nextChild().style.asDynamic().gridRowStart)
+        assertEquals("revert", nextChild().style.asDynamic().gridRowStart)
+        assertEquals("unset", nextChild().style.asDynamic().gridRowStart)
     }
 }
 
@@ -138,10 +136,10 @@ class GridTemplateRowsTests {
             Div({ style { gridTemplateRows("unset") } })
         }
 
-        assertEquals("inherit", (root.children[0] as HTMLElement).style.asDynamic().gridTemplateRows)
-        assertEquals("initial", (root.children[1] as HTMLElement).style.asDynamic().gridTemplateRows)
-        assertEquals("revert", (root.children[2] as HTMLElement).style.asDynamic().gridTemplateRows)
-        assertEquals("unset", (root.children[3] as HTMLElement).style.asDynamic().gridTemplateRows)
+        assertEquals("inherit", nextChild().style.asDynamic().gridTemplateRows)
+        assertEquals("initial", nextChild().style.asDynamic().gridTemplateRows)
+        assertEquals("revert", nextChild().style.asDynamic().gridTemplateRows)
+        assertEquals("unset", nextChild().style.asDynamic().gridTemplateRows)
     }
 }
 
@@ -155,10 +153,10 @@ class GridTemplateColumnsTests {
             Div({ style { gridTemplateColumns("unset") } })
         }
 
-        assertEquals("inherit", (root.children[0] as HTMLElement).style.asDynamic().gridTemplateColumns)
-        assertEquals("initial", (root.children[1] as HTMLElement).style.asDynamic().gridTemplateColumns)
-        assertEquals("revert", (root.children[2] as HTMLElement).style.asDynamic().gridTemplateColumns)
-        assertEquals("unset", (root.children[3] as HTMLElement).style.asDynamic().gridTemplateColumns)
+        assertEquals("inherit", nextChild().style.asDynamic().gridTemplateColumns)
+        assertEquals("initial", nextChild().style.asDynamic().gridTemplateColumns)
+        assertEquals("revert", nextChild().style.asDynamic().gridTemplateColumns)
+        assertEquals("unset", nextChild().style.asDynamic().gridTemplateColumns)
     }
 }
 
@@ -169,7 +167,7 @@ class GridAreaTests {
             Div({ style { gridArea("span 3") } })
         }
 
-        assertEquals("span 3", (root.children[0] as HTMLElement).style.asDynamic().gridRowStart)
+        assertEquals("span 3", nextChild().style.asDynamic().gridRowStart)
     }
 
     @Test
@@ -178,7 +176,7 @@ class GridAreaTests {
             Div({ style { gridArea("some-grid-area", "another-grid-area") } })
         }
 
-        val el = root.children[0] as HTMLElement
+        val el = nextChild()
         assertEquals("some-grid-area", el.style.asDynamic().gridRowStart)
         assertEquals("another-grid-area", el.style.asDynamic().gridColumnStart)
     }
@@ -189,7 +187,7 @@ class GridAreaTests {
             Div({ style { gridArea("some-grid-area", "another-grid-area", "yet-another-grid-area") } })
         }
 
-        val el = root.children[0] as HTMLElement
+        val el = nextChild()
         assertEquals("some-grid-area", el.style.asDynamic().gridRowStart)
         assertEquals("another-grid-area", el.style.asDynamic().gridColumnStart)
         assertEquals("yet-another-grid-area", el.style.asDynamic().gridRowEnd)
@@ -201,7 +199,7 @@ class GridAreaTests {
             Div({ style { gridArea("2 span", "another-grid-area span", "span 3", "2 span") } })
         }
 
-        val el = root.children[0] as HTMLElement
+        val el = nextChild()
         assertEquals("span 2 / span another-grid-area / span 3 / span 2", el.style.asDynamic().gridArea)
     }
 
@@ -214,6 +212,6 @@ class GridTemplateAreasTests {
             Div({ style { gridTemplateAreas("head head", "nav main", "nav foot")  } })
         }
 
-        assertEquals("\"head head\" \"nav main\" \"nav foot\"", (root.children[0] as HTMLElement).style.asDynamic().gridTemplateAreas)
+        assertEquals("\"head head\" \"nav main\" \"nav foot\"", nextChild().style.asDynamic().gridTemplateAreas)
     }
 }