basalt-core 0.0.0-rc5 → 0.2.0

package/native/tests/test_text_alignment.cpp

@@ -0,0 +1,299 @@
+// Which edge a paragraph's text sits against, and which way it runs.
+//
+// The two halves of one question that three hosts were each answering locally
+// and differently; `core/TextAlignments.h` holds the measurements that prompted
+// this. What is asserted here is the table itself, plus Unicode's rule P2 over
+// UTF-8 -- the direction a paragraph runs when the app said `natural` or said
+// nothing, which is the common case and the one every relative alignment needs.
+//
+// The GTK suite holds `textStartsRightToLeft` against `pango_find_base_dir`
+// over the same scripts, so the rule is checked against a real implementation
+// of it rather than only against this file's expectations.
+
+#include "TestHarness.h"
+
+#include "TextAlignments.h"
+#include "TextDirection.h"
+
+#include <sstream>
+#include <string>
+
+using basalt::PhysicalTextAlignment;
+using basalt::physicalTextAlignment;
+using basalt::textStartsRightToLeft;
+using facebook::react::TextAlignment;
+
+namespace {
+
+// UTF-8 as a source file can carry it without depending on the compiler's idea
+// of an execution charset.
+const std::string kHebrew = "\xd7\xa9\xd7\x9c\xd7\x95\xd7\x9d";          // Hebrew
+const std::string kArabic = "\xd8\xa7\xd9\x84\xd8\xb3\xd9\x84\xd8\xa7\xd9\x85"; // Arabic
+const std::string kThaana = "\xde\x8b\xde\xa8";                          // Thaana
+const std::string kNko = "\xdf\x92\xdf\x8a";                             // NKo
+
+const char *name(PhysicalTextAlignment alignment) {
+  switch (alignment) {
+    case PhysicalTextAlignment::Left:
+      return "left";
+    case PhysicalTextAlignment::Center:
+      return "center";
+    case PhysicalTextAlignment::Right:
+      return "right";
+    case PhysicalTextAlignment::Justified:
+      return "justified";
+  }
+  return "?";
+}
+
+// The common case: a paragraph whose text and whose app run the same way.
+std::string edge(std::optional<TextAlignment> alignment, bool rightToLeft) {
+  return name(physicalTextAlignment(
+      alignment, basalt::TextDirections{.paragraph = rightToLeft, .relative = rightToLeft}));
+}
+
+#if BASALT_RN_MINOR >= 87
+// The two apart: `text` is which way this paragraph's own text runs, `layout`
+// is which way the app is laid out. They differ whenever an app shows Latin
+// text on a mirrored desktop, or Hebrew in a left-to-right one.
+//
+// Behind the same guard as its callers: `start` and `end` arrived in 0.87, so
+// on 0.86 every test that uses this is compiled out and an unused function is
+// an error here.
+std::string edgeIn(std::optional<TextAlignment> alignment, bool text, bool layout) {
+  return name(physicalTextAlignment(
+      alignment, basalt::TextDirections{.paragraph = text, .relative = layout}));
+}
+#endif
+
+} // namespace
+
+TEST(alignment_the_physical_two_are_the_same_in_both_directions) {
+  // `left` means the left of the box, in any paragraph. This is the row AppKit
+  // had wrong: it folded `left` into `natural`, so a right-to-left paragraph
+  // with `textAlign: 'left'` drew flush right.
+  EXPECT_EQ(edge(TextAlignment::Left, false), std::string("left"));
+  EXPECT_EQ(edge(TextAlignment::Left, true), std::string("left"));
+  EXPECT_EQ(edge(TextAlignment::Right, false), std::string("right"));
+  EXPECT_EQ(edge(TextAlignment::Right, true), std::string("right"));
+  EXPECT_EQ(edge(TextAlignment::Center, false), std::string("center"));
+  EXPECT_EQ(edge(TextAlignment::Center, true), std::string("center"));
+}
+
+TEST(alignment_natural_follows_the_direction) {
+  // React Native's default, and the answer for a paragraph that said nothing.
+  EXPECT_EQ(edge(TextAlignment::Natural, false), std::string("left"));
+  EXPECT_EQ(edge(TextAlignment::Natural, true), std::string("right"));
+  EXPECT_EQ(edge(std::nullopt, false), std::string("left"));
+  EXPECT_EQ(edge(std::nullopt, true), std::string("right"));
+}
+
+#if BASALT_RN_MINOR >= 87
+TEST(alignment_start_and_end_are_the_edges_the_line_runs_between) {
+  // The entry this file closes: `end` is where a line finishes, which in a
+  // right-to-left paragraph is the left edge. All three hosts drew it flush
+  // right, two of them by folding it into `right`.
+  EXPECT_EQ(edge(TextAlignment::Start, false), std::string("left"));
+  EXPECT_EQ(edge(TextAlignment::Start, true), std::string("right"));
+  EXPECT_EQ(edge(TextAlignment::End, false), std::string("right"));
+  EXPECT_EQ(edge(TextAlignment::End, true), std::string("left"));
+}
+#endif
+
+#if BASALT_RN_MINOR >= 87
+TEST(alignment_start_and_end_follow_the_layout_rather_than_the_text) {
+  // The distinction this pair exists for, and backlog/text.md entry 14.
+  //
+  // `start` is the word every other relative thing in React Native uses --
+  // `paddingStart`, `marginEnd`, `borderStartColor` -- and Yoga resolves all
+  // of those against the layout direction. A paragraph that resolved it
+  // against its own text would face the other way from its own padding on a
+  // mirrored desktop showing Latin text, which is the case here.
+  //
+  // Upstream resolves it the same way: `RCTResolveTextAlignment` in
+  // `RCTAttributedTextUtils.mm` takes the layout direction and answers `Start`
+  // from it. The field it reads is `TextAttributes::layoutDirection`, filled
+  // by `ParagraphShadowNode::getContent` from Yoga.
+  EXPECT_EQ(edgeIn(TextAlignment::Start, /*text=*/false, /*layout=*/true), std::string("right"));
+  EXPECT_EQ(edgeIn(TextAlignment::End, /*text=*/false, /*layout=*/true), std::string("left"));
+  // And the other way round: Hebrew in an app that is not mirrored.
+  EXPECT_EQ(edgeIn(TextAlignment::Start, /*text=*/true, /*layout=*/false), std::string("left"));
+  EXPECT_EQ(edgeIn(TextAlignment::End, /*text=*/true, /*layout=*/false), std::string("right"));
+}
+
+TEST(alignment_natural_follows_the_text_rather_than_the_layout) {
+  // The other half of the same decision, and deliberately not symmetrical:
+  // `natural` is React Native's default and means "the edge this text starts
+  // from", so Hebrew in a left-to-right app is still flush right. Upstream's
+  // iOS half agrees -- `Natural` is the one value `RCTResolveTextAlignment`
+  // passes through untouched, for `NSParagraphStyle` to resolve from the
+  // paragraph's own writing direction.
+  EXPECT_EQ(edgeIn(TextAlignment::Natural, /*text=*/true, /*layout=*/false), std::string("right"));
+  EXPECT_EQ(edgeIn(std::nullopt, /*text=*/true, /*layout=*/false), std::string("right"));
+  EXPECT_EQ(edgeIn(TextAlignment::Natural, /*text=*/false, /*layout=*/true), std::string("left"));
+  EXPECT_EQ(edgeIn(std::nullopt, /*text=*/false, /*layout=*/true), std::string("left"));
+}
+
+TEST(alignment_a_paragraph_that_says_which_way_it_runs_decides_its_own_edges) {
+  // `textDirections` rather than the table: the question is which direction
+  // reaches `relative`, and the answer is the prop when there is one.
+  using facebook::react::WritingDirection;
+  const std::string latin = "hello";
+  // Said nothing: the layout decides, which is upstream's rule.
+  EXPECT(basalt::textDirections(std::nullopt, latin, true).relative);
+  EXPECT(!basalt::textDirections(std::nullopt, latin, false).relative);
+  EXPECT(basalt::textDirections(WritingDirection::Natural, latin, true).relative);
+  // Said so: the prop decides, in an app mirrored either way. `end` is the
+  // edge this paragraph's lines finish at, which is what it just declared.
+  EXPECT(basalt::textDirections(WritingDirection::RightToLeft, latin, false).relative);
+  EXPECT(!basalt::textDirections(WritingDirection::LeftToRight, latin, true).relative);
+  // And the text alone never decides it, which is the change: Hebrew in an app
+  // that is not mirrored has `start` on the left.
+  EXPECT(!basalt::textDirections(std::nullopt, kHebrew, false).relative);
+  EXPECT(basalt::textDirections(std::nullopt, kHebrew, false).paragraph);
+}
+
+TEST(alignment_left_and_right_stay_physical_in_a_mirrored_app) {
+  // Upstream's iOS half mirrors these two with the layout, so `textAlign:
+  // 'left'` draws flush right in a right-to-left app. This platform does not,
+  // and backlog/text.md records the divergence with the call that would make
+  // it upstream's. `left` is the left of the box on all three hosts, which is
+  // what the rest of this file is written to.
+  EXPECT_EQ(edgeIn(TextAlignment::Left, /*text=*/false, /*layout=*/true), std::string("left"));
+  EXPECT_EQ(edgeIn(TextAlignment::Right, /*text=*/false, /*layout=*/true), std::string("right"));
+}
+#endif
+
+TEST(alignment_justified_is_not_an_edge_and_stays_itself) {
+  // It reaches the engine, which stretches the lines; the flush factor below is
+  // for the last line, which goes against the start edge.
+  EXPECT_EQ(edge(TextAlignment::Justified, false), std::string("justified"));
+  EXPECT_EQ(edge(TextAlignment::Justified, true), std::string("justified"));
+  EXPECT_NEAR(basalt::textFlushFactor(PhysicalTextAlignment::Justified, false), 0.0, 0.001);
+  EXPECT_NEAR(basalt::textFlushFactor(PhysicalTextAlignment::Justified, true), 1.0, 0.001);
+}
+
+TEST(alignment_flush_factors_are_the_three_core_text_takes) {
+  EXPECT_NEAR(basalt::textFlushFactor(PhysicalTextAlignment::Left, false), 0.0, 0.001);
+  EXPECT_NEAR(basalt::textFlushFactor(PhysicalTextAlignment::Center, false), 0.5, 0.001);
+  EXPECT_NEAR(basalt::textFlushFactor(PhysicalTextAlignment::Right, false), 1.0, 0.001);
+  // The direction does not enter into it: the edge has already been resolved.
+  EXPECT_NEAR(basalt::textFlushFactor(PhysicalTextAlignment::Left, true), 0.0, 0.001);
+  EXPECT_NEAR(basalt::textFlushFactor(PhysicalTextAlignment::Right, true), 1.0, 0.001);
+}
+
+TEST(direction_a_right_to_left_script_makes_a_right_to_left_paragraph) {
+  EXPECT(textStartsRightToLeft(kHebrew));
+  EXPECT(textStartsRightToLeft(kArabic));
+  EXPECT(textStartsRightToLeft(kThaana));
+  EXPECT(textStartsRightToLeft(kNko));
+}
+
+TEST(direction_latin_and_every_other_left_to_right_script_does_not) {
+  EXPECT(!textStartsRightToLeft("hello"));
+  // Latin with diacritics, Japanese, Greek and Cyrillic, as UTF-8 bytes: this
+  // file is compiled by MSVC too, which reads a source as the machine's code
+  // page unless it is told otherwise, and would re-encode a literal written in
+  // the script itself. The escapes say exactly what reaches the function.
+  // Split before the `e`: a hex escape in C++ is greedy, so "\x9fe" is one
+  // escape and out of range rather than an eszett followed by a letter.
+  EXPECT(!textStartsRightToLeft("Gr\xc3\xbc\xc3\x9f" "e"));             // Gruesse
+  EXPECT(!textStartsRightToLeft("\xe6\x97\xa5\xe6\x9c\xac\xe8\xaa\x9e"));     // Japanese
+  EXPECT(!textStartsRightToLeft("\xce\x95\xce\xbb\xce\xbb\xce\xb7"));         // Greek
+  EXPECT(!textStartsRightToLeft("\xd0\x9f\xd1\x80\xd0\xb8\xd0\xb2"));         // Cyrillic
+}
+
+TEST(direction_the_first_strong_character_decides_and_the_rest_do_not) {
+  // Rule P2: the *first* strong character, not the majority and not the last.
+  EXPECT(!textStartsRightToLeft("hello " + kHebrew));
+  EXPECT(textStartsRightToLeft(kHebrew + " hello"));
+}
+
+TEST(direction_punctuation_digits_and_spaces_are_skipped) {
+  // What sits in front of a word in real text. A quotation mark deciding the
+  // direction of the sentence after it is the bug this skipping prevents.
+  EXPECT(textStartsRightToLeft("  \"" + kHebrew + "\""));
+  EXPECT(textStartsRightToLeft("(1) " + kHebrew));
+  EXPECT(!textStartsRightToLeft("(1) hello"));
+  EXPECT(!textStartsRightToLeft("123"));
+  EXPECT(!textStartsRightToLeft(""));
+  EXPECT(!textStartsRightToLeft("   "));
+  // An emoji is not a letter either.
+  EXPECT(textStartsRightToLeft("\xf0\x9f\x98\x80 " + kHebrew));
+}
+
+TEST(direction_arabic_indic_digits_are_not_strong) {
+  // U+0660..0669 are class AN, inside the Arabic block and not strong, so a
+  // paragraph that starts with them is not right-to-left by P2. Reading the
+  // block as a whole is the obvious mistake here.
+  const std::string digits = "\xd9\xa1\xd9\xa2\xd9\xa3"; // Arabic-Indic 123
+  EXPECT(!textStartsRightToLeft(digits));
+  EXPECT(!textStartsRightToLeft(digits + " hello"));
+  EXPECT(textStartsRightToLeft(digits + " " + kArabic));
+  // The extended Arabic-Indic digits, U+06F0..06F9, which are class EN.
+  const std::string extended = "\xdb\xb1\xdb\xb2"; // extended Arabic-Indic 12
+  EXPECT(!textStartsRightToLeft(extended + " hello"));
+  EXPECT(textStartsRightToLeft(extended + " " + kArabic));
+}
+
+TEST(direction_a_right_to_left_mark_is_strong_on_its_own) {
+  // U+200F is class R and is how a string with no letters at all can still ask
+  // for a right-to-left paragraph.
+  EXPECT(textStartsRightToLeft("\xe2\x80\x8f 123"));
+}
+
+TEST(direction_broken_utf8_is_skipped_rather_than_refused) {
+  // This decides an alignment. A string with a bad byte in it still has to lay
+  // out, and refusing would mean a paragraph that does not draw.
+  EXPECT(!textStartsRightToLeft("\xff\xfe"));
+  EXPECT(textStartsRightToLeft("\xff" + kHebrew));
+  // A truncated sequence at the end, which is what a cut-off string looks like.
+  EXPECT(!textStartsRightToLeft("\xd7"));
+}
+
+TEST(direction_the_prop_wins_when_the_app_set_one) {
+  using facebook::react::WritingDirection;
+  EXPECT(!basalt::paragraphIsRightToLeft(WritingDirection::LeftToRight, kHebrew));
+  EXPECT(basalt::paragraphIsRightToLeft(WritingDirection::RightToLeft, "hello"));
+  // `natural` and nothing are the same question, and both ask the text.
+  EXPECT(basalt::paragraphIsRightToLeft(WritingDirection::Natural, kHebrew));
+  EXPECT(basalt::paragraphIsRightToLeft(std::nullopt, kHebrew));
+  EXPECT(!basalt::paragraphIsRightToLeft(std::nullopt, "hello"));
+}
+
+// --- The other axis -----------------------------------------------------------
+//
+// `textAlignVertical`, which puts the paragraph somewhere in its own box, and
+// which `verticalAlign` becomes in React Native's own JavaScript before any of
+// this sees it. The arithmetic is three lines and one of them is the clamp,
+// which is the line that matters: a paragraph taller than its box must start at
+// the top rather than above it.
+
+TEST(vertical_alignment_flush_factors_are_the_three_positions) {
+  using V = facebook::react::TextAlignmentVertical;
+  EXPECT_NEAR(basalt::textVerticalFlushFactor(V::Top), 0.0, 0.001);
+  EXPECT_NEAR(basalt::textVerticalFlushFactor(V::Center), 0.5, 0.001);
+  EXPECT_NEAR(basalt::textVerticalFlushFactor(V::Bottom), 1.0, 0.001);
+  // `auto`, and saying nothing, are both the top: that is what every engine
+  // does with no instruction.
+  EXPECT_NEAR(basalt::textVerticalFlushFactor(V::Auto), 0.0, 0.001);
+  EXPECT_NEAR(basalt::textVerticalFlushFactor(std::nullopt), 0.0, 0.001);
+}
+
+TEST(vertical_alignment_offsets_the_slack_in_the_box) {
+  // A 40pt paragraph in a 100pt box: 60 points of slack.
+  EXPECT_NEAR(basalt::textVerticalOffset(100.0, 40.0, 0.0), 0.0, 0.001);
+  EXPECT_NEAR(basalt::textVerticalOffset(100.0, 40.0, 0.5), 30.0, 0.001);
+  EXPECT_NEAR(basalt::textVerticalOffset(100.0, 40.0, 1.0), 60.0, 0.001);
+}
+
+TEST(vertical_alignment_a_paragraph_taller_than_its_box_starts_at_the_top) {
+  // The `numberOfLines` case: the box is the lines that fit and the text is all
+  // of them. A negative offset would push the first line out through the top
+  // edge, where nothing can scroll it back.
+  EXPECT_NEAR(basalt::textVerticalOffset(40.0, 100.0, 1.0), 0.0, 0.001);
+  EXPECT_NEAR(basalt::textVerticalOffset(40.0, 100.0, 0.5), 0.0, 0.001);
+  // And exactly as tall is no slack at all, which is every paragraph Yoga sized
+  // to its own content.
+  EXPECT_NEAR(basalt::textVerticalOffset(40.0, 40.0, 1.0), 0.0, 0.001);
+}

package/native/tests/test_text_checking.cpp

@@ -0,0 +1,31 @@
+// `spellCheck` and `autoCorrect` as three states. See core/TextChecking.h.
+//
+// One rule, and it is the whole reason this is shared: unset is not false. A
+// field that says nothing wants the platform's default, and resolving that to
+// `false` would opt every ordinary field out of spell checking without the app
+// ever asking.
+
+#include "TestHarness.h"
+
+#include "TextChecking.h"
+
+#include <sstream>
+#include <string>
+
+using basalt::TextCheckingFlag;
+using basalt::textCheckingFlag;
+using basalt::textCheckingName;
+
+TEST(text_checking_unset_is_its_own_answer) {
+  EXPECT(textCheckingFlag(std::nullopt) == TextCheckingFlag::Unset);
+  EXPECT(textCheckingFlag(true) == TextCheckingFlag::On);
+  EXPECT(textCheckingFlag(false) == TextCheckingFlag::Off);
+}
+
+// The dump says nothing for a field that asked for nothing, rather than
+// printing the platform's default as though the app had chosen it.
+TEST(text_checking_an_unset_flag_has_no_name) {
+  EXPECT(textCheckingName(TextCheckingFlag::Unset) == nullptr);
+  EXPECT_EQ(std::string(textCheckingName(TextCheckingFlag::On)), std::string("on"));
+  EXPECT_EQ(std::string(textCheckingName(TextCheckingFlag::Off)), std::string("off"));
+}

package/native/tests/test_text_colors.cpp

@@ -0,0 +1,92 @@
+// A fragment's colours, and the `opacity` that multiplies them. See
+// core/TextColors.h.
+//
+// Shared because the three rules are React Native's rather than a toolkit's:
+// the default is opaque black and not the platform's label colour, opacity
+// multiplies an alpha rather than replacing it, and a background nobody set is
+// nothing rather than transparent black.
+
+#include "TestHarness.h"
+
+#include "TextColors.h"
+
+#include <cmath>
+
+using basalt::textBackgroundColor;
+using basalt::textForegroundColor;
+using basalt::textOpacity;
+using facebook::react::ColorComponents;
+using facebook::react::TextAttributes;
+
+namespace {
+
+// Not `near`: see test_font_scaling.cpp for the Windows macro that takes.
+bool closeTo(float a, float b) { return std::fabs(a - b) < 0.01F; }
+
+TextAttributes coloured(float red, float alpha) {
+  TextAttributes attributes;
+  attributes.foregroundColor =
+      facebook::react::colorFromComponents(ColorComponents{red, 0.0F, 0.0F, alpha});
+  return attributes;
+}
+
+} // namespace
+
+// React Native's default, which is not the platform's.
+TEST(text_colors_the_default_foreground_is_opaque_black) {
+  TextAttributes attributes;
+  const auto color = textForegroundColor(attributes);
+  EXPECT(closeTo(color.red, 0.0F));
+  EXPECT(closeTo(color.green, 0.0F));
+  EXPECT(closeTo(color.blue, 0.0F));
+  EXPECT(closeTo(color.alpha, 1.0F));
+}
+
+TEST(text_colors_opacity_multiplies_the_alpha_rather_than_replacing_it) {
+  TextAttributes attributes = coloured(1.0F, 0.5F);
+  attributes.opacity = 0.5;
+  // Half of a half, within a byte: a colour is packed to eight bits a channel
+  // on the way in.
+  EXPECT(closeTo(textForegroundColor(attributes).alpha, 0.25F));
+
+  // And it applies to the default black too, which an app setting opacity and
+  // no colour depends on.
+  TextAttributes bare;
+  bare.opacity = 0.25;
+  EXPECT(closeTo(textForegroundColor(bare).alpha, 0.25F));
+}
+
+TEST(text_colors_an_unset_opacity_changes_nothing) {
+  TextAttributes attributes = coloured(1.0F, 0.75F);
+  EXPECT(std::isnan(attributes.opacity));
+  EXPECT(closeTo(textForegroundColor(attributes).alpha, 0.75F));
+  EXPECT(closeTo(textOpacity(attributes), 1.0F));
+}
+
+// A stylesheet can ask for either, and neither is a thing an alpha can be.
+TEST(text_colors_an_opacity_outside_zero_to_one_is_clamped) {
+  TextAttributes high = coloured(1.0F, 1.0F);
+  high.opacity = 4.0;
+  EXPECT(closeTo(textForegroundColor(high).alpha, 1.0F));
+
+  TextAttributes low = coloured(1.0F, 1.0F);
+  low.opacity = -2.0;
+  EXPECT(closeTo(textForegroundColor(low).alpha, 0.0F));
+}
+
+// Nothing, rather than transparent black: a host that drew it would paint a box
+// behind text that asked for none.
+TEST(text_colors_a_background_nobody_set_is_nothing) {
+  TextAttributes attributes;
+  EXPECT(!textBackgroundColor(attributes).has_value());
+
+  attributes.opacity = 0.5;
+  EXPECT(!textBackgroundColor(attributes).has_value());
+
+  attributes.backgroundColor =
+      facebook::react::colorFromComponents(ColorComponents{0.0F, 0.0F, 1.0F, 1.0F});
+  const auto background = textBackgroundColor(attributes);
+  EXPECT(background.has_value());
+  EXPECT(background.has_value() && closeTo(background->blue, 1.0F));
+  EXPECT(background.has_value() && closeTo(background->alpha, 0.5F));
+}

package/native/tests/test_text_decorations.cpp

@@ -0,0 +1,100 @@
+// Which lines a fragment decorates with, and in what colour. See
+// core/TextDecorations.h.
+//
+// Shared because the rules are decisions rather than drawing: a colour with no
+// line draws nothing, an unset colour means the text's own, and the style is
+// passed through for each toolkit to map to what it has.
+
+#include "TestHarness.h"
+
+#include "TextDecorations.h"
+
+#include <cmath>
+
+using basalt::textDecoration;
+using facebook::react::ColorComponents;
+using facebook::react::TextAttributes;
+using facebook::react::TextDecorationLineType;
+using facebook::react::TextDecorationStyle;
+
+namespace {
+
+// Not `near`: see test_font_scaling.cpp for the Windows macro that takes.
+bool closeTo(float a, float b) { return std::fabs(a - b) < 0.01F; }
+
+} // namespace
+
+TEST(text_decoration_underline_strikethrough_and_both) {
+  TextAttributes attributes;
+  attributes.textDecorationLineType = TextDecorationLineType::Underline;
+  auto decoration = textDecoration(attributes);
+  EXPECT(decoration.has_value());
+  EXPECT(decoration.has_value() && decoration->underline);
+  EXPECT(decoration.has_value() && !decoration->strikethrough);
+
+  attributes.textDecorationLineType = TextDecorationLineType::Strikethrough;
+  decoration = textDecoration(attributes);
+  EXPECT(decoration.has_value() && !decoration->underline);
+  EXPECT(decoration.has_value() && decoration->strikethrough);
+
+  attributes.textDecorationLineType = TextDecorationLineType::UnderlineStrikethrough;
+  decoration = textDecoration(attributes);
+  EXPECT(decoration.has_value() && decoration->underline);
+  EXPECT(decoration.has_value() && decoration->strikethrough);
+}
+
+// The prop that decides whether there is a decoration at all.
+TEST(text_decoration_needs_a_line_to_decorate) {
+  TextAttributes none;
+  EXPECT(!textDecoration(none).has_value());
+
+  none.textDecorationLineType = TextDecorationLineType::None;
+  EXPECT(!textDecoration(none).has_value());
+
+  // A colour and a style with no line is a stylesheet styling something it did
+  // not ask for, and drawing a line there would be inventing one.
+  TextAttributes styledOnly;
+  styledOnly.textDecorationStyle = TextDecorationStyle::Dotted;
+  styledOnly.textDecorationColor =
+      facebook::react::colorFromComponents(ColorComponents{1.0F, 0.0F, 0.0F, 1.0F});
+  EXPECT(!textDecoration(styledOnly).has_value());
+}
+
+TEST(text_decoration_takes_the_colour_it_was_given) {
+  TextAttributes attributes;
+  attributes.textDecorationLineType = TextDecorationLineType::Underline;
+  attributes.textDecorationColor =
+      facebook::react::colorFromComponents(ColorComponents{0.0F, 0.5F, 1.0F, 1.0F});
+  const auto decoration = textDecoration(attributes);
+  EXPECT(decoration.has_value() && decoration->hasColor);
+  EXPECT(decoration.has_value() && closeTo(decoration->blue, 1.0F));
+  EXPECT(decoration.has_value() && closeTo(decoration->red, 0.0F));
+}
+
+// Unset is not black: it is the text's own colour, which is what both toolkits
+// draw when nothing names one.
+TEST(text_decoration_an_unset_colour_is_the_texts_own) {
+  TextAttributes attributes;
+  attributes.textDecorationLineType = TextDecorationLineType::Underline;
+  const auto decoration = textDecoration(attributes);
+  EXPECT(decoration.has_value() && !decoration->hasColor);
+}
+
+TEST(text_decoration_carries_the_style_for_each_host_to_map) {
+  TextAttributes attributes;
+  attributes.textDecorationLineType = TextDecorationLineType::Underline;
+  // Unset is solid, which is CSS's default and React Native's.
+  EXPECT(textDecoration(attributes)->style == TextDecorationStyle::Solid);
+
+  // `wavy` is 0.87's; 0.86's enum stops at Dashed, and naming the member
+  // there does not compile. The same guard the hosts carry.
+  for (const auto style : {TextDecorationStyle::Solid, TextDecorationStyle::Double,
+                           TextDecorationStyle::Dotted, TextDecorationStyle::Dashed,
+#if BASALT_RN_MINOR >= 87
+                           TextDecorationStyle::Wavy,
+#endif
+                           TextDecorationStyle::Solid}) {
+    attributes.textDecorationStyle = style;
+    EXPECT(textDecoration(attributes)->style == style);
+  }
+}