Skip to content

GitLab

T
tangled
Commit 1d5b803f authored by evliu's avatar evliu Committed by Commit Bot
Browse files
Options

Add WebVTT support for inline styling - Web Platform Tests 

Bug: 724598
Change-Id: If32e7ec6dda45f38c0d4b5e87d8251a1a60ed10a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1863568
Commit-Queue: Evan Liu <evliu@google.com>
Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#707010}
parent 421689f8
Hide whitespace changes
Inline Side-by-side
Showing with 561 additions and 0 deletions
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority-ref.html 0 → 100644
View file @ 1d5b803f
<!DOCTYPE html>
<html class="reftest-wait">
<title>Reference for Embedded Style: Cascade Priority</title>
<style>
::cue {
color: green;
}
::cue {
background: green;
}
::cue {
opacity: 0.5;
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/embedded_style_without_style.vtt" default>
</video>
</html>
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority.html 0 → 100644
View file @ 1d5b803f
<!DOCTYPE html>
<html class="reftest-wait">
<title>Embedded Style: Cascade Priority</title>
<link rel="match" href="embedded_style_cascade_priority-ref.html">
<link rel="help" href="https://w3c.github.io/webvtt/#obtaining-css-boxes">
<script src="/common/reftest-wait.js"></script>
<style>
/* Embedded style should take precedence over author style, so the cue color should be green. */
::cue {
color: red;
}
</style>
<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/embedded_style_cascade_priority.vtt" default>
</video>
</html>
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/embedded_style_imports_blocked-ref.html 0 → 100644
View file @ 1d5b803f
<!DOCTYPE html>
<html class="reftest-wait">
<title>Reference for Embedded Style: Imports Blocked</title>
<script src="/common/reftest-wait.js"></script>
<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/embedded_style_without_style.vtt" default>
</video>
</html>
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/embedded_style_imports_blocked.html 0 → 100644
View file @ 1d5b803f
<!DOCTYPE html>
<html class="reftest-wait">
<title>Embedded Style: Imports Blocked</title>
<link rel="match" href="embedded_style_imports_blocked-ref.html">
<link rel="help" href="https://w3c.github.io/webvtt/#obtaining-css-boxes">
<script src="/common/reftest-wait.js"></script>
<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/embedded_style_imports_blocked.vtt" default>
</video>
</html>
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/embedded_style_invalid_format-ref.html 0 → 100644
View file @ 1d5b803f
<!DOCTYPE html>
<html class="reftest-wait">
<title>Reference for Embedded Style: Invalid Format</title>
<style>
::cue {
color: green;
}
::cue(v[voice=Voice1])
{
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==)
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/embedded_style_without_style.vtt" default>
</video>
</html>
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/embedded_style_invalid_format.html 0 → 100644
View file @ 1d5b803f
<!DOCTYPE html>
<html class="reftest-wait">
<title>Embedded Style: Invalid Format</title>
<link rel="match" href="embedded_style_invalid_format-ref.html">
<link rel="help" href="https://w3c.github.io/webvtt/#obtaining-css-boxes">
<script src="/common/reftest-wait.js"></script>
<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/embedded_style_invalid_format.vtt" default>
</video>
</html>
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries-ref.html 0 → 100644
View file @ 1d5b803f
<!DOCTYPE html>
<title>Embedded Style: Media Queries</title>
<style>iframe {width:100%; height:500px}</style>
<iframe src="support/embedded_style_media_queries-iframe-ref.html"></iframe>
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries.html 0 → 100644
View file @ 1d5b803f
<!doctype html>
<html class="reftest-wait">
<title>Embedded Style: Media Queries</title>
<link rel="match" href="embedded_style_media_queries-ref.html">
<script src="/common/reftest-wait.js"></script>
<style>iframe {width:100%; height:500px}</style>
<script>
onload = function() {
let iframeWindow = document.querySelector('iframe').contentWindow;
iframeWindow.requestAnimationFrame(() => {
iframeWindow.requestAnimationFrame(() => {
setTimeout(function() {
takeScreenshot();
}, 100);
});
});
};
</script>
<iframe src="support/embedded_style_media_queries-iframe.html"></iframe>
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries_resized-ref.html 0 → 100644
View file @ 1d5b803f
<!DOCTYPE html>
<title>Embedded Style: Media Queries Resize Frame</title>
<style>iframe {width:100%; height:300px}</style>
<iframe src="support/embedded_style_media_queries_resized-iframe-ref.html"></iframe>
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries_resized.html 0 → 100644
View file @ 1d5b803f
<!doctype html>
<html class="reftest-wait">
<title>Embedded Style: Media Queries Resize Frame</title>
<link rel="match" href="embedded_style_media_queries_resized-ref.html">
<script src="/common/reftest-wait.js"></script>
<style>iframe {width:100%; height:500px}</style>
<script>
onload = function() {
document.getElementById("form-iframe").style.height = "300px";
let iframeWindow = document.querySelector('iframe').contentWindow;
iframeWindow.requestAnimationFrame(() => {
iframeWindow.requestAnimationFrame(() => {
setTimeout(function() {
takeScreenshot();
}, 100);
});
});
};
</script>
<iframe id="form-iframe" src="support/embedded_style_media_queries_resized-iframe.html"></iframe>
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/embedded_style_multiple_tracks-ref.html 0 → 100644
View file @ 1d5b803f
<!DOCTYPE html>
<html class="reftest-wait">
<title>Reference for Embedded Style: Multiple Tracks, style only applies to the track it was sourced for</title>
<style>
::cue(v[voice=Voice1]) {
color: green;
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/embedded_style_without_style.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
document.getElementsByTagName('track')[1].track.mode = 'showing';
</script>
</video>
</html>
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/embedded_style_multiple_tracks.html 0 → 100644
View file @ 1d5b803f
<!DOCTYPE html>
<html class="reftest-wait">
<title>Embedded Style: Multiple Tracks, style only applies to the track it was sourced for</title>
<link rel="match" href="embedded_style_multiple_tracks-ref.html">
<link rel="help" href="https://w3c.github.io/webvtt/#obtaining-css-boxes">
<script src="/common/reftest-wait.js"></script>
<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/embedded_style_multiple_tracks1.vtt">
<track src="support/embedded_style_multiple_tracks2.vtt">
<script>
document.getElementsByTagName('track')[0].track.mode = 'showing';
document.getElementsByTagName('track')[1].track.mode = 'showing';
</script>
</video>
</html>
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/embedded_style_selectors-ref.html 0 → 100644
View file @ 1d5b803f
<!DOCTYPE html>
<html class="reftest-wait">
<title>Reference for Embedded Style: Selectors</title>
<style>
::cue(b) {
background: green;
color: green;
}
::cue(i) {
background: lime;
color: lime;
}
::cue {
font-size: 11px;
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/embedded_style_without_style.vtt" default>
</video>
</html>
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/embedded_style_selectors.html 0 → 100644
View file @ 1d5b803f
<!DOCTYPE html>
<html class="reftest-wait">
<title>Embedded Style: Selectors</title>
<link rel="match" href="embedded_style_selectors-ref.html">
<link rel="help" href="https://w3c.github.io/webvtt/#obtaining-css-boxes">
<script src="/common/reftest-wait.js"></script>
<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/embedded_style_selectors.vtt" default>
</video>
</html>
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/embedded_style_urls-ref.html 0 → 100644
View file @ 1d5b803f
<!DOCTYPE html>
<html class="reftest-wait">
<title>Reference for Embedded Style: URLs, only allow data URLs</title>
<style>
::cue(v[voice=Voice1])
{
background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
}
::cue(b)
{
background: url("support/invalid.png")
}
::cue(i)
{
background: url("support/invalid.png")
}
</style>
<script src="/common/reftest-wait.js"></script>
<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/embedded_style_without_style.vtt" default>
</video>
</html>
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/embedded_style_urls.html 0 → 100644
View file @ 1d5b803f
<!DOCTYPE html>
<html class="reftest-wait">
<title>Embedded Style: URLs, only allow data URLs</title>
<link rel="match" href="embedded_style_urls-ref.html">
<link rel="help" href="https://w3c.github.io/webvtt/#obtaining-css-boxes">
<script src="/common/reftest-wait.js"></script>
<video width="320" height="180" autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="support/embedded_style_urls.vtt" default>
</video>
</html>
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_cascade_priority.vtt 0 → 100644
View file @ 1d5b803f
WEBVTT
NOTE
opacity: 0.5; should apply.
color: green; should apply.
background: green; should apply because multiple STYLE blocks are supported.
STYLE
::cue {
opacity: 0.5;
}
::cue {
color: green;
}
STYLE
::cue {
background: green;
}
00:00:00.000 --> 00:00:05.000
<v Voice1>This <i>is</i> a <b>test</b> subtitle
00:00:00.000 --> 00:00:05.000
<v Voice2>Here <i>is</i> a <b>second</b> subtitle
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_imports_blocked.vtt 0 → 100644
View file @ 1d5b803f
WEBVTT
NOTE
@import rules are prohibited in WebVTT files.
STYLE
@import "imported_style.css"
@import url("imported_style.css")
00:00:00.000 --> 00:00:05.000
<v Voice1>This <i>is</i> a <b>test</b> subtitle
00:00:00.000 --> 00:00:05.000
<v Voice2>Here <i>is</i> a <b>second</b> subtitle
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_invalid_format.vtt 0 → 100644
View file @ 1d5b803f
WEBVTT
NOTE
Only color: green; and the green background-image should apply. All other style blocks are invalid.
::cue {
background: red;
}
STYLE
::cue {
background: red;
}
STYLE
::cue(v[voice=Voice1])
{
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==
STYLE
::cue {
back
STYLE
ground: red;
}
STYLE
::cue {
color: green;
}
S T Y L E
::cue {
background: red;
}
STYLE
::cue {
background: red;
}
STYLE {
::cue {
background: red;
}
}
::cue {
background: red;
}
STYLE Invalid
::cue {
background: red;
}
style
::cue {
background: red;
}
STYLE
<!--::cue {-->
background: red;
}
STYLE
00:00:00.000 --> 00:00:05.000
<v Voice1>This <i>is</i> a <b>test</b> subtitle
STYLE
::cue {
background: red;
}
00:00:00.000 --> 00:00:05.000
<v Voice2>Here <i>is</i> a <b>second</b> subtitle
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries-iframe-ref.html 0 → 100644
View file @ 1d5b803f
<!DOCTYPE html>
<title>Reference for Embedded Style: Media Queries</title>
<style>
video {
outline: solid;
width: 320px;
height: 240px;
}
::cue {
color: green;
}
</style>
<video autoplay onplaying="this.onplaying = null; this.pause();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="embedded_style_without_style.vtt" default>
</video>
</html>
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries-iframe.html 0 → 100644
View file @ 1d5b803f
<!DOCTYPE html>
<title>Embedded Style: Media Queries</title>
<style>
video {
outline: solid;
width: 320px;
height: 240px;
}
</style>
<video autoplay onplaying="this.onplaying = null; this.pause();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="embedded_style_media_queries.vtt" default>
</video>
</html>
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries.vtt 0 → 100644
View file @ 1d5b803f
WEBVTT
NOTE
color: red; should not apply because it is overriden by color: green.
color: green; should apply because the screen width is less than 1000px.
background: green; should only apply in the resized test case where the screen is resized to 300px.
background: red; should not apply because the screen width is greater than 100px.
STYLE
::cue
{
color: red;
}
@media only screen and (max-height: 1000px) {
::cue
{
color: green;
}
}
@media only screen and (max-height: 400px) {
::cue
{
background: green;
}
}
}
@media only screen and (max-height: 100px) {
::cue
{
background: red;
}
}
00:00:00.000 --> 00:00:05.000
<v Voice1>This <i>is</i> a <b>test</b> subtitle
00:00:00.000 --> 00:00:05.000
<v Voice2>Here <i>is</i> a <b>second</b> subtitle
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries_resized-iframe-ref.html 0 → 100644
View file @ 1d5b803f
<!DOCTYPE html>
<title>Reference for Embedded Style: Media Queries Resize Frame</title>
<style>
video {
outline: solid;
width: 320px;
height: 240px;
}
::cue {
color: green;
background: green;
}
</style>
<video autoplay onplaying="this.onplaying = null; this.pause();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="embedded_style_without_style.vtt" default>
</video>
</html>
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries_resized-iframe.html 0 → 100644
View file @ 1d5b803f
<!DOCTYPE html>
<title>Embedded Style: Media Queries Resize Frame</title>
<style>
video {
outline: solid;
width: 320px;
height: 240px;
}
</style>
<video autoplay onplaying="this.onplaying = null; this.pause();">
<source src="/media/white.webm" type="video/webm">
<source src="/media/white.mp4" type="video/mp4">
<track src="embedded_style_media_queries.vtt" default>
</video>
</html>
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_multiple_tracks1.vtt 0 → 100644
View file @ 1d5b803f
WEBVTT
NOTE
The style in this file should not apply to cues from other text tracks.
STYLE
::cue {
color: green;
}
00:00:00.000 --> 00:00:05.000
This <i>is</i> a <b>test</b> subtitle
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_selectors.vtt 0 → 100644
View file @ 1d5b803f
WEBVTT
NOTE
The first five selectors should apply. The rest should not apply because they do
not apply to a hypothetical document with a single empty element with no explicit
name, no namespace, no attribute, no classes, no IDs, and unknown primary language
that acts as the originating element for the cue pseudo-elements.
STYLE
@namespace html url(http://www.w3.org/1999/xhtml);
*|*::cue(b) {
background: green;
}
|*::cue(i) {
color: lime;
}
::cue(i) {
background: lime;
}
*::cue(b) {
color: green;
}
::cue {
font-size: 11px;
}
video::cue {
background: red;
}
i {
color: red;
}
* {
color: red;
}
* ::cue(i) {
color: red;
}
* > *::cue(i) {
color: red;
}
* + *::cue(i) {
color: red;
}
html|*::cue(i) {
color: red;
}
00:00:00.000 --> 00:00:05.000
<v Voice1>This <i>is</i> a <b>test</b> subtitle
00:00:00.000 --> 00:00:05.000
<v Voice2>Here <i>is</i> a <b>second</b> subtitle
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_urls.vtt 0 → 100644
View file @ 1d5b803f
WEBVTT
NOTE
Background for Voice1 should apply.
The other two backgrounds should not render because non-data URLs are not supported.
STYLE
::cue(v[voice=Voice1])
{
background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
}
::cue(b)
{
background: url("support/background.png")
}
::cue(i) {
background: url("support/background.png");
background: -webkit-image-set(url("support/background.png") 1x, url("support/background.png") 2x);
}
00:00:00.000 --> 00:00:05.000
<v Voice1>This <i>is</i> a <b>test</b> subtitle
00:00:00.000 --> 00:00:05.000
<v Voice2>Here <i>is</i> a <b>second</b> subtitle
third_party/blink/web_tests/external/wpt/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_without_style.vtt 0 → 100644
View file @ 1d5b803f
WEBVTT
00:00:00.000 --> 00:00:05.000
<v Voice1>This <i>is</i> a <b>test</b> subtitle
00:00:00.000 --> 00:00:05.000
<v Voice2>Here <i>is</i> a <b>second</b> subtitle
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment