When using the debugger, selecting an element with a light-dark containing one or more 'var's inside it causes the debugger to dump seemingly internal CSS into the field causing the page to partially break.
Minimal viable reproduction is as follows (No literal file example because at work rn):
Bare HTML page
One <p> element with the style 'light-dark(var(--colOne), var(--colTwo));'
Define --colOne and --colTwo as colours in some css file, such as 'red' or 'rgb(255,255,0)'.
Open the HTML file.
Open the debugger.
Select the html element either with the select tool or by clicking it in the element listing.
'color' now should look like
'color: light-dark(var(.text-button{margin2px;height24px...'
as it has had other CSS dropped in.
Version 145.0.3800.97 Edge, Windows 11. Does not happen in Firefox and using var inside light-dark is both listed as supported and an example on the MDN docs.
When using the debugger, selecting an element with a light-dark containing one or more 'var's inside it causes the debugger to dump seemingly internal CSS into the field causing the page to partially break.
Minimal viable reproduction is as follows (No literal file example because at work rn):
Bare HTML page
One <p> element with the style 'light-dark(var(--colOne), var(--colTwo));'
Define --colOne and --colTwo as colours in some css file, such as 'red' or 'rgb(255,255,0)'.
Open the HTML file.
Open the debugger.
Select the html element either with the select tool or by clicking it in the element listing.
'color' now should look like
'color: light-dark(var(.text-button{margin2px;height24px...'
as it has had other CSS dropped in.
Version 145.0.3800.97 Edge, Windows 11. Does not happen in Firefox and using var inside light-dark is both listed as supported and an example on the MDN docs.