[scope-vt] Fix crash with display:inline and friends

kevers-google · chromium-wpt-export-bot · commit 37dc10d8d727 · 2025-08-06T09:18:04.000-07:00
Skip the view transition when attempting a scoped-VT on an element that has an inline display type. Display type inline-block is an exception since it has block characteristics in addition to inline. Also skip the VT when the display type inline's its children like ruby-text, or content. These display types do not create a layout box. A console warning is triggered to indicate why the transition was skipped. Once resolved in the spec, we can revisit how these display types are handled. Bug: 434891109, 436804019 Change-Id: I8ef4375b8805a788bc55ae30e90e2201c1bb83b7 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6819008 Commit-Queue: Kevin Ellis <kevers@chromium.org> Reviewed-by: Steve Kobes <skobes@chromium.org> Cr-Commit-Position: refs/heads/main@{#1497618}
diff --git a/css/css-view-transitions/scoped/crashtests/display-inline.html b/css/css-view-transitions/scoped/crashtests/display-inline.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html class="test-wait">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Scoped VT on display:inline element</title>
+</head>
+<style>
+  #scope {
+    view-transition-name: scope;
+  }
+</style>
+<body>
+  <p><span id="scope">Hello</span> world</p>
+</body>
+<script>
+  async function testDisplayProperty(type) {
+    scope.style = `display: ${type}`;
+    const vt = scope.startViewTransition();
+    await vt.finished;
+  }
+
+  async function runTests() {
+    const tests = [
+      // Inline display types:
+      'inline',
+      'inline-flex',
+      'inline flow',
+      'math',
+      'ruby',
+      // No box, and children are inline:
+      'ruby-text',
+      'content'
+    ];
+    tests.forEach(async display => {
+      await testDisplayProperty(display);
+    });
+    document.documentElement.classList.remove('test-wait');
+  }
+
+  window.onload = runTests;
+</script>
+</html>
diff --git a/css/css-view-transitions/scoped/display-inline-block.html b/css/css-view-transitions/scoped/display-inline-block.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <!-- TODO update link -->
+  <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Scoped view transition with inline block</title>
+</head>
+<style>
+  #target {
+    display: inline-block;
+    view-transition-name: target;
+  }
+
+  ::view-transition-group(target),
+  ::view-transition-old(target) {
+    animation: unset;
+  }
+
+  @keyframes colorize {
+    to { opacity: 0.5; }
+  }
+
+  ::view-transition-new(target) {
+   animation: colorize 1s paused steps(1, jump-start);
+  }
+</style>
+<script src="/web-animations/testcommon.js"></script>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+  <p><span id="target">Hello</span> World</p>
+</body>
+<script>
+  promise_test(async t => {
+    const vt = target.startViewTransition();
+    await vt.ready;
+    await Promise.all(document.getAnimations().map(a => a.ready));
+    const style =
+        getComputedStyle(target, '::view-transition-new(target)');
+    assert_equals(style.opacity, '0.5', 'Opacity animation is in effect');
+  }, 'Scoped view transition on an inline-block element');
+</script>
+</html>
