Diff
Modified: branches/safari-610.1.1-branch/LayoutTests/ChangeLog (255647 => 255648)
--- branches/safari-610.1.1-branch/LayoutTests/ChangeLog 2020-02-04 03:09:34 UTC (rev 255647)
+++ branches/safari-610.1.1-branch/LayoutTests/ChangeLog 2020-02-04 03:09:39 UTC (rev 255648)
@@ -1,5 +1,89 @@
2020-02-03 Alan Coon <[email protected]>
+ Cherry-pick r255228. rdar://problem/58858225
+
+ -webkit-image-set should support resolution units other than 'x'
+ https://bugs.webkit.org/show_bug.cgi?id=100120
+
+ Reviewed by Darin Adler.
+
+ Source/WebCore:
+
+ Leveraged previous work on image-resolution to enable dpi/dppx/dpcm in CSS image-set.
+ Now the second value of every entry in the image-set is parsed like any resolution,
+ allowing "x" as a synonim for "dppx.
+
+ This changes computed style behavior for image-set - "x" resolution values will be converted
+ to "dppx". This is in line with the spirit of computed values, though it's not spec'ed particularly.
+
+ Tests: fast/hidpi/image-set-units.html
+
+ * css/CSSImageSetValue.cpp:
+ (WebCore::CSSImageSetValue::fillImageSet):
+ (WebCore::CSSImageSetValue::updateDeviceScaleFactor):
+ (WebCore::CSSImageSetValue::customCSSText const):
+ Convert values to dppx before sorting them the image set.
+ Use given CSS units in computed styles instead of hardcoding "x"
+
+ * css/CSSPrimitiveValue.cpp:
+ (WebCore::isValidCSSUnitTypeForDoubleConversion):
+ (WebCore::CSSPrimitiveValue::conversionToCanonicalUnitsScaleFactor):
+ Allow conversion of dpi/dppx/dpcm to canonical (dppx).
+
+ * css/parser/CSSPropertyParserHelpers.cpp:
+ (WebCore::CSSPropertyParserHelpers::consumeResolution):
+ (WebCore::CSSPropertyParserHelpers::consumeImageSet):
+ * css/parser/CSSPropertyParserHelpers.h:
+ Consume any resolution when parsing image-set.
+
+ LayoutTests:
+
+ Had to modify several image-set parsing tests because of the behavior change in
+ computed style (x => dppx).
+
+ Also added a couple of parsing/rendering tests specifically to test the new behavior
+ of dpi/dpcm/dppx.
+
+ * fast/css/cursor-parsing-image-set-expected.txt:
+ * fast/css/cursor-parsing-image-set.html:
+ * fast/css/image-set-parsing-expected.txt:
+ * fast/css/image-set-parsing-invalid-expected.txt:
+ * fast/css/image-set-parsing.html:
+ * fast/css/image-set-setting-expected.txt:
+ * fast/css/image-set-setting.html:
+ * fast/css/image-set-unprefixed.html:
+ * fast/hidpi/image-set-units-expected.html: Added.
+ * fast/hidpi/image-set-units.html: Added.
+
+
+ git-svn-id: https://svn.webkit.org/repository/webkit/trunk@255228 268f45cc-cd09-0410-ab3c-d52691b4dbfc
+
+ 2020-01-27 Noam Rosenthal <[email protected]>
+
+ -webkit-image-set should support resolution units other than 'x'
+ https://bugs.webkit.org/show_bug.cgi?id=100120
+
+ Reviewed by Darin Adler.
+
+ Had to modify several image-set parsing tests because of the behavior change in
+ computed style (x => dppx).
+
+ Also added a couple of parsing/rendering tests specifically to test the new behavior
+ of dpi/dpcm/dppx.
+
+ * fast/css/cursor-parsing-image-set-expected.txt:
+ * fast/css/cursor-parsing-image-set.html:
+ * fast/css/image-set-parsing-expected.txt:
+ * fast/css/image-set-parsing-invalid-expected.txt:
+ * fast/css/image-set-parsing.html:
+ * fast/css/image-set-setting-expected.txt:
+ * fast/css/image-set-setting.html:
+ * fast/css/image-set-unprefixed.html:
+ * fast/hidpi/image-set-units-expected.html: Added.
+ * fast/hidpi/image-set-units.html: Added.
+
+2020-02-03 Alan Coon <[email protected]>
+
Cherry-pick r254861. rdar://problem/58858225
-webkit-image-set should support all the image functions WebKit supports, not just url()
Modified: branches/safari-610.1.1-branch/LayoutTests/fast/css/cursor-parsing-image-set-expected.txt (255647 => 255648)
--- branches/safari-610.1.1-branch/LayoutTests/fast/css/cursor-parsing-image-set-expected.txt 2020-02-04 03:09:34 UTC (rev 255647)
+++ branches/safari-610.1.1-branch/LayoutTests/fast/css/cursor-parsing-image-set-expected.txt 2020-02-04 03:09:39 UTC (rev 255648)
@@ -6,10 +6,10 @@
Bug 99493
Test a bunch of cursor rules which should round-trip exactly.
-PASS style.cssText is "cursor: image-set(url(\"file:///foo.png\") 1x), auto;"
-PASS style.cssText is "cursor: image-set(url(\"file:///foo.png\") 1x, url(\"file:///foo2x.png\") 2x), auto;"
-PASS style.cssText is "cursor: image-set(url(\"file:///foo.png\") 1x, url(\"file:///foo2x.png\") 2x) 2 3, auto;"
-PASS style.cssText is "cursor: image-set(url(\"file:///foo03.png\") 0.3x, url(\"file:///foo5x.png\") 5x) 6 5, url(\"file:///foo.png\") 12 3, pointer;"
+PASS style.cssText is "cursor: image-set(url(\"file:///foo.png\") 1dppx), auto;"
+PASS style.cssText is "cursor: image-set(url(\"file:///foo.png\") 1dppx, url(\"file:///foo2x.png\") 2dppx), auto;"
+PASS style.cssText is "cursor: image-set(url(\"file:///foo.png\") 1dppx, url(\"file:///foo2x.png\") 2dppx) 2 3, auto;"
+PASS style.cssText is "cursor: image-set(url(\"file:///foo03.png\") 0.3dppx, url(\"file:///foo5x.png\") 5dppx) 6 5, url(\"file:///foo.png\") 12 3, pointer;"
PASS successfullyParsed is true
TEST COMPLETE
Modified: branches/safari-610.1.1-branch/LayoutTests/fast/css/cursor-parsing-image-set.html (255647 => 255648)
--- branches/safari-610.1.1-branch/LayoutTests/fast/css/cursor-parsing-image-set.html 2020-02-04 03:09:34 UTC (rev 255647)
+++ branches/safari-610.1.1-branch/LayoutTests/fast/css/cursor-parsing-image-set.html 2020-02-04 03:09:39 UTC (rev 255648)
@@ -21,7 +21,7 @@
{
var cssText = makeCursorRule(rule);
style = roundtripCssRule(cssText);
- shouldBeEqualToString('style.cssText', cssText);
+ shouldBeEqualToString('style.cssText', cssText.replace(/x(?=[,)])/g, 'dppx'));
}
function roundtripCssRule(cssText)
Modified: branches/safari-610.1.1-branch/LayoutTests/fast/css/image-set-parsing-expected.txt (255647 => 255648)
--- branches/safari-610.1.1-branch/LayoutTests/fast/css/image-set-parsing-expected.txt 2020-02-04 03:09:34 UTC (rev 255647)
+++ branches/safari-610.1.1-branch/LayoutTests/fast/css/image-set-parsing-expected.txt 2020-02-04 03:09:39 UTC (rev 255648)
@@ -10,7 +10,7 @@
PASS jsWrapperClass(imageSetRule.constructor) is 'Function'
PASS imageSetRule.length is 2
PASS subRule is 'a'
-PASS subRule.cssText is '1'
+PASS subRule.cssText is '1dppx'
Multiple values for background-image : url('#a') 1x, url('#b') 2x
PASS jsWrapperClass(imageSetRule) is 'CSSValueList'
@@ -18,9 +18,9 @@
PASS jsWrapperClass(imageSetRule.constructor) is 'Function'
PASS imageSetRule.length is 4
PASS subRule is 'a'
-PASS subRule.cssText is '1'
+PASS subRule.cssText is '1dppx'
PASS subRule is 'b'
-PASS subRule.cssText is '2'
+PASS subRule.cssText is '2dppx'
Single value for background-image without url() function : '#a' 1x
PASS jsWrapperClass(imageSetRule) is 'CSSValueList'
@@ -28,7 +28,7 @@
PASS jsWrapperClass(imageSetRule.constructor) is 'Function'
PASS imageSetRule.length is 2
PASS subRule is 'a'
-PASS subRule.cssText is '1'
+PASS subRule.cssText is '1dppx'
Multiple values for background-image without url() function : '#a' 1x, '#b' 2x
PASS jsWrapperClass(imageSetRule) is 'CSSValueList'
@@ -36,9 +36,9 @@
PASS jsWrapperClass(imageSetRule.constructor) is 'Function'
PASS imageSetRule.length is 4
PASS subRule is 'a'
-PASS subRule.cssText is '1'
+PASS subRule.cssText is '1dppx'
PASS subRule is 'b'
-PASS subRule.cssText is '2'
+PASS subRule.cssText is '2dppx'
Mix values with and without url() function : '#a' 1x, url('#b') 2x
PASS jsWrapperClass(imageSetRule) is 'CSSValueList'
@@ -46,9 +46,9 @@
PASS jsWrapperClass(imageSetRule.constructor) is 'Function'
PASS imageSetRule.length is 4
PASS subRule is 'a'
-PASS subRule.cssText is '1'
+PASS subRule.cssText is '1dppx'
PASS subRule is 'b'
-PASS subRule.cssText is '2'
+PASS subRule.cssText is '2dppx'
Multiple values for background-image, out of order : url('#c') 3x, url('#b') 2x, url('#a') 1x
PASS jsWrapperClass(imageSetRule) is 'CSSValueList'
@@ -56,11 +56,11 @@
PASS jsWrapperClass(imageSetRule.constructor) is 'Function'
PASS imageSetRule.length is 6
PASS subRule is 'c'
-PASS subRule.cssText is '3'
+PASS subRule.cssText is '3dppx'
PASS subRule is 'b'
-PASS subRule.cssText is '2'
+PASS subRule.cssText is '2dppx'
PASS subRule is 'a'
-PASS subRule.cssText is '1'
+PASS subRule.cssText is '1dppx'
Single value for content : url('#a') 1x
PASS jsWrapperClass(imageSetRule) is 'CSSValueList'
@@ -68,7 +68,7 @@
PASS jsWrapperClass(imageSetRule.constructor) is 'Function'
PASS imageSetRule.length is 2
PASS subRule is 'a'
-PASS subRule.cssText is '1'
+PASS subRule.cssText is '1dppx'
Multiple values for content : url('#a') 1x, url('#b') 2x
PASS jsWrapperClass(imageSetRule) is 'CSSValueList'
@@ -76,9 +76,9 @@
PASS jsWrapperClass(imageSetRule.constructor) is 'Function'
PASS imageSetRule.length is 4
PASS subRule is 'a'
-PASS subRule.cssText is '1'
+PASS subRule.cssText is '1dppx'
PASS subRule is 'b'
-PASS subRule.cssText is '2'
+PASS subRule.cssText is '2dppx'
Single value for border-image : url('#a') 1x
PASS jsWrapperClass(imageSetRule) is 'CSSValueList'
@@ -86,7 +86,7 @@
PASS jsWrapperClass(imageSetRule.constructor) is 'Function'
PASS imageSetRule.length is 2
PASS subRule is 'a'
-PASS subRule.cssText is '1'
+PASS subRule.cssText is '1dppx'
Multiple values for border-image : url('#a') 1x, url('#b') 2x
PASS jsWrapperClass(imageSetRule) is 'CSSValueList'
@@ -94,9 +94,9 @@
PASS jsWrapperClass(imageSetRule.constructor) is 'Function'
PASS imageSetRule.length is 4
PASS subRule is 'a'
-PASS subRule.cssText is '1'
+PASS subRule.cssText is '1dppx'
PASS subRule is 'b'
-PASS subRule.cssText is '2'
+PASS subRule.cssText is '2dppx'
Single value for -webkit-mask-box-image : url('#a') 1x
PASS jsWrapperClass(imageSetRule) is 'CSSValueList'
@@ -104,7 +104,7 @@
PASS jsWrapperClass(imageSetRule.constructor) is 'Function'
PASS imageSetRule.length is 2
PASS subRule is 'a'
-PASS subRule.cssText is '1'
+PASS subRule.cssText is '1dppx'
Multiple values for -webkit-mask-box-image : url('#a') 1x, url('#b') 2x
PASS jsWrapperClass(imageSetRule) is 'CSSValueList'
@@ -112,9 +112,45 @@
PASS jsWrapperClass(imageSetRule.constructor) is 'Function'
PASS imageSetRule.length is 4
PASS subRule is 'a'
-PASS subRule.cssText is '1'
+PASS subRule.cssText is '1dppx'
PASS subRule is 'b'
-PASS subRule.cssText is '2'
+PASS subRule.cssText is '2dppx'
+
+Single value with dppx : url('#a') 1dppx
+PASS jsWrapperClass(imageSetRule) is 'CSSValueList'
+PASS jsWrapperClass(imageSetRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(imageSetRule.constructor) is 'Function'
+PASS imageSetRule.length is 2
+PASS subRule is 'a'
+PASS subRule.cssText is '1dppx'
+
+Single value with dpi : url('#a') 192dpi
+PASS jsWrapperClass(imageSetRule) is 'CSSValueList'
+PASS jsWrapperClass(imageSetRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(imageSetRule.constructor) is 'Function'
+PASS imageSetRule.length is 2
+PASS subRule is 'a'
+PASS subRule.cssText is '192dpi'
+
+Single value with dpcm : url('#a') 102dpcm
+PASS jsWrapperClass(imageSetRule) is 'CSSValueList'
+PASS jsWrapperClass(imageSetRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(imageSetRule.constructor) is 'Function'
+PASS imageSetRule.length is 2
+PASS subRule is 'a'
+PASS subRule.cssText is '102dpcm'
+
+Multiple values with dpi, dppx and x : url('#a') 1x, url('#b') 2dppx, url('#c') 250dpi
+PASS jsWrapperClass(imageSetRule) is 'CSSValueList'
+PASS jsWrapperClass(imageSetRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(imageSetRule.constructor) is 'Function'
+PASS imageSetRule.length is 6
+PASS subRule is 'a'
+PASS subRule.cssText is '1dppx'
+PASS subRule is 'b'
+PASS subRule.cssText is '2dppx'
+PASS subRule is 'c'
+PASS subRule.cssText is '250dpi'
PASS successfullyParsed is true
TEST COMPLETE
Modified: branches/safari-610.1.1-branch/LayoutTests/fast/css/image-set-parsing-generated-expected.txt (255647 => 255648)
--- branches/safari-610.1.1-branch/LayoutTests/fast/css/image-set-parsing-generated-expected.txt 2020-02-04 03:09:34 UTC (rev 255647)
+++ branches/safari-610.1.1-branch/LayoutTests/fast/css/image-set-parsing-generated-expected.txt 2020-02-04 03:09:39 UTC (rev 255648)
@@ -10,7 +10,7 @@
PASS jsWrapperClass(imageSetRule.constructor) is 'Function'
PASS imageSetRule.length is 2
PASS subRule.cssText is 'linear-gradient(green, white)'
-PASS subRule.cssText is '1'
+PASS subRule.cssText is '1dppx'
Single value for content with gradient : linear-gradient(green, white) 1x
PASS jsWrapperClass(imageSetRule) is 'CSSValueList'
@@ -18,7 +18,7 @@
PASS jsWrapperClass(imageSetRule.constructor) is 'Function'
PASS imageSetRule.length is 2
PASS subRule.cssText is 'linear-gradient(green, white)'
-PASS subRule.cssText is '1'
+PASS subRule.cssText is '1dppx'
Single value for background-image with gradients : linear-gradient(green, white) 1x, radial-gradient(blue, white) 2x
PASS jsWrapperClass(imageSetRule) is 'CSSValueList'
@@ -26,9 +26,9 @@
PASS jsWrapperClass(imageSetRule.constructor) is 'Function'
PASS imageSetRule.length is 4
PASS subRule.cssText is 'linear-gradient(green, white)'
-PASS subRule.cssText is '1'
+PASS subRule.cssText is '1dppx'
PASS subRule.cssText is 'radial-gradient(blue, white)'
-PASS subRule.cssText is '2'
+PASS subRule.cssText is '2dppx'
Combined gradient and URL : url('#a') 1x, linear-gradient(green, white) 2x
PASS jsWrapperClass(imageSetRule) is 'CSSValueList'
@@ -36,9 +36,9 @@
PASS jsWrapperClass(imageSetRule.constructor) is 'Function'
PASS imageSetRule.length is 4
PASS subRule is 'a'
-PASS subRule.cssText is '1'
+PASS subRule.cssText is '1dppx'
PASS subRule.cssText is 'linear-gradient(green, white)'
-PASS subRule.cssText is '2'
+PASS subRule.cssText is '2dppx'
Combined gradient and URL in content : url('#a') 1x, linear-gradient(green, white) 2x
PASS jsWrapperClass(imageSetRule) is 'CSSValueList'
@@ -46,9 +46,9 @@
PASS jsWrapperClass(imageSetRule.constructor) is 'Function'
PASS imageSetRule.length is 4
PASS subRule is 'a'
-PASS subRule.cssText is '1'
+PASS subRule.cssText is '1dppx'
PASS subRule.cssText is 'linear-gradient(green, white)'
-PASS subRule.cssText is '2'
+PASS subRule.cssText is '2dppx'
Combined gradient and cross-fade : -webkit-cross-fade(url('#a'), url('#b'), 70%) 1x, linear-gradient(green, white) 2x
PASS jsWrapperClass(imageSetRule) is 'CSSValueList'
@@ -56,9 +56,17 @@
PASS jsWrapperClass(imageSetRule.constructor) is 'Function'
PASS imageSetRule.length is 4
PASS subRule is 'a'
-PASS subRule.cssText is '1'
+PASS subRule.cssText is '1dppx'
PASS subRule.cssText is 'linear-gradient(green, white)'
-PASS subRule.cssText is '2'
+PASS subRule.cssText is '2dppx'
+
+Single value for background-image with gradient and dpi : linear-gradient(green, white) 192dpi
+PASS jsWrapperClass(imageSetRule) is 'CSSValueList'
+PASS jsWrapperClass(imageSetRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(imageSetRule.constructor) is 'Function'
+PASS imageSetRule.length is 2
+PASS subRule.cssText is 'linear-gradient(green, white)'
+PASS subRule.cssText is '192dpi'
PASS successfullyParsed is true
TEST COMPLETE
Modified: branches/safari-610.1.1-branch/LayoutTests/fast/css/image-set-parsing-generated.html (255647 => 255648)
--- branches/safari-610.1.1-branch/LayoutTests/fast/css/image-set-parsing-generated.html 2020-02-04 03:09:34 UTC (rev 255647)
+++ branches/safari-610.1.1-branch/LayoutTests/fast/css/image-set-parsing-generated.html 2020-02-04 03:09:39 UTC (rev 255648)
@@ -74,32 +74,38 @@
testImageSetRule("Single value for background-image with gradient",
"background-image",
"linear-gradient(green, white) 1x", 2,
- ["linear-gradient(green, white)", "1"]);
+ ["linear-gradient(green, white)", "1dppx"]);
testImageSetRule("Single value for content with gradient",
"background-image",
"linear-gradient(green, white) 1x", 2,
- ["linear-gradient(green, white)", "1"]);
+ ["linear-gradient(green, white)", "1dppx"]);
testImageSetRule("Single value for background-image with gradients",
"background-image",
"linear-gradient(green, white) 1x, radial-gradient(blue, white) 2x", 4,
- ["linear-gradient(green, white)", "1", "radial-gradient(blue, white)", "2"]);
+ ["linear-gradient(green, white)", "1dppx", "radial-gradient(blue, white)", "2dppx"]);
testImageSetRule("Combined gradient and URL",
"background-image",
"url('#a') 1x, linear-gradient(green, white) 2x", 4,
- ["a", "1", "linear-gradient(green, white)", "2"]);
+ ["a", "1dppx", "linear-gradient(green, white)", "2dppx"]);
testImageSetRule("Combined gradient and URL in content",
"content",
"url('#a') 1x, linear-gradient(green, white) 2x", 4,
- ["a", "1", "linear-gradient(green, white)", "2"]);
+ ["a", "1dppx", "linear-gradient(green, white)", "2dppx"]);
testImageSetRule("Combined gradient and cross-fade",
"background-image",
"-webkit-cross-fade(url('#a'), url('#b'), 70%) 1x, linear-gradient(green, white) 2x", 4,
- ["a", "1", "linear-gradient(green, white)", "2"]);
+ ["a", "1dppx", "linear-gradient(green, white)", "2dppx"]);
+testImageSetRule("Single value for background-image with gradient and dpi",
+ "background-image",
+ "linear-gradient(green, white) 192dpi", 2,
+ ["linear-gradient(green, white)", "192dpi"]);
+
+
successfullyParsed = true;
</script>
<script src=""
Modified: branches/safari-610.1.1-branch/LayoutTests/fast/css/image-set-parsing.html (255647 => 255648)
--- branches/safari-610.1.1-branch/LayoutTests/fast/css/image-set-parsing.html 2020-02-04 03:09:34 UTC (rev 255647)
+++ branches/safari-610.1.1-branch/LayoutTests/fast/css/image-set-parsing.html 2020-02-04 03:09:39 UTC (rev 255648)
@@ -74,63 +74,83 @@
testImageSetRule("Single value for background-image",
"background-image",
"url('#a') 1x", 2,
- ["a", "1"]);
+ ["a", "1dppx"]);
testImageSetRule("Multiple values for background-image",
"background-image",
"url('#a') 1x, url('#b') 2x", 4,
- ["a", "1", "b", "2"]);
+ ["a", "1dppx", "b", "2dppx"]);
testImageSetRule("Single value for background-image without url() function",
"background-image",
"'#a' 1x", 2,
- ["a", "1"]);
+ ["a", "1dppx"]);
testImageSetRule("Multiple values for background-image without url() function",
"background-image",
"'#a' 1x, '#b' 2x", 4,
- ["a", "1", "b", "2"]);
+ ["a", "1dppx", "b", "2dppx"]);
testImageSetRule("Mix values with and without url() function",
"background-image",
"'#a' 1x, url('#b') 2x", 4,
- ["a", "1", "b", "2"]);
+ ["a", "1dppx", "b", "2dppx"]);
testImageSetRule("Multiple values for background-image, out of order",
"background-image",
"url('#c') 3x, url('#b') 2x, url('#a') 1x", 6,
- ["c", "3", "b", "2", "a", "1"]);
+ ["c", "3dppx", "b", "2dppx", "a", "1dppx"]);
testImageSetRule("Single value for content",
"content",
"url('#a') 1x", 2,
- ["a", "1"]);
+ ["a", "1dppx"]);
testImageSetRule("Multiple values for content",
"content",
"url('#a') 1x, url('#b') 2x", 4,
- ["a", "1", "b", "2"]);
+ ["a", "1dppx", "b", "2dppx"]);
testImageSetRule("Single value for border-image",
"-webkit-border-image",
"url('#a') 1x", 2,
- ["a", "1"]);
+ ["a", "1dppx"]);
testImageSetRule("Multiple values for border-image",
"-webkit-border-image",
"url('#a') 1x, url('#b') 2x", 4,
- ["a", "1", "b", "2"]);
+ ["a", "1dppx", "b", "2dppx"]);
testImageSetRule("Single value for -webkit-mask-box-image",
"-webkit-mask-box-image",
"url('#a') 1x", 2,
- ["a", "1"]);
+ ["a", "1dppx"]);
testImageSetRule("Multiple values for -webkit-mask-box-image",
"-webkit-mask-box-image",
"url('#a') 1x, url('#b') 2x", 4,
- ["a", "1", "b", "2"]);
+ ["a", "1dppx", "b", "2dppx"]);
+testImageSetRule("Single value with dppx",
+ "background-image",
+ "url('#a') 1dppx", 2,
+ ["a", "1dppx"]);
+
+testImageSetRule("Single value with dpi",
+ "background-image",
+ "url('#a') 192dpi", 2,
+ ["a", "192dpi"]);
+
+testImageSetRule("Single value with dpcm",
+ "background-image",
+ "url('#a') 102dpcm", 2,
+ ["a", "102dpcm"]);
+
+testImageSetRule("Multiple values with dpi, dppx and x",
+ "background-image",
+ "url('#a') 1x, url('#b') 2dppx, url('#c') 250dpi", 6,
+ ["a", "1dppx", "b", "2dppx", "c", "250dpi"]);
+
successfullyParsed = true;
</script>
<script src=""
Modified: branches/safari-610.1.1-branch/LayoutTests/fast/css/image-set-setting-expected.txt (255647 => 255648)
--- branches/safari-610.1.1-branch/LayoutTests/fast/css/image-set-setting-expected.txt 2020-02-04 03:09:34 UTC (rev 255647)
+++ branches/safari-610.1.1-branch/LayoutTests/fast/css/image-set-setting-expected.txt 2020-02-04 03:09:39 UTC (rev 255648)
@@ -5,19 +5,19 @@
Single value for background-image : url("http://www.webkit.org/a") 1x
-PASS style.backgroundImage is "image-set(url(\"http://www.webkit.org/a\") 1x)"
+PASS style.backgroundImage is "image-set(url(\"http://www.webkit.org/a\") 1dppx)"
Multiple values for background-image : url("http://www.webkit.org/a") 1x, url("http://www.webkit.org/b") 2x
-PASS style.backgroundImage is "image-set(url(\"http://www.webkit.org/a\") 1x, url(\"http://www.webkit.org/b\") 2x)"
+PASS style.backgroundImage is "image-set(url(\"http://www.webkit.org/a\") 1dppx, url(\"http://www.webkit.org/b\") 2dppx)"
Multiple values for background-image, out of order : url("http://www.webkit.org/c") 3x, url("http://www.webkit.org/b") 2x, url("http://www.webkit.org/a") 1x
-PASS style.backgroundImage is "image-set(url(\"http://www.webkit.org/c\") 3x, url(\"http://www.webkit.org/b\") 2x, url(\"http://www.webkit.org/a\") 1x)"
+PASS style.backgroundImage is "image-set(url(\"http://www.webkit.org/c\") 3dppx, url(\"http://www.webkit.org/b\") 2dppx, url(\"http://www.webkit.org/a\") 1dppx)"
Duplicate values for background-image : url("http://www.webkit.org/c") 1x, url("http://www.webkit.org/b") 2x, url("http://www.webkit.org/a") 1x
-PASS style.backgroundImage is "image-set(url(\"http://www.webkit.org/c\") 1x, url(\"http://www.webkit.org/b\") 2x, url(\"http://www.webkit.org/a\") 1x)"
+PASS style.backgroundImage is "image-set(url(\"http://www.webkit.org/c\") 1dppx, url(\"http://www.webkit.org/b\") 2dppx, url(\"http://www.webkit.org/a\") 1dppx)"
Fractional values for background-image : url("http://www.webkit.org/c") 0.2x, url("http://www.webkit.org/b") 2.3x, url("http://www.webkit.org/a") 12.3456x
-PASS style.backgroundImage is "image-set(url(\"http://www.webkit.org/c\") 0.2x, url(\"http://www.webkit.org/b\") 2.3x, url(\"http://www.webkit.org/a\") 12.3456x)"
+PASS style.backgroundImage is "image-set(url(\"http://www.webkit.org/c\") 0.2dppx, url(\"http://www.webkit.org/b\") 2.3dppx, url(\"http://www.webkit.org/a\") 12.3456dppx)"
PASS successfullyParsed is true
TEST COMPLETE
Modified: branches/safari-610.1.1-branch/LayoutTests/fast/css/image-set-setting.html (255647 => 255648)
--- branches/safari-610.1.1-branch/LayoutTests/fast/css/image-set-setting.html 2020-02-04 03:09:34 UTC (rev 255647)
+++ branches/safari-610.1.1-branch/LayoutTests/fast/css/image-set-setting.html 2020-02-04 03:09:39 UTC (rev 255648)
@@ -21,7 +21,7 @@
return computedValue;
}
-function testImageSetRule(description, property, rule, expected)
+function testImageSetRule(description, property, rule)
{
debug("");
debug(description + " : " + rule);
@@ -28,7 +28,7 @@
var fullRule = "image-set(" + rule + ")";
style = testComputedStyle(property, fullRule);
- shouldBeEqualToString('style.backgroundImage', fullRule);
+ shouldBeEqualToString('style.backgroundImage', fullRule.replace(/x(?=[,)])/g, 'dppx'));
}
testImageSetRule("Single value for background-image",
Modified: branches/safari-610.1.1-branch/LayoutTests/fast/css/image-set-unprefixed.html (255647 => 255648)
--- branches/safari-610.1.1-branch/LayoutTests/fast/css/image-set-unprefixed.html 2020-02-04 03:09:34 UTC (rev 255647)
+++ branches/safari-610.1.1-branch/LayoutTests/fast/css/image-set-unprefixed.html 2020-02-04 03:09:39 UTC (rev 255648)
@@ -16,7 +16,7 @@
return computedValue;
}
-function testImageSetRule(description, property, rule, expected)
+function testImageSetRule(description, property, rule)
{
debug("");
debug(`${description} : ${rule}`);
@@ -25,12 +25,12 @@
if (property == 'cursor')
rule += ', default';
- if (testComputedStyle(property, rule) == rule)
+ if (testComputedStyle(property, rule) == rule.replace(/x(?=[,)])/g, 'dppx'))
debug("Unprefixed: PASS");
else
debug("Unprefixed: FAIL");
- if (testComputedStyle(property, "-webkit-" + rule) == rule)
+ if (testComputedStyle(property, "-webkit-" + rule) == rule.replace(/x(?=[,)])/g, 'dppx'))
debug("Prefixed: PASS");
else
debug("Prefixed: FAIL");
Added: branches/safari-610.1.1-branch/LayoutTests/fast/hidpi/image-set-units-expected.html (0 => 255648)
--- branches/safari-610.1.1-branch/LayoutTests/fast/hidpi/image-set-units-expected.html (rev 0)
+++ branches/safari-610.1.1-branch/LayoutTests/fast/hidpi/image-set-units-expected.html 2020-02-04 03:09:39 UTC (rev 255648)
@@ -0,0 +1,25 @@
+<html>
+<head>
+<script>
+ window._onload_ = () => {
+ if (window.testRunner) {
+ testRunner.waitUntilDone();
+ testRunner.setBackingScaleFactor(2, () => setTimeout(() => testRunner.notifyDone(), 0));
+ }
+ }
+</script>
+
+<style>
+ #foo {
+ width:100px;
+ height:100px;
+ background-image: image-set(url('resources/blue-100-px-square.png') 1x, linear-gradient(green, white) 2x);
+ }
+</style>
+</head>
+
+<body>
+ <div>This test passes if the div below is a blue 100px square when the deviceScaleFactor is 1, and if it is a 100px green-white gradient square when the deviceScaleFactor is 2.</div>
+ <div id=foo></div>
+</body>
+</html>
Property changes on: branches/safari-610.1.1-branch/LayoutTests/fast/hidpi/image-set-units-expected.html
___________________________________________________________________
Added: svn:executable
+*
\ No newline at end of property
Added: branches/safari-610.1.1-branch/LayoutTests/fast/hidpi/image-set-units.html (0 => 255648)
--- branches/safari-610.1.1-branch/LayoutTests/fast/hidpi/image-set-units.html (rev 0)
+++ branches/safari-610.1.1-branch/LayoutTests/fast/hidpi/image-set-units.html 2020-02-04 03:09:39 UTC (rev 255648)
@@ -0,0 +1,25 @@
+<html>
+<head>
+<script>
+ window._onload_ = () => {
+ if (window.testRunner) {
+ testRunner.waitUntilDone();
+ testRunner.setBackingScaleFactor(2, () => setTimeout(() => testRunner.notifyDone(), 0));
+ }
+ }
+</script>
+
+<style>
+ #foo {
+ width:100px;
+ height:100px;
+ background-image: image-set(url('resources/blue-100-px-square.png') 1dppx, linear-gradient(green, white) 192dpi);
+ }
+</style>
+</head>
+
+<body>
+ <div>This test passes if the div below is a blue 100px square when the deviceScaleFactor is 1, and if it is a 100px green-white gradient square when the deviceScaleFactor is 2.</div>
+ <div id=foo></div>
+</body>
+</html>
Property changes on: branches/safari-610.1.1-branch/LayoutTests/fast/hidpi/image-set-units.html
___________________________________________________________________
Added: svn:executable
+*
\ No newline at end of property
Modified: branches/safari-610.1.1-branch/Source/WebCore/ChangeLog (255647 => 255648)
--- branches/safari-610.1.1-branch/Source/WebCore/ChangeLog 2020-02-04 03:09:34 UTC (rev 255647)
+++ branches/safari-610.1.1-branch/Source/WebCore/ChangeLog 2020-02-04 03:09:39 UTC (rev 255648)
@@ -1,5 +1,99 @@
2020-02-03 Alan Coon <[email protected]>
+ Cherry-pick r255228. rdar://problem/58858225
+
+ -webkit-image-set should support resolution units other than 'x'
+ https://bugs.webkit.org/show_bug.cgi?id=100120
+
+ Reviewed by Darin Adler.
+
+ Source/WebCore:
+
+ Leveraged previous work on image-resolution to enable dpi/dppx/dpcm in CSS image-set.
+ Now the second value of every entry in the image-set is parsed like any resolution,
+ allowing "x" as a synonim for "dppx.
+
+ This changes computed style behavior for image-set - "x" resolution values will be converted
+ to "dppx". This is in line with the spirit of computed values, though it's not spec'ed particularly.
+
+ Tests: fast/hidpi/image-set-units.html
+
+ * css/CSSImageSetValue.cpp:
+ (WebCore::CSSImageSetValue::fillImageSet):
+ (WebCore::CSSImageSetValue::updateDeviceScaleFactor):
+ (WebCore::CSSImageSetValue::customCSSText const):
+ Convert values to dppx before sorting them the image set.
+ Use given CSS units in computed styles instead of hardcoding "x"
+
+ * css/CSSPrimitiveValue.cpp:
+ (WebCore::isValidCSSUnitTypeForDoubleConversion):
+ (WebCore::CSSPrimitiveValue::conversionToCanonicalUnitsScaleFactor):
+ Allow conversion of dpi/dppx/dpcm to canonical (dppx).
+
+ * css/parser/CSSPropertyParserHelpers.cpp:
+ (WebCore::CSSPropertyParserHelpers::consumeResolution):
+ (WebCore::CSSPropertyParserHelpers::consumeImageSet):
+ * css/parser/CSSPropertyParserHelpers.h:
+ Consume any resolution when parsing image-set.
+
+ LayoutTests:
+
+ Had to modify several image-set parsing tests because of the behavior change in
+ computed style (x => dppx).
+
+ Also added a couple of parsing/rendering tests specifically to test the new behavior
+ of dpi/dpcm/dppx.
+
+ * fast/css/cursor-parsing-image-set-expected.txt:
+ * fast/css/cursor-parsing-image-set.html:
+ * fast/css/image-set-parsing-expected.txt:
+ * fast/css/image-set-parsing-invalid-expected.txt:
+ * fast/css/image-set-parsing.html:
+ * fast/css/image-set-setting-expected.txt:
+ * fast/css/image-set-setting.html:
+ * fast/css/image-set-unprefixed.html:
+ * fast/hidpi/image-set-units-expected.html: Added.
+ * fast/hidpi/image-set-units.html: Added.
+
+
+ git-svn-id: https://svn.webkit.org/repository/webkit/trunk@255228 268f45cc-cd09-0410-ab3c-d52691b4dbfc
+
+ 2020-01-27 Noam Rosenthal <[email protected]>
+
+ -webkit-image-set should support resolution units other than 'x'
+ https://bugs.webkit.org/show_bug.cgi?id=100120
+
+ Reviewed by Darin Adler.
+
+ Leveraged previous work on image-resolution to enable dpi/dppx/dpcm in CSS image-set.
+ Now the second value of every entry in the image-set is parsed like any resolution,
+ allowing "x" as a synonim for "dppx.
+
+ This changes computed style behavior for image-set - "x" resolution values will be converted
+ to "dppx". This is in line with the spirit of computed values, though it's not spec'ed particularly.
+
+ Tests: fast/hidpi/image-set-units.html
+
+ * css/CSSImageSetValue.cpp:
+ (WebCore::CSSImageSetValue::fillImageSet):
+ (WebCore::CSSImageSetValue::updateDeviceScaleFactor):
+ (WebCore::CSSImageSetValue::customCSSText const):
+ Convert values to dppx before sorting them the image set.
+ Use given CSS units in computed styles instead of hardcoding "x"
+
+ * css/CSSPrimitiveValue.cpp:
+ (WebCore::isValidCSSUnitTypeForDoubleConversion):
+ (WebCore::CSSPrimitiveValue::conversionToCanonicalUnitsScaleFactor):
+ Allow conversion of dpi/dppx/dpcm to canonical (dppx).
+
+ * css/parser/CSSPropertyParserHelpers.cpp:
+ (WebCore::CSSPropertyParserHelpers::consumeResolution):
+ (WebCore::CSSPropertyParserHelpers::consumeImageSet):
+ * css/parser/CSSPropertyParserHelpers.h:
+ Consume any resolution when parsing image-set.
+
+2020-02-03 Alan Coon <[email protected]>
+
Cherry-pick r254861. rdar://problem/58858225
-webkit-image-set should support all the image functions WebKit supports, not just url()
Modified: branches/safari-610.1.1-branch/Source/WebCore/css/CSSImageSetValue.cpp (255647 => 255648)
--- branches/safari-610.1.1-branch/Source/WebCore/css/CSSImageSetValue.cpp 2020-02-04 03:09:34 UTC (rev 255647)
+++ branches/safari-610.1.1-branch/Source/WebCore/css/CSSImageSetValue.cpp 2020-02-04 03:09:39 UTC (rev 255648)
@@ -50,20 +50,15 @@
void CSSImageSetValue::fillImageSet()
{
size_t length = this->length();
- size_t i = 0;
- while (i < length) {
+ for (size_t i = 0; i + 1 < length; i += 2) {
CSSValue* imageValue = item(i);
+ CSSValue* scaleFactorValue = item(i + 1);
+
ASSERT(is<CSSImageValue>(imageValue) || is<CSSImageGeneratorValue>(imageValue));
- ++i;
- ASSERT_WITH_SECURITY_IMPLICATION(i < length);
- CSSValue* scaleFactorValue = item(i);
- float scaleFactor = downcast<CSSPrimitiveValue>(*scaleFactorValue).floatValue();
+ ASSERT(is<CSSPrimitiveValue>(scaleFactorValue));
- ImageWithScale image;
- image.value = imageValue;
- image.scaleFactor = scaleFactor;
- m_imagesInSet.append(image);
- ++i;
+ float scaleFactor = downcast<CSSPrimitiveValue>(scaleFactorValue)->floatValue(CSSUnitType::CSS_DPPX);
+ m_imagesInSet.append({ imageValue, scaleFactor });
}
// Sort the images so that they are stored in order from lowest resolution to highest.
@@ -106,7 +101,6 @@
void CSSImageSetValue::updateDeviceScaleFactor(const Document& document)
{
-
// FIXME: In the future, we want to take much more than deviceScaleFactor into acount here.
// All forms of scale should be included: Page::pageScaleFactor(), Frame::pageZoomFactor(),
// and any CSS transforms. https://bugs.webkit.org/show_bug.cgi?id=81698
@@ -136,24 +130,11 @@
result.appendLiteral("image-set(");
size_t length = this->length();
- size_t i = 0;
- while (i < length) {
+ for (size_t i = 0; i + 1 < length; i += 2) {
if (i > 0)
result.appendLiteral(", ");
- const CSSValue* imageValue = item(i);
- result.append(imageValue->cssText());
- result.append(' ');
-
- ++i;
- ASSERT_WITH_SECURITY_IMPLICATION(i < length);
- const CSSValue* scaleFactorValue = item(i);
- result.append(scaleFactorValue->cssText());
- // FIXME: Eventually the scale factor should contain it's own unit http://wkb.ug/100120.
- // For now 'x' is hard-coded in the parser, so we hard-code it here too.
- result.append('x');
-
- ++i;
+ result.append(item(i)->cssText(), ' ', item(i + 1)->cssText());
}
result.append(')');
Modified: branches/safari-610.1.1-branch/Source/WebCore/css/CSSPrimitiveValue.cpp (255647 => 255648)
--- branches/safari-610.1.1-branch/Source/WebCore/css/CSSPrimitiveValue.cpp 2020-02-04 03:09:34 UTC (rev 255647)
+++ branches/safari-610.1.1-branch/Source/WebCore/css/CSSPrimitiveValue.cpp 2020-02-04 03:09:39 UTC (rev 255648)
@@ -81,15 +81,10 @@
case CSSUnitType::CSS_VMAX:
case CSSUnitType::CSS_VMIN:
case CSSUnitType::CSS_VW:
- return true;
case CSSUnitType::CSS_DPCM:
case CSSUnitType::CSS_DPI:
case CSSUnitType::CSS_DPPX:
-#if ENABLE(CSS_IMAGE_RESOLUTION) || ENABLE(RESOLUTION_MEDIA_QUERY)
return true;
-#else
- return false;
-#endif
case CSSUnitType::CSS_ATTR:
case CSSUnitType::CSS_COUNTER:
case CSSUnitType::CSS_COUNTER_NAME:
@@ -703,6 +698,7 @@
case CSSUnitType::CSS_DEG:
case CSSUnitType::CSS_MS:
case CSSUnitType::CSS_HZ:
+ case CSSUnitType::CSS_DPPX:
break;
case CSSUnitType::CSS_CM:
factor = cssPixelsPerInch / cmPerInch;
Modified: branches/safari-610.1.1-branch/Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp (255647 => 255648)
--- branches/safari-610.1.1-branch/Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp 2020-02-04 03:09:34 UTC (rev 255647)
+++ branches/safari-610.1.1-branch/Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp 2020-02-04 03:09:39 UTC (rev 255648)
@@ -439,7 +439,7 @@
return nullptr;
}
-RefPtr<CSSPrimitiveValue> consumeResolution(CSSParserTokenRange& range)
+RefPtr<CSSPrimitiveValue> consumeResolution(CSSParserTokenRange& range, AllowXResolutionUnit allowX)
{
const CSSParserToken& token = range.peek();
// Unlike the other types, calc() does not work with <resolution>.
@@ -448,6 +448,9 @@
CSSUnitType unit = token.unitType();
if (unit == CSSUnitType::CSS_DPPX || unit == CSSUnitType::CSS_DPI || unit == CSSUnitType::CSS_DPCM)
return CSSValuePool::singleton().createValue(range.consumeIncludingWhitespace().numericValue(), unit);
+ if (allowX == AllowXResolutionUnit::Allow && token.value() == "x")
+ return CSSValuePool::singleton().createValue(range.consumeIncludingWhitespace().numericValue(), CSSUnitType::CSS_DPPX);
+
return nullptr;
}
@@ -1485,22 +1488,17 @@
CSSParserTokenRange args = consumeFunction(rangeCopy);
RefPtr<CSSImageSetValue> imageSet = CSSImageSetValue::create();
do {
- RefPtr<CSSValue> image = consumeImage(args, context, (allowedImageType | AllowedImageType::RawStringAsURL) - AllowedImageType::ImageSet);
+ auto image = consumeImage(args, context, (allowedImageType | AllowedImageType::RawStringAsURL) - AllowedImageType::ImageSet);
if (!image)
return nullptr;
imageSet->append(image.releaseNonNull());
- const CSSParserToken& token = args.consumeIncludingWhitespace();
- if (token.type() != DimensionToken)
+ auto resolution = consumeResolution(args, AllowXResolutionUnit::Allow);
+ if (!resolution || resolution->floatValue() <= 0)
return nullptr;
- if (token.value() != "x")
- return nullptr;
- ASSERT(token.unitType() == CSSUnitType::CSS_UNKNOWN);
- double imageScaleFactor = token.numericValue();
- if (imageScaleFactor <= 0)
- return nullptr;
- imageSet->append(CSSValuePool::singleton().createValue(imageScaleFactor, CSSUnitType::CSS_NUMBER));
+
+ imageSet->append(resolution.releaseNonNull());
} while (consumeCommaIncludingWhitespace(args));
if (!args.atEnd())
return nullptr;
Modified: branches/safari-610.1.1-branch/Source/WebCore/css/parser/CSSPropertyParserHelpers.h (255647 => 255648)
--- branches/safari-610.1.1-branch/Source/WebCore/css/parser/CSSPropertyParserHelpers.h 2020-02-04 03:09:34 UTC (rev 255647)
+++ branches/safari-610.1.1-branch/Source/WebCore/css/parser/CSSPropertyParserHelpers.h 2020-02-04 03:09:39 UTC (rev 255648)
@@ -52,10 +52,8 @@
// consumeFunction expects the range starts with a FunctionToken.
CSSParserTokenRange consumeFunction(CSSParserTokenRange&);
-enum class UnitlessQuirk {
- Allow,
- Forbid
-};
+enum class UnitlessQuirk { Allow, Forbid };
+enum class AllowXResolutionUnit { Allow, Forbid };
RefPtr<CSSPrimitiveValue> consumeInteger(CSSParserTokenRange&, double minimumValue = -std::numeric_limits<double>::max());
RefPtr<CSSPrimitiveValue> consumePositiveInteger(CSSParserTokenRange&);
@@ -67,7 +65,7 @@
RefPtr<CSSPrimitiveValue> consumeLengthOrPercent(CSSParserTokenRange&, CSSParserMode, ValueRange, UnitlessQuirk = UnitlessQuirk::Forbid);
RefPtr<CSSPrimitiveValue> consumeAngle(CSSParserTokenRange&, CSSParserMode, UnitlessQuirk = UnitlessQuirk::Forbid);
RefPtr<CSSPrimitiveValue> consumeTime(CSSParserTokenRange&, CSSParserMode, ValueRange, UnitlessQuirk = UnitlessQuirk::Forbid);
-RefPtr<CSSPrimitiveValue> consumeResolution(CSSParserTokenRange&);
+RefPtr<CSSPrimitiveValue> consumeResolution(CSSParserTokenRange&, AllowXResolutionUnit = AllowXResolutionUnit::Forbid);
RefPtr<CSSPrimitiveValue> consumeIdent(CSSParserTokenRange&);
RefPtr<CSSPrimitiveValue> consumeIdentRange(CSSParserTokenRange&, CSSValueID lower, CSSValueID upper);
