From edac50ae39da9a566a68c9a27a3a169e4e71b716 Mon Sep 17 00:00:00 2001 From: Shagen Ogandzhanian Date: Wed, 9 Feb 2022 12:17:38 +0100 Subject: [PATCH] Introduce HTMLElement.computedStyle: CSSStyleDeclaration helper function (#1815) --- .../src/jsTest/kotlin/CSSStylesheetTests.kt | 10 ++-- .../src/jsTest/kotlin/CssSelectorsTests.kt | 35 ++++++----- .../jsTest/kotlin/css/CSSBackgroundTests.kt | 59 ++++++++++--------- .../jsTest/kotlin/css/CSSListStyleTests.kt | 6 +- .../src/jsTest/kotlin/css/CSSMarginTests.kt | 9 ++- .../src/jsTest/kotlin/css/CSSPaddingTests.kt | 21 ++++--- web/core/src/jsTest/kotlin/css/GridTests.kt | 7 ++- .../jsTest/kotlin/elements/AttributesTests.kt | 5 +- .../compose/web/testutils/TestUtils.kt | 22 ++----- 9 files changed, 89 insertions(+), 85 deletions(-) diff --git a/web/core/src/jsTest/kotlin/CSSStylesheetTests.kt b/web/core/src/jsTest/kotlin/CSSStylesheetTests.kt index 2418a1d7a5..3413948088 100644 --- a/web/core/src/jsTest/kotlin/CSSStylesheetTests.kt +++ b/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) - assertEquals("rgb(0, 128, 0)", window.getComputedStyle(el).backgroundColor) + + (root.children[1] as HTMLElement?)?.let { el -> + assertEquals("rgb(0, 255, 0)", el.computedStyle.color) + assertEquals("rgb(0, 128, 0)", el.computedStyle.backgroundColor) } } diff --git a/web/core/src/jsTest/kotlin/CssSelectorsTests.kt b/web/core/src/jsTest/kotlin/CssSelectorsTests.kt index e9556babc3..7840094c70 100644 --- a/web/core/src/jsTest/kotlin/CssSelectorsTests.kt +++ b/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 -> - val pEl = el - assertEquals("rgb(0, 0, 0)", window.getComputedStyle(pEl).color) + (root.children[2] as HTMLElement).let { el -> + assertEquals("rgb(0, 0, 0)", el.computedStyle.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(0, 0, 255)", window.getComputedStyle(spanInPel).color) + assertEquals("rgb(255, 0, 0)", pEl.computedStyle.color) + assertEquals("rgb(0, 0, 255)", spanInPel.computedStyle.color) } - root.children[2]!!.let { el -> - val pEl = el - val spanEl = pEl.firstChild as HTMLSpanElement + (root.children[2] as HTMLElement).let { el -> + val spanEl = el.firstChild as HTMLSpanElement - assertEquals("rgb(0, 0, 0)", window.getComputedStyle(pEl).color) - assertEquals("rgb(0, 0, 0)", window.getComputedStyle(spanEl).color) + assertEquals("rgb(0, 0, 0)", el.computedStyle.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(0, 0, 255)", window.getComputedStyle(spanInPel).color) + assertEquals("rgb(255, 0, 0)", pEl.computedStyle.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 -> - val pEl = el - val spanEl = pEl.firstChild as HTMLSpanElement + (root.children[2] as HTMLParagraphElement).let { el -> + val spanEl = el.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) } } diff --git a/web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt b/web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt index d989249ed4..b4a3851978 100644 --- a/web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt +++ b/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("rgba(0, 129, 0, 0.2)", window.getComputedStyle(nextChild()).backgroundColor) + assertEquals("rgb(0, 128, 0)", nextChild().computedStyle.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("fixed", window.getComputedStyle(nextChild()).backgroundAttachment) - assertEquals("local", window.getComputedStyle(nextChild()).backgroundAttachment) + assertEquals("scroll", nextChild().computedStyle.backgroundAttachment) + assertEquals("fixed", nextChild().computedStyle.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\"), 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) + 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\")", nextChild().computedStyle.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("0% 50%", window.getComputedStyle(nextChild()).backgroundPosition) - assertEquals("50% 50%", window.getComputedStyle(nextChild()).backgroundPosition) - assertEquals("25% 75%", window.getComputedStyle(nextChild()).backgroundPosition) + assertEquals("50% 0%", nextChild().computedStyle.backgroundPosition) + assertEquals("0% 50%", nextChild().computedStyle.backgroundPosition) + assertEquals("50% 50%", nextChild().computedStyle.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("padding-box", window.getComputedStyle(nextChild()).backgroundClip) - assertEquals("content-box", window.getComputedStyle(nextChild()).backgroundClip) + assertEquals("border-box", nextChild().computedStyle.backgroundClip) + assertEquals("padding-box", nextChild().computedStyle.backgroundClip) + assertEquals("content-box", nextChild().computedStyle.backgroundClip) } @Test @@ -136,9 +135,9 @@ class CSSBackgroundTests { } - assertEquals("border-box", window.getComputedStyle(nextChild()).backgroundOrigin) - assertEquals("padding-box", window.getComputedStyle(nextChild()).backgroundOrigin) - assertEquals("content-box", window.getComputedStyle(nextChild()).backgroundOrigin) + assertEquals("border-box", nextChild().computedStyle.backgroundOrigin) + assertEquals("padding-box", nextChild().computedStyle.backgroundOrigin) + assertEquals("content-box", nextChild().computedStyle.backgroundOrigin) } @@ -159,10 +158,10 @@ class CSSBackgroundTests { }}) } - 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) + assertEquals("contain", nextChild().computedStyle.backgroundSize) + assertEquals("cover", nextChild().computedStyle.backgroundSize) + assertEquals("50%", nextChild().computedStyle.backgroundSize) + assertEquals("auto 50px", nextChild().computedStyle.backgroundSize) } @Test @@ -179,10 +178,14 @@ class CSSBackgroundTests { }}) } - 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) + assertEquals("rgb(0, 128, 0)", nextChild().computedStyle.backgroundColor) + + with(nextChild().computedStyle) { + assertEquals("content-box", backgroundOrigin) + assertEquals("radial-gradient(rgb(220, 20, 60), rgb(135, 206, 235))", backgroundImage) + } + + assertEquals("no-repeat", nextChild().computedStyle.backgroundRepeat) } } diff --git a/web/core/src/jsTest/kotlin/css/CSSListStyleTests.kt b/web/core/src/jsTest/kotlin/css/CSSListStyleTests.kt index 22c2464070..02c7595570 100644 --- a/web/core/src/jsTest/kotlin/css/CSSListStyleTests.kt +++ b/web/core/src/jsTest/kotlin/css/CSSListStyleTests.kt @@ -101,8 +101,10 @@ class CSSListStyleTests { }) } - assertEquals("inside", (nextChild()).style.listStylePosition) - assertEquals("georgian", (currentChild()).style.listStyleType) + nextChild().style.apply { + assertEquals("inside", listStylePosition) + assertEquals("georgian", listStyleType) + } } } diff --git a/web/core/src/jsTest/kotlin/css/CSSMarginTests.kt b/web/core/src/jsTest/kotlin/css/CSSMarginTests.kt index 364c41a0a1..b150418b17 100644 --- a/web/core/src/jsTest/kotlin/css/CSSMarginTests.kt +++ b/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") diff --git a/web/core/src/jsTest/kotlin/css/CSSPaddingTests.kt b/web/core/src/jsTest/kotlin/css/CSSPaddingTests.kt index c94a6eed8d..11e25a96c1 100644 --- a/web/core/src/jsTest/kotlin/css/CSSPaddingTests.kt +++ b/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.testutils.* -import org.jetbrains.compose.web.css.* +import org.jetbrains.compose.web.css.padding +import org.jetbrains.compose.web.css.paddingBottom +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") diff --git a/web/core/src/jsTest/kotlin/css/GridTests.kt b/web/core/src/jsTest/kotlin/css/GridTests.kt index 48bae5779c..4b90ff85cc 100644 --- a/web/core/src/jsTest/kotlin/css/GridTests.kt +++ b/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) + } } diff --git a/web/core/src/jsTest/kotlin/elements/AttributesTests.kt b/web/core/src/jsTest/kotlin/elements/AttributesTests.kt index 4c814457bc..bb1e76c3c1 100644 --- a/web/core/src/jsTest/kotlin/elements/AttributesTests.kt +++ b/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"))) diff --git a/web/test-utils/src/jsMain/kotlin/org/jetbrains/compose/web/testutils/TestUtils.kt b/web/test-utils/src/jsMain/kotlin/org/jetbrains/compose/web/testutils/TestUtils.kt index f91492ea3e..38440fcf5b 100644 --- a/web/test-utils/src/jsMain/kotlin/org/jetbrains/compose/web/testutils/TestUtils.kt +++ b/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() @Suppress("UNCHECKED_CAST") fun 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 { continuation -> val observer = MutationObserver { _, observer -> continuation.resume(Unit) @@ -178,3 +165,6 @@ private class TestMonotonicClockImpl( } } } + +val HTMLElement.computedStyle: CSSStyleDeclaration + get() = window.getComputedStyle(this)