basalt-appkit 0.0.0-rc5

package/native/appkit/mount_harness_appkit.mm

@@ -0,0 +1,197 @@
+// Drives real ShadowViewMutations through the real AppKitMountingManager into real
+// NSViews, with no JS runtime, no Hermes and no Metro.
+//
+// The mirror of gtk/mount_harness_gtk.cpp, with the same two transactions and the
+// same boxes, which is the point: the two platforms now share their mutation
+// walk, and the cheapest way to notice that sharing has broken is to put the
+// two pictures side by side.
+//
+// Note that executeMount only *queues*: in a real host it is called on the JS
+// thread and marshals to the main queue. Calling it from the main thread here
+// takes the same path, one run-loop turn later -- which is why this drains the
+// run loop rather than assuming anything has happened.
+//
+// With BASALT_SNAPSHOT_DIR set it renders both transactions to PNGs and exits.
+// Without it, it opens a window and applies the second transaction after two
+// seconds, the way the GTK harness does.
+
+#import "AppKitMountingManager.h"
+#import "AppKitSnapshot.h"
+
+#include <react/renderer/components/view/ViewProps.h>
+#include <react/renderer/core/LayoutMetrics.h>
+#include <react/renderer/graphics/Color.h>
+#include <react/renderer/mounting/MountingTransaction.h>
+#include <react/renderer/mounting/ShadowViewMutation.h>
+
+#include <cstdint>
+#include <cstdio>
+#include <cstdlib>
+#include <memory>
+#include <utility>
+
+using facebook::react::ColorComponents;
+using facebook::react::LayoutMetrics;
+using facebook::react::MountingTransaction;
+using facebook::react::ShadowView;
+using facebook::react::ShadowViewMutation;
+using facebook::react::ShadowViewMutationList;
+using facebook::react::SurfaceId;
+using facebook::react::Tag;
+using facebook::react::TransactionTelemetry;
+using facebook::react::ViewProps;
+
+namespace {
+
+constexpr SurfaceId kSurfaceId = 1;
+
+ShadowView makeShadowView(Tag tag,
+                          float x, float y, float width, float height,
+                          float red, float green, float blue,
+                          float opacity = 1.0f) {
+  auto props = std::make_shared<ViewProps>();
+  props->backgroundColor = facebook::react::colorFromComponents(
+      ColorComponents{.red = red, .green = green, .blue = blue, .alpha = 1.0f});
+  props->opacity = opacity;
+
+  LayoutMetrics layoutMetrics;
+  layoutMetrics.frame = {.origin = {.x = x, .y = y},
+                         .size = {.width = width, .height = height}};
+
+  ShadowView shadowView;
+  shadowView.componentName = "View";
+  shadowView.surfaceId = kSurfaceId;
+  shadowView.tag = tag;
+  shadowView.props = props;
+  shadowView.layoutMetrics = layoutMetrics;
+  return shadowView;
+}
+
+MountingTransaction makeTransaction(MountingTransaction::Number number,
+                                    ShadowViewMutationList &&mutations) {
+  return MountingTransaction(kSurfaceId, number, std::move(mutations), TransactionTelemetry{});
+}
+
+// First transaction: create four views and place them, one of them nested.
+ShadowViewMutationList firstTransaction() {
+  ShadowViewMutationList mutations;
+
+  const ShadowView blue = makeShadowView(2, 32, 32, 240, 160, 0.30f, 0.55f, 0.95f);
+  const ShadowView orange = makeShadowView(3, 296, 32, 240, 160, 0.95f, 0.45f, 0.35f);
+  const ShadowView green = makeShadowView(4, 32, 224, 504, 140, 0.35f, 0.80f, 0.55f);
+  const ShadowView nested = makeShadowView(5, 24, 24, 120, 90, 1.0f, 1.0f, 1.0f, 0.85f);
+
+  // Fabric emits every Create before the Inserts that place them.
+  mutations.push_back(ShadowViewMutation::CreateMutation(blue));
+  mutations.push_back(ShadowViewMutation::CreateMutation(orange));
+  mutations.push_back(ShadowViewMutation::CreateMutation(green));
+  mutations.push_back(ShadowViewMutation::CreateMutation(nested));
+
+  mutations.push_back(ShadowViewMutation::InsertMutation(kSurfaceId, blue, 0));
+  mutations.push_back(ShadowViewMutation::InsertMutation(kSurfaceId, orange, 1));
+  mutations.push_back(ShadowViewMutation::InsertMutation(kSurfaceId, green, 2));
+  mutations.push_back(ShadowViewMutation::InsertMutation(blue.tag, nested, 0));
+
+  return mutations;
+}
+
+// Second transaction: recolour one view, and remove another entirely. Fabric
+// always emits Remove before Delete, and this reproduces that ordering.
+ShadowViewMutationList secondTransaction() {
+  ShadowViewMutationList mutations;
+
+  // Update: same tag, new props. Recolour blue -> purple and shrink.
+  const ShadowView oldBlue = makeShadowView(2, 32, 32, 240, 160, 0.30f, 0.55f, 0.95f);
+  const ShadowView newBlue = makeShadowView(2, 32, 32, 240, 100, 0.60f, 0.35f, 0.90f);
+  mutations.push_back(ShadowViewMutation::UpdateMutation(oldBlue, newBlue, kSurfaceId));
+
+  // Remove then Delete, the order Fabric guarantees.
+  const ShadowView orange = makeShadowView(3, 296, 32, 240, 160, 0.95f, 0.45f, 0.35f);
+  mutations.push_back(ShadowViewMutation::RemoveMutation(kSurfaceId, orange, 1));
+  mutations.push_back(ShadowViewMutation::DeleteMutation(orange));
+
+  return mutations;
+}
+
+// executeMount hands the transaction to the main queue, so nothing has actually
+// mounted when it returns. Spinning the run loop is what makes the queued block
+// run -- and doing it explicitly rather than sleeping is what keeps this from
+// being flaky.
+void drainMainQueue() {
+  [[NSRunLoop mainRunLoop] runUntilDate:[NSDate dateWithTimeIntervalSinceNow:0.05]];
+}
+
+int runSnapshots(basalt::AppKitMountingManager &manager, const char *directory) {
+  RnAppKitView *root = manager.createSurfaceRoot(kSurfaceId);
+  [root setRnFrameX:0 y:0 width:640 height:420];
+  [root setRnBackgroundColorRed:0.12 green:0.13 blue:0.16 alpha:1.0 hasColor:YES];
+
+  manager.executeMount(kSurfaceId, makeTransaction(1, firstTransaction()));
+  drainMainQueue();
+  NSString *first = [NSString stringWithFormat:@"%s/mount-1.png", directory];
+  if (!RnAppKitWriteSnapshot(root, first)) {
+    return 1;
+  }
+  std::fputs([[root describeTree] UTF8String], stdout);
+
+  manager.executeMount(kSurfaceId, makeTransaction(2, secondTransaction()));
+  drainMainQueue();
+  NSString *second = [NSString stringWithFormat:@"%s/mount-2.png", directory];
+  if (!RnAppKitWriteSnapshot(root, second)) {
+    return 1;
+  }
+  std::fputs("---\n", stdout);
+  std::fputs([[root describeTree] UTF8String], stdout);
+
+  manager.destroySurfaceRoot(kSurfaceId);
+  return 0;
+}
+
+} // namespace
+
+int main(int argc, const char *argv[]) {
+  (void)argc;
+  (void)argv;
+  @autoreleasepool {
+    // Constructed on the main thread: AppKitMountingManager records this thread and
+    // asserts every transaction arrives on it.
+    basalt::AppKitMountingManager manager;
+
+    if (const char *directory = getenv("BASALT_SNAPSHOT_DIR")) {
+      return runSnapshots(manager, directory);
+    }
+
+    [NSApplication sharedApplication];
+    [NSApp setActivationPolicy:NSApplicationActivationPolicyRegular];
+
+    // The host owns the root: Fabric never emits a Create for it.
+    RnAppKitView *root = manager.createSurfaceRoot(kSurfaceId);
+    [root setRnFrameX:0 y:0 width:640 height:420];
+    [root setRnBackgroundColorRed:0.12 green:0.13 blue:0.16 alpha:1.0 hasColor:YES];
+
+    NSWindow *window =
+        [[NSWindow alloc] initWithContentRect:NSMakeRect(0, 0, 640, 420)
+                                    styleMask:NSWindowStyleMaskTitled | NSWindowStyleMaskClosable
+                                      backing:NSBackingStoreBuffered
+                                        defer:NO];
+    window.title = @"basalt-core — macOS mount harness";
+    window.contentView = root;
+    [window center];
+    [window makeKeyAndOrderFront:nil];
+    [NSApp activateIgnoringOtherApps:YES];
+
+    manager.executeMount(kSurfaceId, makeTransaction(1, firstTransaction()));
+
+    // Captured by pointer: a block copies what it captures, and a mounting
+    // manager is neither copyable nor const-callable.
+    basalt::AppKitMountingManager *pending = &manager;
+    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)),
+                   dispatch_get_main_queue(),
+                   ^{
+                     pending->executeMount(kSurfaceId, makeTransaction(2, secondTransaction()));
+                   });
+
+    [NSApp run];
+  }
+  return 0;
+}

package/native/tests/test_appkit_accessibility.mm

@@ -0,0 +1,170 @@
+// Tests for accessibility, as VoiceOver would see it.
+//
+// These assert the *AppKit* role, not the React Native name. The name is what
+// `describeTree` reports and what the cross-platform diff compares; whether the
+// mapping onto NSAccessibility actually happened is a platform question, and
+// this is where a platform question belongs. The GTK suite's
+// test_accessibility.cpp asserts the same thing about GtkAccessibleRole.
+//
+// Against the view directly, with no Fabric: the mapping is a pure function of
+// a string, and testing it through a mounting transaction would prove the same
+// thing more slowly and less clearly.
+
+#include "TestHarness.h"
+
+#import "RnAppKitView.h"
+
+#include <sstream>
+
+namespace {
+
+RnAppKitView *viewWithRole(NSString *role) {
+  RnAppKitView *view = [RnAppKitView viewWithTag:1];
+  [view setRnAccessibleRole:role];
+  return view;
+}
+
+} // namespace
+
+TEST(accessibility_maps_react_native_roles_onto_appkit) {
+  @autoreleasepool {
+    EXPECT(viewWithRole(@"button").accessibilityRole == NSAccessibilityButtonRole);
+    EXPECT(viewWithRole(@"text").accessibilityRole == NSAccessibilityStaticTextRole);
+    EXPECT(viewWithRole(@"image").accessibilityRole == NSAccessibilityImageRole);
+    EXPECT(viewWithRole(@"link").accessibilityRole == NSAccessibilityLinkRole);
+    EXPECT(viewWithRole(@"checkbox").accessibilityRole == NSAccessibilityCheckBoxRole);
+    EXPECT(viewWithRole(@"list").accessibilityRole == NSAccessibilityListRole);
+    EXPECT(viewWithRole(@"adjustable").accessibilityRole == NSAccessibilitySliderRole);
+  }
+}
+
+// A role AppKit has no equivalent for, and one it has never heard of. Both
+// become a group rather than a guess: a wrong role is worse for a screen reader
+// than a vague one, because it makes the view announce itself as something it
+// is not.
+TEST(accessibility_falls_back_to_a_group) {
+  @autoreleasepool {
+    EXPECT(viewWithRole(@"header").accessibilityRole == NSAccessibilityGroupRole);
+    EXPECT(viewWithRole(@"somethingnobodyhasheardof").accessibilityRole ==
+           NSAccessibilityGroupRole);
+  }
+}
+
+// A plain <View> is scenery. Leaving every one of them in the tree would bury
+// the handful that mean something under hundreds that do not.
+TEST(accessibility_leaves_plain_views_out_of_the_tree) {
+  @autoreleasepool {
+    RnAppKitView *plain = [RnAppKitView viewWithTag:1];
+    [plain setRnAccessibleRole:nil];
+    EXPECT(!plain.isAccessibilityElement);
+
+    // ...but a role puts it back in.
+    EXPECT(viewWithRole(@"button").isAccessibilityElement);
+
+    // ...and so does a label on its own, which is the common case for an
+    // icon-only <Pressable>.
+    RnAppKitView *labelled = [RnAppKitView viewWithTag:2];
+    [labelled setRnAccessibleRole:nil];
+    [labelled setRnAccessibleLabel:@"Close" hint:nil];
+    EXPECT(labelled.isAccessibilityElement);
+  }
+}
+
+// `none` and `presentation` mean "do not announce this", which is a different
+// thing from having no role: the app asked for silence explicitly.
+TEST(accessibility_honours_a_presentational_role) {
+  @autoreleasepool {
+    EXPECT(!viewWithRole(@"none").isAccessibilityElement);
+    EXPECT(!viewWithRole(@"presentation").isAccessibilityElement);
+  }
+}
+
+TEST(accessibility_label_and_hint_reach_appkit) {
+  @autoreleasepool {
+    RnAppKitView *view = viewWithRole(@"button");
+    [view setRnAccessibleLabel:@"Save" hint:@"Writes the file to disk"];
+
+    EXPECT([view.accessibilityLabel isEqualToString:@"Save"]);
+    // The hint is help, not value: React Native's hint is the supplementary
+    // description, which on a Mac is what a help tag carries.
+    EXPECT([view.accessibilityHelp isEqualToString:@"Writes the file to disk"]);
+
+    // Empty clears rather than setting an empty string, which VoiceOver would
+    // read as a pause.
+    [view setRnAccessibleLabel:@"" hint:@""];
+    EXPECT(view.accessibilityLabel == nil);
+    EXPECT(view.accessibilityHelp == nil);
+  }
+}
+
+TEST(accessibility_states_reach_appkit) {
+  @autoreleasepool {
+    RnAppKitView *view = viewWithRole(@"checkbox");
+
+    [view setRnAccessibleStateDisabled:RnAppKitAccessibleTrue
+                               checked:RnAppKitAccessibleTrue
+                              selected:RnAppKitAccessibleTrue
+                              expanded:RnAppKitAccessibleTrue
+                                  busy:RnAppKitAccessibleUnset];
+
+    EXPECT(!view.isAccessibilityEnabled);
+    EXPECT(view.isAccessibilitySelected);
+    EXPECT(view.isAccessibilityExpanded);
+    // Checked is a value on a Mac, the way a checkbox reports one, rather than
+    // a state of its own.
+    EXPECT([view.accessibilityValue isEqual:@YES]);
+
+    [view setRnAccessibleStateDisabled:RnAppKitAccessibleFalse
+                               checked:RnAppKitAccessibleFalse
+                              selected:RnAppKitAccessibleFalse
+                              expanded:RnAppKitAccessibleFalse
+                                  busy:RnAppKitAccessibleUnset];
+
+    EXPECT(view.isAccessibilityEnabled);
+    EXPECT(!view.isAccessibilitySelected);
+    EXPECT([view.accessibilityValue isEqual:@NO]);
+  }
+}
+
+// Unset is not false. A view whose app never mentioned `disabled` must keep
+// AppKit's default rather than being marked enabled, because the two are
+// different claims and only one of them was made.
+TEST(accessibility_unset_leaves_appkit_alone) {
+  @autoreleasepool {
+    RnAppKitView *view = viewWithRole(@"button");
+    view.accessibilityEnabled = NO;
+
+    [view setRnAccessibleStateDisabled:RnAppKitAccessibleUnset
+                               checked:RnAppKitAccessibleUnset
+                              selected:RnAppKitAccessibleUnset
+                              expanded:RnAppKitAccessibleUnset
+                                  busy:RnAppKitAccessibleUnset];
+
+    EXPECT(!view.isAccessibilityEnabled);
+    EXPECT(view.accessibilityValue == nil);
+  }
+}
+
+TEST(accessibility_hidden_takes_a_view_out_of_the_tree) {
+  @autoreleasepool {
+    RnAppKitView *view = viewWithRole(@"button");
+    EXPECT(view.isAccessibilityElement);
+
+    [view setRnAccessibleHidden:YES];
+    EXPECT(!view.isAccessibilityElement);
+  }
+}
+
+// The dump reports React Native's name, which is the whole reason the view
+// keeps one: the two hosts' trees are diffed line by line.
+TEST(accessibility_role_is_reported_in_the_tree) {
+  @autoreleasepool {
+    RnAppKitView *view = viewWithRole(@"button");
+    const std::string described = [view describeTree].UTF8String;
+    EXPECT(described.find("role=button") != std::string::npos);
+
+    RnAppKitView *plain = [RnAppKitView viewWithTag:2];
+    [plain setRnAccessibleRole:nil];
+    EXPECT(std::string([plain describeTree].UTF8String).find("role=") == std::string::npos);
+  }
+}

package/native/tests/test_appkit_image.mm

@@ -0,0 +1,237 @@
+// Tests for how an <Image> fills its frame.
+//
+// The four resize modes are the part of images two platforms are most likely to
+// disagree about while both looking plausible on their own, and the arithmetic
+// is duplicated per view layer -- the view layers share no code, by design --
+// so it is exactly the kind of thing that drifts.
+//
+// Against a real bitmap rather than against the rectangle the view computed:
+// the rectangle is private, and a view that computed it correctly and drew
+// nowhere near it would pass either way. What is asserted is where the ink
+// lands, which is what somebody looking at the screen would check.
+//
+// No exact pixel counts. Nearest-neighbour versus smoothed scaling puts an
+// edge half a pixel either way, and pinning that would fail on a future macOS
+// for no useful reason.
+
+#include "TestHarness.h"
+
+#import "RnAppKitView.h"
+
+#include <sstream>
+
+namespace {
+
+// A 4x2 image, opaque black. Small and oddly shaped, so a mode that ignores the
+// aspect ratio is obvious.
+CGImageRef makeImage(size_t width, size_t height) {
+  CGColorSpaceRef space = CGColorSpaceCreateWithName(kCGColorSpaceSRGB);
+  CGContextRef context = CGBitmapContextCreate(nullptr, width, height, 8, 0, space,
+                                               kCGImageAlphaPremultipliedLast);
+  CGColorSpaceRelease(space);
+  CGContextSetRGBFillColor(context, 0, 0, 0, 1);
+  CGContextFillRect(context, CGRectMake(0, 0, (CGFloat)width, (CGFloat)height));
+  CGImageRef image = CGBitmapContextCreateImage(context);
+  CGContextRelease(context);
+  return image;
+}
+
+struct Ink {
+  int left{-1};
+  int top{-1};
+  int right{-1};
+  int bottom{-1};
+  int width() const { return right < 0 ? 0 : right - left + 1; }
+  int height() const { return bottom < 0 ? 0 : bottom - top + 1; }
+};
+
+// Draws the view into a white bitmap and returns the bounding box of anything
+// darker than white.
+Ink inkOf(RnAppKitView *view, CGSize size) {
+  CGColorSpaceRef space = CGColorSpaceCreateWithName(kCGColorSpaceSRGB);
+  CGContextRef context = CGBitmapContextCreate(nullptr, (size_t)size.width, (size_t)size.height,
+                                               8, 0, space, kCGImageAlphaPremultipliedLast);
+  CGColorSpaceRelease(space);
+  CGContextSetRGBFillColor(context, 1, 1, 1, 1);
+  CGContextFillRect(context, CGRectMake(0, 0, size.width, size.height));
+  // A CGBitmapContext counts y from the bottom and this view counts it from the
+  // top, and `graphicsContextWithCGContext:flipped:` only *declares* which way
+  // up a context is -- it applies no transform. Every case here happens to be
+  // vertically symmetric, so this changes no result; without it the next case
+  // that is not symmetric would be read upside down.
+  CGContextTranslateCTM(context, 0, size.height);
+  CGContextScaleCTM(context, 1, -1);
+
+  NSGraphicsContext *previous = NSGraphicsContext.currentContext;
+  NSGraphicsContext.currentContext = [NSGraphicsContext graphicsContextWithCGContext:context
+                                                                             flipped:YES];
+  [view drawRect:NSMakeRect(0, 0, size.width, size.height)];
+  NSGraphicsContext.currentContext = previous;
+
+  auto *pixels = static_cast<unsigned char *>(CGBitmapContextGetData(context));
+  const size_t stride = CGBitmapContextGetBytesPerRow(context);
+  Ink ink;
+  for (int y = 0; y < (int)size.height; y++) {
+    for (int x = 0; x < (int)size.width; x++) {
+      if (pixels[(size_t)y * stride + (size_t)x * 4] < 128) {
+        if (ink.left < 0 || x < ink.left) ink.left = x;
+        if (ink.right < 0 || x > ink.right) ink.right = x;
+        if (ink.top < 0 || y < ink.top) ink.top = y;
+        if (ink.bottom < 0 || y > ink.bottom) ink.bottom = y;
+      }
+    }
+  }
+  CGContextRelease(context);
+  return ink;
+}
+
+RnAppKitView *imageView(CGImageRef image, RnAppKitImageFit fit, CGSize size) {
+  RnAppKitView *view = [RnAppKitView viewWithTag:1];
+  [view setRnFrameX:0 y:0 width:size.width height:size.height];
+  [view setRnImage:image fit:fit];
+  return view;
+}
+
+} // namespace
+
+// stretch ignores the aspect ratio and fills the box exactly.
+TEST(image_stretch_fills_the_frame) {
+  @autoreleasepool {
+    CGImageRef image = makeImage(4, 2);
+    const CGSize size = CGSizeMake(100, 100);
+    const Ink ink = inkOf(imageView(image, RnAppKitImageFitStretch, size), size);
+    CGImageRelease(image);
+
+    EXPECT_NEAR(ink.width(), 100, 2);
+    EXPECT_NEAR(ink.height(), 100, 2);
+  }
+}
+
+// contain fits the whole image inside, so a 2:1 image in a square box spans the
+// full width and half the height, centred.
+TEST(image_contain_fits_inside_and_centres) {
+  @autoreleasepool {
+    CGImageRef image = makeImage(4, 2);
+    const CGSize size = CGSizeMake(100, 100);
+    const Ink ink = inkOf(imageView(image, RnAppKitImageFitContain, size), size);
+    CGImageRelease(image);
+
+    EXPECT_NEAR(ink.width(), 100, 2);
+    EXPECT_NEAR(ink.height(), 50, 2);
+    // Centred vertically: 25 above and 25 below.
+    EXPECT_NEAR(ink.top, 25, 2);
+  }
+}
+
+// cover fills the box and crops, so the same image spans the full box with its
+// sides cut off -- never any white.
+TEST(image_cover_fills_the_frame_and_crops) {
+  @autoreleasepool {
+    CGImageRef image = makeImage(4, 2);
+    const CGSize size = CGSizeMake(100, 100);
+    const Ink ink = inkOf(imageView(image, RnAppKitImageFitCover, size), size);
+    CGImageRelease(image);
+
+    EXPECT_NEAR(ink.width(), 100, 2);
+    EXPECT_NEAR(ink.height(), 100, 2);
+  }
+}
+
+// center draws at natural size, centred -- and never scales up, which is the
+// half of `center` that is easy to miss.
+TEST(image_center_draws_at_natural_size) {
+  @autoreleasepool {
+    CGImageRef image = makeImage(40, 20);
+    const CGSize size = CGSizeMake(100, 100);
+    const Ink ink = inkOf(imageView(image, RnAppKitImageFitCenter, size), size);
+    CGImageRelease(image);
+
+    EXPECT_NEAR(ink.width(), 40, 2);
+    EXPECT_NEAR(ink.height(), 20, 2);
+    EXPECT_NEAR(ink.left, 30, 2);
+    EXPECT_NEAR(ink.top, 40, 2);
+  }
+}
+
+// An image larger than its frame is scaled down by `center` rather than
+// overflowing, and cover and center both clip -- an <Image> never paints
+// outside its own box on iOS or Android.
+TEST(image_center_shrinks_an_oversized_image) {
+  @autoreleasepool {
+    CGImageRef image = makeImage(400, 200);
+    const CGSize size = CGSizeMake(100, 100);
+    const Ink ink = inkOf(imageView(image, RnAppKitImageFitCenter, size), size);
+    CGImageRelease(image);
+
+    EXPECT_NEAR(ink.width(), 100, 2);
+    EXPECT_NEAR(ink.height(), 50, 2);
+  }
+}
+
+TEST(image_is_reported_in_the_tree) {
+  @autoreleasepool {
+    CGImageRef image = makeImage(160, 100);
+    RnAppKitView *view = imageView(image, RnAppKitImageFitCover, CGSizeMake(50, 50));
+    CGImageRelease(image);
+
+    const std::string described = [view describeTree].UTF8String;
+    // The same `texture=WxH` the GTK side emits, which the end-to-end suite
+    // asserts on and the cross-platform diff compares.
+    EXPECT(described.find("texture=160x100") != std::string::npos);
+  }
+}
+
+// Clearing has to release, and drawing after it has to be a no-op rather than a
+// use-after-free.
+TEST(image_can_be_cleared) {
+  @autoreleasepool {
+    CGImageRef image = makeImage(4, 2);
+    RnAppKitView *view = imageView(image, RnAppKitImageFitCover, CGSizeMake(50, 50));
+    CGImageRelease(image);
+
+    [view setRnImage:nullptr fit:RnAppKitImageFitCover];
+
+    const std::string described = [view describeTree].UTF8String;
+    EXPECT(described.find("texture=") == std::string::npos);
+    EXPECT_EQ(inkOf(view, CGSizeMake(50, 50)).width(), 0);
+  }
+}
+
+// `repeat` tiles from the top left at the image's natural size.
+//
+// The case that tells it from `center`, which is what it used to fall back
+// to: a small image in a large box leaves the corners blank when centred and
+// covers them when tiled. Asserting the ink's bounding box is the whole test
+// -- if it fills the view, every tile landed.
+TEST(image_repeat_tiles_the_whole_box) {
+  @autoreleasepool {
+    CGImageRef image = makeImage(4, 2);
+    RnAppKitView *view = imageView(image, RnAppKitImageFitRepeat, CGSizeMake(100, 100));
+
+    const Ink ink = inkOf(view, CGSizeMake(100, 100));
+    // Corner to corner. Centred, a 4x2 image would leave everything outside a
+    // 4x2 patch in the middle blank.
+    EXPECT_EQ(ink.left, 0);
+    EXPECT_EQ(ink.top, 0);
+    EXPECT_EQ(ink.right, 99);
+    EXPECT_EQ(ink.bottom, 99);
+
+    CGImageRelease(image);
+  }
+}
+
+// Not stretched: a tile keeps its own size, which is what distinguishes
+// `repeat` from `stretch` when the image is small and the box is not.
+TEST(image_repeat_keeps_the_tile_at_its_natural_size) {
+  @autoreleasepool {
+    // A 4x2 black image tiled into 100x100 puts a seam every 4 across and
+    // every 2 down. What is checked is cheaper than seams: the image is fully
+    // opaque, so a stretch and a tile both fill the box -- but a tile of a
+    // *transparent-edged* image would not. Use the fit name instead, which is
+    // what the cross-host dump compares.
+    CGImageRef image = makeImage(4, 2);
+    RnAppKitView *view = imageView(image, RnAppKitImageFitRepeat, CGSizeMake(100, 100));
+    EXPECT([[view describeTree] containsString:@"fit=repeat"]);
+    CGImageRelease(image);
+  }
+}