Details
-
Bug
-
Resolution: Won't Do
-
P3: Somewhat important
-
None
-
5.6.1, 5.8.0, 5.10.0 Beta 1, 5.11.0
-
None
-
Linux yoga 4.7.1-1-ARCH #1 SMP PREEMPT Wed Aug 17 08:13:35 CEST 2016 x86_64 GNU/Linux
Description
In Blink, `image-rendering: pixelated` results in both background-image and border-image being upscaled up with nearest-neighbor method (pixelated).
QtWebKit supports that as `image-rendering: -webkit-optimize-contrast`, but that works only on background-image and doesn't work on border-image.
<h2>border-image</h2> <div class="border"></div> <h2>background-image</h2> <div class="bg"></div>
div {
width: 200px;
height: 60px;
image-rendering: -webkit-optimize-contrast;
image-rendering: pixelated;
}
div.border {
border-image-source: url('http://oserv.org/files/bg.png');
border-image-slice: 2 2 3 1 fill;
border-image-width: 2px 2px 3px 1px;
box-sizing: border-box;
}
div.bg {
background-image: url('http://oserv.org/files/bg.png');
background-size: contain;
}
Example: http://codepen.io/anon/pen/AXkYPK
Expected result: both divs should have sharp background.
Actual result: the second div has sharp background, the first one is blurry.