Commit 00b988ce authored by hyatt@apple.com's avatar hyatt@apple.com

https://bugs.webkit.org/show_bug.cgi?id=67861

        
Implement border-image-outset (and the mask equivalents).

Reviewed by Beth Dakin.

Source/WebCore: 

Added new tests in fast/borders and fast/reflections.

* css/CSSBorderImageValue.cpp:
(WebCore::CSSBorderImageValue::CSSBorderImageValue):
(WebCore::CSSBorderImageValue::cssText):
* css/CSSBorderImageValue.h:
(WebCore::CSSBorderImageValue::create):
Add m_outset field to CSSBorderImageValue and teach it how to dump the field as
part of cssText().

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::valueForNinePieceImageQuad):
(WebCore::valueForNinePieceImage):
(WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue):
Add support for border-image-outset and -webkit-mask-box-image-outset. Refactor
the code so that border-image-width and border-image-outset use a common
function.

* css/CSSParser.cpp:
(WebCore::CSSParser::parseValue):
(WebCore::BorderImageParseContext::BorderImageParseContext):
(WebCore::BorderImageParseContext::allowOutset):
(WebCore::BorderImageParseContext::commitSlash):
(WebCore::BorderImageParseContext::commitBorderWidth):
(WebCore::BorderImageParseContext::commitBorderOutset):
(WebCore::BorderImageParseContext::commitRepeat):
(WebCore::BorderImageParseContext::commitBorderImage):
(WebCore::CSSParser::parseBorderImage):
Teach the border image parsing code about outsets. This code will soon be
replaced by true shorthand parsing code, but for now keep it working and add
outset support to it.

(WebCore::BorderImageQuadParseContext::BorderImageQuadParseContext):
(WebCore::BorderImageQuadParseContext::commitBorderImageQuad):
(WebCore::CSSParser::parseBorderImageQuad):
(WebCore::CSSParser::parseBorderImageWidth):
(WebCore::CSSParser::parseBorderImageOutset):
* css/CSSParser.h:
Refactor the border-image-width code so that it can be shared by border-image-outset, since
they are extremely similar.

* css/CSSPropertyNames.in:
Add the new properties.

* css/CSSStyleSelector.cpp:
(WebCore::CSSStyleSelector::applyProperty):
(WebCore::CSSStyleSelector::mapNinePieceImage):
(WebCore::CSSStyleSelector::mapNinePieceImageQuad):
(WebCore::CSSStyleSelector::loadPendingImages):
* css/CSSStyleSelector.h:
Refactor the code so that width/outset share common mapping functions. Add support for outset.

* rendering/InlineFlowBox.cpp:
(WebCore::InlineFlowBox::addToLine):
(WebCore::InlineFlowBox::addBoxShadowVisualOverflow):
(WebCore::InlineFlowBox::addBorderOutsetVisualOverflow):
(WebCore::InlineFlowBox::computeOverflow):
Add new functions for computing the visual overflow caused by border outsets. Fix bugs in
the shadow overflow code as well.

(WebCore::clipRectForNinePieceImageStrip):
(WebCore::InlineFlowBox::paintBoxDecorations):
(WebCore::InlineFlowBox::paintMask):
* rendering/InlineFlowBox.h:
Make sure the clip rect pushed when painting one piece of a split inline strip is expanded to
include the border and mask outsets. Always include the block direction expansion, and conditionally
include the inline direction expansion based off includeLogicalLeftEdge()/includeLogicalRightEdge().
clipRectForNinePieceImageStrip is a common function shared by masks and border images that does this
work.

* rendering/RenderBlock.cpp:
(WebCore::RenderBlock::computeOverflow):
* rendering/RenderBox.cpp:
(WebCore::RenderBox::maskClipRect):
(WebCore::RenderBox::addBoxShadowAndBorderOverflow):
* rendering/RenderBox.h:
Rename addShadowOverflow to addBoxShadowAndBorderOverflow. Have it compute both shadow and border image
outset overflow. Fix bugs with shadow overflow computation.

* rendering/RenderBoxModelObject.cpp:
(WebCore::RenderBoxModelObject::paintNinePieceImage):
Change painting to apply the outsets to inflate the border image drawing area.

* rendering/RenderEmbeddedObject.cpp:
(WebCore::RenderEmbeddedObject::layout):
* rendering/RenderIFrame.cpp:
(WebCore::RenderIFrame::layout):
Patched to call the renamed addBoxShadowAndBorderOverflow function instead of addShadowOverflow.

* rendering/RenderLayer.cpp:
(WebCore::RenderLayer::calculateRects):
Patched to no longer apply box-shadow to overflow clip areas when inflating the intersection area for the
layer bounds. Instead we generically apply all visual overflow so that border image outsets will also be
included. This fixes https://bugs.webkit.org/show_bug.cgi?id=37467.

* rendering/RenderReplaced.cpp:
(WebCore::RenderReplaced::layout):
Patched to call the renamed addBoxShadowAndBorderOverflow function instead of addShadowOverflow.

* rendering/style/NinePieceImage.cpp:
(WebCore::NinePieceImage::operator==):
* rendering/style/NinePieceImage.h:
(WebCore::NinePieceImage::NinePieceImage):
(WebCore::NinePieceImage::outset):
(WebCore::NinePieceImage::setOutset):
(WebCore::NinePieceImage::computeOutset):
(WebCore::NinePieceImage::copyOutsetFrom):
Add the outset field to NinePieceImage along with some helpers for manipulating outsets.

* rendering/style/RenderStyle.cpp:
(WebCore::RenderStyle::getImageOutsets):
(WebCore::RenderStyle::getImageHorizontalOutsets):
(WebCore::RenderStyle::getImageVerticalOutsets):
* rendering/style/RenderStyle.h:
(WebCore::InheritedFlags::hasBorderImageOutsets):
(WebCore::InheritedFlags::getBorderImageOutsets):
(WebCore::InheritedFlags::getBorderImageHorizontalOutsets):
(WebCore::InheritedFlags::getBorderImageVerticalOutsets):
(WebCore::InheritedFlags::getBorderImageInlineDirectionOutsets):
(WebCore::InheritedFlags::getBorderImageBlockDirectionOutsets):
(WebCore::InheritedFlags::getImageInlineDirectionOutsets):
(WebCore::InheritedFlags::getImageBlockDirectionOutsets):
Helpers for outset computation used by painting and overflow functions.

LayoutTests: 

* fast/borders/block-mask-overlay-image-outset.html: Added.
* fast/borders/block-mask-overlay-image.html~: Added.
* fast/borders/border-image-outset-in-shorthand.html: Added.
* fast/borders/border-image-outset-split-inline-vertical-lr.html: Added.
* fast/borders/border-image-outset-split-inline.html: Added.
* fast/borders/border-image-outset.html: Added.
* fast/borders/inline-mask-overlay-image-outset-vertical-rl.html: Added.
* fast/borders/inline-mask-overlay-image-outset.html: Added.
* fast/css/getComputedStyle/computed-style-expected.txt:
* fast/css/getComputedStyle/computed-style-with-zoom-expected.txt:
* fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
* fast/css/getComputedStyle/getComputedStyle-border-image-expected.txt:
* fast/reflections/reflection-computed-style-expected.txt:
* fast/reflections/reflection-masks-outset.html: Added.
* platform/mac/fast/borders/block-mask-overlay-image-outset-expected.png: Added.
* platform/mac/fast/borders/block-mask-overlay-image-outset-expected.txt: Added.
* platform/mac/fast/borders/border-image-outset-expected.png: Added.
* platform/mac/fast/borders/border-image-outset-expected.txt: Added.
* platform/mac/fast/borders/border-image-outset-in-shorthand-expected.png: Added.
* platform/mac/fast/borders/border-image-outset-in-shorthand-expected.txt: Added.
* platform/mac/fast/borders/border-image-outset-split-inline-expected.png: Added.
* platform/mac/fast/borders/border-image-outset-split-inline-expected.txt: Added.
* platform/mac/fast/borders/border-image-outset-split-inline-vertical-lr-expected.png: Added.
* platform/mac/fast/borders/border-image-outset-split-inline-vertical-lr-expected.txt: Added.
* platform/mac/fast/borders/inline-mask-overlay-image-outset-expected.png: Added.
* platform/mac/fast/borders/inline-mask-overlay-image-outset-expected.txt: Added.
* platform/mac/fast/borders/inline-mask-overlay-image-outset-vertical-rl-expected.png: Added.
* platform/mac/fast/borders/inline-mask-overlay-image-outset-vertical-rl-expected.txt: Added.
* platform/mac/fast/reflections/reflection-masks-outset-expected.png: Added.
* platform/mac/fast/reflections/reflection-masks-outset-expected.txt: Added.
* svg/css/getComputedStyle-basic-expected.txt:



git-svn-id: http://svn.webkit.org/repository/webkit/trunk@94912 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent e104c05f
2011-09-09 David Hyatt <hyatt@apple.com>
https://bugs.webkit.org/show_bug.cgi?id=67861
Implement border-image-outset (and the mask equivalents).
Reviewed by Beth Dakin.
* fast/borders/block-mask-overlay-image-outset.html: Added.
* fast/borders/block-mask-overlay-image.html~: Added.
* fast/borders/border-image-outset-in-shorthand.html: Added.
* fast/borders/border-image-outset-split-inline-vertical-lr.html: Added.
* fast/borders/border-image-outset-split-inline.html: Added.
* fast/borders/border-image-outset.html: Added.
* fast/borders/inline-mask-overlay-image-outset-vertical-rl.html: Added.
* fast/borders/inline-mask-overlay-image-outset.html: Added.
* fast/css/getComputedStyle/computed-style-expected.txt:
* fast/css/getComputedStyle/computed-style-with-zoom-expected.txt:
* fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
* fast/css/getComputedStyle/getComputedStyle-border-image-expected.txt:
* fast/reflections/reflection-computed-style-expected.txt:
* fast/reflections/reflection-masks-outset.html: Added.
* platform/mac/fast/borders/block-mask-overlay-image-outset-expected.png: Added.
* platform/mac/fast/borders/block-mask-overlay-image-outset-expected.txt: Added.
* platform/mac/fast/borders/border-image-outset-expected.png: Added.
* platform/mac/fast/borders/border-image-outset-expected.txt: Added.
* platform/mac/fast/borders/border-image-outset-in-shorthand-expected.png: Added.
* platform/mac/fast/borders/border-image-outset-in-shorthand-expected.txt: Added.
* platform/mac/fast/borders/border-image-outset-split-inline-expected.png: Added.
* platform/mac/fast/borders/border-image-outset-split-inline-expected.txt: Added.
* platform/mac/fast/borders/border-image-outset-split-inline-vertical-lr-expected.png: Added.
* platform/mac/fast/borders/border-image-outset-split-inline-vertical-lr-expected.txt: Added.
* platform/mac/fast/borders/inline-mask-overlay-image-outset-expected.png: Added.
* platform/mac/fast/borders/inline-mask-overlay-image-outset-expected.txt: Added.
* platform/mac/fast/borders/inline-mask-overlay-image-outset-vertical-rl-expected.png: Added.
* platform/mac/fast/borders/inline-mask-overlay-image-outset-vertical-rl-expected.txt: Added.
* platform/mac/fast/reflections/reflection-masks-outset-expected.png: Added.
* platform/mac/fast/reflections/reflection-masks-outset-expected.txt: Added.
* svg/css/getComputedStyle-basic-expected.txt:
2011-09-10 Csaba Osztrogonác <ossy@webkit.org>
[Qt] Unreviewed gardening after r94897.
<head>
<style>
.blockTest {
margin:25px;
padding:50px;
color:white;
background-color:maroon;
-webkit-mask-box-image: url(resources/mask.png) 75 75 75 75 / auto / 100px 0;
}
</style>
</head>
<body>
<div class="blockTest" style="height:0"><div style="height:400px; background-color:grey">This content should be masked with a soft glow.</div></div>
<head>
<style>
.inlineTest {
font-size:200px;
background-color:maroon;
-webkit-mask-overlay-image: url(resources/mask.png) 75 75 75 75;
}
</style>
</head>
<body>
<span class="inlineTest">This content should be masked with a soft glow.</span>
<html>
<head>
<style>
div {
border-width: 21px 30px 30px 21px;
width: 75px;
height: 75px;
display: inline-block;
-webkit-border-image: url("resources/border-image.png") 21 30 30 21 / 1 / 21px 30px 30px 21px stretch;
margin:30px;
}
div.rr {
border-image-repeat: repeat;
}
div.rs {
border-image-repeat: repeat stretch;
}
div.sr {
border-image-repeat:stretch repeat;
}
div.ss {
border-image-repeat: stretch;
}
</style>
</head>
<body>
<div class="rr"></div>
<div class="rs"></div>
<br>
<div class="sr"></div>
<div class="ss"></div>
</body>
</html>
<html>
<head>
<style>
span {
border-width: 21px 30px 30px 21px;
-webkit-border-image: url("resources/border-image.png") 21 30 30 21 / 1 / 21px 30px 30px 21px repeat;
}
</style>
</head>
<body style="-webkit-writing-mode:vertical-rl">
<div style="padding:25px; line-height:6; font-size:25px"><span>&nbsp;<br>&nbsp;</span></div>
</body>
</html>
<html>
<head>
<style>
span {
border-width: 21px 30px 30px 21px;
-webkit-border-image: url("resources/border-image.png") 21 30 30 21 / 1 / 21px 30px 30px 21px repeat;
}
</style>
</head>
<body>
<div style="padding:25px; line-height:6; font-size:25px"><span>&nbsp;<br>&nbsp;</span></div>
</body>
</html>
<html>
<head>
<style>
div {
border-width: 21px 30px 30px 21px;
width: 75px;
height: 75px;
display: inline-block;
border-image-source: url("resources/border-image.png");
border-image-slice: 21 30 30 21 fill;
border-image-width: 1;
border-image-outset: 1;
margin:30px;
}
div.rr {
border-image-repeat: repeat;
}
div.rs {
border-image-repeat: repeat stretch;
}
div.sr {
border-image-repeat:stretch repeat;
}
div.ss {
border-image-repeat: stretch;
}
</style>
</head>
<body>
<div class="rr"></div>
<div class="rs"></div>
<br>
<div class="sr"></div>
<div class="ss"></div>
</body>
</html>
<head>
<style>
.inlineTest {
font-size:24px;
background-color:grey;
-webkit-mask-box-image: url(resources/mask.png) 75 / auto / 10px;
padding:75px 10px;
line-height:3
}
</style>
</head>
<body style="-webkit-writing-mode: vertical-rl">
<span class="inlineTest">This content should be masked<br> with a soft glow.</span>
<head>
<style>
.inlineTest {
font-size:24px;
background-color:grey;
-webkit-mask-box-image: url(resources/mask.png) 75 / auto / 10px;
padding:10px 75px;
line-height:3
}
</style>
</head>
<body>
<span class="inlineTest">This content should be masked<br> with a soft glow.</span>
......@@ -14,6 +14,7 @@ border-bottom-right-radius: 0px;
border-bottom-style: none;
border-bottom-width: 0px;
border-collapse: separate;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
......@@ -159,6 +160,7 @@ zoom: 1;
-webkit-marquee-style: scroll;
-webkit-mask-attachment: scroll;
-webkit-mask-box-image: none;
-webkit-mask-box-image-outset: 0px;
-webkit-mask-box-image-repeat: stretch;
-webkit-mask-box-image-slice: 0;
-webkit-mask-box-image-source: none;
......
......@@ -5,7 +5,7 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
PASS -webkit-border-horizontal-spacing, value: "20px"
PASS -webkit-border-vertical-spacing, value: "20px"
PASS -webkit-box-reflect, value: "below 20px -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(white)) 0 fill / auto stretch"
PASS -webkit-box-reflect, value: "below 20px -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(white)) 0 fill / auto / 0px stretch"
PASS -webkit-box-shadow, value: "rgb(255, 0, 0) 20px 20px 20px 20px"
PASS -webkit-column-rule-width, value: "20px"
PASS -webkit-perspective-origin, value: "20px 20px"
......
......@@ -13,6 +13,7 @@ Computed style of an element whose parent's 'display' value is 'none':
border-bottom-style: none
border-bottom-width: 0px
border-collapse: separate
border-image-outset: 0px
border-image-repeat: stretch
border-image-slice: 100%
border-image-source: none
......@@ -158,6 +159,7 @@ Computed style of an element whose parent's 'display' value is 'none':
-webkit-marquee-style: scroll
-webkit-mask-attachment: scroll
-webkit-mask-box-image: none
-webkit-mask-box-image-outset: 0px
-webkit-mask-box-image-repeat: stretch
-webkit-mask-box-image-slice: 0
-webkit-mask-box-image-source: none
......
......@@ -7,11 +7,11 @@ Test calling getPropertyValue on computed styles for -webkit-border-image proper
-webkit-border-image: -webkit-gradient(linear, 0 0, 0 0) 25 25 25 25 stretch stretch;
-webkit-border-image
getPropertyValue: -webkit-gradient(linear, 0 0, 0 0) 25 fill / 1 stretch
getPropertyValue: -webkit-gradient(linear, 0 0, 0 0) 25 fill / 1 / 0px stretch
getPropertyCSSValue: [object CSSValue]
-webkit-border-image: -webkit-gradient(linear, 0 0, 0 0) 50 repeat;
-webkit-border-image
getPropertyValue: -webkit-gradient(linear, 0 0, 0 0) 50 fill / 1 repeat
getPropertyValue: -webkit-gradient(linear, 0 0, 0 0) 50 fill / 1 / 0px repeat
getPropertyCSSValue: [object CSSValue]
......@@ -17,6 +17,6 @@ Test calling getPropertyValue on computed styles for -webkit-border-image proper
-webkit-box-reflect: below 5px -webkit-gradient(linear, 0 0, 0 0) 25 25 25 25 stretch stretch;
-webkit-box-reflect
getPropertyValue: below 5px -webkit-gradient(linear, 0 0, 0 0) 25 fill / auto stretch
getPropertyValue: below 5px -webkit-gradient(linear, 0 0, 0 0) 25 fill / auto / 0px stretch
getPropertyCSSValue: [object CSSValue]
<img src="resources/kate.png" style="margin:20px; outline:20px solid green; -webkit-box-reflect:below 2px url(resources/vignette-mask.png) 75 / auto / 25px stretch">
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,25) size 784x550
layer at (33,25) size 734x100
RenderBlock {DIV} at (25,0) size 734x100 [color=#FFFFFF] [bgcolor=#800000]
RenderBlock {DIV} at (50,50) size 634x400 [bgcolor=#808080]
RenderText {#text} at (0,0) size 305x18
text run at (0,0) width 305: "This content should be masked with a soft glow."
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x584
RenderBlock {DIV} at (30,30) size 126x126 [border: (21px none #000000) (30px none #000000) (21px none #000000)]
RenderText {#text} at (186,172) size 4x18
text run at (186,172) width 4: " "
RenderBlock {DIV} at (220,30) size 126x126 [border: (21px none #000000) (30px none #000000) (21px none #000000)]
RenderText {#text} at (376,172) size 4x18
text run at (376,172) width 4: " "
RenderBR {BR} at (0,0) size 0x0
RenderBlock {DIV} at (30,220) size 126x126 [border: (21px none #000000) (30px none #000000) (21px none #000000)]
RenderText {#text} at (186,362) size 4x18
text run at (186,362) width 4: " "
RenderBlock {DIV} at (220,220) size 126x126 [border: (21px none #000000) (30px none #000000) (21px none #000000)]
RenderText {#text} at (0,0) size 0x0
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x584
RenderBlock {DIV} at (30,30) size 126x126 [border: (21px none #000000) (30px none #000000) (21px none #000000)]
RenderText {#text} at (186,172) size 4x18
text run at (186,172) width 4: " "
RenderBlock {DIV} at (220,30) size 126x126 [border: (21px none #000000) (30px none #000000) (21px none #000000)]
RenderText {#text} at (376,172) size 4x18
text run at (376,172) width 4: " "
RenderBR {BR} at (0,0) size 0x0
RenderBlock {DIV} at (30,220) size 126x126 [border: (21px none #000000) (30px none #000000) (21px none #000000)]
RenderText {#text} at (186,362) size 4x18
text run at (186,362) width 4: " "
RenderBlock {DIV} at (220,220) size 126x126 [border: (21px none #000000) (30px none #000000) (21px none #000000)]
RenderText {#text} at (0,0) size 0x0
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x584
RenderBlock {DIV} at (0,0) size 784x350
RenderInline {SPAN} at (0,0) size 36x230 [border: (21px none #000000) (30px none #000000) (21px none #000000)]
RenderText {#text} at (46,85) size 6x29
text run at (46,85) width 6: " "
RenderBR {BR} at (52,108) size 0x0
RenderText {#text} at (25,235) size 6x29
text run at (25,235) width 6: " "
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x584
RenderBlock {DIV} at (0,0) size 350x584
RenderInline {SPAN} at (0,0) size 230x36 [border: (21px none #000000) (30px none #000000) (21px none #000000)]
RenderText {#text} at (85,46) size 29x6
text run at (85,46) width 6: " "
RenderBR {BR} at (108,52) size 0x0
RenderText {#text} at (235,25) size 29x6
text run at (235,25) width 6: " "
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x584
RenderText {#text} at (0,0) size 0x0
layer at (8,8) size 375x120
RenderInline {SPAN} at (0,0) size 375x120 [bgcolor=#808080]
RenderText {#text} at (75,22) size 300x28
text run at (75,22) width 300: "This content should be masked"
RenderBR {BR} at (375,44) size 0x0
RenderText {#text} at (0,94) size 162x28
text run at (0,94) width 162: "with a soft glow."
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x584
RenderText {#text} at (0,0) size 0x0
layer at (8,8) size 120x375
RenderInline {SPAN} at (0,0) size 120x375 [bgcolor=#808080]
RenderText {#text} at (22,75) size 28x300
text run at (22,75) width 300: "This content should be masked"
RenderBR {BR} at (44,375) size 0x0
RenderText {#text} at (94,0) size 28x162
text run at (94,0) width 162: "with a soft glow."
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x584
RenderText {#text} at (0,0) size 0x0
layer at (28,28) size 335x296
RenderImage {IMG} at (20,20) size 335x296
......@@ -26,6 +26,8 @@ rect: style.getPropertyValue(border-bottom-width) : 0px
rect: style.getPropertyCSSValue(border-bottom-width) : [object CSSPrimitiveValue]
rect: style.getPropertyValue(border-collapse) : separate
rect: style.getPropertyCSSValue(border-collapse) : [object CSSPrimitiveValue]
rect: style.getPropertyValue(border-image-outset) : 0px
rect: style.getPropertyCSSValue(border-image-outset) : [object CSSPrimitiveValue]
rect: style.getPropertyValue(border-image-repeat) : stretch
rect: style.getPropertyCSSValue(border-image-repeat) : [object CSSPrimitiveValue]
rect: style.getPropertyValue(border-image-slice) : 100%
......@@ -316,6 +318,8 @@ rect: style.getPropertyValue(-webkit-mask-attachment) : scroll
rect: style.getPropertyCSSValue(-webkit-mask-attachment) : [object CSSPrimitiveValue]
rect: style.getPropertyValue(-webkit-mask-box-image) : none
rect: style.getPropertyCSSValue(-webkit-mask-box-image) : [object CSSPrimitiveValue]
rect: style.getPropertyValue(-webkit-mask-box-image-outset) : 0px
rect: style.getPropertyCSSValue(-webkit-mask-box-image-outset) : [object CSSPrimitiveValue]
rect: style.getPropertyValue(-webkit-mask-box-image-repeat) : stretch
rect: style.getPropertyCSSValue(-webkit-mask-box-image-repeat) : [object CSSPrimitiveValue]
rect: style.getPropertyValue(-webkit-mask-box-image-slice) : 0
......@@ -502,6 +506,8 @@ g: style.getPropertyValue(border-bottom-width) : 0px
g: style.getPropertyCSSValue(border-bottom-width) : [object CSSPrimitiveValue]
g: style.getPropertyValue(border-collapse) : separate
g: style.getPropertyCSSValue(border-collapse) : [object CSSPrimitiveValue]
g: style.getPropertyValue(border-image-outset) : 0px
g: style.getPropertyCSSValue(border-image-outset) : [object CSSPrimitiveValue]
g: style.getPropertyValue(border-image-repeat) : stretch
g: style.getPropertyCSSValue(border-image-repeat) : [object CSSPrimitiveValue]
g: style.getPropertyValue(border-image-slice) : 100%
......@@ -792,6 +798,8 @@ g: style.getPropertyValue(-webkit-mask-attachment) : scroll
g: style.getPropertyCSSValue(-webkit-mask-attachment) : [object CSSPrimitiveValue]
g: style.getPropertyValue(-webkit-mask-box-image) : none
g: style.getPropertyCSSValue(-webkit-mask-box-image) : [object CSSPrimitiveValue]
g: style.getPropertyValue(-webkit-mask-box-image-outset) : 0px
g: style.getPropertyCSSValue(-webkit-mask-box-image-outset) : [object CSSPrimitiveValue]
g: style.getPropertyValue(-webkit-mask-box-image-repeat) : stretch
g: style.getPropertyCSSValue(-webkit-mask-box-image-repeat) : [object CSSPrimitiveValue]
g: style.getPropertyValue(-webkit-mask-box-image-slice) : 0
......
2011-09-09 David Hyatt <hyatt@apple.com>
https://bugs.webkit.org/show_bug.cgi?id=67861
Implement border-image-outset (and the mask equivalents).
Reviewed by Beth Dakin.
Added new tests in fast/borders and fast/reflections.
* css/CSSBorderImageValue.cpp:
(WebCore::CSSBorderImageValue::CSSBorderImageValue):
(WebCore::CSSBorderImageValue::cssText):
* css/CSSBorderImageValue.h:
(WebCore::CSSBorderImageValue::create):
Add m_outset field to CSSBorderImageValue and teach it how to dump the field as
part of cssText().
* css/CSSComputedStyleDeclaration.cpp:
(WebCore::valueForNinePieceImageQuad):
(WebCore::valueForNinePieceImage):
(WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue):
Add support for border-image-outset and -webkit-mask-box-image-outset. Refactor
the code so that border-image-width and border-image-outset use a common
function.
* css/CSSParser.cpp:
(WebCore::CSSParser::parseValue):
(WebCore::BorderImageParseContext::BorderImageParseContext):
(WebCore::BorderImageParseContext::allowOutset):
(WebCore::BorderImageParseContext::commitSlash):
(WebCore::BorderImageParseContext::commitBorderWidth):
(WebCore::BorderImageParseContext::commitBorderOutset):
(WebCore::BorderImageParseContext::commitRepeat):
(WebCore::BorderImageParseContext::commitBorderImage):
(WebCore::CSSParser::parseBorderImage):
Teach the border image parsing code about outsets. This code will soon be
replaced by true shorthand parsing code, but for now keep it working and add
outset support to it.
(WebCore::BorderImageQuadParseContext::BorderImageQuadParseContext):
(WebCore::BorderImageQuadParseContext::commitBorderImageQuad):
(WebCore::CSSParser::parseBorderImageQuad):
(WebCore::CSSParser::parseBorderImageWidth):
(WebCore::CSSParser::parseBorderImageOutset):
* css/CSSParser.h:
Refactor the border-image-width code so that it can be shared by border-image-outset, since
they are extremely similar.
* css/CSSPropertyNames.in:
Add the new properties.
* css/CSSStyleSelector.cpp:
(WebCore::CSSStyleSelector::applyProperty):
(WebCore::CSSStyleSelector::mapNinePieceImage):
(WebCore::CSSStyleSelector::mapNinePieceImageQuad):
(WebCore::CSSStyleSelector::loadPendingImages):
* css/CSSStyleSelector.h:
Refactor the code so that width/outset share common mapping functions. Add support for outset.
* rendering/InlineFlowBox.cpp:
(WebCore::InlineFlowBox::addToLine):
(WebCore::InlineFlowBox::addBoxShadowVisualOverflow):
(WebCore::InlineFlowBox::addBorderOutsetVisualOverflow):
(WebCore::InlineFlowBox::computeOverflow):
Add new functions for computing the visual overflow caused by border outsets. Fix bugs in
the shadow overflow code as well.
(WebCore::clipRectForNinePieceImageStrip):
(WebCore::InlineFlowBox::paintBoxDecorations):
(WebCore::InlineFlowBox::paintMask):
* rendering/InlineFlowBox.h:
Make sure the clip rect pushed when painting one piece of a split inline strip is expanded to
include the border and mask outsets. Always include the block direction expansion, and conditionally
include the inline direction expansion based off includeLogicalLeftEdge()/includeLogicalRightEdge().
clipRectForNinePieceImageStrip is a common function shared by masks and border images that does this
work.
* rendering/RenderBlock.cpp:
(WebCore::RenderBlock::computeOverflow):
* rendering/RenderBox.cpp:
(WebCore::RenderBox::maskClipRect):
(WebCore::RenderBox::addBoxShadowAndBorderOverflow):
* rendering/RenderBox.h:
Rename addShadowOverflow to addBoxShadowAndBorderOverflow. Have it compute both shadow and border image
outset overflow. Fix bugs with shadow overflow computation.
* rendering/RenderBoxModelObject.cpp:
(WebCore::RenderBoxModelObject::paintNinePieceImage):
Change painting to apply the outsets to inflate the border image drawing area.
* rendering/RenderEmbeddedObject.cpp:
(WebCore::RenderEmbeddedObject::layout):
* rendering/RenderIFrame.cpp:
(WebCore::RenderIFrame::layout):
Patched to call the renamed addBoxShadowAndBorderOverflow function instead of addShadowOverflow.
* rendering/RenderLayer.cpp:
(WebCore::RenderLayer::calculateRects):
Patched to no longer apply box-shadow to overflow clip areas when inflating the intersection area for the
layer bounds. Instead we generically apply all visual overflow so that border image outsets will also be
included. This fixes https://bugs.webkit.org/show_bug.cgi?id=37467.
* rendering/RenderReplaced.cpp:
(WebCore::RenderReplaced::layout):
Patched to call the renamed addBoxShadowAndBorderOverflow function instead of addShadowOverflow.
* rendering/style/NinePieceImage.cpp:
(WebCore::NinePieceImage::operator==):
* rendering/style/NinePieceImage.h:
(WebCore::NinePieceImage::NinePieceImage):
(WebCore::NinePieceImage::outset):
(WebCore::NinePieceImage::setOutset):
(WebCore::NinePieceImage::computeOutset):
(WebCore::NinePieceImage::copyOutsetFrom):
Add the outset field to NinePieceImage along with some helpers for manipulating outsets.
* rendering/style/RenderStyle.cpp:
(WebCore::RenderStyle::getImageOutsets):
(WebCore::RenderStyle::getImageHorizontalOutsets):
(WebCore::RenderStyle::getImageVerticalOutsets):
* rendering/style/RenderStyle.h:
(WebCore::InheritedFlags::hasBorderImageOutsets):
(WebCore::InheritedFlags::getBorderImageOutsets):
(WebCore::InheritedFlags::getBorderImageHorizontalOutsets):
(WebCore::InheritedFlags::getBorderImageVerticalOutsets):
(WebCore::InheritedFlags::getBorderImageInlineDirectionOutsets):
(WebCore::InheritedFlags::getBorderImageBlockDirectionOutsets):
(WebCore::InheritedFlags::getImageInlineDirectionOutsets):
(WebCore::InheritedFlags::getImageBlockDirectionOutsets):
Helpers for outset computation used by painting and overflow functions.
2011-09-10 Dan Bernstein <mitz@apple.com>
Actually prevent unnecessary casts to MediaControls*.
......@@ -27,10 +27,11 @@
namespace WebCore {
CSSBorderImageValue::CSSBorderImageValue(PassRefPtr<CSSValue> image, PassRefPtr<CSSBorderImageSliceValue> imageSlice,
PassRefPtr<CSSValue> borderSlice, PassRefPtr<CSSValue> repeat)
PassRefPtr<CSSValue> borderSlice, PassRefPtr<CSSValue> outset, PassRefPtr<CSSValue> repeat)
: m_image(image)
, m_imageSlice(imageSlice)
, m_borderSlice(borderSlice)
, m_outset(outset)
, m_repeat(repeat)
{
}
......@@ -54,6 +55,11 @@ String CSSBorderImageValue::cssText() const
text += m_borderSlice->cssText();
}
if (m_outset) {
text += " / ";
text += m_outset->cssText();
}
if (m_repeat) {
// Now the keywords.
text += " ";
......
......@@ -32,9 +32,9 @@ class Rect;
class CSSBorderImageValue : public CSSValue {
public:
static PassRefPtr<CSSBorderImageValue> create(PassRefPtr<CSSValue> image, PassRefPtr<CSSBorderImageSliceValue> imageSlice,
PassRefPtr<CSSValue> borderSlice, PassRefPtr<CSSValue> repeat)
PassRefPtr<CSSValue> borderSlice, PassRefPtr<CSSValue> outset, PassRefPtr<CSSValue> repeat)
{
return adoptRef(new CSSBorderImageValue(image, imageSlice, borderSlice, repeat));