Cherry-pick b3d9884. rdar://112951878

WebVTT vertical multiline captions are cut off https://bugs.webkit.org/show_bug.cgi?id=260148 rdar://112951878 Reviewed by Eric Carlson. Currently, vertical webvtt captions (such as Japanese) are not Displayed correctly on Safari: long cues will get cut off, rather Than wrapping and displaying multiple lines. This is because the height Of the div with pseudo-class webkit-media-text-track-display was Not being calculated with the correct unit. To fix this, I changed The unit from CQW to CQH. Added one layout test. * LayoutTests/http/tests/media/resources/hls/subtitles/verticalrl.vtt: Added. * LayoutTests/http/tests/media/track/track-webvtt-vertical-multi-line-expected.txt: Added. * LayoutTests/http/tests/media/track/track-webvtt-vertical-multi-line.html: Added. * Source/WebCore/html/track/VTTCue.cpp: (WebCore::VTTCueBox::applyCSSProperties) Canonical link: https://commits.webkit.org/267162@main Identifier: 265870.454@safari-7616-branch
WebKit · Aug 28, 2023 · 079de89 · 079de89
1 parent 3dca3ca
commit 079de89
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 1 deletion.
diff --git a/LayoutTests/http/tests/media/resources/hls/subtitles/verticalrl.vtt b/LayoutTests/http/tests/media/resources/hls/subtitles/verticalrl.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000 vertical:rl
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
diff --git a/LayoutTests/http/tests/media/track/track-webvtt-vertical-multi-line-expected.txt b/LayoutTests/http/tests/media/track/track-webvtt-vertical-multi-line-expected.txt
@@ -0,0 +1,11 @@
+
+EVENT(canplay)
+EVENT(addtrack)
+EXPECTED (video.textTracks.length == '1') OK
+RUN(video.textTracks[0].mode = 'showing')
+RUN(video.currentTime = 1)
+EVENT(seeked)
+EXPECTED (window.internals.shadowRoot(video).querySelector('span[pseudo=cue]') != 'null') OK
+EXPECTED (video.offsetHeight >= window.internals.shadowRoot(video).querySelector('span[pseudo=cue]').offsetHeight == 'true') OK
+END OF TEST
+
diff --git a/LayoutTests/http/tests/media/track/track-webvtt-vertical-multi-line.html b/LayoutTests/http/tests/media/track/track-webvtt-vertical-multi-line.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html>
+    <head>
+        <title>WebVTT multiline cues with vertical writing direction should wrap</title>
+        <script src="../../../../resources/js-test-pre.js"></script>
+        <script src="../../media-resources/video-test.js"></script>
+        <script src="../../media-resources/media-file.js"></script>
+        <script>
+            async function runTest()
+            {
+                video = document.getElementById('video');
+                video.src = findMediaFile('video', '../resources/test');
+                await waitFor(video, 'canplay');
+                let track = document.createElement('track');
+                track.src = '../resources/hls/subtitles/verticalrl.vtt';
+                video.appendChild(track)
+
+                await waitFor(video.textTracks, 'addtrack');
+                testExpected("video.textTracks.length", 1);
+                run("video.textTracks[0].mode = 'showing'");
+
+                run("video.currentTime = 1");
+                await waitFor(video, 'seeked');
+
+                window.internals.ensureUserAgentShadowRoot(video);
+                await testExpectedEventually("window.internals.shadowRoot(video).querySelector('span[pseudo=cue]')", null, "!=", 1000);
+                await testExpected("video.offsetHeight >= window.internals.shadowRoot(video).querySelector('span[pseudo=cue]').offsetHeight", true);
+                endTest();
+            }
+        </script>
+    </head>
+    <body onload="runTest()">
+        <video id="video" muted></video>
+    </body>
+</html>
diff --git a/Source/WebCore/html/track/VTTCue.cpp b/Source/WebCore/html/track/VTTCue.cpp
@@ -218,7 +218,7 @@ void VTTCueBox::applyCSSProperties()
 
     // the 'height' property must be set to height
     std::visit(WTF::makeVisitor([&] (double height) {
-        setInlineStyleProperty(CSSPropertyHeight, height, CSSUnitType::CSS_CQW);
+        setInlineStyleProperty(CSSPropertyHeight, height, CSSUnitType::CSS_CQH);
     }, [&] (auto) {
         setInlineStyleProperty(CSSPropertyHeight, CSSValueAuto);
     }), cue->height());