Browse Source

Introduce basic support for text-decoration and its constituents in CSS API

pull/880/head
Shagen Ogandzhanian 3 years ago
parent
commit
2bd08c323a
  1. 33
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/text.kt
  2. 154
      web/core/src/jsTest/kotlin/css/CSSTextTests.kt

33
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/text.kt

@ -55,4 +55,37 @@ fun StyleBuilder.letterSpacing(value: CSSNumeric) {
// https://developer.mozilla.org/en-US/docs/Web/CSS/text-align // https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
fun StyleBuilder.textAlign(value: String) { fun StyleBuilder.textAlign(value: String) {
property("text-align", value) property("text-align", value)
}
// https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color
fun StyleBuilder.textDecorationColor(value: String) {
property("text-decoration-color", value)
}
fun StyleBuilder.textDecorationColor(value: CSSColorValue) {
property("text-decoration-color", value)
}
// https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style
fun StyleBuilder.textDecorationStyle(value: String) {
property("text-decoration-style", value)
}
// https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness
fun StyleBuilder.textDecorationThickness(value: String) {
property("text-decoration-thickness", value)
}
fun StyleBuilder.textDecorationThickness(value: CSSNumeric) {
property("text-decoration-thickness", value)
}
// https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line
fun StyleBuilder.textDecorationLine(value: String) {
property("text-decoration-line", value)
}
// https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
fun StyleBuilder.textDecoration(value: String) {
property("text-decoration", value)
} }

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

@ -199,4 +199,158 @@ class CSSTextTests {
} }
@Test
fun textDecorationColor() = runTest {
composition {
Div({
style {
textDecorationColor("red")
}
})
Div({
style {
textDecorationColor(Color.RGBA(0, 200, 20, 0.85))
}
})
}
assertEquals("red", (root.children[0] as HTMLElement).style.textDecorationColor)
assertEquals("rgba(0, 200, 20, 0.85)", (root.children[1] as HTMLElement).style.textDecorationColor)
}
@Test
fun textDecorationStyle() = runTest {
composition {
Div({
style {
textDecorationStyle("solid")
}
})
Div({
style {
textDecorationStyle("double")
}
})
Div({
style {
textDecorationStyle("dotted")
}
})
Div({
style {
textDecorationStyle("dashed")
}
})
Div({
style {
textDecorationStyle("wavy")
}
})
}
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)
}
@Test
fun textDecorationThickness() = runTest {
composition {
Div({
style {
textDecorationThickness("auto")
}
})
Div({
style {
textDecorationThickness("from-font")
}
})
Div({
style {
textDecorationThickness(10.px)
}
})
Div({
style {
textDecorationThickness(2.percent)
}
})
}
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)
}
@Test
fun textDecorationLine() = runTest {
composition {
Div({
style {
textDecorationLine("none")
}
})
Div({
style {
textDecorationLine("underline")
}
})
Div({
style {
textDecorationLine("overline")
}
})
Div({
style {
textDecorationLine("line-through")
}
})
Div({
style {
textDecorationLine("blink")
}
})
}
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)
}
@Test
fun textDecoration() = runTest {
composition {
Div({
style {
textDecoration("underline red")
}
})
Div({
style {
textDecoration("wavy overline lime")
}
})
Div({
style {
textDecoration("line-through")
}
})
Div({
style {
textDecoration("dashed underline overline")
}
})
}
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)
}
} }
Loading…
Cancel
Save