From 5860585a5338769362d696ae12e31edcc7517d0c Mon Sep 17 00:00:00 2001 From: Shagen Ogandzhanian Date: Thu, 8 Jul 2021 20:20:25 +0200 Subject: [PATCH] Minimal support for font and its derivatives in CSS API --- .../compose/web/css/CSSProperties.kt | 4 - .../compose/web/css/properties/font.kt | 44 ++++++ .../src/jsTest/kotlin/css/CSSFontTests.kt | 140 ++++++++++++++++++ 3 files changed, 184 insertions(+), 4 deletions(-) create mode 100644 web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/font.kt create mode 100644 web/core/src/jsTest/kotlin/css/CSSFontTests.kt diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSProperties.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSProperties.kt index df1fb91100..44f2bfa41d 100644 --- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSProperties.kt +++ b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSProperties.kt @@ -164,10 +164,6 @@ fun StyleBuilder.right(value: CSSAutoKeyword) { property("right", value) } -fun StyleBuilder.fontSize(value: CSSNumeric) { - property("font-size", value) -} - fun StyleBuilder.margin(value: CSSNumeric) { // marign hasn't Typed OM yet property("margin", value) diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/font.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/font.kt new file mode 100644 index 0000000000..4b1a43dc3b --- /dev/null +++ b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/font.kt @@ -0,0 +1,44 @@ +/* + * Copyright 2020-2021 JetBrains s.r.o. and respective authors and developers. + * Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file. + */ + +package org.jetbrains.compose.web.css + +// https://developer.mozilla.org/en-US/docs/Web/CSS/font-family +fun StyleBuilder.fontFamily(vararg value: String) { + property("font-family", value.joinToString(", ") { if (it.contains(" ")) "\"$it\"" else it }) +} + +// https://developer.mozilla.org/en-US/docs/Web/CSS/font-size +fun StyleBuilder.fontSize(value: CSSNumeric) { + property("font-size", value) +} + +// https://developer.mozilla.org/en-US/docs/Web/CSS/font-style +fun StyleBuilder.fontStyle(value: String) { + property("font-style", value) +} + +// https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight +fun StyleBuilder.fontWeight(value: String) { + property("font-weight", value) +} + +fun StyleBuilder.fontWeight(value: Int) { + property("font-weight", value) +} + +// https://developer.mozilla.org/en-US/docs/Web/CSS/line-height +fun StyleBuilder.lineHeight(value: String) { + property("line-height", value) +} + +fun StyleBuilder.lineHeight(value: CSSNumeric) { + property("line-height", value) +} + +// https://developer.mozilla.org/en-US/docs/Web/CSS/font +fun StyleBuilder.font(value: String) { + property("font", value) +} \ No newline at end of file diff --git a/web/core/src/jsTest/kotlin/css/CSSFontTests.kt b/web/core/src/jsTest/kotlin/css/CSSFontTests.kt new file mode 100644 index 0000000000..0362fb657f --- /dev/null +++ b/web/core/src/jsTest/kotlin/css/CSSFontTests.kt @@ -0,0 +1,140 @@ +/* + * Copyright 2020-2021 JetBrains s.r.o. and respective authors and developers. + * Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file. + */ + +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 + +class CSSFontTests { + + @Test + fun fontSize() = runTest { + composition { + Div({ + style { + fontSize(20.em) + } + }) + } + + assertEquals("20em", (root.children[0] as HTMLElement).style.fontSize) + } + + @Test + fun fontStyle() = runTest { + composition { + Div({ + style { + fontStyle("italic") + } + }) + Div({ + style { + fontStyle("oblique") + } + }) + } + + assertEquals("italic", (root.children[0] as HTMLElement).style.fontStyle) + assertEquals("oblique", (root.children[1] as HTMLElement).style.fontStyle) + } + + @Test + fun fontWeight() = runTest { + composition { + Div({ + style { + fontWeight("bold") + } + }) + Div({ + style { + fontWeight("bolder") + } + }) + Div({ + style { + fontWeight("lighter") + } + }) + Div({ + style { + fontWeight(100) + } + }) + Div({ + style { + fontWeight(800) + } + }) + } + + 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) + } + + @Test + fun lineHeight() = runTest { + composition { + Div({ + style { + lineHeight("normal") + } + }) + Div({ + style { + lineHeight(2.em) + } + }) + } + + assertEquals("normal", (root.children[0] as HTMLElement).style.lineHeight) + assertEquals("2em", (root.children[1] as HTMLElement).style.lineHeight) + } + + @Test + fun fontFamily() = runTest { + composition { + Div({ + style { + fontFamily("Gill Sans Extrabold", "sans-serif") + } + }) + Div({ + style { + fontFamily("sans-serif") + } + }) + } + + assertEquals("\"Gill Sans Extrabold\", sans-serif", (root.children[0] as HTMLElement).style.fontFamily) + assertEquals("sans-serif", (root.children[1] as HTMLElement).style.fontFamily) + } + + @Test + fun fontFamily2() = runTest { + composition { + Div({ + style { + font("italic bold .8em/1.2 Arial, sans-serif") + } + }) + } + + assertEquals("italic bold 0.8em / 1.2 Arial, sans-serif", (root.children[0] as HTMLElement).style.font) + } + + +} \ No newline at end of file