1686585 - [Inactive CSS] Display a warning when 'paint-order' is used on incorrectly

Status: RESOLVED WONTFIX

(DevTools :: Inspector: Rules, enhancement, P5)

Description

[Sebastian Zartner [:sebo]]

+++ This bug was initially created as a clone of Bug #1686583 +++

As of SVG 2, CSS Fill and Stroke, and bug 1435684, paint-order can only be applied to SVG basic shapes, SVG text elements, and HTML elements.
Currently, for HTML elements you additionally need to specify -webkit-text-stroke (or its longhand properties).

Main file:
devtools/server/actors/utils/inactive-property-helper.js

invalidProperties: ["paint-order"]

Translation strings:

devtools/client/locales/en-US/tooltips.ftl

inactive-css-only-svg-shapes = <strong>{ $property }</strong> has no effect on this element since it can only be applied to SVG basic shapes, SVG text elements, or HTML elements, though it may have an effect on its descendant elements.

inactive-css-only-svg-shapes-fix = For HTML elements, try setting <strong>-webkit-text-stroke<strong> to something other than <strong>0px</strong>, otherwise ensure you are setting this property on one of the following SVG elements: <strong>&lt;circle&gt;</strong>, <strong>&lt;ellipse&gt;</strong>, <strong>&lt;line&gt;</strong>, <strong>&lt;path&gt;</strong>, <strong>&lt;polygon&gt;</strong>, <strong>&lt;polyline&gt;</strong>, <strong>&lt;rect&gt;</strong>, <strong>&lt;text&gt;</strong>, <strong>&lt;textPath&gt;</strong>, <strong>&lt;tspan&gt;</strong>. { learn-more }

Sebastian

Comment 1

[Daniel Holbert [:dholbert]]

Per my notes in bug 1583901 comment 9 onwards, and the code-comment added in bug 1688538: we shouldn't actually add a warning about this property, because it's inherited-by-default, which makes it hard to reason about whether it's truly inactive (in the element's whole subtree) or not.