haikuwebkit/LayoutTests/css3/blending/background-blend-mode-gradi...

35 lines
1.2 KiB
HTML
Raw Permalink Normal View History

[CSS Background Blending] Gradients don't blend with any of the layers behind. First, allow the layers behind opaque gradients to be drawn, then add the blending filters when working with gradients. Source/WebCore: https://bugs.webkit.org/show_bug.cgi?id=117532 Patch by Mihai Tica <mitica@adobe.com> on 2013-06-13 Reviewed by Dirk Schulze. Tests: css3/compositing/background-blend-mode-gradient-color.html css3/compositing/background-blend-mode-gradient-gradient.html css3/compositing/background-blend-mode-gradient-image.html css3/compositing/background-blend-mode-multiple-background-layers.html * platform/graphics/GeneratorGeneratedImage.cpp: (WebCore::GeneratorGeneratedImage::draw): * rendering/RenderBox.cpp: (WebCore::RenderBox::paintFillLayers): LayoutTests: https://bugs.webkit.org/show_bug.cgi?id=117532 Patch by Mihai Tica <mitica@adobe.com> on 2013-06-13 Reviewed by Dirk Schulze. * css3/compositing/background-blend-mode-gradient-color-expected.txt: Added. * css3/compositing/background-blend-mode-gradient-color.html: Added. * css3/compositing/background-blend-mode-gradient-gradient-expected.txt: Added. * css3/compositing/background-blend-mode-gradient-gradient.html: Added. * css3/compositing/background-blend-mode-gradient-image-expected.txt: Added. * css3/compositing/background-blend-mode-gradient-image.html: Added. * css3/compositing/background-blend-mode-multiple-background-layers-expected.txt: Added. * css3/compositing/background-blend-mode-multiple-background-layers.html: Added. * platform/mac/css3/compositing/background-blend-mode-gradient-color-expected.png: Added. * platform/mac/css3/compositing/background-blend-mode-gradient-gradient-expected.png: Added. * platform/mac/css3/compositing/background-blend-mode-gradient-image-expected.png: Added. * platform/mac/css3/compositing/background-blend-mode-multiple-background-layers-expected.png: Added. Canonical link: https://commits.webkit.org/135752@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@151547 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2013-06-13 15:05:14 +00:00
<!DOCTYPE HTML>
<head>
<script>
if (window.testRunner)
window.testRunner.dumpAsText(true);
</script>
<style>
li {
margin: 5px;
width: 130px;
height: 130px;
background: linear-gradient(to right, gray 0%, gray 100%), green;
display: block;
float: left;
}
</style>
<!-- This file should contain a gradient on top of a background color for every type of blending. -->
<body>
<ul>
[CSS Background Blending] Unprefix the -webkit-background-blend-mode property https://bugs.webkit.org/show_bug.cgi?id=128270 Patch by Mihai Tica <mitica@adobe.com> on 2014-02-07 Reviewed by Dean Jackson. Source/WebCore: This patch consist of unprefixing the -webkit-background-blend-mode. The property now changes to background-blend-mode. * css/CSSComputedStyleDeclaration.cpp: (WebCore::ComputedStyleExtractor::propertyValue): * css/CSSParser.cpp: (WebCore::CSSParser::parseValue): (WebCore::CSSParser::parseFillProperty): * css/CSSPropertyNames.in: * css/DeprecatedStyleBuilder.cpp: (WebCore::DeprecatedStyleBuilder::DeprecatedStyleBuilder): Source/WebInspectorUI: * UserInterface/CSSKeywordCompletions.js: Refactor -webkit-background-blend-mode to background-blend-mode. LayoutTests: This patch consist of unprefixing the -webkit-background-blend-mode. The property now changes to background-blend-mode. * css3/compositing/background-blend-mode-background-attachement-fixed-expected.html: * css3/compositing/background-blend-mode-background-attachement-fixed.html: * css3/compositing/background-blend-mode-background-clip-content-box-expected.html: * css3/compositing/background-blend-mode-background-clip-content-box.html: * css3/compositing/background-blend-mode-background-clip-padding-box-expected.html: * css3/compositing/background-blend-mode-background-clip-padding-box.html: * css3/compositing/background-blend-mode-background-origin-border-box-expected.html: * css3/compositing/background-blend-mode-background-origin-border-box.html: * css3/compositing/background-blend-mode-background-position-percentage-expected.html: * css3/compositing/background-blend-mode-background-position-percentage.html: * css3/compositing/background-blend-mode-background-repeat-no-repeat-expected.html: * css3/compositing/background-blend-mode-background-repeat-no-repeat.html: * css3/compositing/background-blend-mode-background-size-contain-expected.html: * css3/compositing/background-blend-mode-background-size-contain.html: * css3/compositing/background-blend-mode-background-size-cover-expected.html: * css3/compositing/background-blend-mode-background-size-cover.html: * css3/compositing/background-blend-mode-crossfade-image.html: * css3/compositing/background-blend-mode-data-uri-svg-image.html: * css3/compositing/background-blend-mode-default-value.html: * css3/compositing/background-blend-mode-different-image-formats.html: * css3/compositing/background-blend-mode-gif-color-2.html: * css3/compositing/background-blend-mode-gif-color.html: * css3/compositing/background-blend-mode-gradient-color.html: * css3/compositing/background-blend-mode-gradient-gradient.html: * css3/compositing/background-blend-mode-gradient-image.html: * css3/compositing/background-blend-mode-image-color.html: * css3/compositing/background-blend-mode-image-image.html: * css3/compositing/background-blend-mode-image-svg.html: * css3/compositing/background-blend-mode-multiple-background-layers.html: * css3/compositing/background-blend-mode-property-expected.txt: * css3/compositing/background-blend-mode-property-parsing-expected.txt: * css3/compositing/background-blend-mode-separate-layer-declaration.html: * css3/compositing/background-blend-mode-single-layer-no-blending.html: * css3/compositing/background-blend-mode-svg-color.html: * css3/compositing/background-blend-mode-svg.html: * css3/compositing/background-blend-mode-tiled-layers.html: * css3/compositing/blend-mode-layers.html: * css3/compositing/effect-background-blend-mode-stacking.html: * css3/compositing/effect-background-blend-mode-tiled.html: * css3/compositing/effect-background-blend-mode.html: * css3/compositing/script-tests/background-blend-mode-property-parsing.js: (testBlendModeRule): * css3/compositing/script-tests/background-blend-mode-property.js: (testblendmode): Canonical link: https://commits.webkit.org/146405@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@163633 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2014-02-07 18:46:47 +00:00
<li style="background-blend-mode: normal, normal"></li>
<li style="background-blend-mode: multiply, normal"></li>
<li style="background-blend-mode: screen, normal"></li>
<li style="background-blend-mode: overlay, normal"></li>
<li style="background-blend-mode: darken, normal"></li>
<li style="background-blend-mode: lighten, normal"></li>
<li style="background-blend-mode: color-dodge, normal"></li>
<li style="background-blend-mode: color-burn, normal"></li>
<li style="background-blend-mode: hard-light, normal"></li>
<li style="background-blend-mode: soft-light, normal"></li>
<li style="background-blend-mode: difference, normal"></li>
<li style="background-blend-mode: exclusion, normal"></li>
[CSS Background Blending] Gradients don't blend with any of the layers behind. First, allow the layers behind opaque gradients to be drawn, then add the blending filters when working with gradients. Source/WebCore: https://bugs.webkit.org/show_bug.cgi?id=117532 Patch by Mihai Tica <mitica@adobe.com> on 2013-06-13 Reviewed by Dirk Schulze. Tests: css3/compositing/background-blend-mode-gradient-color.html css3/compositing/background-blend-mode-gradient-gradient.html css3/compositing/background-blend-mode-gradient-image.html css3/compositing/background-blend-mode-multiple-background-layers.html * platform/graphics/GeneratorGeneratedImage.cpp: (WebCore::GeneratorGeneratedImage::draw): * rendering/RenderBox.cpp: (WebCore::RenderBox::paintFillLayers): LayoutTests: https://bugs.webkit.org/show_bug.cgi?id=117532 Patch by Mihai Tica <mitica@adobe.com> on 2013-06-13 Reviewed by Dirk Schulze. * css3/compositing/background-blend-mode-gradient-color-expected.txt: Added. * css3/compositing/background-blend-mode-gradient-color.html: Added. * css3/compositing/background-blend-mode-gradient-gradient-expected.txt: Added. * css3/compositing/background-blend-mode-gradient-gradient.html: Added. * css3/compositing/background-blend-mode-gradient-image-expected.txt: Added. * css3/compositing/background-blend-mode-gradient-image.html: Added. * css3/compositing/background-blend-mode-multiple-background-layers-expected.txt: Added. * css3/compositing/background-blend-mode-multiple-background-layers.html: Added. * platform/mac/css3/compositing/background-blend-mode-gradient-color-expected.png: Added. * platform/mac/css3/compositing/background-blend-mode-gradient-gradient-expected.png: Added. * platform/mac/css3/compositing/background-blend-mode-gradient-image-expected.png: Added. * platform/mac/css3/compositing/background-blend-mode-multiple-background-layers-expected.png: Added. Canonical link: https://commits.webkit.org/135752@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@151547 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2013-06-13 15:05:14 +00:00
</ul>
</body>