Function call without closing parenthesis are displayed as a valid (and closing parenthesis is automatically appended)
Categories
(DevTools :: Inspector: Rules, defect, P2)
Tracking
(Not tracked)
People
(Reporter: nchevobbe, Unassigned)
Details
Steps to reproduce
- Navigate to
data:text/html,<meta charset=utf8><style>header,footer { outline: 1px solid red; width: 200px;height:200px; } header { background: url(https://www.iana.org/_img/2022/iana-logo-header.svg); } footer { background: url(https://www.iana.org/_img/2022/iana-logo-header.svg }</style><header>head</header><footer>foot</footer> - Inspect the
<footer>element
Expected results
The rule view indicates that something is wrong in the background property value (the url function has no closing parenthesis)
Actual results
The value is displayed as a valid value (the closing parenthesis is automatically appended), and looks similar to what is displayed for the header rule. This can be quite confusing for the user as the value isn't actually applied.
|
Reporter | |
Comment 1•1 year ago
|
||
Came across something similar with data:text/html,<meta charset=utf8><style>body{ --x: blue; background: var(--x }</style>
var(--x is turned into var(--x) , which looks valid, but it's not and the engine doesn't use it
|
||
Comment 2•1 year ago
|
||
We can change the logic so that we only fixup URLs when editing. We should also try to show a warning indicator when we detect an incorrect URL property.
|
|
Reporter | |
Comment 3•1 year ago
|
||
This is where we mark a property as valid or not https://searchfox.org/mozilla-central/rev/6121b33709dd80979a6806ff59096a561e348ae8/devtools/server/actors/style-rule.js#443-446
decl.isValid = InspectorUtils.supports(
`${decl.name}:${decl.value}`,
supportsOptions
);
unfortunately for us, InspectorUtils.supports("background: url(") returns true.
We need another way to detect if the property is not valid.
|
||
Comment 4•1 year ago
|
||
(In reply to Nicolas Chevobbe [:nchevobbe] from comment #3)
unfortunately for us,
InspectorUtils.supports("background: url(")returnstrue.
Is this a bug or a feature?
It looks like there is something special happening with unfinished url
data:text/html,<style>*{background:url(</style><body><script>console.log(document.styleSheets[0].cssRules[0].style.background )</script>
will log url("")
and
data:text/html,<style>*{background:url(}</style><body><script>console.log(document.styleSheets[0].cssRules[0].style.background )</script>
will log url("}")
There is really something special with url. It isn't DevTools doing magic here, but the CSS engine...
Description
•