Changeset 200888 in webkit


Ignore:
Timestamp:
May 13, 2016 3:40:52 PM (8 years ago)
Author:
Simon Fraser
Message:

Unprefix -webkit-cross-fade()
​https://bugs.webkit.org/show_bug.cgi?id=157632

Reviewed by Darin Adler.
Source/WebCore:

Support unprefixed cross-fade() in addition to the prefixed value when parsing,
and have computed style round-trip the correct one.

If computed style is queried during an image transition, return an unprefixed
cross-fade(). If blending cross-fade values, only return the prefixed function if
both inputs are prefixed.

Tested by modified and existing tests.

  • css/CSSCrossfadeValue.cpp:

(WebCore::CSSCrossfadeValue::customCSSText):
(WebCore::CSSCrossfadeValue::blend):

  • css/CSSCrossfadeValue.h:

(WebCore::CSSCrossfadeValue::create):
(WebCore::CSSCrossfadeValue::isPrefixed):
(WebCore::CSSCrossfadeValue::CSSCrossfadeValue):

  • css/CSSParser.cpp:

(WebCore::CSSParser::isGeneratedImageValue):
(WebCore::CSSParser::parseGeneratedImage):
(WebCore::CSSParser::parseCrossfade):

  • css/CSSParser.h:

Source/WebInspectorUI:

  • UserInterface/Models/CSSKeywordCompletions.js:

LayoutTests:

  • animations/cross-fade-background-image-expected.html:
  • animations/cross-fade-background-image.html:
  • animations/cross-fade-border-image-source.html:
  • animations/cross-fade-list-style-image.html:
  • animations/cross-fade-webkit-mask-box-image.html:
  • animations/cross-fade-webkit-mask-image.html:
  • animations/resources/animation-test-helpers.js:

(parseCSSImage):
(parseCrossFade):
(compareCSSImages):

  • fast/css/getComputedStyle/computed-style-cross-fade-expected.txt:
  • fast/css/getComputedStyle/computed-style-cross-fade.html:
  • transitions/resources/transition-test-helpers.js:

(parseCrossFade):

Location:
trunk
Files:
18 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r200887 r200888  
     12016-05-13  Simon Fraser  <simon.fraser@apple.com>
     2
     3        Unprefix -webkit-cross-fade()
     4        https://bugs.webkit.org/show_bug.cgi?id=157632
     5
     6        Reviewed by Darin Adler.
     7       
     8        * animations/cross-fade-background-image-expected.html:
     9        * animations/cross-fade-background-image.html:
     10        * animations/cross-fade-border-image-source.html:
     11        * animations/cross-fade-list-style-image.html:
     12        * animations/cross-fade-webkit-mask-box-image.html:
     13        * animations/cross-fade-webkit-mask-image.html:
     14        * animations/resources/animation-test-helpers.js:
     15        (parseCSSImage):
     16        (parseCrossFade):
     17        (compareCSSImages):
     18        * fast/css/getComputedStyle/computed-style-cross-fade-expected.txt:
     19        * fast/css/getComputedStyle/computed-style-cross-fade.html:
     20        * transitions/resources/transition-test-helpers.js:
     21        (parseCrossFade):
     22
    1232016-05-13  Yoav Weiss  <yoav@yoav.ws>
    224

  • trunk/LayoutTests/animations/cross-fade-background-image-expected.html

    r155100 r200888  
    1515<div id="rect"></div>
    1616<div id="result">
    17 PASS - "backgroundImage" property for "box" element at 2.5s saw something close to: -webkit-cross-fade(url(blue-100.png), url(green-100.png), 50%)<br>
     17PASS - "backgroundImage" property for "box" element at 2.5s saw something close to: cross-fade(url(blue-100.png), url(green-100.png), 50%)<br>
    1818PASS - "backgroundImage" property for "box" and "boxStatic" elements at 2.5s are close enough to each other<br>
    1919PASS - "backgroundImage" property for "boxShorthand" and "boxStatic" elements at 2.5s are close enough to each other<br>
    20 PASS - "backgroundImage" property for "boxAnim1" element at 2.5s saw something close to: -webkit-cross-fade(url(resources/blue-100.png), url(resources/green-100.png), 0.5)<br>
    21 PASS - "backgroundImage" property for "boxAnim2" element at 2.5s saw something close to: -webkit-cross-fade(url(resources/green-100.png), url(resources/blue-100.png), 50%)<br>
    22 PASS - "backgroundImage" property for "boxAnim3" element at 2.5s saw something close to: -webkit-cross-fade(url(resources/blue-100.png), url(resources/green-100.png), 50%)<br>
     20PASS - "backgroundImage" property for "boxAnim1" element at 2.5s saw something close to: cross-fade(url(resources/blue-100.png), url(resources/green-100.png), 0.5)<br>
     21PASS - "backgroundImage" property for "boxAnim2" element at 2.5s saw something close to: cross-fade(url(resources/green-100.png), url(resources/blue-100.png), 50%)<br>
     22PASS - "backgroundImage" property for "boxAnim3" element at 2.5s saw something close to: cross-fade(url(resources/blue-100.png), url(resources/green-100.png), 50%)<br>
    2323</div>
    2424</body>

  • trunk/LayoutTests/animations/cross-fade-background-image.html

    r155100 r200888  
    7171        /* Image inputs are not identical - no animation.*/
    7272        from { background-image: -webkit-cross-fade(url(resources/blue-100.png), url(resources/green-100.png), 20%); }
    73         to   { background-image: -webkit-cross-fade(url(resources/green-100.png), url(resources/blue-100.png), 50%); }
     73        to   { background-image: cross-fade(url(resources/green-100.png), url(resources/blue-100.png), 50%); }
    7474    }
    7575    @-webkit-keyframes animCross3 {
    … …  
    8383    const expectedValues = [
    8484      // [animation-name, time, element-id, property, expected-value, tolerance]
    85       ["anim", 2.5, "box", "backgroundImage", "-webkit-cross-fade(url(blue-100.png), url(green-100.png), 50%)", 0.05],
    86       ["anim", 2.5, ["box", "static:boxStatic"], "backgroundImage", "-webkit-cross-fade(url(blue-100.png), url(green-100.png), 50%)", 0.05],
    87       ["animShorthand", 2.5, ["boxShorthand", "static:boxStatic"], "backgroundImage", "-webkit-cross-fade(url(blue-100.png), url(green-100.png), 50%)", 0.05],
    88       ["animCross1", 2.5, "boxAnim1", "backgroundImage", "-webkit-cross-fade(url(resources/blue-100.png), url(resources/green-100.png), 0.5)", 0.05],
    89       ["animCross2", 2.5, "boxAnim2", "backgroundImage", "-webkit-cross-fade(url(resources/green-100.png), url(resources/blue-100.png), 50%)", 0],
    90       ["animCross3", 2.5, "boxAnim3", "backgroundImage", "-webkit-cross-fade(url(resources/blue-100.png), url(resources/green-100.png), 50%)", 0],
     85      ["anim", 2.5, "box", "backgroundImage", "cross-fade(url(blue-100.png), url(green-100.png), 50%)", 0.05],
     86      ["anim", 2.5, ["box", "static:boxStatic"], "backgroundImage", "cross-fade(url(blue-100.png), url(green-100.png), 50%)", 0.05],
     87      ["animShorthand", 2.5, ["boxShorthand", "static:boxStatic"], "backgroundImage", "cross-fade(url(blue-100.png), url(green-100.png), 50%)", 0.05],
     88      ["animCross1", 2.5, "boxAnim1", "backgroundImage", "cross-fade(url(resources/blue-100.png), url(resources/green-100.png), 0.5)", 0.05],
     89      ["animCross2", 2.5, "boxAnim2", "backgroundImage", "cross-fade(url(resources/green-100.png), url(resources/blue-100.png), 50%)", 0],
     90      ["animCross3", 2.5, "boxAnim3", "backgroundImage", "cross-fade(url(resources/blue-100.png), url(resources/green-100.png), 50%)", 0],
    9191    ];
    9292

  • trunk/LayoutTests/animations/cross-fade-border-image-source.html

    r192970 r200888  
    4545      // FIXME: We can't test reading the borderImage shorthand because of bug #13658.
    4646      ["anim", 2.5, "box", "borderImageSource", "-webkit-cross-fade(url(stripes-100.png), url(green-100.png), 0.5)", 0.05],
    47       ["anim", 2.5, ["box", "static:boxStatic"], "borderImageSource", "-webkit-cross-fade(url(stripes-100.png), url(green-100.png), 50%)", 0.05],
    48       ["animShorthand", 2.5, ["boxShorthand", "static:boxStatic"], "borderImageSource", "-webkit-cross-fade(url(stripes-100), url(green-100.png), 50%)", 0.05],
     47      ["anim", 2.5, ["box", "static:boxStatic"], "borderImageSource", "cross-fade(url(stripes-100.png), url(green-100.png), 50%)", 0.05],
     48      ["animShorthand", 2.5, ["boxShorthand", "static:boxStatic"], "borderImageSource", "cross-fade(url(stripes-100), url(green-100.png), 50%)", 0.05],
    4949    ];
    5050

  • trunk/LayoutTests/animations/cross-fade-list-style-image.html

    r154906 r200888  
    4040      // [animation-name, time, element-id, property, expected-value, tolerance]
    4141      ["anim", 2.5, "box", "listStyleImage", "-webkit-cross-fade(url(blue-100.png), url(green-100.png), 50%)", 0.05],
    42       ["anim", 2.5, ["box", "static:boxStatic"], "listStyleImage", "-webkit-cross-fade(url(blue-100.png), url(green-100.png), 50%)", 0.05],
    43       ["animShorthand", 2.5, ["boxShorthand", "static:boxStatic"], "listStyleImage", "-webkit-cross-fade(url(blue-100.png), url(green-100.png), 50%)", 0.05],
     42      ["anim", 2.5, ["box", "static:boxStatic"], "listStyleImage", "cross-fade(url(blue-100.png), url(green-100.png), 50%)", 0.05],
     43      ["animShorthand", 2.5, ["boxShorthand", "static:boxStatic"], "listStyleImage", "cross-fade(url(blue-100.png), url(green-100.png), 50%)", 0.05],
    4444    ];
    4545

  • trunk/LayoutTests/animations/cross-fade-webkit-mask-box-image.html

    r154906 r200888  
    3030      // [animation-name, time, element-id, property, expected-value, tolerance]
    3131      ["anim", 2.25, "box", "webkitMaskBoxImage", "-webkit-cross-fade(url(stripes-100.png), url(green-100.png), 25%)", 0.05],
    32       ["anim", 2.25, ["box", "static:boxStatic"], "webkitMaskBoxImage", "-webkit-cross-fade(url(stripes-100.png), url(green-100.png), 25%)", 0.05]
     32      ["anim", 2.25, ["box", "static:boxStatic"], "webkitMaskBoxImage", "cross-fade(url(stripes-100.png), url(green-100.png), 25%)", 0.05]
    3333    ];
    3434

  • trunk/LayoutTests/animations/cross-fade-webkit-mask-image.html

    r154906 r200888  
    2929    const expectedValues = [
    3030      // [animation-name, time, element-id, property, expected-value, tolerance]
    31       ["anim", 2.25, "box", "webkitMaskImage", "-webkit-cross-fade(url(stripes-100.png), url(green-100.png), 25%)", 0.05],
     31      ["anim", 2.25, "box", "webkitMaskImage", "cross-fade(url(stripes-100.png), url(green-100.png), 25%)", 0.05],
    3232      ["anim", 2.25, ["box", "static:boxStatic"], "webkitMaskImage", "-webkit-cross-fade(url(stripes-100.png), url(green-100.png), 25%)", 0.05]
    3333    ];

  • trunk/LayoutTests/animations/resources/animation-test-helpers.js

    r200043 r200888  
    7373    case "filter":
    7474        return parseFilterImage(functionValue);
     75    case "cross-fade":
    7576    case "-webkit-cross-fade":
    7677        return parseCrossFade(functionValue);
    … …  
    8990    var matches = s.match("(.*)\\s*,\\s*(.*)\\s*,\\s*(.*)\\s*");
    9091    if (!matches) {
    91         console.error("Parsing error on '-webkit-cross-fade()'.");
     92        console.error("Parsing error on 'cross-fade()'.");
    9293        return null;
    9394    }
    … …  
    9697    var to = parseCSSImage(matches[2]);
    9798    if (!from || !to) {
    98         console.error("Parsing error on images passed to '-webkit-cross-fade()' ", s);
     99        console.error("Parsing error on images passed to 'cross-fade()' ", s);
    99100        return null;
    100101    }
    … …  
    106107        // Normalize it to number.
    107108        if (fadeValue.search('%') != fadeValue.length - 1) {
    108             console.error("Passed value to '-webkit-cross-fade()' is not a number or percentage ", fadeValue);
     109            console.error("Passed value to 'cross-fade()' is not a number or percentage ", fadeValue);
    109110            return null;
    110111        }
    111112        fadeValue = fadeValue.slice(0, fadeValue.length - 1);
    112113        if (isNaN(fadeValue)) {
    113             console.error("Passed value to '-webkit-cross-fade()' is not a number or percentage ", fadeValue);
     114            console.error("Passed value to 'cross-fade()' is not a number or percentage ", fadeValue);
    114115            return null;
    115116        }
    … …  
    118119        percent = parseFloat(fadeValue);
    119120
    120     return ["-webkit-cross-fade", from, to, percent];
     121    return ["cross-fade", from, to, percent];
    121122}
    122123
    … …  
    245246        return compareCSSImages(actual[1], expected[1], tolerance)
    246247            && compareFilterFunctions(actual[2], expected[2], tolerance);
     248    case "cross-fade":
    247249    case "-webkit-cross-fade":
    248250        return compareCSSImages(actual[1], expected[1], tolerance)

  • trunk/LayoutTests/fast/css/getComputedStyle/computed-style-cross-fade-expected.txt

    r100687 r200888  
    1 -webkit-cross-fade
     1cross-fade
    22
    33
    44PASS testCrossfade("opacity: 500%", "opacity") is "1"
     5Prefixed
    56PASS testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 50%)", "background-image") is "-webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 0.5)"
    67PASS testCrossfade("background-image: -webkit-cross-fade(-webkit-cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), url(dummy://example.png), 50%)", "background-image") is "-webkit-cross-fade(-webkit-cross-fade(url(dummy://a.png), url(dummy://b.png), 0.25), url(dummy://example.png), 0.5)"
    … …  
    1213PASS testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 700%)", "background-image") is "-webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 1)"
    1314PASS testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), -20)", "background-image") is "-webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 0)"
     15Unprefixed
     16
     17
     18PASS testCrossfade("background-image: cross-fade(url(dummy://example.png), url(dummy://example.png), 50%)", "background-image") is "cross-fade(url(dummy://example.png), url(dummy://example.png), 0.5)"
     19PASS testCrossfade("background-image: cross-fade(url(dummy://example.png), url(dummy://example.png), 1.0)", "background-image") is "cross-fade(url(dummy://example.png), url(dummy://example.png), 1)"
     20Mixed
     21
     22
     23PASS testCrossfade("background-image: -webkit-cross-fade(cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), url(dummy://example.png), 50%)", "background-image") is "-webkit-cross-fade(cross-fade(url(dummy://a.png), url(dummy://b.png), 0.25), url(dummy://example.png), 0.5)"
     24PASS testCrossfade("background-image: -webkit-cross-fade(cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), 50%)", "background-image") is "-webkit-cross-fade(cross-fade(url(dummy://a.png), url(dummy://b.png), 0.25), cross-fade(url(dummy://a.png), url(dummy://b.png), 0.25), 0.5)"
     25PASS testCrossfade("background-image: cross-fade(cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), -webkit-cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), 50%)", "background-image") is "cross-fade(cross-fade(url(dummy://a.png), url(dummy://b.png), 0.25), -webkit-cross-fade(url(dummy://a.png), url(dummy://b.png), 0.25), 0.5)"
     26Invalid values
     27
     28
    1429PASS testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png))", "background-image") is "none"
    1530PASS testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png),)", "background-image") is "none"
    16 PASS testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png))", "background-image") is "none"
    17 PASS testCrossfade("background-image: -webkit-cross-fade(), url(dummy://example.png))", "background-image") is "none"
    18 PASS testCrossfade("background-image: -webkit-cross-fade(url(", "background-image") is "none"
    19 PASS testCrossfade("background-image: -webkit-cross-fade(10px 20% 5px #bbb)", "background-image") is "none"
    20 PASS testCrossfade("background-image: -webkit-cross-fade(-webkit-cross-fade(-webkit-cross-fade()))", "background-image") is "none"
    21 PASS testCrossfade("background-image: -webkit-cross-fade(20%, url(dummy://a.png), url(dummy://b.png))", "background-image") is "none"
    22 PASS testCrossfade("background-image: -webkit-cross-fade(url(dummy://a.png),)", "background-image") is "none"
    23 PASS testCrossfade("background-image: -webkit-cross-fade(,)", "background-image") is "none"
    24 PASS testCrossfade("background-image: -webkit-cross-fade(,url(dummy://a.png))", "background-image") is "none"
    25 PASS testCrossfade("background-image: -webkit-cross-fade(,,,,,)", "background-image") is "none"
     31PASS testCrossfade("background-image: cross-fade(url(dummy://example.png), url(dummy://example.png))", "background-image") is "none"
     32PASS testCrossfade("background-image: cross-fade(url(dummy://example.png), url(dummy://example.png),)", "background-image") is "none"
     33PASS testCrossfade("background-image: cross-fade(url(dummy://example.png))", "background-image") is "none"
     34PASS testCrossfade("background-image: cross-fade(), url(dummy://example.png))", "background-image") is "none"
     35PASS testCrossfade("background-image: cross-fade(url(", "background-image") is "none"
     36PASS testCrossfade("background-image: cross-fade(10px 20% 5px #bbb)", "background-image") is "none"
     37PASS testCrossfade("background-image: cross-fade(cross-fade(cross-fade()))", "background-image") is "none"
     38PASS testCrossfade("background-image: cross-fade(20%, url(dummy://a.png), url(dummy://b.png))", "background-image") is "none"
     39PASS testCrossfade("background-image: cross-fade(url(dummy://a.png),)", "background-image") is "none"
     40PASS testCrossfade("background-image: cross-fade(,)", "background-image") is "none"
     41PASS testCrossfade("background-image: cross-fade(,url(dummy://a.png))", "background-image") is "none"
     42PASS testCrossfade("background-image: cross-fade(,,,,,)", "background-image") is "none"
    2643PASS successfullyParsed is true
    2744

  • trunk/LayoutTests/fast/css/getComputedStyle/computed-style-cross-fade.html

    r155263 r200888  
    1818}
    1919
    20 debug('<p>-webkit-cross-fade</p>');
     20debug('<h2>cross-fade</h2>');
    2121
    2222// Valid
    2323
    2424shouldBe('testCrossfade("opacity: 500%", "opacity")', '"1"');
     25
     26debug('Prefixed');
     27
    2528shouldBe('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 50%)", "background-image")', '"-webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 0.5)"');
    2629shouldBe('testCrossfade("background-image: -webkit-cross-fade(-webkit-cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), url(dummy://example.png), 50%)", "background-image")', '"-webkit-cross-fade(-webkit-cross-fade(url(dummy://a.png), url(dummy://b.png), 0.25), url(dummy://example.png), 0.5)"');
    27 shouldBe('testCrossfade("background-image: -webkit-cross-fade(url(dummy://c.png), -webkit-cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), 50%)", "background-image")', '"-webkit-cross-fade(url(dummy://c.png), -webkit-cross-fade(url(dummy://a.png), url(dummy://b.png), 0.25), 0.5)"');
     30shouldBe('testCrossfade("background-image: -webkit-cross-fade(url(dummy://c.png), -webkit-cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), 50%)", "background-image")',
     31    '"-webkit-cross-fade(url(dummy://c.png), -webkit-cross-fade(url(dummy://a.png), url(dummy://b.png), 0.25), 0.5)"');
    2832shouldBe('testCrossfade("background-image: -webkit-cross-fade(-webkit-linear-gradient(black, white), url(dummy://example.png), 10%)", "background-image")', '"-webkit-cross-fade(-webkit-linear-gradient(top, black, white), url(dummy://example.png), 0.1)"');
    2933shouldBe('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 1.0)", "background-image")', '"-webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 1)"');
    … …  
    3539shouldBe('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), -20)", "background-image")', '"-webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 0)"');
    3640
    37 // Invalid
     41debug('<h2>Unprefixed</h2>');
     42
     43shouldBe('testCrossfade("background-image: cross-fade(url(dummy://example.png), url(dummy://example.png), 50%)", "background-image")', '"cross-fade(url(dummy://example.png), url(dummy://example.png), 0.5)"');
     44shouldBe('testCrossfade("background-image: cross-fade(url(dummy://example.png), url(dummy://example.png), 1.0)", "background-image")', '"cross-fade(url(dummy://example.png), url(dummy://example.png), 1)"');
     45
     46debug('<h2>Mixed</h2>');
     47
     48shouldBe('testCrossfade("background-image: -webkit-cross-fade(cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), url(dummy://example.png), 50%)", "background-image")',
     49    '"-webkit-cross-fade(cross-fade(url(dummy://a.png), url(dummy://b.png), 0.25), url(dummy://example.png), 0.5)"');
     50shouldBe('testCrossfade("background-image: -webkit-cross-fade(cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), 50%)", "background-image")',
     51    '"-webkit-cross-fade(cross-fade(url(dummy://a.png), url(dummy://b.png), 0.25), cross-fade(url(dummy://a.png), url(dummy://b.png), 0.25), 0.5)"');
     52shouldBe('testCrossfade("background-image: cross-fade(cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), -webkit-cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), 50%)", "background-image")',
     53        '"cross-fade(cross-fade(url(dummy://a.png), url(dummy://b.png), 0.25), -webkit-cross-fade(url(dummy://a.png), url(dummy://b.png), 0.25), 0.5)"');
     54
     55debug('<h2>Invalid values</h2>');
    3856
    3957shouldBe('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png))", "background-image")', '"none"');
    4058shouldBe('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png),)", "background-image")', '"none"');
    41 shouldBe('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png))", "background-image")', '"none"');
    42 shouldBe('testCrossfade("background-image: -webkit-cross-fade(), url(dummy://example.png))", "background-image")', '"none"');
    43 shouldBe('testCrossfade("background-image: -webkit-cross-fade(url(", "background-image")', '"none"');
    44 shouldBe('testCrossfade("background-image: -webkit-cross-fade(10px 20% 5px #bbb)", "background-image")', '"none"');
    45 shouldBe('testCrossfade("background-image: -webkit-cross-fade(-webkit-cross-fade(-webkit-cross-fade()))", "background-image")', '"none"');
    46 shouldBe('testCrossfade("background-image: -webkit-cross-fade(20%, url(dummy://a.png), url(dummy://b.png))", "background-image")', '"none"');
    47 shouldBe('testCrossfade("background-image: -webkit-cross-fade(url(dummy://a.png),)", "background-image")', '"none"');
    48 shouldBe('testCrossfade("background-image: -webkit-cross-fade(,)", "background-image")', '"none"');
    49 shouldBe('testCrossfade("background-image: -webkit-cross-fade(,url(dummy://a.png))", "background-image")', '"none"');
    50 shouldBe('testCrossfade("background-image: -webkit-cross-fade(,,,,,)", "background-image")', '"none"');
     59
     60shouldBe('testCrossfade("background-image: cross-fade(url(dummy://example.png), url(dummy://example.png))", "background-image")', '"none"');
     61shouldBe('testCrossfade("background-image: cross-fade(url(dummy://example.png), url(dummy://example.png),)", "background-image")', '"none"');
     62shouldBe('testCrossfade("background-image: cross-fade(url(dummy://example.png))", "background-image")', '"none"');
     63shouldBe('testCrossfade("background-image: cross-fade(), url(dummy://example.png))", "background-image")', '"none"');
     64shouldBe('testCrossfade("background-image: cross-fade(url(", "background-image")', '"none"');
     65shouldBe('testCrossfade("background-image: cross-fade(10px 20% 5px #bbb)", "background-image")', '"none"');
     66shouldBe('testCrossfade("background-image: cross-fade(cross-fade(cross-fade()))", "background-image")', '"none"');
     67shouldBe('testCrossfade("background-image: cross-fade(20%, url(dummy://a.png), url(dummy://b.png))", "background-image")', '"none"');
     68shouldBe('testCrossfade("background-image: cross-fade(url(dummy://a.png),)", "background-image")', '"none"');
     69shouldBe('testCrossfade("background-image: cross-fade(,)", "background-image")', '"none"');
     70shouldBe('testCrossfade("background-image: cross-fade(,url(dummy://a.png))", "background-image")', '"none"');
     71shouldBe('testCrossfade("background-image: cross-fade(,,,,,)", "background-image")', '"none"');
    5172
    5273

  • trunk/LayoutTests/transitions/resources/transition-test-helpers.js

    r191551 r200888  
    6262function parseCrossFade(s)
    6363{
    64     var matches = s.match("-webkit-cross-fade\\((.*)\\s*,\\s*(.*)\\s*,\\s*(.*)\\)");
     64    var matches = s.match("(?:-webkit-)?cross-fade\\((.*)\\s*,\\s*(.*)\\s*,\\s*(.*)\\)");
    6565
    6666    if (!matches)

  • trunk/Source/WebCore/ChangeLog

    r200887 r200888  
     12016-05-13  Simon Fraser  <simon.fraser@apple.com>
     2
     3        Unprefix -webkit-cross-fade()
     4        https://bugs.webkit.org/show_bug.cgi?id=157632
     5
     6        Reviewed by Darin Adler.
     7
     8        Support unprefixed cross-fade() in addition to the prefixed value when parsing,
     9        and have computed style round-trip the correct one.
     10
     11        If computed style is queried during an image transition, return an unprefixed
     12        cross-fade(). If blending cross-fade values, only return the prefixed function if
     13        both inputs are prefixed.
     14
     15        Tested by modified and existing tests.
     16
     17        * css/CSSCrossfadeValue.cpp:
     18        (WebCore::CSSCrossfadeValue::customCSSText):
     19        (WebCore::CSSCrossfadeValue::blend):
     20        * css/CSSCrossfadeValue.h:
     21        (WebCore::CSSCrossfadeValue::create):
     22        (WebCore::CSSCrossfadeValue::isPrefixed):
     23        (WebCore::CSSCrossfadeValue::CSSCrossfadeValue):
     24        * css/CSSParser.cpp:
     25        (WebCore::CSSParser::isGeneratedImageValue):
     26        (WebCore::CSSParser::parseGeneratedImage):
     27        (WebCore::CSSParser::parseCrossfade):
     28        * css/CSSParser.h:
     29
    1302016-05-13  Yoav Weiss  <yoav@yoav.ws>
    231

  • trunk/Source/WebCore/css/CSSCrossfadeValue.cpp

    r199561 r200888  
    7070{
    7171    StringBuilder result;
    72     result.appendLiteral("-webkit-cross-fade(");
     72    if (m_isPrefixed)
     73        result.appendLiteral("-webkit-cross-fade(");
     74    else
     75        result.appendLiteral("cross-fade(");
    7376    result.append(m_fromValue->cssText());
    7477    result.appendLiteral(", ");
    … …  
    203206    auto toImageValue = CSSImageValue::create(m_cachedToImage->url(), toStyledImage.get());
    204207
    205     RefPtr<CSSCrossfadeValue> crossfadeValue = CSSCrossfadeValue::create(WTFMove(fromImageValue), WTFMove(toImageValue));
     208    RefPtr<CSSCrossfadeValue> crossfadeValue = CSSCrossfadeValue::create(WTFMove(fromImageValue), WTFMove(toImageValue), from.isPrefixed() && isPrefixed());
    206209
    207210    double fromPercentage = from.m_percentageValue->getDoubleValue();

  • trunk/Source/WebCore/css/CSSCrossfadeValue.h

    r197563 r200888  
    4444    friend class CrossfadeSubimageObserverProxy;
    4545public:
    46     static Ref<CSSCrossfadeValue> create(PassRefPtr<CSSValue> fromValue, PassRefPtr<CSSValue> toValue)
     46    static Ref<CSSCrossfadeValue> create(PassRefPtr<CSSValue> fromValue, PassRefPtr<CSSValue> toValue, bool prefixed = false)
    4747    {
    48         return adoptRef(*new CSSCrossfadeValue(fromValue, toValue));
     48        return adoptRef(*new CSSCrossfadeValue(fromValue, toValue, prefixed));
    4949    }
    5050
    … …  
    5757    FloatSize fixedSize(const RenderElement*);
    5858
     59    bool isPrefixed() const { return m_isPrefixed; }
    5960    bool isPending() const;
    6061    bool knownToBeOpaque(const RenderElement*) const;
    … …  
    7374
    7475private:
    75     CSSCrossfadeValue(PassRefPtr<CSSValue> fromValue, PassRefPtr<CSSValue> toValue)
     76    CSSCrossfadeValue(PassRefPtr<CSSValue> fromValue, PassRefPtr<CSSValue> toValue, bool prefixed)
    7677        : CSSImageGeneratorValue(CrossfadeClass)
    7778        , m_fromValue(fromValue)
    7879        , m_toValue(toValue)
    7980        , m_crossfadeSubimageObserver(this)
     81        , m_isPrefixed(prefixed)
    8082    {
    8183    }
    … …  
    109111
    110112    CrossfadeSubimageObserverProxy m_crossfadeSubimageObserver;
     113    bool m_isPrefixed { false };
    111114};
    112115

  • trunk/Source/WebCore/css/CSSParser.cpp

    r200769 r200888  
    45394539    valueList.next();
    45404540}
     4541
    45414542void CSSParser::parse3ValuesFillPosition(CSSParserValueList& valueList, RefPtr<CSSPrimitiveValue>& value1, RefPtr<CSSPrimitiveValue>& value2, RefPtr<CSSPrimitiveValue>&& parsedValue1, RefPtr<CSSPrimitiveValue>&& parsedValue2)
    45424543{
    … …  
    94529453        || equalLettersIgnoringASCIICase(value.function->name, "repeating-radial-gradient(")
    94539454        || equalLettersIgnoringASCIICase(value.function->name, "-webkit-canvas(")
     9455        || equalLettersIgnoringASCIICase(value.function->name, "cross-fade(")
    94549456        || equalLettersIgnoringASCIICase(value.function->name, "-webkit-cross-fade(")
    94559457        || equalLettersIgnoringASCIICase(value.function->name, "filter(")
    … …  
    94969498
    94979499    if (equalLettersIgnoringASCIICase(parserValue.function->name, "-webkit-cross-fade("))
    9498         return parseCrossfade(valueList, value);
     9500        return parseCrossfade(valueList, value, true);
     9501
     9502    if (equalLettersIgnoringASCIICase(parserValue.function->name, "cross-fade("))
     9503        return parseCrossfade(valueList, value, false);
    94999504
    95009505    if (equalLettersIgnoringASCIICase(parserValue.function->name, "filter(") || equalLettersIgnoringASCIICase(parserValue.function->name, "-webkit-filter("))
    … …  
    95489553}
    95499554
    9550 bool CSSParser::parseCrossfade(CSSParserValueList& valueList, RefPtr<CSSValue>& crossfade)
     9555bool CSSParser::parseCrossfade(CSSParserValueList& valueList, RefPtr<CSSValue>& crossfade, bool prefixed)
    95519556{
    95529557    RefPtr<CSSCrossfadeValue> result;
    … …  
    95929597        return false;
    95939598
    9594     result = CSSCrossfadeValue::create(fromImageValue, toImageValue);
     9599    result = CSSCrossfadeValue::create(fromImageValue, toImageValue, prefixed);
    95959600    result->setPercentage(percentage);
    95969601

  • trunk/Source/WebCore/css/CSSParser.h

    r200769 r200888  
    305305    bool parseGradientColorStops(CSSParserValueList&, CSSGradientValue&, bool expectComma);
    306306
    307     bool parseCrossfade(CSSParserValueList&, RefPtr<CSSValue>&);
     307    bool parseCrossfade(CSSParserValueList&, RefPtr<CSSValue>&, bool prefixed);
    308308
    309309#if ENABLE(CSS_IMAGE_RESOLUTION)

  • trunk/Source/WebInspectorUI/ChangeLog

    r200886 r200888  
     12016-05-13  Simon Fraser  <simon.fraser@apple.com>
     2
     3        Unprefix -webkit-cross-fade()
     4        https://bugs.webkit.org/show_bug.cgi?id=157632
     5
     6        Reviewed by Darin Adler.
     7
     8        * UserInterface/Models/CSSKeywordCompletions.js:
     9
    1102016-05-13  Matt Baker  <mattbaker@apple.com>
    211

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

    r200575 r200888  
    163163    ],
    164164    "content": [
    165         "list-item", "close-quote", "no-close-quote", "no-open-quote", "open-quote", "attr()", "counter()", "counters()", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "-webkit-cross-fade()", "-webkit-image-set()"
     165        "list-item", "close-quote", "no-close-quote", "no-open-quote", "open-quote", "attr()", "counter()", "counters()", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "cross-fade()", "-webkit-image-set()"
    166166    ],
    167167    "list-style-image": [
    168         "none", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "-webkit-cross-fade()", "-webkit-image-set()"
     168        "none", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "cross-fade()", "-webkit-image-set()"
    169169    ],
    170170    "clear": [
    … …  
    244244    ],
    245245    "background": [
    246         "none", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "-webkit-cross-fade()", "-webkit-image-set()",
     246        "none", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "cross-fade()", "-webkit-image-set()",
    247247        "repeat", "repeat-x", "repeat-y", "no-repeat", "space", "round",
    248248        "scroll", "fixed", "local",
    … …  
    252252    ],
    253253    "background-image": [
    254         "none", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "-webkit-cross-fade()", "-webkit-image-set()"
     254        "none", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "cross-fade()", "-webkit-image-set()"
    255255    ],
    256256    "background-size": [
    … …  
    475475    ],
    476476    "border-image": [
    477         "repeat", "stretch", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "-webkit-cross-fade()", "-webkit-image-set()"
     477        "repeat", "stretch", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "cross-fade()", "-webkit-image-set()"
    478478    ],
    479479    "border-image-repeat": [
Note: See TracChangeset for help on using the changeset viewer.