Changeset 251933 in webkit


Ignore:
Timestamp:
Nov 1, 2019 12:34:09 PM (5 years ago)
Author:
Nikita Vasilyev
Message:

Web Inspector: Display color swatches for p3 colors
​https://bugs.webkit.org/show_bug.cgi?id=203439
<rdar://problem/56637250>

Reviewed by Devin Rousso.

Source/WebInspectorUI:

Detect color(display-p3 0 1 0) as a color in the style editor.

  • UserInterface/Models/Color.js:

(WI.Color):
(WI.Color.fromString):
(WI.Color.prototype.copy):
(WI.Color.prototype.toString):
(WI.Color.prototype.isKeyword):
(WI.Color.prototype._toFunctionString):

LayoutTests:

  • inspector/model/color-expected.txt:
  • inspector/model/color.html:
Location:
trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r251930 r251933  
     12019-11-01  Nikita Vasilyev  <nvasilyev@apple.com>
     2
     3        Web Inspector: Display color swatches for p3 colors
     4        https://bugs.webkit.org/show_bug.cgi?id=203439
     5        <rdar://problem/56637250>
     6
     7        Reviewed by Devin Rousso.
     8
     9        * inspector/model/color-expected.txt:
     10        * inspector/model/color.html:
     11
    1122019-11-01  Ryosuke Niwa  <rniwa@webkit.org>
    213

  • trunk/LayoutTests/inspector/model/color-expected.txt

    r251885 r251933  
    332332"hsla( 10turn  20%  30% / 40% )" resolves to "hsla(360, 20%, 30%, 0.4)"
    333333"hsla(999turn 999% 999% / 999%)" resolves to "hsla(360, 100%, 100%, 1)"
     334"color(display-p3 0 1 0.5)" resolves to "color(display-p3 0 1 0.5)"
     335"COLOR(DISPLAY-P3 0 1 0.5)" resolves to "color(display-p3 0 1 0.5)"
     336"color(srgb 0.123 0.999 1)" resolves to "color(srgb 0.123 0.999 1)"
     337"COLOR(SRGB 0.123 0.999 1)" resolves to "color(srgb 0.123 0.999 1)"
     338"color( display-p3 0 1 0.5 )" resolves to "color(display-p3 0 1 0.5)"
     339"color(display-p3 999 999 999)" resolves to "color(display-p3 1 1 1)"
     340"color(srgb 0.123 0.999 1/0.5)" resolves to "color(srgb 0.123 0.999 1 / 0.5)"
     341"COLOR(SRGB 0.123 0.999 1/0.5)" resolves to "color(srgb 0.123 0.999 1 / 0.5)"
     342"color( display-p3 0 1 0.5/0.5)" resolves to "color(display-p3 0 1 0.5 / 0.5)"
     343"color(display-p3 999 999 999/999)" resolves to "color(display-p3 1 1 1)"
     344"color(srgb 0.123 0.999 1 / 0.5)" resolves to "color(srgb 0.123 0.999 1 / 0.5)"
     345"COLOR(SRGB 0.123 0.999 1 / 0.5)" resolves to "color(srgb 0.123 0.999 1 / 0.5)"
     346"color( display-p3 0 1 0.5 / 0.5)" resolves to "color(display-p3 0 1 0.5 / 0.5)"
     347"color(display-p3 999 999 999 / 999)" resolves to "color(display-p3 1 1 1)"
     348"color(srgb 0.123 0.999 1/33%)" resolves to "color(srgb 0.123 0.999 1 / 0.33)"
     349"COLOR(SRGB 0.123 0.999 1/33%)" resolves to "color(srgb 0.123 0.999 1 / 0.33)"
     350"color( display-p3 0 1 0.5/33%)" resolves to "color(display-p3 0 1 0.5 / 0.33)"
     351"color(display-p3 999 999 999/999%)" resolves to "color(display-p3 1 1 1)"
     352"color(srgb 0.123 0.999 1 / 33%)" resolves to "color(srgb 0.123 0.999 1 / 0.33)"
     353"COLOR(SRGB 0.123 0.999 1 / 33%)" resolves to "color(srgb 0.123 0.999 1 / 0.33)"
     354"color( display-p3 0 1 0.5 / 33%)" resolves to "color(display-p3 0 1 0.5 / 0.33)"
     355"color(display-p3 999 999 999 / 999%)" resolves to "color(display-p3 1 1 1)"
    334356
    335357PASS: ' #000 ' should not be detected
    … …  
    345367PASS: 'hsla(0, 0%, 50%, 1, 2)' should not be detected
    346368PASS: 'superblue' should not be detected
     369PASS: 'color(display-p3 0 1)' should not be detected
     370PASS: 'color(display-p3 0 1 2 4 5)' should not be detected
    347371
    348372-- Running test case: WI.Color properties
    … …  
    371395PASS: '#11223344' should be serializable as a short Hex
    372396PASS: '#11223345' should not be serializable as a short Hex
     397PASS: 'color(display-p3 0 1 0.5)' color should have a default alpha of 1
     398PASS: color function is not a keyword
     399PASS: 'color(display-p3 0 1 0.5)' has rgb of [0, 1, 0.5]
     400PASS: 'color(display-p3 0 1 0.5)' has rgba of [0, 1, 0.5, 1]
     401PASS: 'color(display-p3 0 1 0.5 / 0.3)' should have an alpha of 0.3
     402PASS: color function is not a keyword
     403PASS: 'color(display-p3 0 1 0.5 / 0.3)' has rgb of [0, 1, 0.5]
     404PASS: 'color(display-p3 0 1 0.5 / 0.3)' has rgba of [0, 1, 0.5, 0.3]
    373405
    374406-- Running test case: WI.Color from components

  • trunk/LayoutTests/inspector/model/color.html

    r251885 r251933  
    2828        case WI.Color.Format.HSLA:
    2929            return "HSLA";
     30        case WI.Color.Format.ColorFunction:
     31            return "Function";
    3032        default:
    3133            return "Unexpected format";
    … …  
    224226                testGood(`hsla(999${unit} 999% 999% / 999%)`, WI.Color.Format.HSLA);
    225227            }
     228
     229            testGood("color(display-p3 0 1 0.5)", WI.Color.Format.ColorFunction);
     230            testGood("COLOR(DISPLAY-P3 0 1 0.5)", WI.Color.Format.ColorFunction);
     231
     232            testGood("color(srgb 0.123 0.999 1)", WI.Color.Format.ColorFunction);
     233            testGood("COLOR(SRGB 0.123 0.999 1)", WI.Color.Format.ColorFunction);
     234            testGood("color( display-p3 0 1 0.5 )", WI.Color.Format.ColorFunction);
     235            testGood("color(display-p3 999 999 999)", WI.Color.Format.ColorFunction);
     236
     237            testGood("color(srgb 0.123 0.999 1/0.5)", WI.Color.Format.ColorFunction);
     238            testGood("COLOR(SRGB 0.123 0.999 1/0.5)", WI.Color.Format.ColorFunction);
     239            testGood("color( display-p3 0 1 0.5/0.5)", WI.Color.Format.ColorFunction);
     240            testGood("color(display-p3 999 999 999/999)", WI.Color.Format.ColorFunction);
     241
     242            testGood("color(srgb 0.123 0.999 1 / 0.5)", WI.Color.Format.ColorFunction);
     243            testGood("COLOR(SRGB 0.123 0.999 1 / 0.5)", WI.Color.Format.ColorFunction);
     244            testGood("color( display-p3 0 1 0.5 / 0.5)", WI.Color.Format.ColorFunction);
     245            testGood("color(display-p3 999 999 999 / 999)", WI.Color.Format.ColorFunction);
     246
     247            testGood("color(srgb 0.123 0.999 1/33%)", WI.Color.Format.ColorFunction);
     248            testGood("COLOR(SRGB 0.123 0.999 1/33%)", WI.Color.Format.ColorFunction);
     249            testGood("color( display-p3 0 1 0.5/33%)", WI.Color.Format.ColorFunction);
     250            testGood("color(display-p3 999 999 999/999%)", WI.Color.Format.ColorFunction);
     251
     252            testGood("color(srgb 0.123 0.999 1 / 33%)", WI.Color.Format.ColorFunction);
     253            testGood("COLOR(SRGB 0.123 0.999 1 / 33%)", WI.Color.Format.ColorFunction);
     254            testGood("color( display-p3 0 1 0.5 / 33%)", WI.Color.Format.ColorFunction);
     255            testGood("color(display-p3 999 999 999 / 999%)", WI.Color.Format.ColorFunction);
    226256
    227257            InspectorTest.log("");
    … …  
    239269            testBad("hsla(0, 0%, 50%, 1, 2)"); // extra values
    240270            testBad("superblue"); // not a keyword
     271            testBad("color(display-p3 0 1)"); // 2
     272            testBad("color(display-p3 0 1 2 4 5)"); // 5
    241273
    242274            // FIXME: currentColor?
    … …  
    288320            color = WI.Color.fromString("#11223345");
    289321            InspectorTest.expectThat(color.canBeSerializedAsShortHEX() === false, "'#11223345' should not be serializable as a short Hex");
     322
     323            color = WI.Color.fromString("color(display-p3 0 1 0.5)");
     324            InspectorTest.expectThat(color.alpha === 1, "'color(display-p3 0 1 0.5)' color should have a default alpha of 1");
     325            InspectorTest.expectThat(color.isKeyword() === false, "color function is not a keyword");
     326            InspectorTest.expectShallowEqual(color.rgb, [0, 1, 0.5], "'color(display-p3 0 1 0.5)' has rgb of [0, 1, 0.5]");
     327            InspectorTest.expectShallowEqual(color.rgba, [0, 1, 0.5, 1], "'color(display-p3 0 1 0.5)' has rgba of [0, 1, 0.5, 1]");
     328
     329            color = WI.Color.fromString("color(display-p3 0 1 0.5 / 0.3)");
     330            InspectorTest.expectThat(color.alpha === 0.3, "'color(display-p3 0 1 0.5 / 0.3)' should have an alpha of 0.3");
     331            InspectorTest.expectThat(color.isKeyword() === false, "color function is not a keyword");
     332            InspectorTest.expectShallowEqual(color.rgb, [0, 1, 0.5], "'color(display-p3 0 1 0.5 / 0.3)' has rgb of [0, 1, 0.5]");
     333            InspectorTest.expectShallowEqual(color.rgba, [0, 1, 0.5, 0.3], "'color(display-p3 0 1 0.5 / 0.3)' has rgba of [0, 1, 0.5, 0.3]");
    290334
    291335            return true;

  • trunk/Source/WebInspectorUI/ChangeLog

    r251932 r251933  
     12019-11-01  Nikita Vasilyev  <nvasilyev@apple.com>
     2
     3        Web Inspector: Display color swatches for p3 colors
     4        https://bugs.webkit.org/show_bug.cgi?id=203439
     5        <rdar://problem/56637250>
     6
     7        Reviewed by Devin Rousso.
     8
     9        Detect `color(display-p3 0 1 0)` as a color in the style editor.
     10
     11        * UserInterface/Models/Color.js:
     12        (WI.Color):
     13        (WI.Color.fromString):
     14        (WI.Color.prototype.copy):
     15        (WI.Color.prototype.toString):
     16        (WI.Color.prototype.isKeyword):
     17        (WI.Color.prototype._toFunctionString):
     18
    1192019-11-01  Devin Rousso  <drousso@apple.com>
    220

  • trunk/Source/WebInspectorUI/UserInterface/Models/Color.js

    r251885 r251933  
    3030WI.Color = class Color
    3131{
    32     constructor(format, components)
     32    constructor(format, components, gamut)
    3333    {
    3434        this.format = format;
     35        this.gamut = gamut || "srgb";
    3536
    3637        if (components.length === 3)
    … …  
    4950    static fromString(colorString)
    5051    {
    51         const matchRegExp = /^(?:#(?<hex>[0-9a-f]{3,8})|rgba?\((?<rgb>[^)]+)\)|(?<keyword>\w+)|hsla?\((?<hsl>[^)]+)\))$/i;
     52        const matchRegExp = /^(?:#(?<hex>[0-9a-f]{3,8})|rgba?\((?<rgb>[^)]+)\)|(?<keyword>\w+)|color\((?<color>[^)]+)\)|hsla?\((?<hsl>[^)]+)\))$/i;
    5253        let match = colorString.match(matchRegExp);
    5354        if (!match)
    … …  
    169170                alpha,
    170171            ]);
     172        }
     173
     174        if (match.groups.color) {
     175            let colorString = match.groups.color.trim();
     176            let components = splitFunctionString(colorString);
     177            if (components.length !== 4 && components.length !== 5)
     178                return null;
     179
     180            let gamut = components[0].toLowerCase();
     181            if (gamut !== "srgb" && gamut !== "display-p3")
     182                return null;
     183
     184            let alpha = 1;
     185            if (components.length === 5)
     186                alpha = parseFunctionAlpha(components[4]);
     187
     188            function parseFunctionComponent(component) {
     189                let value = parseFloat(component);
     190                return Number.constrain(value, 0, 1);
     191            }
     192
     193            return new WI.Color(WI.Color.Format.ColorFunction, [
     194                parseFunctionComponent(components[1]),
     195                parseFunctionComponent(components[2]),
     196                parseFunctionComponent(components[3]),
     197                alpha,
     198            ], gamut);
    171199        }
    172200
    … …  
    387415        case WI.Color.Format.Keyword:
    388416        case WI.Color.Format.RGBA:
    389             return new WI.Color(this.format, this.rgba);
     417        case WI.Color.Format.ColorFunction:
     418            return new WI.Color(this.format, this.rgba, this.gamut);
    390419        case WI.Color.Format.HSL:
    391420        case WI.Color.Format.HSLA:
    392             return new WI.Color(this.format, this.hsla);
     421            return new WI.Color(this.format, this.hsla, this.gamut);
    393422        }
    394423    }
    … …  
    406435        case WI.Color.Format.RGBA:
    407436            return this._toRGBAString();
     437        case WI.Color.Format.ColorFunction:
     438            return this._toFunctionString();
    408439        case WI.Color.Format.HSL:
    409440            return this._toHSLString();
    … …  
    431462            return true;
    432463
     464        if (this.gamut !== "srgb")
     465            return false;
     466
    433467        if (!this.simple)
    434468            return Array.shallowEqual(this._rgba, [0, 0, 0, 0]) || Array.shallowEqual(this._hsla, [0, 0, 0, 0]);
    … …  
    566600        let b = WI.Color._eightBitChannel(Math.round(this.rgba[2]));
    567601        return `rgba(${r}, ${g}, ${b}, ${this.alpha})`;
     602    }
     603
     604    _toFunctionString()
     605    {
     606        let [r, g, b, alpha] = this.rgba;
     607        if (alpha === 1)
     608            return `color(${this.gamut} ${r} ${g} ${b})`;
     609        return `color(${this.gamut} ${r} ${g} ${b} / ${alpha})`;
    568610    }
    569611
    … …  
    620662    RGBA: "color-format-rgba",
    621663    HSL: "color-format-hsl",
    622     HSLA: "color-format-hsla"
     664    HSLA: "color-format-hsla",
     665    ColorFunction: "color-format-color-function",
    623666};
    624667
    … …  
    628671    "hsl",
    629672    "hsla",
     673    "color",
    630674]);
    631675
Note: See TracChangeset for help on using the changeset viewer.