From 36d22d82aa202bb199967e9512281e9a53db42c9 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 21:33:14 +0200
Subject: Adding upstream version 115.7.0esr.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../old-content-is-inline-ref.html                 | 73 ++++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-is-inline-ref.html

(limited to 'testing/web-platform/tests/css/css-view-transitions/old-content-is-inline-ref.html')
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-is-inline-ref.html b/testing/web-platform/tests/css/css-view-transitions/old-content-is-inline-ref.html
new file mode 100644
index 0000000000..5fe7d3fa1d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-is-inline-ref.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<title>View transitions: Old content is an inline element (ref)</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:bokan@chromium.org">
+
+<style>
+:root { background-color: rebeccapurple; }
+body { margin: 0; }
+
+.container {
+  position: absolute;
+  left: 100px;
+  width: 400px;
+  height: 100px;
+  background-color: grey;
+}
+
+.container.start {
+  top: 100px;
+}
+
+.container.end {
+  top: 300px;
+}
+
+.container.transitioned {
+  left: 20px;
+  width: 200px;
+  transform: translateY(-50px);
+}
+
+.inline {
+  background-color: limegreen;
+  color: rgba(0, 0, 0, 0);
+}
+
+.transitioned .inline {
+  opacity: 0;
+}
+
+#dummyEndInline {
+  position: absolute;
+  left: 20px;
+  top: 250px;
+  /* scale transform applied in script below */
+  transform-origin: top left;
+}
+
+</style>
+
+<div class="container start">
+  <span>FILLER FILLER</span>
+  <span id="start" class="inline">INLINE INLINE INLINE INLINE</span>
+  <p>START STATE</p>
+</div>
+
+<div class="container end transitioned">
+  <span>FILLER FILLER</span>
+  <span id="end" class="inline">INLINE INLINE INLINE INLINE</span>
+  <p>END STATE</p>
+</div>
+
+<div id="dummyEndInline">
+  <span style="opacity:0">FILLER FILLER</span>
+  <span class="inline">INLINE INLINE INLINE INLINE</span>
+</div>
+<script>
+  let endWidth = document.getElementById('end').getBoundingClientRect().width;
+  let startWidth = document.getElementById('start').getBoundingClientRect().width;
+  let scale = endWidth / startWidth;
+  document.getElementById('dummyEndInline').style.transform = `scale(${scale})`;
+</script>
+
-- 
cgit v1.2.3

