Skip to content

Add support for ::cue-backdrop #528

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jernoble wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add support for ::cue-backdrop #528

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5a04dec
Add support for ::cue-container
jernoble Feb 6, 2025
dd584ef
Merge branch 'w3c:main' into jernoble/cue-container
jernoble Mar 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 32 additions & 11 deletions index.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -285,8 +285,8 @@ one line except when a line break is definitely necessary.</p>
<p><i>This section is non-normative.</i></p>

<p>CSS style sheets that apply to an HTML page that contains a <a element>video</a> element can
target WebVTT cues and regions in the video using the ''::cue'', ''::cue()'', ''::cue-region'' and
''::cue-region()'' pseudo-elements.</p>
target WebVTT cues and regions in the video using the ''::cue'', ''::cue()'', ''::cue-backdrop'',
''::cue-region'' and ''::cue-region()'' pseudo-elements.</p>

<div class="example">

Expand Down Expand Up @@ -4722,7 +4722,8 @@ constraints: [[!CSS22]]</p>
document, the element must not match any selector that would match the element itself.</p>

<p class=note>This element exists only to be the <a spec=selectors>originating element</a> for the
''::cue'', ''::cue()'', ''::cue-region'' and ''::cue-region()'' pseudo-elements.</p>
''::cue'', ''::cue()'', ''::cue-backdrop'', ''::cue-region'' and ''::cue-region()''
pseudo-elements.</p>
</li>

<li>
Expand Down Expand Up @@ -4786,7 +4787,11 @@ constraints: [[!CSS22]]</p>
sheets after their boxes are generated, as described below.)</li>

<li>The children of the |nodes| must be wrapped in an anonymous box whose 'display' property has
the value ''display/inline''. This is the <dfn>WebVTT cue background box</dfn>.</li>
the value ''display/inline''. This is the <dfn>WebVTT cue inline background box</dfn>.</li>

<li>The <a>WebVTT cue inline background box</a> must be wrapped in an anonymous box whose 'display'
property has the value ''display/block''. This is the <dfn>WebVTT cue block background
box</dfn>.</li>

<li>Runs of children of <a lt="WebVTT Ruby Object">WebVTT Ruby Objects</a> that are not <a
lt="WebVTT Ruby Text Object">WebVTT Ruby Text Objects</a> must be wrapped in anonymous boxes whose
Expand Down Expand Up @@ -4873,8 +4878,8 @@ corresponding <a lt="text track cue">cue</a>'s <a>WebVTT cue text alignment</a>:
<p>The 'color' property on the (root) <a>list of WebVTT Node Objects</a> must be set to
''rgba(255,255,255,1)''. [[!CSS3-COLOR]]</p>

<p>The 'background' shorthand property on the <a>WebVTT cue background box</a> and on <a>WebVTT Ruby
Text Objects</a> must be set to ''rgba(0,0,0,0.8)''. [[!CSS3-COLOR]]</p>
<p>The 'background' shorthand property on the <a>WebVTT cue inline background box</a> and on
<a>WebVTT Ruby Text Objects</a> must be set to ''rgba(0,0,0,0.8)''. [[!CSS3-COLOR]]</p>

<p>The 'white-space' property on the (root) <a>list of WebVTT Node Objects</a> must be set to
''white-space/pre-line''. [[!CSS22]]</p>
Expand Down Expand Up @@ -4957,6 +4962,8 @@ apply to WebVTT. This section does not apply to <a>user agents that do not suppo
<p>The ''::cue(|selector|)'' pseudo-element represents a cue or element inside a cue that match the
given selector.</p>

<p>The ''::cue-backdrop'' pseudo-element represents the element inside a cue which holds the cue's contents.</p>

<p>The ''::cue-region'' pseudo-element represents a region.</p>

<p>The ''::cue-region(|selector|)'' pseudo-element represents a region or element inside a region
Expand Down Expand Up @@ -5302,10 +5309,10 @@ pseudo-elements defined below won't have any effect according to this specificat

<h4 id=the-cue-pseudo-element>The ''::cue'' pseudo-element</h4>

<p>The <dfn selector>::cue</dfn> pseudo-element (with no argument) matches any <a>list of WebVTT Node
Objects</a> constructed for the <i>matched element</i>, with the exception that the properties
corresponding to the 'background' shorthand must be applied to the <a>WebVTT cue background box</a>
rather than the <a>list of WebVTT Node Objects</a>.</p>
<p>The <dfn selector>::cue</dfn> pseudo-element (with no argument) matches any <a>list of WebVTT
Node Objects</a> constructed for the <i>matched element</i>, with the exception that the properties
corresponding to the 'background' shorthand must be applied to the <a>WebVTT cue inline background
box</a> rather than the <a>list of WebVTT Node Objects</a>.</p>

<p>The following properties apply to the ''::cue'' pseudo-element with no argument; other properties
set on the pseudo-element must be ignored:</p>
Expand Down Expand Up @@ -5472,8 +5479,22 @@ when the selector does not contain the '':past'' and '':future'' pseudo-classes:

<p>As a special exception, the properties corresponding to the 'background' shorthand, when they
would have been applied to the <a>list of WebVTT Node Objects</a>, must instead be applied to the
<a>WebVTT cue background box</a>.</p>
<a>WebVTT cue inline background box</a>.</p>

<h4 id=the-cue-backdrop-pseudo-element>The ''::cue-backdrop'' pseudo-element</h4>

<p>The <dfn selector>::cue-backdrop</dfn> pseudo-element matches the <a>WebVTT
cue block background box</a> constructed for the <i>matched element</i>.</p>

<p>The following properties apply to the ''::cue-backdrop'' pseudo-element; other
properties set on the pseudo-element must be ignored:</p>

<ul class="brief">
<li>the properties corresponding to the 'background' shorthand</li>
<li>'padding'</li>
<li>the properties corresponding to the 'border' shorthand</li>
<!-- add more... -->
</ul>

<h4 id=the-past-and-future-pseudo-classes>The '':past'' and '':future'' pseudo-classes</h4>

Expand Down