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 basic support for outline and it's properties to CSS API

pull/893/head
Shagen Ogandzhanian 3 years ago
parent
8dd5e17338
commit
a1a94c7447
3 changed files with 190 additions and 9 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 52
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/box.kt
  2. 6
      web/core/src/jsTest/kotlin/css/CSSBorderTests.kt
  3. 141
      web/core/src/jsTest/kotlin/css/CSSBoxTests.kt

52
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/box.kt
Unescape View File

@ -26,4 +26,56 @@ fun StyleBuilder.height(value: CSSAutoKeyword) {
// https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
fun StyleBuilder.boxSizing(value: String) {
property("box-sizing", value)
}
// https://developer.mozilla.org/en-US/docs/Web/CSS/outline-width
fun StyleBuilder.outlineWidth(value: String) {
property("outline-width", value)
}
fun StyleBuilder.outlineWidth(value: CSSNumeric) {
property("outline-width", value)
}
// https://developer.mozilla.org/en-US/docs/Web/CSS/outline-color
fun StyleBuilder.outlineColor(value: String) {
property("outline-color", value)
}
fun StyleBuilder.outlineColor(value: CSSColorValue) {
property("outline-color", value)
}
// https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style
fun StyleBuilder.outlineStyle(value: String) {
property("outline-style", value)
}
// https://developer.mozilla.org/en-US/docs/Web/CSS/outline
fun StyleBuilder.outline(style: String) {
property("outline", style)
}
fun StyleBuilder.outline(colorOrStyle: String, styleOrWidth: String) {
property("outline", "$colorOrStyle $styleOrWidth")
}
fun StyleBuilder.outline(style: String, width: CSSNumeric) {
property("outline", "$style $width")
}
fun StyleBuilder.outline(color: CSSColorValue, style: String, width: String) {
property("outline", "$color $style $width")
}
fun StyleBuilder.outline(color: CSSColorValue, style: String, width: CSSNumeric) {
property("outline", "$color $style $width")
}
fun StyleBuilder.outline(color: String, style: String, width: String) {
property("outline", "$color $style $width")
}
fun StyleBuilder.outline(color: String, style: String, width: CSSNumeric) {
property("outline", "$color $style $width")
}

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

@ -6,9 +6,7 @@
package org.jetbrains.compose.web.core.tests.css
import org.jetbrains.compose.web.core.tests.runTest
import org.jetbrains.compose.web.css.borderRadius
import org.jetbrains.compose.web.css.borderWidth
import org.jetbrains.compose.web.css.px
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.dom.Div
import org.w3c.dom.HTMLElement
import org.w3c.dom.get
@ -101,6 +99,4 @@ class CSSBorderTests {
(root.children[3] as HTMLElement).style.borderWidth
)
}
}

141
web/core/src/jsTest/kotlin/css/CSSBoxTests.kt
Unescape View File

@ -7,10 +7,7 @@ package org.jetbrains.compose.web.core.tests.css
import org.jetbrains.compose.web.core.tests.asHtmlElement
import org.jetbrains.compose.web.core.tests.runTest
import org.jetbrains.compose.web.css.boxSizing
import org.jetbrains.compose.web.css.height
import org.jetbrains.compose.web.css.px
import org.jetbrains.compose.web.css.width
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.dom.Div
import org.jetbrains.compose.web.renderComposable
import org.w3c.dom.HTMLElement
@ -73,5 +70,141 @@ class CSSBoxTests {
assertEquals("content-box", (root.children[1] as HTMLElement).style.boxSizing)
}
@Test
fun outlineWidth() = runTest {
composition {
Div(
{
style {
outlineWidth("thin")
}
}
)
Div(
{
style {
outlineWidth("medium")
}
}
)
Div(
{
style {
outlineWidth("thick")
}
}
)
Div(
{
style {
outlineWidth(8.px)
}
}
)
Div(
{
style {
outlineWidth(0.1.em)
}
}
)
}
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("0.1em", (root.children[4] as HTMLElement).style.outlineWidth)
}
@Test
fun outlineColor() = runTest {
composition {
Div({
style {
outlineColor("red")
}
})
Div({
style {
outlineColor("#32a1ce")
}
})
}
assertEquals("red", (root.children[0] as HTMLElement).style.outlineColor)
assertEquals("rgb(50, 161, 206)", (root.children[1] as HTMLElement).style.outlineColor)
}
@Test
fun outlineStyle() = runTest {
composition {
Div({ style { outlineStyle("dotted") } })
Div({ style { outlineStyle("dashed") } })
Div({ style { outlineStyle("solid") } })
Div({ style { outlineStyle("double") } })
Div({ style { outlineStyle("groove") } })
Div({ style { outlineStyle("ridge") } })
Div({ style { outlineStyle("outset") } })
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("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)
assertEquals("inset", (root.children[7] as HTMLElement).style.outlineStyle)
}
@Test
fun outlineOneValue() = runTest {
composition {
Div({ style { outline("dotted") } })
}
assertEquals("dotted", (root.children[0] as HTMLElement).style.outlineStyle)
}
@Test
fun outlineTwoValues() = runTest {
composition {
Div({ style { outline("#f66", "dashed") } })
Div({ style { outline("inset", "thick") } })
Div({ style { outline("ridge", 3.px) } })
}
(root.children[0] as HTMLElement).let {
assertEquals("rgb(255, 102, 102)", it.style.outlineColor)
assertEquals("dashed", it.style.outlineStyle)
}
(root.children[1] as HTMLElement).let {
assertEquals("inset", it.style.outlineStyle)
assertEquals("thick", it.style.outlineWidth)
}
(root.children[2] as HTMLElement).let {
assertEquals("ridge", it.style.outlineStyle)
assertEquals("3px", it.style.outlineWidth)
}
}
@Test
fun outlineThreeValues() = runTest {
composition {
Div({ style { outline(Color.RGB(0, 20, 100), "dashed", "thick") } })
Div({ style { outline(Color.RGB(0, 100, 20), "double", 4.px) } })
Div({ style { outline("red", "outset", "thin") } })
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)
}
}
Write Preview
Loading…
Cancel
Save