Diff
Modified: trunk/LayoutTests/ChangeLog (120834 => 120835)
--- trunk/LayoutTests/ChangeLog 2012-06-20 17:48:23 UTC (rev 120834)
+++ trunk/LayoutTests/ChangeLog 2012-06-20 17:49:18 UTC (rev 120835)
@@ -1,3 +1,15 @@
+2012-06-20 Alexis Menard <[email protected]>
+
+ [CSS3 Backgrounds and Borders] Implement box-decoration-break rendering.
+ https://bugs.webkit.org/show_bug.cgi?id=88228
+
+ Reviewed by Eric Seidel.
+
+ Add new tests to cover the feature.
+
+ * fast/box-decoration-break/box-decoration-break-rendering-expected.html: Added.
+ * fast/box-decoration-break/box-decoration-break-rendering.html: Added.
+
2012-06-20 Hans Wennborg <[email protected]>
Speech _javascript_ API: add SpeechRecognition.maxAlternatives attribute
Added: trunk/LayoutTests/fast/box-decoration-break/box-decoration-break-rendering-expected.html (0 => 120835)
--- trunk/LayoutTests/fast/box-decoration-break/box-decoration-break-rendering-expected.html (rev 0)
+++ trunk/LayoutTests/fast/box-decoration-break/box-decoration-break-rendering-expected.html 2012-06-20 17:49:18 UTC (rev 120835)
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test of box-decoration break rendering when the a text is broken in multiple lines</title>
+ <style type="text/css">
+ body {
+ width: 360px;
+ font: monospace 10px;
+ }
+ span {
+ display: block;
+ width: 360px;
+ }
+ #rightCutHighlight {
+ display: inline;
+ border-top: 2px solid red;
+ border-right: 0px solid red;
+ border-left: 2px solid red;
+ border-bottom: 2px solid red;
+ border-top-left-radius: 4px;
+ border-top-right-radius: 0px;
+ border-bottom-right-radius: 0px;
+ border-bottom-left-radius: 4px;
+ background: yellow;
+ box-shadow: 0px 1px 3px dimgrey;
+ }
+ #leftCutHighlight {
+ display: inline;
+ margin: 0px;
+ padding: 0px;
+ border-top: 2px solid red;
+ border-right: 2px solid red;
+ border-left: 0px solid red;
+ border-bottom: 2px solid red;
+ border-top-left-radius: 0px;
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+ border-bottom-left-radius: 0px;
+ background: yellow;
+ box-shadow: 0px 1px 3px dimgrey;
+ }
+ .clone {
+ display: inline;
+ margin: 0px;
+ padding: 0px;
+ border: 2px solid red;
+ border-radius: 4px;
+ background: yellow;
+ box-shadow: 0px 1px 3px dimgrey;
+ }
+ </style>
+
+ </head>
+ <body>
+ <h1>Box-decoration-break: slice</h1>
+ <span>This long word should break in a new line : <span id="rightCutHighlight">veryveryveryveryveryveryvery-</span><br><span id="leftCutHighlight">-longword</span>. box-decoration-break is set to cloned,
+ so the right edge of the previous line is cut, and the left edge of the highlight in this line is cut too.</span>
+ <h1>Box-decoration-break: clone</h1>
+ <span>This long word should break in a new line : <span class="clone">veryveryveryveryveryveryvery-</span><br><span class="clone">-longword</span>. box-decoration-break is set to cloned,
+ so the right edge of the previous line is similar as its left edge, and the left edge of the highlight in this line is similar as its right one. </span>
+ </body>
+ </body>
+</html>
Added: trunk/LayoutTests/fast/box-decoration-break/box-decoration-break-rendering.html (0 => 120835)
--- trunk/LayoutTests/fast/box-decoration-break/box-decoration-break-rendering.html (rev 0)
+++ trunk/LayoutTests/fast/box-decoration-break/box-decoration-break-rendering.html 2012-06-20 17:49:18 UTC (rev 120835)
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test of box-decoration break rendering when the a text is broken in multiple lines</title>
+ <style type="text/css">
+ body {
+ width: 360px;
+ font: monospace 10px;
+ }
+ span {
+ display: block;
+ width: 360px;
+ }
+ span highlight {
+ border: 2px solid red;
+ border-radius: 4px;
+ background: yellow;
+ box-shadow: 0px 1px 3px dimgrey;
+ }
+ #slice highlight {
+ box-decoration-break: slice;
+ -webkit-box-decoration-break: slice;
+ }
+
+ #clone highlight {
+ box-decoration-break: clone;
+ -webkit-box-decoration-break: clone;
+ }
+ </style>
+
+ </head>
+ <body>
+ <h1>Box-decoration-break: slice</h1>
+ <span id="slice">This long word should break in a new line : <highlight>veryveryveryveryveryveryvery-<br>-longword</highlight>. box-decoration-break is set to cloned,
+ so the right edge of the previous line is cut, and the left edge of the highlight in this line is cut too.</span>
+ <h1>Box-decoration-break: clone</h1>
+ <span id="clone">This long word should break in a new line : <highlight>veryveryveryveryveryveryvery-<br>-longword</highlight>. box-decoration-break is set to cloned,
+ so the right edge of the previous line is similar as its left edge, and the left edge of the highlight in this line is similar as its right one. </span>
+ </body>
+ </body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (120834 => 120835)
--- trunk/Source/WebCore/ChangeLog 2012-06-20 17:48:23 UTC (rev 120834)
+++ trunk/Source/WebCore/ChangeLog 2012-06-20 17:49:18 UTC (rev 120835)
@@ -1,3 +1,21 @@
+2012-06-20 Alexis Menard <[email protected]>
+
+ [CSS3 Backgrounds and Borders] Implement box-decoration-break rendering.
+ https://bugs.webkit.org/show_bug.cgi?id=88228
+
+ Reviewed by Eric Seidel.
+
+ Implement the new CSS property box-decoration-break. It modifies
+ where we decide whether the borders needs to be sliced or not by
+ checking if the box-decoration-break is set to clone. If it's the case
+ then we need to explicitely redraw all edges.
+
+ Test: fast/box-decoration-break/box-decoration-break-rendering.html
+
+ * rendering/InlineFlowBox.cpp:
+ (WebCore::InlineFlowBox::determineSpacingForFlowBoxes):
+ (WebCore::InlineFlowBox::paintFillLayer):
+
2012-06-20 Julien Chaffraix <[email protected]>
Use IntSize in RenderLayer to represent scroll offsets
Modified: trunk/Source/WebCore/rendering/InlineFlowBox.cpp (120834 => 120835)
--- trunk/Source/WebCore/rendering/InlineFlowBox.cpp 2012-06-20 17:48:23 UTC (rev 120834)
+++ trunk/Source/WebCore/rendering/InlineFlowBox.cpp 2012-06-20 17:49:18 UTC (rev 120835)
@@ -316,6 +316,11 @@
// we know the inline began on this line (unless we are a continuation).
RenderLineBoxList* lineBoxList = rendererLineBoxes();
if (!lineBoxList->firstLineBox()->isConstructed() && !renderer()->isInlineElementContinuation()) {
+#if ENABLE(CSS_BOX_DECORATION_BREAK)
+ if (renderer()->style()->boxDecorationBreak() == DCLONE)
+ includeLeftEdge = includeRightEdge = true;
+ else
+#endif
if (ltr && lineBoxList->firstLineBox() == this)
includeLeftEdge = true;
else if (!ltr && lineBoxList->lastLineBox() == this)
@@ -330,7 +335,12 @@
// (1) The next line was not created, or it is constructed. We check the previous line for rtl.
// (2) The logicallyLastRun is not a descendant of this renderer.
// (3) The logicallyLastRun is a descendant of this renderer, but it is the last child of this renderer and it does not wrap to the next line.
-
+#if ENABLE(CSS_BOX_DECORATION_BREAK)
+ // (4) The decoration break is set to clone therefore there will be borders on every sides.
+ if (renderer()->style()->boxDecorationBreak() == DCLONE)
+ includeLeftEdge = includeRightEdge = true;
+ else
+#endif
if (ltr) {
if (!nextLineBox()
&& ((lastLine || isLastObjectOnLine) && !inlineFlow->continuation()))
@@ -1102,6 +1112,13 @@
bool hasFillImage = img && img->canRender(renderer(), renderer()->style()->effectiveZoom());
if ((!hasFillImage && !renderer()->style()->hasBorderRadius()) || (!prevLineBox() && !nextLineBox()) || !parent())
boxModelObject()->paintFillLayerExtended(paintInfo, c, fillLayer, rect, BackgroundBleedNone, this, rect.size(), op);
+#if ENABLE(CSS_BOX_DECORATION_BREAK)
+ else if (renderer()->style()->boxDecorationBreak() == DCLONE) {
+ GraphicsContextStateSaver stateSaver(*paintInfo.context);
+ paintInfo.context->clip(LayoutRect(rect.x(), rect.y(), width(), height()));
+ boxModelObject()->paintFillLayerExtended(paintInfo, c, fillLayer, rect, BackgroundBleedNone, this, rect.size(), op);
+ }
+#endif
else {
// We have a fill image that spans multiple lines.
// We need to adjust tx and ty by the width of all previous lines.
