github
/
compose-jb
mirror of https://gitee.com/github-sync-mirror/compose-jb.git
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

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

(cherry picked from commit edac50ae39)
pull/1844/head
Shagen Ogandzhanian 3 years ago committed by Oleksandr Karpovich
parent
86d9ad1ec1
commit
b3deed40c0
9 changed files with 89 additions and 85 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      web/core/src/jsTest/kotlin/CSSStylesheetTests.kt
  2. 35
      web/core/src/jsTest/kotlin/CssSelectorsTests.kt
  3. 59
      web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt
  4. 6
      web/core/src/jsTest/kotlin/css/CSSListStyleTests.kt
  5. 9
      web/core/src/jsTest/kotlin/css/CSSMarginTests.kt
  6. 21
      web/core/src/jsTest/kotlin/css/CSSPaddingTests.kt
  7. 7
      web/core/src/jsTest/kotlin/css/GridTests.kt
  8. 5
      web/core/src/jsTest/kotlin/elements/AttributesTests.kt
  9. 22
      web/test-utils/src/jsMain/kotlin/org/jetbrains/compose/web/testutils/TestUtils.kt

10
web/core/src/jsTest/kotlin/CSSStylesheetTests.kt
Unescape View File

@ -5,7 +5,6 @@
package org.jetbrains.compose.web.core.tests package org.jetbrains.compose.web.core.tests
import kotlinx.browser.window
import org.jetbrains.compose.web.css.* import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.dom.Div import org.jetbrains.compose.web.dom.Div
import org.jetbrains.compose.web.dom.stringPresentation import org.jetbrains.compose.web.dom.stringPresentation
@ -156,7 +155,7 @@ class CSSVariableTests {
val el = root.children[1] as HTMLElement val el = root.children[1] as HTMLElement
val boundingRect = el.getBoundingClientRect() val boundingRect = el.getBoundingClientRect()
assertEquals("4", window.getComputedStyle(el).order) assertEquals("4", el.computedStyle.order)
assertEquals(150.toDouble(), boundingRect.width) assertEquals(150.toDouble(), boundingRect.width)
assertEquals(170.toDouble(), boundingRect.height) 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)
} }
} }

35
web/core/src/jsTest/kotlin/CssSelectorsTests.kt
Unescape View File

@ -6,7 +6,9 @@ import org.jetbrains.compose.web.css.selectors.*
import org.jetbrains.compose.web.dom.Div import org.jetbrains.compose.web.dom.Div
import org.jetbrains.compose.web.dom.P import org.jetbrains.compose.web.dom.P
import org.jetbrains.compose.web.dom.Span import org.jetbrains.compose.web.dom.Span
import org.jetbrains.compose.web.testutils.computedStyle
import org.jetbrains.compose.web.testutils.runTest import org.jetbrains.compose.web.testutils.runTest
import org.w3c.dom.HTMLElement
import org.w3c.dom.HTMLParagraphElement import org.w3c.dom.HTMLParagraphElement
import org.w3c.dom.HTMLSpanElement import org.w3c.dom.HTMLSpanElement
import org.w3c.dom.get import org.w3c.dom.get
@ -69,12 +71,11 @@ class CssSelectorsTests {
root.children[1]!!.let { el -> root.children[1]!!.let { el ->
val pEl = el.firstChild as HTMLParagraphElement 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 pEl = el.firstChild as HTMLParagraphElement
val spanInPel = pEl.firstChild as HTMLSpanElement 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 pEl = el.firstChild as HTMLParagraphElement
val spanInPel = pEl.firstChild as HTMLSpanElement 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 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) assertEquals("rgb(0, 0, 0)", window.getComputedStyle(spanEl).color)
} }
} }

59
web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt
Unescape View File

@ -5,7 +5,6 @@
package org.jetbrains.compose.web.core.tests.css package org.jetbrains.compose.web.core.tests.css
import kotlinx.browser.window
import org.jetbrains.compose.web.css.* import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.dom.Div import org.jetbrains.compose.web.dom.Div
import kotlin.test.Test 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 @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 @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 @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 @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 @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 @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)
} }
} }

6
web/core/src/jsTest/kotlin/css/CSSListStyleTests.kt
Unescape View File

@ -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)
}
} }
} }

9
web/core/src/jsTest/kotlin/css/CSSMarginTests.kt
Unescape View File

@ -5,7 +5,6 @@
package org.jetbrains.compose.web.core.tests.css package org.jetbrains.compose.web.core.tests.css
import kotlinx.browser.window
import org.jetbrains.compose.web.testutils.* import org.jetbrains.compose.web.testutils.*
import org.jetbrains.compose.web.css.* import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.dom.Div 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.marginTop, "marginTop")
assertEquals("4px", el.marginRight, "marginRight") 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("4px", el.marginTop, "marginTop")
assertEquals("6px", el.marginRight, "marginRight") 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("4px", el.marginTop, "marginTop")
assertEquals("6px", el.marginRight, "marginRight") 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("4px", el.marginTop, "marginTop")
assertEquals("6px", el.marginRight, "marginRight") assertEquals("6px", el.marginRight, "marginRight")

21
web/core/src/jsTest/kotlin/css/CSSPaddingTests.kt
Unescape View File

@ -5,10 +5,17 @@
package org.jetbrains.compose.web.core.tests.css 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.dom.Div
import org.jetbrains.compose.web.testutils.computedStyle
import org.jetbrains.compose.web.testutils.runTest
import kotlin.test.Test import kotlin.test.Test
import kotlin.test.assertEquals 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.paddingTop, "paddingTop")
assertEquals("4px", el.paddingRight, "paddingRight") 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("4px", el.paddingTop, "paddingTop")
assertEquals("6px", el.paddingRight, "paddingRight") 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("4px", el.paddingTop, "paddingTop")
assertEquals("6px", el.paddingRight, "paddingRight") 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("4px", el.paddingTop, "paddingTop")
assertEquals("6px", el.paddingRight, "paddingRight") assertEquals("6px", el.paddingRight, "paddingRight")

7
web/core/src/jsTest/kotlin/css/GridTests.kt
Unescape View File

@ -42,8 +42,11 @@ class GridColumnTests {
} }
assertEquals("main-start", nextChild().style.asDynamic().gridColumnStart) 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)
}
} }

5
web/core/src/jsTest/kotlin/elements/AttributesTests.kt
Unescape View File

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

22
web/test-utils/src/jsMain/kotlin/org/jetbrains/compose/web/testutils/TestUtils.kt
Unescape View File

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

Write Preview
Loading…
Cancel
Save