mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-12-11 16:32:59 +00:00
Bug 1849235 - [devtools] Handle ::cue pseudo-element's ignored properties in inactive CSS. r=devtools-reviewers,fluent-reviewers,flod,nchevobbe.
Differential Revision: https://phabricator.services.mozilla.com/D186509
This commit is contained in:
Sebastian Zartner
parent
b68db01f82
commit
b6eed9cd14
@ -63,6 +63,8 @@ inactive-css-ruby-element = <strong>{ $property }</strong> has no effect on this
|
||||
|
||||
inactive-css-highlight-pseudo-elements-not-supported = <strong>{ $property }</strong> is not supported on highlight pseudo-elements.
|
||||
|
||||
inactive-css-cue-pseudo-element-not-supported = <strong>{ $property }</strong> is not supported on ::cue pseudo-elements.
|
||||
|
||||
## In the Rule View when a CSS property cannot be successfully applied we display
|
||||
## an icon. When this icon is hovered this message is displayed to explain how
|
||||
## the problem can be solved.
|
||||
|
||||
@ -70,6 +70,9 @@ const REPLACED_ELEMENTS_NAMES = new Set([
|
||||
"video",
|
||||
]);
|
||||
|
||||
const CUE_PSEUDO_ELEMENT_STYLING_SPEC_URL =
|
||||
"https://developer.mozilla.org/docs/Web/CSS/::cue";
|
||||
|
||||
const HIGHLIGHT_PSEUDO_ELEMENTS_STYLING_SPEC_URL =
|
||||
"https://www.w3.org/TR/css-pseudo-4/#highlight-styling";
|
||||
const HIGHLIGHT_PSEUDO_ELEMENTS = [
|
||||
@ -555,6 +558,73 @@ class InactivePropertyHelper {
|
||||
fixId: "learn-more",
|
||||
learnMoreURL: HIGHLIGHT_PSEUDO_ELEMENTS_STYLING_SPEC_URL,
|
||||
},
|
||||
// Constrained set of properties on ::cue pseudo-element
|
||||
//
|
||||
// Note that Gecko doesn't yet support the ::cue() pseudo-element
|
||||
// taking a selector as argument. The properties accecpted by that
|
||||
// partly differ from the ones accepted by the ::cue pseudo-element.
|
||||
// See https://w3c.github.io/webvtt/#ref-for-selectordef-cue-selector⑧.
|
||||
// See https://bugzilla.mozilla.org/show_bug.cgi?id=865395 and its
|
||||
// dependencies for the implementation status.
|
||||
{
|
||||
acceptedProperties: new Set([
|
||||
"background",
|
||||
"background-attachment",
|
||||
// The WebVTT spec. currently only allows all properties covered by
|
||||
// the `background` shorthand and `background-blend-mode` is not
|
||||
// part of that, though Gecko does support it, anyway.
|
||||
// Therefore, there's also an issue pending to add it (and others)
|
||||
// to the spec. See https://github.com/w3c/webvtt/issues/518.
|
||||
"background-blend-mode",
|
||||
"background-clip",
|
||||
"background-color",
|
||||
"background-image",
|
||||
"background-origin",
|
||||
"background-position",
|
||||
"background-position-x",
|
||||
"background-position-y",
|
||||
"background-repeat",
|
||||
"background-size",
|
||||
"color",
|
||||
"font",
|
||||
"font-family",
|
||||
"font-size",
|
||||
"font-stretch",
|
||||
"font-style",
|
||||
"font-variant",
|
||||
"font-variant-alternates",
|
||||
"font-variant-caps",
|
||||
"font-variant-east-asian",
|
||||
"font-variant-ligatures",
|
||||
"font-variant-numeric",
|
||||
"font-variant-position",
|
||||
"font-weight",
|
||||
"line-height",
|
||||
"opacity",
|
||||
"outline",
|
||||
"outline-color",
|
||||
"outline-offset",
|
||||
"outline-style",
|
||||
"outline-width",
|
||||
"ruby-position",
|
||||
"text-combine-upright",
|
||||
"text-decoration",
|
||||
"text-decoration-color",
|
||||
"text-decoration-line",
|
||||
"text-decoration-style",
|
||||
"text-decoration-thickness",
|
||||
"text-shadow",
|
||||
"visibility",
|
||||
"white-space",
|
||||
]),
|
||||
when: () => {
|
||||
const { selectorText } = this.cssRule;
|
||||
return selectorText && selectorText.includes("::cue");
|
||||
},
|
||||
msgId: "inactive-css-cue-pseudo-element-not-supported",
|
||||
fixId: "learn-more",
|
||||
learnMoreURL: CUE_PSEUDO_ELEMENT_STYLING_SPEC_URL,
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
|
||||
@ -0,0 +1,371 @@
|
||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
// InactivePropertyHelper `cue-pseudo-element` test cases.
|
||||
|
||||
// "background",
|
||||
// "background-attachment",
|
||||
// "background-blend-mode",
|
||||
// "background-clip",
|
||||
// "background-color",
|
||||
// "background-image",
|
||||
// "background-origin",
|
||||
// "background-position",
|
||||
// "background-position-x",
|
||||
// "background-position-y",
|
||||
// "background-repeat",
|
||||
// "background-size",
|
||||
// "color",
|
||||
// "font",
|
||||
// "font-family",
|
||||
// "font-size",
|
||||
// "font-stretch",
|
||||
// "font-style",
|
||||
// "font-variant",
|
||||
// "font-variant-alternates",
|
||||
// "font-variant-caps",
|
||||
// "font-variant-east-asian",
|
||||
// "font-variant-ligatures",
|
||||
// "font-variant-numeric",
|
||||
// "font-variant-position",
|
||||
// "font-weight",
|
||||
// "line-height",
|
||||
// "opacity",
|
||||
// "outline",
|
||||
// "outline-color",
|
||||
// "outline-offset",
|
||||
// "outline-style",
|
||||
// "outline-width",
|
||||
// "ruby-position",
|
||||
// "text-combine-upright",
|
||||
// "text-decoration",
|
||||
// "text-decoration-color",
|
||||
// "text-decoration-line",
|
||||
// "text-decoration-style",
|
||||
// "text-decoration-thickness",
|
||||
// "text-shadow",
|
||||
// "visibility",
|
||||
// "white-space",
|
||||
|
||||
export default [
|
||||
{
|
||||
info: "background is active on ::cue",
|
||||
property: "background",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { background: linear-gradient(white, black); }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "background-attachment is active on ::cue",
|
||||
property: "background-attachment",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { background-attachment: fixed; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "background-blend-mode is active on ::cue",
|
||||
property: "background-blend-mode",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { background-blend-mode: difference; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "background-clip is active on ::cue",
|
||||
property: "background-clip",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { background-clip: padding-box; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "background-color is active on ::cue",
|
||||
property: "background-color",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { background-color: red; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "background-image is active on ::cue",
|
||||
property: "background-image",
|
||||
tagName: "video",
|
||||
rules: [
|
||||
"video::cue { background-image: url('https://example.com/image.png'); }",
|
||||
],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "background-origin is active on ::cue",
|
||||
property: "background-origin",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { background-origin: padding-box; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "background-position is active on ::cue",
|
||||
property: "background-position",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { background-position: 0 0; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "background-position-x is active on ::cue",
|
||||
property: "background-position-x",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { background-position-x: 0; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "background-position-y is active on ::cue",
|
||||
property: "background-position-y",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { background-position-y: 0; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "background-repeat is active on ::cue",
|
||||
property: "background-repeat",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { background-repeat: repeat-y; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "background-size is active on ::cue",
|
||||
property: "background-size",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { background-size: 100% 100%; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "color is active on ::cue",
|
||||
property: "color",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { color: red; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "font is active on ::cue",
|
||||
property: "font",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { font: 1em sans-serif; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "font-family is active on ::cue",
|
||||
property: "font-family",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { font-family: sans-serif; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "font-size is active on ::cue",
|
||||
property: "font-size",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { font-size: 1em; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "font-stretch is active on ::cue",
|
||||
property: "font-stretch",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { font-stretch: ultra-condensed; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "font-style is active on ::cue",
|
||||
property: "font-style",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { font-style: italic; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "font-variant is active on ::cue",
|
||||
property: "font-variant",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { font-variant: small-caps; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "font-variant-alternates is active on ::cue",
|
||||
property: "font-variant-alternates",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { font-variant-alternates: slashed-zero; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "font-variant-caps is active on ::cue",
|
||||
property: "font-variant-caps",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { font-variant-caps: all-small-caps; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "font-variant-east-asian is active on ::cue",
|
||||
property: "font-variant-east-asian",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { font-variant-east-asian: ruby; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "font-variant-ligatures is active on ::cue",
|
||||
property: "font-variant-ligatures",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { font-variant-ligatures: common-ligatures; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "font-variant-numeric is active on ::cue",
|
||||
property: "font-variant-numeric",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { font-variant-numeric: ordinal; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "font-variant-position is active on ::cue",
|
||||
property: "font-variant-position",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { font-variant-position: sub; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "font-weight is active on ::cue",
|
||||
property: "font-weight",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { font-weight: bold; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "line-height is active on ::cue",
|
||||
property: "line-height",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { line-height: 1.2; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "opacity is active on ::cue",
|
||||
property: "opacity",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { opacity: 0.8; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "outline is active on ::cue",
|
||||
property: "outline",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { outline: 1px solid red; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "outline-color is active on ::cue",
|
||||
property: "outline-color",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { outline-color: red; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "outline-offset is active on ::cue",
|
||||
property: "outline-offset",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { outline-offset: 1px; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "outline-style is active on ::cue",
|
||||
property: "outline-style",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { outline-style: solid; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "outline-width is active on ::cue",
|
||||
property: "outline-width",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { outline-width: 1px; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "ruby-position is active on ::cue",
|
||||
property: "ruby-position",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { ruby-position: over; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "text-combine-upright is active on ::cue",
|
||||
property: "text-combine-upright",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { text-combine-upright: all; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "text-decoration is active on ::cue",
|
||||
property: "text-decoration",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { text-decoration: 1px underline red; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "text-decoration-color is active on ::cue",
|
||||
property: "text-decoration-color",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { text-decoration-color: red; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "text-decoration-line is active on ::cue",
|
||||
property: "text-decoration-line",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { text-decoration-line: underline; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "text-decoration-style is active on ::cue",
|
||||
property: "text-decoration-style",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { text-decoration-style: wavy; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "text-decoration-thickness is active on ::cue",
|
||||
property: "text-decoration-thickness",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { text-decoration-thickness: 1px; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "text-shadow is active on ::cue",
|
||||
property: "text-shadow",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { text-shadow: 1px 1px 1px red; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "visibility is active on ::cue",
|
||||
property: "visibility",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { visibility: hidden; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "white-space is active on ::cue",
|
||||
property: "white-space",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { white-space: nowrap; }"],
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
info: "border is inactive on ::cue",
|
||||
property: "border",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { border: 1px solid red; }"],
|
||||
isActive: false,
|
||||
expectedMsgId: "inactive-css-cue-pseudo-element-not-supported",
|
||||
},
|
||||
{
|
||||
info: "display is inactive on ::cue",
|
||||
property: "display",
|
||||
tagName: "video",
|
||||
rules: ["video::cue { display: grid; }"],
|
||||
isActive: false,
|
||||
expectedMsgId: "inactive-css-cue-pseudo-element-not-supported",
|
||||
},
|
||||
];
|
||||
@ -46,6 +46,7 @@ SimpleTest.waitForExplicitFinish();
|
||||
const testFiles = [
|
||||
"align-content.mjs",
|
||||
"border-image.mjs",
|
||||
"cue-pseudo-element.mjs",
|
||||
"first-letter-pseudo-element.mjs",
|
||||
"first-line-pseudo-element.mjs",
|
||||
"flex-grid-item-properties.mjs",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user