Add WebVTT support for inline styling.
Bug: 724598
Change-Id: Id55fde10149fe72cc5a7e12c1596fb51a5d36516
diff --git a/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority-ref.html b/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority-ref.html
new file mode 100644
index 0000000..4afd797
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority-ref.html
@@ -0,0 +1,21 @@
+<!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>
\ No newline at end of file
diff --git a/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority.html b/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority.html
new file mode 100644
index 0000000..db6822e
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/embedded_style_cascade_priority.html
@@ -0,0 +1,18 @@
+<!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>
diff --git a/webvtt/rendering/cues-with-video/processing-model/embedded_style_imports_blocked-ref.html b/webvtt/rendering/cues-with-video/processing-model/embedded_style_imports_blocked-ref.html
new file mode 100644
index 0000000..c57aa92
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/embedded_style_imports_blocked-ref.html
@@ -0,0 +1,10 @@
+<!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>
\ No newline at end of file
diff --git a/webvtt/rendering/cues-with-video/processing-model/embedded_style_imports_blocked.html b/webvtt/rendering/cues-with-video/processing-model/embedded_style_imports_blocked.html
new file mode 100644
index 0000000..1ffdf07
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/embedded_style_imports_blocked.html
@@ -0,0 +1,12 @@
+<!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>
diff --git a/webvtt/rendering/cues-with-video/processing-model/embedded_style_invalid_format-ref.html b/webvtt/rendering/cues-with-video/processing-model/embedded_style_invalid_format-ref.html
new file mode 100644
index 0000000..0f440b9
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/embedded_style_invalid_format-ref.html
@@ -0,0 +1,19 @@
+<!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>
\ No newline at end of file
diff --git a/webvtt/rendering/cues-with-video/processing-model/embedded_style_invalid_format.html b/webvtt/rendering/cues-with-video/processing-model/embedded_style_invalid_format.html
new file mode 100644
index 0000000..746816f
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/embedded_style_invalid_format.html
@@ -0,0 +1,12 @@
+<!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>
diff --git a/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries-ref.html b/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries-ref.html
new file mode 100644
index 0000000..f99172e
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries-ref.html
@@ -0,0 +1,4 @@
+<!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>
diff --git a/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries.html b/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries.html
new file mode 100644
index 0000000..c0aaa55
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries.html
@@ -0,0 +1,15 @@
+<!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>
+<script src="/common/utils.js"></script>
+<style>iframe {width:100%; height:500px}</style>
+<script>
+ onload = function() {
+ setTimeout(function() {
+ takeScreenshot();
+ }, 100);
+ }
+</script>
+<iframe src="support/embedded_style_media_queries-iframe.html"></iframe>
diff --git a/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries_resized-ref.html b/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries_resized-ref.html
new file mode 100644
index 0000000..5f1e0b9
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries_resized-ref.html
@@ -0,0 +1,4 @@
+<!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>
diff --git a/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries_resized.html b/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries_resized.html
new file mode 100644
index 0000000..3a7555e
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries_resized.html
@@ -0,0 +1,16 @@
+<!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>
+<script src="/common/utils.js"></script>
+<style>iframe {width:100%; height:500px}</style>
+<script>
+ onload = function() {
+ document.getElementById("form-iframe").style.height = "300px";
+ setTimeout(function() {
+ takeScreenshot();
+ }, 100);
+ }
+</script>
+<iframe id="form-iframe" src="support/embedded_style_media_queries_resized-iframe.html"></iframe>
diff --git a/webvtt/rendering/cues-with-video/processing-model/embedded_style_multiple_tracks-ref.html b/webvtt/rendering/cues-with-video/processing-model/embedded_style_multiple_tracks-ref.html
new file mode 100644
index 0000000..2a0effb
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/embedded_style_multiple_tracks-ref.html
@@ -0,0 +1,19 @@
+<!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>
\ No newline at end of file
diff --git a/webvtt/rendering/cues-with-video/processing-model/embedded_style_multiple_tracks.html b/webvtt/rendering/cues-with-video/processing-model/embedded_style_multiple_tracks.html
new file mode 100644
index 0000000..3c82027
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/embedded_style_multiple_tracks.html
@@ -0,0 +1,17 @@
+<!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>
diff --git a/webvtt/rendering/cues-with-video/processing-model/embedded_style_selectors-ref.html b/webvtt/rendering/cues-with-video/processing-model/embedded_style_selectors-ref.html
new file mode 100644
index 0000000..2ddbd56
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/embedded_style_selectors-ref.html
@@ -0,0 +1,23 @@
+<!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>
\ No newline at end of file
diff --git a/webvtt/rendering/cues-with-video/processing-model/embedded_style_selectors.html b/webvtt/rendering/cues-with-video/processing-model/embedded_style_selectors.html
new file mode 100644
index 0000000..55db5c7
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/embedded_style_selectors.html
@@ -0,0 +1,13 @@
+<!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>
diff --git a/webvtt/rendering/cues-with-video/processing-model/embedded_style_urls-ref.html b/webvtt/rendering/cues-with-video/processing-model/embedded_style_urls-ref.html
new file mode 100644
index 0000000..46832ff
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/embedded_style_urls-ref.html
@@ -0,0 +1,24 @@
+<!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>
\ No newline at end of file
diff --git a/webvtt/rendering/cues-with-video/processing-model/embedded_style_urls.html b/webvtt/rendering/cues-with-video/processing-model/embedded_style_urls.html
new file mode 100644
index 0000000..2faff05
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/embedded_style_urls.html
@@ -0,0 +1,12 @@
+<!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>
diff --git a/webvtt/rendering/cues-with-video/processing-model/support/background.png b/webvtt/rendering/cues-with-video/processing-model/support/background.png
new file mode 100644
index 0000000..6d16cc8
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/support/background.png
Binary files differ
diff --git a/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_cascade_priority.vtt b/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_cascade_priority.vtt
new file mode 100644
index 0000000..c7fed3d
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_cascade_priority.vtt
@@ -0,0 +1,25 @@
+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
\ No newline at end of file
diff --git a/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_imports_blocked.vtt b/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_imports_blocked.vtt
new file mode 100644
index 0000000..cb8ce75
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_imports_blocked.vtt
@@ -0,0 +1,14 @@
+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
\ No newline at end of file
diff --git a/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_invalid_format.vtt b/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_invalid_format.vtt
new file mode 100644
index 0000000..51c231a
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_invalid_format.vtt
@@ -0,0 +1,79 @@
+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
diff --git a/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries-iframe-ref.html b/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries-iframe-ref.html
new file mode 100644
index 0000000..51d9deb
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries-iframe-ref.html
@@ -0,0 +1,18 @@
+<!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(); takeScreenshot();">
+ <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>
\ No newline at end of file
diff --git a/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries-iframe.html b/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries-iframe.html
new file mode 100644
index 0000000..6bb20fc
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries-iframe.html
@@ -0,0 +1,15 @@
+<!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(); takeScreenshot();">
+ <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>
diff --git a/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries.vtt b/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries.vtt
new file mode 100644
index 0000000..dc8625c
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries.vtt
@@ -0,0 +1,38 @@
+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
\ No newline at end of file
diff --git a/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries_resized-iframe-ref.html b/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries_resized-iframe-ref.html
new file mode 100644
index 0000000..60a6729
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries_resized-iframe-ref.html
@@ -0,0 +1,19 @@
+<!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(); takeScreenshot();">
+ <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>
\ No newline at end of file
diff --git a/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries_resized-iframe.html b/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries_resized-iframe.html
new file mode 100644
index 0000000..f207e9f
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_media_queries_resized-iframe.html
@@ -0,0 +1,15 @@
+<!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(); takeScreenshot();">
+ <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>
diff --git a/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_multiple_tracks1.vtt b/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_multiple_tracks1.vtt
new file mode 100644
index 0000000..a95ac7d
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_multiple_tracks1.vtt
@@ -0,0 +1,12 @@
+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
\ No newline at end of file
diff --git a/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_multiple_tracks2.vtt b/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_multiple_tracks2.vtt
new file mode 100644
index 0000000..415b6da
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_multiple_tracks2.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+Here <i>is</i> a <b>second</b> subtitle
\ No newline at end of file
diff --git a/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_selectors.vtt b/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_selectors.vtt
new file mode 100644
index 0000000..5a1ec62
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_selectors.vtt
@@ -0,0 +1,52 @@
+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
\ No newline at end of file
diff --git a/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_urls.vtt b/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_urls.vtt
new file mode 100644
index 0000000..e9ec0b2
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_urls.vtt
@@ -0,0 +1,25 @@
+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
\ No newline at end of file
diff --git a/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_without_style.vtt b/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_without_style.vtt
new file mode 100644
index 0000000..0cfa0d3
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/support/embedded_style_without_style.vtt
@@ -0,0 +1,7 @@
+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
\ No newline at end of file
diff --git a/webvtt/rendering/cues-with-video/processing-model/support/imported_style.css b/webvtt/rendering/cues-with-video/processing-model/support/imported_style.css
new file mode 100644
index 0000000..5e62980
--- /dev/null
+++ b/webvtt/rendering/cues-with-video/processing-model/support/imported_style.css
@@ -0,0 +1,3 @@
+::cue {
+ color: red;
+}
\ No newline at end of file
