xbintsc 0.3.68 → 0.3.79

package/runtime/ext_gui/renderer_image.cpp

@@ -9,13 +9,144 @@
 #include <cstdio>
 #include <cstring>
 
+#include "canvas.h"
 #include "image.h"
+#include "media.h"
 
 #include "renderer_shaders.h"
 
 namespace xtgui {
 namespace renderer_detail {
 
+/** One live `<video>` texture. The texture is created once per pixel size and
+ * re-uploaded in place whenever the decoder advances (`generation`). */
+struct MediaTexture {
+  SDL_GPUTexture *texture = nullptr;
+  int width = 0;
+  int height = 0;
+  uint64_t generation = ~0ull;
+};
+
+static std::unordered_map<uint64_t, MediaTexture> g_media_textures;
+
+/** One live `<canvas>` texture, keyed by the canvas id from `canvas.h`. It is
+ * re-uploaded in place whenever the canvas bumps its `generation`. */
+static std::unordered_map<uint64_t, MediaTexture> g_canvas_textures;
+
+/** Upload RGBA8 `pixels` into `texture` through a staging buffer, submitting
+ * its own command buffer. Because command buffers run in submission order and
+ * this one is submitted before the frame that samples the texture, re-uploading
+ * a texture that the previous frame drew is safe. */
+static bool uploadPixels(SDL_GPUDevice *device, SDL_GPUTexture *texture, int width, int height,
+                         const void *pixels, uint32_t bytes) {
+  if (bytes == 0) return false;
+  SDL_GPUTransferBufferCreateInfo transfer_info;
+  memset(&transfer_info, 0, sizeof(transfer_info));
+  transfer_info.usage = SDL_GPU_TRANSFERBUFFERUSAGE_UPLOAD;
+  transfer_info.size = bytes;
+  SDL_GPUTransferBuffer *transfer = SDL_CreateGPUTransferBuffer(device, &transfer_info);
+  if (transfer == nullptr) return false;
+  void *mapped = SDL_MapGPUTransferBuffer(device, transfer, false);
+  std::memcpy(mapped, pixels, bytes);
+  SDL_UnmapGPUTransferBuffer(device, transfer);
+
+  SDL_GPUCommandBuffer *cmd = SDL_AcquireGPUCommandBuffer(device);
+  if (cmd == nullptr) {
+    SDL_ReleaseGPUTransferBuffer(device, transfer);
+    return false;
+  }
+  SDL_GPUTextureTransferInfo source;
+  memset(&source, 0, sizeof(source));
+  source.transfer_buffer = transfer;
+  source.offset = 0;
+  source.pixels_per_row = (Uint32)width;
+  source.rows_per_layer = (Uint32)height;
+  SDL_GPUTextureRegion destination;
+  memset(&destination, 0, sizeof(destination));
+  destination.texture = texture;
+  destination.mip_level = 0;
+  destination.layer = 0;
+  destination.w = (Uint32)width;
+  destination.h = (Uint32)height;
+  destination.d = 1;
+  SDL_GPUCopyPass *copy = SDL_BeginGPUCopyPass(cmd);
+  SDL_UploadToGPUTexture(copy, &source, &destination, false);
+  SDL_EndGPUCopyPass(copy);
+  SDL_SubmitGPUCommandBuffer(cmd);
+  SDL_ReleaseGPUTransferBuffer(device, transfer);
+  return true;
+}
+
+/** Ensure the texture for `media_id` exists and holds the decoder's newest
+ * frame. Returns `nullptr` before the first frame is decoded. */
+static SDL_GPUTexture *ensureMediaTexture(SDL_GPUDevice *device, uint64_t media_id) {
+  xtgui::MediaPlayer *player = xtgui::xt_media_by_id(media_id);
+  if (player == nullptr) return nullptr;
+  const xtgui::Image *image = player->frame();
+  MediaTexture &entry = g_media_textures[media_id];
+  if (image == nullptr || image->width <= 0 || image->height <= 0) return entry.texture;
+  if (entry.texture == nullptr || entry.width != image->width || entry.height != image->height) {
+    if (entry.texture != nullptr) SDL_ReleaseGPUTexture(device, entry.texture);
+    SDL_GPUTextureCreateInfo info;
+    memset(&info, 0, sizeof(info));
+    info.type = SDL_GPU_TEXTURETYPE_2D;
+    info.format = SDL_GPU_TEXTUREFORMAT_R8G8B8A8_UNORM;
+    info.usage = SDL_GPU_TEXTUREUSAGE_SAMPLER;
+    info.width = (Uint32)image->width;
+    info.height = (Uint32)image->height;
+    info.layer_count_or_depth = 1;
+    info.num_levels = 1;
+    info.sample_count = SDL_GPU_SAMPLECOUNT_1;
+    entry.texture = SDL_CreateGPUTexture(device, &info);
+    entry.width = image->width;
+    entry.height = image->height;
+    entry.generation = ~0ull;
+    if (entry.texture == nullptr) return nullptr;
+  }
+  if (entry.generation != player->frame_generation()) {
+    if (uploadPixels(device, entry.texture, entry.width, entry.height, image->pixels.data(),
+                     (uint32_t)image->pixels.size())) {
+      entry.generation = player->frame_generation();
+    }
+  }
+  return entry.texture;
+}
+
+/** Ensure the texture for `canvas_id` exists and holds the canvas's newest
+ * pixels. Returns `nullptr` for an unknown or empty canvas. */
+static SDL_GPUTexture *ensureCanvasTexture(SDL_GPUDevice *device, uint64_t canvas_id) {
+  xtgui::Canvas2D *canvas = xtgui::xt_canvas_by_id(canvas_id);
+  if (canvas == nullptr) return nullptr;
+  const xtgui::Image &image = canvas->image();
+  if (image.width <= 0 || image.height <= 0) return nullptr;
+  MediaTexture &entry = g_canvas_textures[canvas_id];
+  if (entry.texture == nullptr || entry.width != image.width || entry.height != image.height) {
+    if (entry.texture != nullptr) SDL_ReleaseGPUTexture(device, entry.texture);
+    SDL_GPUTextureCreateInfo info;
+    memset(&info, 0, sizeof(info));
+    info.type = SDL_GPU_TEXTURETYPE_2D;
+    info.format = SDL_GPU_TEXTUREFORMAT_R8G8B8A8_UNORM;
+    info.usage = SDL_GPU_TEXTUREUSAGE_SAMPLER;
+    info.width = (Uint32)image.width;
+    info.height = (Uint32)image.height;
+    info.layer_count_or_depth = 1;
+    info.num_levels = 1;
+    info.sample_count = SDL_GPU_SAMPLECOUNT_1;
+    entry.texture = SDL_CreateGPUTexture(device, &info);
+    entry.width = image.width;
+    entry.height = image.height;
+    entry.generation = ~0ull;
+    if (entry.texture == nullptr) return nullptr;
+  }
+  if (entry.generation != canvas->generation()) {
+    if (uploadPixels(device, entry.texture, entry.width, entry.height, image.pixels.data(),
+                     (uint32_t)image.pixels.size())) {
+      entry.generation = canvas->generation();
+    }
+  }
+  return entry.texture;
+}
+
 SDL_GPUGraphicsPipeline *createImagePipeline(SDL_GPUDevice *device, SDL_Window *reference) {
   const ShaderSource image_vs = selectShader(device, ShaderProgram::Image, false);
   const ShaderSource image_fs = selectShader(device, ShaderProgram::Image, true);
@@ -96,15 +227,22 @@ SDL_GPUGraphicsPipeline *createImagePipeline(SDL_GPUDevice *device, SDL_Window *
   return pipeline;
 }
 
-/** Decode `src` (cached) and upload it as an RGBA texture (cached by path). */
-SDL_GPUTexture *ensureImageTexture(SDL_GPUDevice *device, const std::string &src) {
-  auto found = g_image_textures.find(src);
+/** Decode `src` (cached) and upload it as an RGBA texture. Vector sources are
+ * rasterised at the drawn pixel size and cached by that size; bitmaps decode at
+ * their intrinsic size and are cached by path. */
+SDL_GPUTexture *ensureImageTexture(SDL_GPUDevice *device, const std::string &src, int pixel_width,
+                                   int pixel_height) {
+  bool vector_source = xtgui::xt_image_is_vector(src);
+  std::string key =
+      vector_source ? src + "@" + std::to_string(pixel_width) + "x" + std::to_string(pixel_height)
+                    : src;
+  auto found = g_image_textures.find(key);
   if (found != g_image_textures.end()) return found->second;
 
-  const xtgui::Image *image = xtgui::xt_image_load(src);
+  const xtgui::Image *image = xtgui::xt_image_load(src, pixel_width, pixel_height);
   if (image == nullptr || image->width <= 0 || image->height <= 0) {
     fprintf(stderr, "xt_gui: could not decode image '%s'\n", src.c_str());
-    g_image_textures.emplace(src, nullptr);
+    g_image_textures.emplace(key, nullptr);
     return nullptr;
   }
 
@@ -121,56 +259,18 @@ SDL_GPUTexture *ensureImageTexture(SDL_GPUDevice *device, const std::string &src
   SDL_GPUTexture *texture = SDL_CreateGPUTexture(device, &info);
   if (texture == nullptr) {
     fprintf(stderr, "xt_gui: image texture creation failed: %s\n", SDL_GetError());
-    g_image_textures.emplace(src, nullptr);
+    g_image_textures.emplace(key, nullptr);
     return nullptr;
   }
 
   uint32_t bytes = (uint32_t)(image->pixels.size());
-  SDL_GPUTransferBufferCreateInfo transfer_info;
-  memset(&transfer_info, 0, sizeof(transfer_info));
-  transfer_info.usage = SDL_GPU_TRANSFERBUFFERUSAGE_UPLOAD;
-  transfer_info.size = bytes;
-  SDL_GPUTransferBuffer *transfer = SDL_CreateGPUTransferBuffer(device, &transfer_info);
-  if (transfer == nullptr) {
+  if (!uploadPixels(device, texture, image->width, image->height, image->pixels.data(), bytes)) {
     SDL_ReleaseGPUTexture(device, texture);
-    g_image_textures.emplace(src, nullptr);
+    g_image_textures.emplace(key, nullptr);
     return nullptr;
   }
-  void *mapped = SDL_MapGPUTransferBuffer(device, transfer, false);
-  std::memcpy(mapped, image->pixels.data(), bytes);
-  SDL_UnmapGPUTransferBuffer(device, transfer);
 
-  SDL_GPUCommandBuffer *cmd = SDL_AcquireGPUCommandBuffer(device);
-  if (cmd == nullptr) {
-    SDL_ReleaseGPUTransferBuffer(device, transfer);
-    SDL_ReleaseGPUTexture(device, texture);
-    g_image_textures.emplace(src, nullptr);
-    return nullptr;
-  }
-  SDL_GPUTextureTransferInfo source;
-  memset(&source, 0, sizeof(source));
-  source.transfer_buffer = transfer;
-  source.offset = 0;
-  source.pixels_per_row = (Uint32)image->width;
-  source.rows_per_layer = (Uint32)image->height;
-  SDL_GPUTextureRegion destination;
-  memset(&destination, 0, sizeof(destination));
-  destination.texture = texture;
-  destination.mip_level = 0;
-  destination.layer = 0;
-  destination.x = 0;
-  destination.y = 0;
-  destination.z = 0;
-  destination.w = (Uint32)image->width;
-  destination.h = (Uint32)image->height;
-  destination.d = 1;
-  SDL_GPUCopyPass *copy = SDL_BeginGPUCopyPass(cmd);
-  SDL_UploadToGPUTexture(copy, &source, &destination, false);
-  SDL_EndGPUCopyPass(copy);
-  SDL_SubmitGPUCommandBuffer(cmd);
-  SDL_ReleaseGPUTransferBuffer(device, transfer);
-
-  g_image_textures.emplace(src, texture);
+  g_image_textures.emplace(key, texture);
   return texture;
 }
 
@@ -178,13 +278,15 @@ SDL_GPUTexture *ensureImageTexture(SDL_GPUDevice *device, const std::string &src
 }  // namespace xtgui
 
 void xt_gui_image_upload(SDL_GPUDevice *device, XtGuiGeometry *geometry,
-                         const xtgui::DisplayList &list) {
+                         const xtgui::DisplayList &list, float scale) {
   using namespace xtgui::renderer_detail;
-  g_image_batches.clear();
+  geometry->op_counts.assign(list.images.size(), 0);
+  geometry->op_textures.assign(list.images.size(), nullptr);
   if (g_image_pipeline == nullptr) {
     geometry->vertex_count = 0;
     return;
   }
+  if (scale <= 0.0f) scale = 1.0f;
   std::vector<TextVertex> verts;
   verts.reserve(list.images.size() * 6);
   xtgui::Color white{1.0f, 1.0f, 1.0f, 1.0f};
@@ -193,45 +295,69 @@ void xt_gui_image_upload(SDL_GPUDevice *device, XtGuiGeometry *geometry,
   full.v0 = 0.0f;
   full.u1 = 1.0f;
   full.v1 = 1.0f;
-  for (const xtgui::PaintImage &image : list.images) {
+  for (size_t index = 0; index < list.images.size(); index++) {
+    const xtgui::PaintImage &image = list.images[index];
     if (image.width <= 0.0f || image.height <= 0.0f) continue;
-    SDL_GPUTexture *texture = ensureImageTexture(device, image.src);
+    SDL_GPUTexture *texture = nullptr;
+    if (image.canvas_id != 0) {
+      texture = ensureCanvasTexture(device, image.canvas_id);
+    } else if (image.media_id != 0) {
+      texture = ensureMediaTexture(device, image.media_id);
+    } else {
+      /* Draw-time device pixels: an SVG is rasterised at this size so it stays
+       * crisp on HiDPI and when scaled. */
+      int pixel_width = (int)(image.width * scale + 0.5f);
+      int pixel_height = (int)(image.height * scale + 0.5f);
+      if (pixel_width < 1) pixel_width = 1;
+      if (pixel_height < 1) pixel_height = 1;
+      texture = ensureImageTexture(device, image.src, pixel_width, pixel_height);
+    }
     if (texture == nullptr) continue;
-    uint32_t first = (uint32_t)verts.size();
     pushGlyph(verts, image.x, image.y, image.width, image.height, full, white);
-    g_image_batches.push_back(ImageBatch{texture, first, 6});
+    geometry->op_counts[index] = 6;
+    geometry->op_textures[index] = texture;
   }
   uploadVertices(device, geometry, verts.data(), (uint32_t)verts.size(), sizeof(TextVertex));
 }
 
-void xt_gui_image_draw(SDL_GPUCommandBuffer *cmd, SDL_GPURenderPass *pass, XtGuiGeometry *geometry,
-                       float viewport_width, float viewport_height) {
-  using namespace xtgui::renderer_detail;
-  if (g_image_pipeline == nullptr || g_sampler == nullptr) return;
-  if (geometry->buffer == nullptr || geometry->vertex_count == 0 || g_image_batches.empty()) return;
-  if (viewport_width <= 0.0f || viewport_height <= 0.0f) return;
-  SDL_BindGPUGraphicsPipeline(pass, g_image_pipeline);
-  SDL_GPUBufferBinding binding;
-  binding.buffer = geometry->buffer;
-  binding.offset = 0;
-  SDL_BindGPUVertexBuffers(pass, 0, &binding, 1);
-  float viewport[2] = {viewport_width, viewport_height};
-  SDL_PushGPUVertexUniformData(cmd, 0, viewport, sizeof(viewport));
-  for (const ImageBatch &batch : g_image_batches) {
-    if (batch.texture == nullptr) continue;
-    SDL_GPUTextureSamplerBinding texture_binding;
-    texture_binding.texture = batch.texture;
-    texture_binding.sampler = g_sampler;
-    SDL_BindGPUFragmentSamplers(pass, 0, &texture_binding, 1);
-    SDL_DrawGPUPrimitives(pass, batch.count, 1, batch.first, 0);
-  }
-}
-
 void xt_gui_image_textures_destroy(SDL_GPUDevice *device) {
   using namespace xtgui::renderer_detail;
   for (auto &entry : g_image_textures) {
     if (entry.second != nullptr) SDL_ReleaseGPUTexture(device, entry.second);
   }
   g_image_textures.clear();
-  g_image_batches.clear();
+  for (auto &entry : g_media_textures) {
+    if (entry.second.texture != nullptr) SDL_ReleaseGPUTexture(device, entry.second.texture);
+  }
+  g_media_textures.clear();
+  for (auto &entry : g_canvas_textures) {
+    if (entry.second.texture != nullptr) SDL_ReleaseGPUTexture(device, entry.second.texture);
+  }
+  g_canvas_textures.clear();
+}
+
+void xt_gui_media_upload_frames(SDL_GPUDevice *device) {
+  using namespace xtgui::renderer_detail;
+  for (auto &entry : g_media_textures) ensureMediaTexture(device, entry.first);
+}
+
+void xt_gui_media_texture_release(SDL_GPUDevice *device, uint64_t media_id) {
+  using namespace xtgui::renderer_detail;
+  auto it = g_media_textures.find(media_id);
+  if (it == g_media_textures.end()) return;
+  if (it->second.texture != nullptr) SDL_ReleaseGPUTexture(device, it->second.texture);
+  g_media_textures.erase(it);
+}
+
+void xt_gui_canvas_upload_frames(SDL_GPUDevice *device) {
+  using namespace xtgui::renderer_detail;
+  for (auto &entry : g_canvas_textures) ensureCanvasTexture(device, entry.first);
+}
+
+void xt_gui_canvas_texture_release(SDL_GPUDevice *device, uint64_t canvas_id) {
+  using namespace xtgui::renderer_detail;
+  auto it = g_canvas_textures.find(canvas_id);
+  if (it == g_canvas_textures.end()) return;
+  if (it->second.texture != nullptr) SDL_ReleaseGPUTexture(device, it->second.texture);
+  g_canvas_textures.erase(it);
 }

package/runtime/ext_gui/renderer_internal.h

@@ -35,19 +35,12 @@ struct TextVertex {
 };
 
 /* Image quads are batched by texture; textures are cached by source path. */
-struct ImageBatch {
-  SDL_GPUTexture *texture = nullptr;
-  uint32_t first = 0;
-  uint32_t count = 0;
-};
-
 extern SDL_GPUGraphicsPipeline *g_pipeline;
 extern SDL_GPUGraphicsPipeline *g_text_pipeline;
 extern SDL_GPUGraphicsPipeline *g_image_pipeline;
 extern SDL_GPUSampler *g_sampler;
 extern int g_renderer_failed;
 extern bool g_text_ok;
-extern std::vector<ImageBatch> g_image_batches;
 extern std::unordered_map<std::string, SDL_GPUTexture *> g_image_textures;
 
 /* -- glyph atlas ---------------------------------------------------------- */
@@ -104,7 +97,12 @@ SDL_GPUSampler *createSampler(SDL_GPUDevice *device);
 /* -- images --------------------------------------------------------------- */
 
 SDL_GPUGraphicsPipeline *createImagePipeline(SDL_GPUDevice *device, SDL_Window *reference);
-SDL_GPUTexture *ensureImageTexture(SDL_GPUDevice *device, const std::string &src);
+/** Decode `src` (cached) and upload it as an RGBA texture. `pixel_width` /
+ * `pixel_height` are the drawn size in device pixels; vector sources (SVG) are
+ * rasterised at that size, raster sources ignore it. The texture cache is keyed
+ * by the resulting pixel size, so an SVG drawn at two sizes gets two textures. */
+SDL_GPUTexture *ensureImageTexture(SDL_GPUDevice *device, const std::string &src, int pixel_width,
+                                   int pixel_height);
 
 }  // namespace renderer_detail
 }  // namespace xtgui

package/runtime/ext_gui/renderer_text.cpp

@@ -295,22 +295,26 @@ void xt_gui_text_upload(SDL_GPUDevice *device, XtGuiGeometry *geometry,
   if (scale <= 0.0f) scale = 1.0f;
 
   std::vector<TextVertex> verts;
-  for (const xtgui::PaintText &run : list.texts) {
+  geometry->op_counts.assign(list.texts.size(), 0);
+  for (size_t index = 0; index < list.texts.size(); index++) {
+    const xtgui::PaintText &run = list.texts[index];
     if (run.text.empty() || run.color.a <= 0.0f) continue;
     xtgui::Font *logical = xtgui::xt_text_resolve(run.font);
     if (logical == nullptr) continue;
-    xtgui::FontSpec raster_spec = run.font;
-    raster_spec.pixel_size = run.font.pixel_size * scale;
-    xtgui::Font *raster = xtgui::xt_text_resolve(raster_spec);
-    if (raster == nullptr) raster = logical;
 
     std::vector<xtgui::ShapedGlyph> glyphs;
     xtgui::xt_text_shape_run(run.text, logical, glyphs);
     float pen_x = run.x;
+    uint32_t before = (uint32_t)verts.size();
     for (const xtgui::ShapedGlyph &glyph : glyphs) {
       if (glyph.glyph != 0) {
+        xtgui::Font *face = glyph.font != nullptr ? glyph.font : logical;
+        if (scale != 1.0f) {
+          xtgui::Font *scaled = xtgui::xt_text_scale(face, run.font.pixel_size * scale);
+          if (scaled != nullptr) face = scaled;
+        }
         GlyphEntry entry;
-        if (ensureGlyph(device, raster, glyph.glyph, entry)) {
+        if (ensureGlyph(device, face, glyph.glyph, entry)) {
           float quad_x = pen_x + glyph.x_offset + (float)entry.left / scale;
           float quad_y = run.baseline + glyph.y_offset - (float)entry.top / scale;
           float quad_w = (float)entry.width / scale;
@@ -320,27 +324,8 @@ void xt_gui_text_upload(SDL_GPUDevice *device, XtGuiGeometry *geometry,
       }
       pen_x += glyph.x_advance;
     }
+    geometry->op_counts[index] = (uint32_t)verts.size() - before;
   }
   uploadVertices(device, geometry, verts.data(), (uint32_t)verts.size(), sizeof(TextVertex));
   flushAtlas(device);
 }
-
-void xt_gui_text_draw(SDL_GPUCommandBuffer *cmd, SDL_GPURenderPass *pass, XtGuiGeometry *geometry,
-                      float viewport_width, float viewport_height) {
-  using namespace xtgui::renderer_detail;
-  if (!g_text_ok || geometry->buffer == nullptr || geometry->vertex_count == 0) return;
-  if (g_atlas_texture == nullptr) return;
-  if (viewport_width <= 0.0f || viewport_height <= 0.0f) return;
-  SDL_BindGPUGraphicsPipeline(pass, g_text_pipeline);
-  SDL_GPUBufferBinding binding;
-  binding.buffer = geometry->buffer;
-  binding.offset = 0;
-  SDL_BindGPUVertexBuffers(pass, 0, &binding, 1);
-  SDL_GPUTextureSamplerBinding atlas_binding;
-  atlas_binding.texture = g_atlas_texture;
-  atlas_binding.sampler = g_sampler;
-  SDL_BindGPUFragmentSamplers(pass, 0, &atlas_binding, 1);
-  float viewport[2] = {viewport_width, viewport_height};
-  SDL_PushGPUVertexUniformData(cmd, 0, viewport, sizeof(viewport));
-  SDL_DrawGPUPrimitives(pass, geometry->vertex_count, 1, 0, 0);
-}

package/runtime/ext_gui/style.h

@@ -22,8 +22,12 @@ namespace xtgui {
 enum class Display { None, Block, Inline, InlineBlock, Flex, ListItem };
 enum class Position { Static, Relative, Absolute, Fixed };
 enum class FlexDirection { Row, RowReverse, Column, ColumnReverse };
+enum class FlexWrap { NoWrap, Wrap, WrapReverse };
 enum class JustifyContent { FlexStart, FlexEnd, Center, SpaceBetween, SpaceAround, SpaceEvenly };
 enum class AlignItems { Stretch, FlexStart, FlexEnd, Center, Baseline };
+enum class AlignContent { Stretch, FlexStart, FlexEnd, Center, SpaceBetween, SpaceAround };
+enum class FloatSide { None, Left, Right };
+enum class Clear { None, Left, Right, Both };
 enum class TextAlign { Start, Center, End, Justify };
 enum class WhiteSpace { Normal, NoWrap, Pre, PreWrap, PreLine };
 enum class Overflow { Visible, Hidden, Scroll, Auto };
@@ -84,9 +88,13 @@ struct XtStyle {
   WhiteSpace white_space = WhiteSpace::Normal;  // inherited
 
   FlexDirection flex_direction = FlexDirection::Row;
+  FlexWrap flex_wrap = FlexWrap::NoWrap;
   JustifyContent justify_content = JustifyContent::FlexStart;
   AlignItems align_items = AlignItems::Stretch;
+  AlignContent align_content = AlignContent::Stretch;
   Length gap;
+  Length row_gap;
+  Length column_gap;
   float flex_grow = 0.0f;
   float flex_shrink = 1.0f;
   Length flex_basis;
@@ -96,6 +104,9 @@ struct XtStyle {
   int z_index = 0;
   bool has_z_index = false;
 
+  FloatSide float_side = FloatSide::None;
+  Clear clear = Clear::None;
+
   /** `transition` specs; not inherited. Applied by `XtDocument`. */
   std::vector<TransitionSpec> transitions;
 };

package/runtime/ext_gui/style_print.cpp

@@ -61,9 +61,14 @@ std::string xt_style_property_to_string(const XtStyle &style, const std::string
   static const char *const displayNames[] = {"none", "block", "inline", "inline-block", "flex", "list-item"};
   static const char *const positionNames[] = {"static", "relative", "absolute", "fixed"};
   static const char *const flexNames[] = {"row", "row-reverse", "column", "column-reverse"};
+  static const char *const wrapNames[] = {"nowrap", "wrap", "wrap-reverse"};
   static const char *const justifyNames[] = {"flex-start", "flex-end", "center", "space-between",
                                              "space-around", "space-evenly"};
   static const char *const alignNames[] = {"stretch", "flex-start", "flex-end", "center", "baseline"};
+  static const char *const alignContentNames[] = {"stretch", "flex-start", "flex-end", "center",
+                                                  "space-between", "space-around"};
+  static const char *const floatNames[] = {"none", "left", "right"};
+  static const char *const clearNames[] = {"none", "left", "right", "both"};
   static const char *const alignTextNames[] = {"start", "center", "end", "justify"};
 
   if (property == "display") return displayNames[(int)style.display];
@@ -98,9 +103,15 @@ std::string xt_style_property_to_string(const XtStyle &style, const std::string
   }
   if (property == "text-align") return alignTextNames[(int)style.text_align];
   if (property == "flex-direction") return flexNames[(int)style.flex_direction];
+  if (property == "flex-wrap") return wrapNames[(int)style.flex_wrap];
   if (property == "justify-content") return justifyNames[(int)style.justify_content];
   if (property == "align-items") return alignNames[(int)style.align_items];
+  if (property == "align-content") return alignContentNames[(int)style.align_content];
   if (property == "gap") return formatLength(style.gap);
+  if (property == "row-gap") return formatLength(style.row_gap);
+  if (property == "column-gap") return formatLength(style.column_gap);
+  if (property == "float") return floatNames[(int)style.float_side];
+  if (property == "clear") return clearNames[(int)style.clear];
   if (property == "flex-grow") return formatNumber(style.flex_grow);
   if (property == "flex-shrink") return formatNumber(style.flex_shrink);
   if (property == "flex-basis") return formatLength(style.flex_basis);

package/runtime/ext_gui/style_ua.cpp

@@ -40,6 +40,13 @@ void xt_style_apply_user_agent(const Node *node, XtStyle *style) {
     style->display = Display::InlineBlock;
   }
   if (tag == "img") style->display = Display::InlineBlock;
+  /* `<video>` mirrors `<img>` (a replaced inline-block; 300x150 by default from
+   * layout), while `<audio>` and its `<source>`/`<track>` children have no
+   * rendered box of their own. */
+  if (tag == "video") style->display = Display::InlineBlock;
+  /* `<canvas>` is also a replaced inline-block (300x150 default in layout). */
+  if (tag == "canvas") style->display = Display::InlineBlock;
+  if (tag == "audio" || tag == "source" || tag == "track") style->display = Display::None;
   if (tag == "body") style->margin.set({8.0f, Unit::Px});
   if (tag == "p") style->margin.top = style->margin.bottom = {16.0f, Unit::Px};
   if (tag == "blockquote") {

package/runtime/ext_gui/style_values.cpp

@@ -347,6 +347,23 @@ void xt_style_apply_declaration(XtStyle *style, const std::string &property,
     if (parseEnum(value, names, 4, &index)) style->flex_direction = (FlexDirection)index;
     return;
   }
+  if (property == "flex-wrap") {
+    static const char *const names[] = {"nowrap", "wrap", "wrap-reverse"};
+    int index = 0;
+    if (parseEnum(value, names, 3, &index)) style->flex_wrap = (FlexWrap)index;
+    return;
+  }
+  if (property == "flex-flow") {
+    /* `flex-flow: <direction> || <wrap>` in either order. */
+    for (const std::string &token : xt_css_split_whitespace(value)) {
+      static const char *const dirs[] = {"row", "row-reverse", "column", "column-reverse"};
+      static const char *const wraps[] = {"nowrap", "wrap", "wrap-reverse"};
+      int index = 0;
+      if (parseEnum(token, dirs, 4, &index)) style->flex_direction = (FlexDirection)index;
+      else if (parseEnum(token, wraps, 3, &index)) style->flex_wrap = (FlexWrap)index;
+    }
+    return;
+  }
   if (property == "justify-content") {
     static const char *const names[] = {"flex-start", "flex-end", "center", "space-between",
                                         "space-around", "space-evenly"};
@@ -360,10 +377,20 @@ void xt_style_apply_declaration(XtStyle *style, const std::string &property,
     if (parseEnum(value, names, 5, &index)) style->align_items = (AlignItems)index;
     return;
   }
-  if (property == "gap" || property == "row-gap" || property == "column-gap") {
+  if (property == "align-content") {
+    static const char *const names[] = {"stretch", "flex-start", "flex-end", "center",
+                                        "space-between", "space-around"};
+    int index = 0;
+    if (parseEnum(value, names, 6, &index)) style->align_content = (AlignContent)index;
+    return;
+  }
+  if (property == "gap") {
     assignLength(&style->gap, value);
+    style->row_gap = style->column_gap = style->gap;
     return;
   }
+  if (property == "row-gap") { assignLength(&style->row_gap, value); return; }
+  if (property == "column-gap") { assignLength(&style->column_gap, value); return; }
   if (property == "flex-grow") {
     float number = 0;
     if (xt_css_parse_number(value, &number)) style->flex_grow = number;
@@ -433,6 +460,18 @@ void xt_style_apply_declaration(XtStyle *style, const std::string &property,
     }
     return;
   }
+  if (property == "float") {
+    static const char *const names[] = {"none", "left", "right"};
+    int index = 0;
+    if (parseEnum(value, names, 3, &index)) style->float_side = (FloatSide)index;
+    return;
+  }
+  if (property == "clear") {
+    static const char *const names[] = {"none", "left", "right", "both"};
+    int index = 0;
+    if (parseEnum(value, names, 4, &index)) style->clear = (Clear)index;
+    return;
+  }
   if (property == "transition") {
     parseTransitionShorthand(value, &style->transitions);
     return;