Commit 97b9586a authored by bdash's avatar bdash
Browse files

2007-05-19 Mitz Pettel <mitz@webkit.org>

        Reviewed by Dave Hyatt.

        - fix http://bugs.webkit.org/show_bug.cgi?id=12729
          box-shadow disappears when scrolling a div that it falls on/under

        Tests: fast/repaint/box-shadow-dynamic.html
               fast/repaint/box-shadow-h.html
               fast/repaint/box-shadow-v.html

        * rendering/InlineFlowBox.cpp:
        (WebCore::InlineFlowBox::placeBoxesHorizontally): Factor in box shadow.
        (WebCore::InlineFlowBox::placeBoxesVertically): Ditto.
        (WebCore::InlineFlowBox::paint): Account for box shadow when checking if
        the damage rect intersects.
        * rendering/RenderBlock.cpp:
        (WebCore::RenderBlock::overflowHeight): For overflow areas, when asked
        for the "exterior" overflow, add box shadow overflow.
        (WebCore::RenderBlock::overflowWidth): Ditto.
        (WebCore::RenderBlock::overflowLeft): Ditto.
        (WebCore::RenderBlock::overflowTop): Ditto.
        (WebCore::RenderBlock::overflowRect): Ditto.
        (WebCore::RenderBlock::layoutBlock): Factor box shadow into visual overflow.
        * rendering/RenderFlexibleBox.cpp:
        (WebCore::RenderFlexibleBox::layoutBlock): Ditto.
        * rendering/RenderFlow.cpp:
        (WebCore::RenderFlow::lowestPosition): For overflow areas, when asked for
        the "exterior" extreme position, add box shadow.
        (WebCore::RenderFlow::rightmostPosition): Ditto.
        (WebCore::RenderFlow::leftmostPosition): Ditto.
        * rendering/RenderLayer.cpp:
        (WebCore::RenderLayer::calculateRects): Avoid clipping out box shadow.
        * rendering/RenderObject.cpp:
        (WebCore::RenderObject::repaintAfterLayoutIfNeeded): Make sure to paint
        the box shadow when an edge with a shadow moves.
        (WebCore::RenderObject::adjustRectForOutlineAndShadow): Helper function
        that expands a given rectangle to encompass outline and box shadow.
        (WebCore::RenderObject::absoluteOutlineBox): Changed to include box shadow.
        * rendering/RenderObject.h:

2007-05-19  Mitz Pettel  <mitz@webkit.org>

        Reviewed by Dave Hyatt.

        - repaint tests and updated results for http://bugs.webkit.org/show_bug.cgi?id=12729
          box-shadow disappears when scrolling a div that it falls on/under

        * fast/box-shadow/basic-shadows-expected.checksum:
        * fast/box-shadow/basic-shadows-expected.png:
        * fast/box-shadow/basic-shadows-expected.txt:
        * fast/repaint/box-shadow-dynamic-expected.checksum: Added.
        * fast/repaint/box-shadow-dynamic-expected.png: Added.
        * fast/repaint/box-shadow-dynamic-expected.txt: Added.
        * fast/repaint/box-shadow-dynamic.html: Added.
        * fast/repaint/box-shadow-h-expected.checksum: Added.
        * fast/repaint/box-shadow-h-expected.png: Added.
        * fast/repaint/box-shadow-h-expected.txt: Added.
        * fast/repaint/box-shadow-h.html: Added.
        * fast/repaint/box-shadow-v-expected.checksum: Added.
        * fast/repaint/box-shadow-v-expected.png: Added.
        * fast/repaint/box-shadow-v-expected.txt: Added.
        * fast/repaint/box-shadow-v.html: Added.


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@21605 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 42db1e6f
2007-05-19 Mitz Pettel <mitz@webkit.org>
Reviewed by Dave Hyatt.
- repaint tests and updated results for http://bugs.webkit.org/show_bug.cgi?id=12729
box-shadow disappears when scrolling a div that it falls on/under
* fast/box-shadow/basic-shadows-expected.checksum:
* fast/box-shadow/basic-shadows-expected.png:
* fast/box-shadow/basic-shadows-expected.txt:
* fast/repaint/box-shadow-dynamic-expected.checksum: Added.
* fast/repaint/box-shadow-dynamic-expected.png: Added.
* fast/repaint/box-shadow-dynamic-expected.txt: Added.
* fast/repaint/box-shadow-dynamic.html: Added.
* fast/repaint/box-shadow-h-expected.checksum: Added.
* fast/repaint/box-shadow-h-expected.png: Added.
* fast/repaint/box-shadow-h-expected.txt: Added.
* fast/repaint/box-shadow-h.html: Added.
* fast/repaint/box-shadow-v-expected.checksum: Added.
* fast/repaint/box-shadow-v-expected.png: Added.
* fast/repaint/box-shadow-v-expected.txt: Added.
* fast/repaint/box-shadow-v.html: Added.
2007-05-20 Mark Rowe <mrowe@apple.com>
 
Update test results after r21597.
0ddb70bd830be6c8dc9c767648263ee4
\ No newline at end of file
da1cb4f18169068cdca839127a165969
\ No newline at end of file
layer at (0,0) size 785x671
layer at (0,0) size 785x681
RenderView at (0,0) size 785x600
layer at (0,0) size 785x671
layer at (0,0) size 785x681
RenderBlock {HTML} at (0,0) size 785x658
RenderBody {BODY} at (8,8) size 769x634
RenderBlock (anonymous) at (0,0) size 769x150
......
526db85bc219343ed831fcee17f54364
\ No newline at end of file
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x298
RenderBlock {HTML} at (0,0) size 800x298
RenderBody {BODY} at (8,16) size 784x274
RenderBlock {P} at (0,0) size 784x18
RenderText {#text} at (0,0) size 382x18
text run at (0,0) width 382: "Tests the repainting of box shadows when boxes are resized."
RenderBlock {DIV} at (0,34) size 70x120
RenderBlock {DIV} at (10,20) size 50x50 [bgcolor=#FFFF77]
RenderBlock {DIV} at (10,0) size 30x50
RenderBlock {DIV} at (0,154) size 70x120
RenderBlock {DIV} at (10,20) size 50x50 [bgcolor=#FFFF77]
RenderBlock {DIV} at (10,0) size 30x50
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<style type="text/css">
div.test { width: 50px; height: 100px; padding: 10px; }
</style>
<script src="repaint.js" type="text/javascript"></script>
<script type="text/javascript">
function repaintTest()
{
document.getElementById('a').style.height = '50px';
document.getElementById('b').style.height = '50px';
}
</script>
</head>
<body onload="runRepaintTest();">
<p>
Tests the repainting of box shadows when boxes are resized.
</p>
<div class="test">
<div style="background: #ff7; -webkit-box-shadow: black 5px 5px 0;">
<div id="a" style="height: 70px; margin: 10px;"></div>
</div>
</div>
<div class="test">
<div style="background: #ff7; -webkit-box-shadow: black 5px 5px 0;">
<div id="b" style="height: 30px; margin: 10px;"></div>
</div>
</div>
</body>
</html>
ed356fec51782b1a7b2266261d81a2c9
\ No newline at end of file
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x390
RenderBlock {HTML} at (0,0) size 800x8
RenderBody {BODY} at (8,8) size 784x0
RenderBlock (floating) {DIV} at (0,0) size 121x382
RenderBlock {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
RenderBlock {P} at (0,296) size 121x18
RenderText {#text} at (0,0) size 46x18
text run at (0,0) width 46: "Lorem "
RenderInline {SPAN} at (0,0) size 38x18
RenderText {#text} at (46,0) size 38x18
text run at (46,0) width 38: "ipsum"
RenderText {#text} at (84,0) size 37x18
text run at (84,0) width 37: " dolor"
RenderBlock {P} at (0,330) size 121x36
RenderText {#text} at (0,0) size 84x18
text run at (0,0) width 84: "Lorem ipsum"
RenderBR {BR} at (84,0) size 0x18
RenderText {#text} at (0,18) size 85x18
text run at (0,18) width 85: "dolor sit amet"
RenderBlock (floating) {DIV} at (131,0) size 121x330
RenderBlock {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
RenderBlock {P} at (0,296) size 121x18
RenderText {#text} at (0,0) size 46x18
text run at (0,0) width 46: "Lorem "
RenderInline {SPAN} at (0,0) size 38x18
RenderText {#text} at (46,0) size 38x18
text run at (46,0) width 38: "ipsum"
RenderText {#text} at (84,0) size 37x18
text run at (84,0) width 37: " dolor"
RenderBlock (floating) {DIV} at (262,0) size 121x330
RenderBlock {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
RenderBlock {P} at (0,296) size 121x18
RenderText {#text} at (0,0) size 46x18
text run at (0,0) width 46: "Lorem "
RenderInline {SPAN} at (0,0) size 38x18
RenderText {#text} at (46,0) size 38x18
text run at (46,0) width 38: "ipsum"
RenderText {#text} at (84,0) size 37x18
text run at (84,0) width 37: " dolor"
RenderBlock (floating) {DIV} at (393,0) size 121x330
RenderBlock {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
RenderBlock {P} at (0,296) size 121x18
RenderText {#text} at (0,0) size 46x18
text run at (0,0) width 46: "Lorem "
RenderInline {SPAN} at (0,0) size 38x18
RenderText {#text} at (46,0) size 38x18
text run at (46,0) width 38: "ipsum"
RenderText {#text} at (84,0) size 37x18
text run at (84,0) width 37: " dolor"
RenderBlock (floating) {DIV} at (524,0) size 121x330
RenderBlock {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
RenderBlock {P} at (0,296) size 121x18
RenderText {#text} at (0,0) size 46x18
text run at (0,0) width 46: "Lorem "
RenderInline {SPAN} at (0,0) size 38x18
RenderText {#text} at (46,0) size 38x18
text run at (46,0) width 38: "ipsum"
RenderText {#text} at (84,0) size 37x18
text run at (84,0) width 37: " dolor"
layer at (18,248) size 40x40
RenderBlock {DIV} at (10,240) size 40x40 [bgcolor=#FFFF77]
layer at (149,248) size 40x40
RenderBlock {DIV} at (10,240) size 40x40 [bgcolor=#FFFF77]
layer at (280,248) size 40x40
RenderBlock {DIV} at (10,240) size 40x40 [bgcolor=#FFFF77]
layer at (411,248) size 40x40
RenderBlock {DIV} at (10,240) size 40x40 [bgcolor=#FFFF77]
layer at (542,248) size 40x40
RenderBlock {DIV} at (10,240) size 40x40 [bgcolor=#FFFF77]
layer at (8,68) size 60x60
RenderBlock (relative positioned) {DIV} at (0,60) size 60x60
layer at (18,78) size 40x40
RenderBlock (positioned) {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
layer at (8,128) size 60x60
RenderBlock (relative positioned) {DIV} at (0,120) size 60x60
layer at (18,138) size 40x40 backgroundClip at (13,133) size 5x5 clip at (13,133) size 5x5 outlineClip at (13,133) size 5x5
RenderBlock (positioned) {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
layer at (18,198) size 40x40
RenderBlock {DIV} at (10,190) size 40x40 [bgcolor=#FFFF77]
layer at (139,68) size 60x60
RenderBlock (relative positioned) {DIV} at (0,60) size 60x60
layer at (149,78) size 40x45
RenderBlock (positioned) {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
layer at (139,128) size 60x60
RenderBlock (relative positioned) {DIV} at (0,120) size 60x60
layer at (149,138) size 40x45 backgroundClip at (144,178) size 5x5 clip at (144,178) size 5x5 outlineClip at (144,178) size 5x5
RenderBlock (positioned) {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
layer at (149,198) size 40x45
RenderBlock {DIV} at (10,190) size 40x40 [bgcolor=#FFFF77]
layer at (270,68) size 60x60
RenderBlock (relative positioned) {DIV} at (0,60) size 60x60
layer at (280,78) size 45x45
RenderBlock (positioned) {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
layer at (270,128) size 60x60
RenderBlock (relative positioned) {DIV} at (0,120) size 60x60
layer at (280,138) size 45x45 backgroundClip at (320,178) size 5x5 clip at (320,178) size 5x5 outlineClip at (320,178) size 5x5
RenderBlock (positioned) {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
layer at (280,198) size 45x45
RenderBlock {DIV} at (10,190) size 40x40 [bgcolor=#FFFF77]
layer at (401,68) size 60x60
RenderBlock (relative positioned) {DIV} at (0,60) size 60x60
layer at (411,78) size 45x40
RenderBlock (positioned) {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
layer at (401,128) size 60x60
RenderBlock (relative positioned) {DIV} at (0,120) size 60x60
layer at (411,138) size 45x40 backgroundClip at (451,133) size 5x5 clip at (451,133) size 5x5 outlineClip at (451,133) size 5x5
RenderBlock (positioned) {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
layer at (411,198) size 45x40
RenderBlock {DIV} at (10,190) size 40x40 [bgcolor=#FFFF77]
layer at (532,68) size 60x60
RenderBlock (relative positioned) {DIV} at (0,60) size 60x60
layer at (542,78) size 45x45
RenderBlock (positioned) {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
layer at (532,128) size 60x60
RenderBlock (relative positioned) {DIV} at (0,120) size 60x60
layer at (542,198) size 45x45
RenderBlock {DIV} at (10,190) size 40x40 [bgcolor=#FFFF77]
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script>
if (window.layoutTestController) {
layoutTestController.testRepaint();
layoutTestController.repaintSweepHorizontally();
}
</script>
<style>
.square { margin: 10px; width: 40px; height: 40px; background-color: #ff7; }
.shadowTL { -webkit-box-shadow: black -5px -5px 0; }
.shadowBL { -webkit-box-shadow: black -5px 5px 0; }
.shadowBR { -webkit-box-shadow: black 5px 5px 0; }
.shadowTR { -webkit-box-shadow: black 5px -5px 0; }
.shadowB { -webkit-box-shadow: black 0 0 5px; }
.shadowFirstLine:first-line { -webkit-box-shadow: black -5px -5px 0; }
</style>
</head>
<body>
<div style="float: left;">
<div class="square shadowTL"></div>
<div style="position: relative; width: 60px; height: 60px;">
<div style="position: absolute;" class="square shadowTL"></div>
</div>
<div style="position: relative; width: 60px; height: 60px;">
<div style="position: absolute; clip: rect(-5px, 0, 0, -5px)" class="square shadowTL"></div>
</div>
<div class="square shadowTL" style="opacity: 0.8;"></div>
<div class="square shadowTL" style="overflow: auto;"></div>
<p>
Lorem <span class="shadowTL">ipsum</span> dolor
</p>
<p class="shadowFirstLine">
Lorem ipsum<br>
dolor sit amet
</p>
</div>
<div style="float: left; margin-left: 10px;">
<div class="square shadowBL"></div>
<div style="position: relative; width: 60px; height: 60px;">
<div style="position: absolute;" class="square shadowBL"></div>
</div>
<div style="position: relative; width: 60px; height: 60px;">
<div style="position: absolute; clip: rect(40px, 0, 45px, -5px)" class="square shadowBL"></div>
</div>
<div class="square shadowBL" style="opacity: 0.8;"></div>
<div class="square shadowBL" style="overflow: auto;"></div>
<p>
Lorem <span class="shadowBL">ipsum</span> dolor
</p>
</div>
<div style="float: left; margin-left: 10px;">
<div class="square shadowBR"></div>
<div style="position: relative; width: 60px; height: 60px;">
<div style="position: absolute;" class="square shadowBR"></div>
</div>
<div style="position: relative; width: 60px; height: 60px;">
<div style="position: absolute; clip: rect(40px, 45px, 45px, 40px)" class="square shadowBR"></div>
</div>
<div class="square shadowBR" style="opacity: 0.8;"></div>
<div class="square shadowBR" style="overflow: auto;"></div>
<p>
Lorem <span class="shadowBR">ipsum</span> dolor
</p>
</div>
<div style="float: left; margin-left: 10px;">
<div class="square shadowTR"></div>
<div style="position: relative; width: 60px; height: 60px;">
<div style="position: absolute;" class="square shadowTR"></div>
</div>
<div style="position: relative; width: 60px; height: 60px;">
<div style="position: absolute; clip: rect(-5px, 45px, 0, 40px)" class="square shadowTR"></div>
</div>
<div class="square shadowTR" style="opacity: 0.8;"></div>
<div class="square shadowTR" style="overflow: auto;"></div>
<p>
Lorem <span class="shadowTR">ipsum</span> dolor
</p>
</div>
<div style="float: left; margin-left: 10px;">
<div class="square shadowB"></div>
<div style="position: relative; width: 60px; height: 60px;">
<div style="position: absolute;" class="square shadowB"></div>
</div>
<div style="position: relative; width: 60px; height: 60px;">
<!-- space -->
</div>
<div class="square shadowB" style="opacity: 0.8;"></div>
<div class="square shadowB" style="overflow: auto;"></div>
<p>
Lorem <span class="shadowB">ipsum</span> dolor
</p>
</div>
</body>
</html>
c3f07b7f986691e84cec4ea779cb6e57
\ No newline at end of file
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x390
RenderBlock {HTML} at (0,0) size 800x8
RenderBody {BODY} at (8,8) size 784x0
RenderBlock (floating) {DIV} at (0,0) size 121x382
RenderBlock {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
RenderBlock {P} at (0,296) size 121x18
RenderText {#text} at (0,0) size 46x18
text run at (0,0) width 46: "Lorem "
RenderInline {SPAN} at (0,0) size 38x18
RenderText {#text} at (46,0) size 38x18
text run at (46,0) width 38: "ipsum"
RenderText {#text} at (84,0) size 37x18
text run at (84,0) width 37: " dolor"
RenderBlock {P} at (0,330) size 121x36
RenderText {#text} at (0,0) size 84x18
text run at (0,0) width 84: "Lorem ipsum"
RenderBR {BR} at (84,0) size 0x18
RenderText {#text} at (0,18) size 85x18
text run at (0,18) width 85: "dolor sit amet"
RenderBlock (floating) {DIV} at (131,0) size 121x330
RenderBlock {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
RenderBlock {P} at (0,296) size 121x18
RenderText {#text} at (0,0) size 46x18
text run at (0,0) width 46: "Lorem "
RenderInline {SPAN} at (0,0) size 38x18
RenderText {#text} at (46,0) size 38x18
text run at (46,0) width 38: "ipsum"
RenderText {#text} at (84,0) size 37x18
text run at (84,0) width 37: " dolor"
RenderBlock (floating) {DIV} at (262,0) size 121x330
RenderBlock {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
RenderBlock {P} at (0,296) size 121x18
RenderText {#text} at (0,0) size 46x18
text run at (0,0) width 46: "Lorem "
RenderInline {SPAN} at (0,0) size 38x18
RenderText {#text} at (46,0) size 38x18
text run at (46,0) width 38: "ipsum"
RenderText {#text} at (84,0) size 37x18
text run at (84,0) width 37: " dolor"
RenderBlock (floating) {DIV} at (393,0) size 121x330
RenderBlock {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
RenderBlock {P} at (0,296) size 121x18
RenderText {#text} at (0,0) size 46x18
text run at (0,0) width 46: "Lorem "
RenderInline {SPAN} at (0,0) size 38x18
RenderText {#text} at (46,0) size 38x18
text run at (46,0) width 38: "ipsum"
RenderText {#text} at (84,0) size 37x18
text run at (84,0) width 37: " dolor"
RenderBlock (floating) {DIV} at (524,0) size 121x330
RenderBlock {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
RenderBlock {P} at (0,296) size 121x18
RenderText {#text} at (0,0) size 46x18
text run at (0,0) width 46: "Lorem "
RenderInline {SPAN} at (0,0) size 38x18
RenderText {#text} at (46,0) size 38x18
text run at (46,0) width 38: "ipsum"
RenderText {#text} at (84,0) size 37x18
text run at (84,0) width 37: " dolor"
layer at (18,248) size 40x40
RenderBlock {DIV} at (10,240) size 40x40 [bgcolor=#FFFF77]
layer at (149,248) size 40x40
RenderBlock {DIV} at (10,240) size 40x40 [bgcolor=#FFFF77]
layer at (280,248) size 40x40
RenderBlock {DIV} at (10,240) size 40x40 [bgcolor=#FFFF77]
layer at (411,248) size 40x40
RenderBlock {DIV} at (10,240) size 40x40 [bgcolor=#FFFF77]
layer at (542,248) size 40x40
RenderBlock {DIV} at (10,240) size 40x40 [bgcolor=#FFFF77]
layer at (8,68) size 60x60
RenderBlock (relative positioned) {DIV} at (0,60) size 60x60
layer at (18,78) size 40x40
RenderBlock (positioned) {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
layer at (8,128) size 60x60
RenderBlock (relative positioned) {DIV} at (0,120) size 60x60
layer at (18,138) size 40x40 backgroundClip at (13,133) size 5x5 clip at (13,133) size 5x5 outlineClip at (13,133) size 5x5
RenderBlock (positioned) {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
layer at (18,198) size 40x40
RenderBlock {DIV} at (10,190) size 40x40 [bgcolor=#FFFF77]
layer at (139,68) size 60x60
RenderBlock (relative positioned) {DIV} at (0,60) size 60x60
layer at (149,78) size 40x45
RenderBlock (positioned) {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
layer at (139,128) size 60x60
RenderBlock (relative positioned) {DIV} at (0,120) size 60x60
layer at (149,138) size 40x45 backgroundClip at (144,178) size 5x5 clip at (144,178) size 5x5 outlineClip at (144,178) size 5x5
RenderBlock (positioned) {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
layer at (149,198) size 40x45
RenderBlock {DIV} at (10,190) size 40x40 [bgcolor=#FFFF77]
layer at (270,68) size 60x60
RenderBlock (relative positioned) {DIV} at (0,60) size 60x60
layer at (280,78) size 45x45
RenderBlock (positioned) {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
layer at (270,128) size 60x60
RenderBlock (relative positioned) {DIV} at (0,120) size 60x60
layer at (280,138) size 45x45 backgroundClip at (320,178) size 5x5 clip at (320,178) size 5x5 outlineClip at (320,178) size 5x5
RenderBlock (positioned) {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
layer at (280,198) size 45x45
RenderBlock {DIV} at (10,190) size 40x40 [bgcolor=#FFFF77]
layer at (401,68) size 60x60
RenderBlock (relative positioned) {DIV} at (0,60) size 60x60
layer at (411,78) size 45x40
RenderBlock (positioned) {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
layer at (401,128) size 60x60
RenderBlock (relative positioned) {DIV} at (0,120) size 60x60
layer at (411,138) size 45x40 backgroundClip at (451,133) size 5x5 clip at (451,133) size 5x5 outlineClip at (451,133) size 5x5
RenderBlock (positioned) {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
layer at (411,198) size 45x40
RenderBlock {DIV} at (10,190) size 40x40 [bgcolor=#FFFF77]
layer at (532,68) size 60x60
RenderBlock (relative positioned) {DIV} at (0,60) size 60x60
layer at (542,78) size 45x45
RenderBlock (positioned) {DIV} at (10,10) size 40x40 [bgcolor=#FFFF77]
layer at (532,128) size 60x60
RenderBlock (relative positioned) {DIV} at (0,120) size 60x60
layer at (542,198) size 45x45
RenderBlock {DIV} at (10,190) size 40x40 [bgcolor=#FFFF77]
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script>
if (window.layoutTestController)
layoutTestController.testRepaint();
</script>
<style>
.square { margin: 10px; width: 40px; height: 40px; background-color: #ff7; }
.shadowTL { -webkit-box-shadow: black -5px -5px 0; }
.shadowBL { -webkit-box-shadow: black -5px 5px 0; }
.shadowBR { -webkit-box-shadow: black 5px 5px 0; }
.shadowTR { -webkit-box-shadow: black 5px -5px 0; }
.shadowB { -webkit-box-shadow: black 0 0 5px; }
.shadowFirstLine:first-line { -webkit-box-shadow: black -5px -5px 0; }
</style>
</head>
<body>
<div style="float: left;">
<div class="square shadowTL"></div>
<div style="position: relative; width: 60px; height: 60px;">
<div style="position: absolute;" class="square shadowTL"></div>
</div>
<div style="position: relative; width: 60px; height: 60px;">
<div style="position: absolute; clip: rect(-5px, 0, 0, -5px)" class="square shadowTL"></div>
</div>
<div class="square shadowTL" style="opacity: 0.8;"></div>
<div class="square shadowTL" style="overflow: auto;"></div>
<p>
Lorem <span class="shadowTL">ipsum</span> dolor
</p>
<p class="shadowFirstLine">
Lorem ipsum<br>
dolor sit amet
</p>
</div>
<div style="float: left; margin-left: 10px;">
<div class="square shadowBL"></div>
<div style="position: relative; width: 60px; height: 60px;">
<div style="position: absolute;" class="square shadowBL"></div>
</div>
<div style="position: relative; width: 60px; height: 60px;">
<div style="position: absolute; clip: rect(40px, 0, 45px, -5px)" class="square shadowBL"></div>
</div>
<div class="square shadowBL" style="opacity: 0.8;"></div>
<div class="square shadowBL" style="overflow: auto;"></div>
<p>
Lorem <span class="shadowBL">ipsum</span> dolor
</p>
</div>
<div style="float: left; margin-left: 10px;">
<div class="square shadowBR"></div>
<div style="position: relative; width: 60px; height: 60px;">
<div style="position: absolute;" class="square shadowBR"></div>
</div>
<div style="position: relative; width: 60px; height: 60px;">
<div style="position: absolute; clip: rect(40px, 45px, 45px, 40px)" class="square shadowBR"></div>
</div>
<div class="square shadowBR" style="opacity: 0.8;"></div>
<div class="square shadowBR" style="overflow: auto;"></div>
<p>
Lorem <span class="shadowBR">ipsum</span> dolor
</p>
</div>
<div style="float: left; margin-left: 10px;">
<div class="square shadowTR"></div>
<div style="position: relative; width: 60px; height: 60px;">
<div style="position: absolute;" class="square shadowTR"></div>
</div>
<div style="position: relative; width: 60px; height: 60px;">
<div style="position: absolute; clip: rect(-5px, 45px, 0, 40px)" class="square shadowTR"></div>
</div>
<div class="square shadowTR" style="opacity: 0.8;"></div>
<div class="square shadowTR" style="overflow: auto;"></div>
<p>
Lorem <span class="shadowTR">ipsum</span> dolor
</p>
</div>
<div style="float: left; margin-left: 10px;">
<div class="square shadowB"></div>
<div style="position: relative; width: 60px; height: 60px;">
<div style="position: absolute;" class="square shadowB"></div>
</div>
<div style="position: relative; width: 60px; height: 60px;">
<!-- space -->
</div>
<div class="square shadowB" style="opacity: 0.8;"></div>
<div class="square shadowB" style="overflow: auto;"></div>
<p>
Lorem <span class="shadowB">ipsum</span> dolor
</p>
</div>
</body>
</html>
2007-05-19 Mitz Pettel <mitz@webkit.org>
Reviewed by Dave Hyatt.