Chromium Code Reviews Chromium Code Reviews
Issue 2714283002:
Fix unexpected blurry text caused by combination of skew and promotion (Closed)
| Index: third_party/WebKit/LayoutTests/compositing/text-within-skewed-promoted-element.html |
| diff --git a/third_party/WebKit/LayoutTests/compositing/text-within-skewed-promoted-element.html b/third_party/WebKit/LayoutTests/compositing/text-within-skewed-promoted-element.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..d479bc4a8374b2bf25bf4aa0a69ad94df34ec25a |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/compositing/text-within-skewed-promoted-element.html |
| @@ -0,0 +1,44 @@ |
| +<!DOCTYPE html> |
| + |
| +<!-- |
| +Check that separately compositing text within a skewed promoted element |
|
flackr
2017/02/25 15:16:18
"Check that we separately composite text within a
yigu
2017/02/27 22:03:41
Done.
|
| +can improve the output quality. See crbug.com/631872. |
| +--> |
| +<style> |
| +div.outer { |
| + transform: skew(20deg); |
| + border: 1px solid black; |
| + padding: 0 20px 0 20px; |
| +} |
| + |
| +div.outer > div { |
| + transform: skew(-20deg); |
| +} |
| + |
| +div.layer { |
| + will-change: transform; |
| +} |
| +</style> |
| + |
| +<script type="text/javascript"> |
| + function doTest() { |
| + if (window.testRunner) { |
| + window.testRunner.dumpAsTextWithPixelResults(); |
| + } |
| + } |
| + window.addEventListener('load', doTest); |
| +</script> |
| + |
| +<div class="outer"> |
| + <div>Text which is not promoted to a layer is drawn crips with subpixel |
| + anti-aliasing.</div> |
| +</div> |
| + |
| +<div class="outer layer"> |
| + <div>Text which is part of a skewed layer is skewed after it's rastered |
|
flackr
2017/02/25 15:16:18
I think we need a unit test to verify the specific
yigu
2017/02/27 22:03:41
Done.
|
| + (with the counter-skew) resulting in extremely blurry text. |
| + But if that text is separately composited, then it's rastered into a |
| + rectilinear layer so it looks crisp (but doesn't get subpixel |
| + antialiasing because it's promoted) |
| + </div> |
| +</div> |
