Bug 178636 - Web Inspector: Styles: Make inline widgets work with CSS functions (var(), calc(), etc.)
Summary: Web Inspector: Styles: Make inline widgets work with CSS functions (var(), ca...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2017-10-21 15:30 PDT by Nikita Vasilyev
Modified: 2017-10-21 15:30 PDT (History)
2 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Nikita Vasilyev 2017-10-21 15:30:02 PDT 
Web Inspector doesn't show inline widgets (WI.InlineSwatch) for colors, gradients, cubic-bezier and spring function
if they are or have CSS function (such as calc, var, or min/max) in them.

For example, Web Inspector doesn't currently shows color picker for `color: var(--text-color)`.

None of these functions can parse CSS variables, calc() or min/max() correctly:

    WI.CubicBezier.fromString
    WI.Spring.fromString
    WI.Color.fromString
    WI.Gradient.fromString

E.g.:

    -> WI.Color.fromString("linear-gradient(#fff2db, var(--myVar))")
    <- null
Comment 1 Radar WebKit Bug Importer 2017-10-21 15:30:24 PDT 
<rdar://problem/35112177>