Implement baseline alignment support for inline blocks. Inline blocks are supposed...
authorhyatt <hyatt@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 9 Aug 2005 20:58:29 +0000 (20:58 +0000)
committerhyatt <hyatt@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 9 Aug 2005 20:58:29 +0000 (20:58 +0000)
the baseline of the last line in the block as their baseline.  For marquees we still
bottom align, since marquees really have no discernible baseline in many cases (and this
retains compatibility with WinIE).

        Reviewed by cblu

        Test cases added: 006.html in fast/inline-block

        * khtml/rendering/render_block.cpp:
        (khtml::RenderBlock::baselinePosition):
        (khtml::RenderBlock::getBaselineOfLastLineBox):
        * khtml/rendering/render_block.h:
        * khtml/rendering/render_object.h:
        (khtml::RenderObject::getBaselineOfLastLineBox):
        * layout-tests/css1/box_properties/acid_test-expected.txt:
        * layout-tests/fast/css/MarqueeLayoutTest-expected.txt:
        * layout-tests/fast/forms/007-expected.txt:
        * layout-tests/fast/inline-block/001-expected.txt:
        * layout-tests/fast/inline-block/001.html:
        * layout-tests/fast/inline-block/006-expected.txt: Added.
        * layout-tests/fast/inline-block/006.html: Added.
        * layout-tests/fast/selectors/064-expected.txt:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@10108 268f45cc-cd09-0410-ab3c-d52691b4dbfc

12 files changed:
LayoutTests/css1/box_properties/acid_test-expected.txt
LayoutTests/fast/css/MarqueeLayoutTest-expected.txt
LayoutTests/fast/forms/007-expected.txt
LayoutTests/fast/inline-block/001-expected.txt
LayoutTests/fast/inline-block/001.html
LayoutTests/fast/inline-block/006-expected.txt [new file with mode: 0644]
LayoutTests/fast/inline-block/006.html [new file with mode: 0644]
LayoutTests/fast/selectors/064-expected.txt
WebCore/ChangeLog-2005-08-23
WebCore/khtml/rendering/render_block.cpp
WebCore/khtml/rendering/render_block.h
WebCore/khtml/rendering/render_object.h

index 7984ca8c6d9db3c9c8862143624b5ba37e957f38..74e1ec2e928653b4bc8fa13a4cb065d07914de1b 100644 (file)
@@ -23,12 +23,12 @@ layer at (0,0) size 800x420
                 RenderBlock {P} at (0,0) size 139x19
                   RenderText {TEXT} at (0,4) size 28x18
                     text run at (0,4) width 28: "bang "
-                  RenderRadioButton {INPUT} at (31,3) size 12x13 [color=#000000]
+                  RenderBlock {INPUT} at (31,3) size 12x13 [color=#000000]
                   RenderText {TEXT} at (0,0) size 0x0
                 RenderBlock {P} at (0,19) size 139x19
                   RenderText {TEXT} at (0,4) size 47x18
                     text run at (0,4) width 47: "whimper "
-                  RenderRadioButton {INPUT} at (50,3) size 12x13 [color=#000000]
+                  RenderBlock {INPUT} at (50,3) size 12x13 [color=#000000]
                   RenderText {TEXT} at (0,0) size 0x0
               RenderBlock (anonymous) at (10,58) size 139x0
                 RenderInline {FORM} at (0,0) size 0x0
index 3e84aed1ee9974f8ff5400a54c0975f912190c60..0ea95744ea909fb24289140b9e3474808c0802a0 100644 (file)
@@ -1,8 +1,8 @@
-layer at (0,0) size 800x708
+layer at (0,0) size 800x890
   RenderCanvas at (0,0) size 800x600
-layer at (0,0) size 800x708
-  RenderBlock {HTML} at (0,0) size 800x708
-    RenderBody {BODY} at (8,8) size 784x692
+layer at (0,0) size 800x890
+  RenderBlock {HTML} at (0,0) size 800x890
+    RenderBody {BODY} at (8,8) size 784x874
       RenderBlock {P} at (0,0) size 784x18
         RenderText {TEXT} at (0,0) size 284x18
           text run at (0,0) width 284: "Tests: the height attribute for the marquee tag"
@@ -22,7 +22,7 @@ layer at (0,0) size 800x708
           text run at (0,18) width 50: "the text "
           text run at (50,18) width 678: "should be cut off. In the vertical group, the aqua marquee should be 200px, and the others should be 100px."
       RenderBlock {HR} at (0,174) size 784x2 [border: (1px inset #000000)]
-      RenderBlock (anonymous) at (0,184) size 784x508
+      RenderBlock (anonymous) at (0,184) size 784x690
         RenderText {TEXT} at (0,0) size 0x0
         RenderBR {BR} at (0,0) size 0x0
         RenderText {TEXT} at (0,0) size 0x0
@@ -34,7 +34,7 @@ layer at (0,0) size 800x708
         RenderBR {BR} at (0,0) size 0x0
         RenderBR {BR} at (0,168) size 0x18
         RenderBR {BR} at (0,186) size 0x18
-        RenderBlock {DIV} at (0,204) size 113x200 [bgcolor=#008000]
+        RenderBlock {DIV} at (0,390) size 113x200 [bgcolor=#008000]
           RenderText {TEXT} at (0,0) size 113x18
             text run at (0,0) width 113: "This is 200px tall."
         RenderText {TEXT} at (113,390) size 4x18
@@ -44,7 +44,7 @@ layer at (0,0) size 800x708
         RenderText {TEXT} at (521,390) size 4x18
           text run at (521,390) width 4: " "
         RenderText {TEXT} at (0,0) size 0x0
-        RenderBlock {DIV} at (0,408) size 113x100 [bgcolor=#008000]
+        RenderBlock {DIV} at (0,590) size 113x100 [bgcolor=#008000]
           RenderText {TEXT} at (0,0) size 113x18
             text run at (0,0) width 113: "This is 100px tall."
         RenderText {TEXT} at (0,0) size 0x0
index a590d6b99f026b9006c2bde44259ea11888e6559..beffe9eb87988de611a80614c23a0d38d2abfff0 100644 (file)
@@ -13,8 +13,8 @@ layer at (0,0) size 800x600
           RenderBR {BR} at (0,0) size 0x0
           RenderText {TEXT} at (0,18) size 80x18
             text run at (0,18) width 80: "Hello world."
-      RenderText {TEXT} at (115,66) size 4x18
-        text run at (115,66) width 4: " "
+      RenderText {TEXT} at (115,48) size 4x18
+        text run at (115,48) width 4: " "
       RenderFieldSet {FIELDSET} at (121,18) size 114x62 [border: (2px groove #C0C0C0)]
         RenderLegend {LEGEND} at (12,0) size 90x18
           RenderText {TEXT} at (2,0) size 86x18
index 58e6b884f7f410bd7439ab0d5d752b96eb40ea86..9f40407e0796eaa2790121827c5936e16a83a162 100644 (file)
@@ -3,15 +3,19 @@ layer 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 {P} at (0,0) size 59x40 [border: (2px solid #0000FF)]
+      RenderText {TEXT} at (0,0) size 743x36
+        text run at (0,0) width 743: "THIS TEST'S RESULTS ARE NOT CORRECT, SINCE INLINE TABLES ARE NOT BASELINE-ALIGNING"
+        text run at (0,18) width 511: "PROPERLY, AND WHEN THEY DO, THE FIRST ROW WILL BE USED. "
+      RenderBR {BR} at (0,0) size 0x0
+      RenderBlock {P} at (0,42) size 59x40 [border: (2px solid #0000FF)]
         RenderText {TEXT} at (2,2) size 55x18
           text run at (2,2) width 55: "This text"
         RenderBR {BR} at (0,0) size 0x0
         RenderText {TEXT} at (2,20) size 55x18
           text run at (2,20) width 55: "This text"
-      RenderText {TEXT} at (59,26) size 4x18
-        text run at (59,26) width 4: " "
-      RenderBlock {P} at (63,0) size 113x40 [border: (2px solid #0000FF)]
+      RenderText {TEXT} at (59,62) size 4x18
+        text run at (59,62) width 4: " "
+      RenderBlock {P} at (63,42) size 113x40 [border: (2px solid #0000FF)]
         RenderBlock (anonymous) at (2,2) size 109x0
           RenderText {TEXT} at (0,0) size 0x0
         RenderBlock {SPAN} at (2,2) size 109x36
@@ -20,9 +24,9 @@ layer at (0,0) size 800x600
           RenderBR {BR} at (0,0) size 0x0
           RenderText {TEXT} at (0,18) size 109x18
             text run at (0,18) width 109: "should also all be"
-      RenderText {TEXT} at (176,26) size 4x18
-        text run at (176,26) width 4: " "
-      RenderTable {TABLE} at (180,0) size 43x40 [border: (2px solid #0000FF)]
+      RenderText {TEXT} at (176,62) size 4x18
+        text run at (176,62) width 4: " "
+      RenderTable {TABLE} at (180,36) size 43x40 [border: (2px solid #0000FF)]
         RenderTableSection {TBODY} at (2,2) size 0x36
           RenderTableRow {TR} at (0,0) size 0x0
             RenderTableCell {TD} at (0,0) size 39x18 [r=0 c=0 rs=1 cs=1]
@@ -32,9 +36,9 @@ layer at (0,0) size 800x600
             RenderTableCell {TD} at (0,18) size 39x18 [r=1 c=0 rs=1 cs=1]
               RenderText {TEXT} at (0,0) size 39x18
                 text run at (0,0) width 39: "on the"
-      RenderText {TEXT} at (223,26) size 4x18
-        text run at (223,26) width 4: " "
-      RenderTable {TABLE} at (227,0) size 71x40 [border: (2px solid #0000FF)]
+      RenderText {TEXT} at (223,62) size 4x18
+        text run at (223,62) width 4: " "
+      RenderTable {TABLE} at (227,36) size 71x40 [border: (2px solid #0000FF)]
         RenderTableSection {TBODY} at (2,2) size 0x36
           RenderTableRow {TR} at (0,0) size 0x0
             RenderTableCell {TD} at (0,0) size 67x18 [r=0 c=0 rs=1 cs=1]
index eb0978199b6ea9ed333d2d620e635f92f8b76df8..0d8a1a2d1346235168099e5b2e1504777cfd3d7d 100644 (file)
@@ -1,5 +1,10 @@
 <html>
-<body><p style="margin:0;display:inline-block;border:2px solid blue;">This text<br>This text</p>
+<body>
+THIS TEST'S RESULTS ARE NOT CORRECT, SINCE INLINE TABLES ARE NOT
+BASELINE-ALIGNING PROPERLY, AND WHEN THEY DO, THE FIRST ROW WILL BE
+USED.
+<br>
+<p style="margin:0;display:inline-block;border:2px solid blue;">This text<br>This text</p>
 <p style="margin: 0; border: 2px solid blue; display:inline-block">
 <span style="display:block">should all be<br>should also all be</span></p>
 <table style="margin: 0; display: inline-table; border:2px solid blue" cellpadding=0 cellspacing=0>
diff --git a/LayoutTests/fast/inline-block/006-expected.txt b/LayoutTests/fast/inline-block/006-expected.txt
new file mode 100644 (file)
index 0000000..d91ae19
--- /dev/null
@@ -0,0 +1,34 @@
+layer at (0,0) size 800x600
+  RenderCanvas 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 772x36
+        text run at (0,0) width 313: "This is a baseline alignment test for inline blocks. "
+        text run at (313,0) width 459: "The last lines of the two red-bordered inline blocks should line up and be"
+        text run at (0,18) width 102: "on the baseline. "
+      RenderBR {BR} at (0,0) size 0x0
+      RenderBlock {DIV} at (0,64) size 255x60 [border: (2px solid #FF0000)]
+        RenderText {TEXT} at (12,12) size 81x18
+          text run at (12,12) width 81: "This is block"
+        RenderBR {BR} at (0,0) size 0x0
+        RenderText {TEXT} at (12,30) size 231x18
+          text run at (12,30) width 83: "number one. "
+          text run at (95,30) width 148: "This line is the last one."
+      RenderText {TEXT} at (255,94) size 4x18
+        text run at (255,94) width 4: " "
+      RenderBlock {DIV} at (259,36) size 192x128 [border: (2px solid #FF0000)]
+        RenderBlock (anonymous) at (12,12) size 168x36
+          RenderText {TEXT} at (0,0) size 42x18
+            text run at (0,0) width 42: "This is"
+          RenderBR {BR} at (0,0) size 0x0
+          RenderText {TEXT} at (0,18) size 80x18
+            text run at (0,18) width 80: "number two."
+        RenderBlock {DIV} at (12,48) size 168x38
+          RenderText {TEXT} at (10,10) size 148x18
+            text run at (10,10) width 148: "This line is the last one."
+      RenderText {TEXT} at (451,94) size 139x18
+        text run at (451,94) width 139: " More text on the line."
+      RenderBR {BR} at (0,0) size 0x0
+      RenderText {TEXT} at (0,164) size 87x18
+        text run at (0,164) width 87: "The next line."
diff --git a/LayoutTests/fast/inline-block/006.html b/LayoutTests/fast/inline-block/006.html
new file mode 100644 (file)
index 0000000..a4bf064
--- /dev/null
@@ -0,0 +1,17 @@
+<head>
+<style>
+div { display: inline-block; border:2px solid red; padding:10px; }
+</style>
+</head>
+<body>
+This is a baseline alignment test for inline blocks.  The last lines of the two red-bordered
+inline blocks should line up and be on the baseline.
+<br>
+
+<div>This is block<br>number one.  This line is the last one.</div>
+<div style="padding-bottom:40px">This is<br>number two.
+<div style="border:0px; display:block">This line is the last one.</div>
+</div>
+More text on the line.<br>
+The next line.
+</body>
index 6739db2d89d53fe275eb33fe208696ab2e7f8bd3..d8b8e9bb18dfd9a0d65bf07a490d6925f69cb70b 100644 (file)
@@ -1,15 +1,15 @@
 layer at (0,0) size 800x600
   RenderCanvas at (0,0) size 800x600
-layer at (0,0) size 800x91
-  RenderBlock {HTML} at (0,0) size 800x91
-    RenderBody {BODY} at (8,16) size 784x59
-      RenderBlock {DIV} at (0,0) size 784x59
+layer at (0,0) size 800x87
+  RenderBlock {HTML} at (0,0) size 800x87
+    RenderBody {BODY} at (8,16) size 784x55
+      RenderBlock {DIV} at (0,0) size 784x55
         RenderBlock {P} at (0,0) size 784x18 [color=#00FF00]
           RenderInline {A} at (0,0) size 279x18 [color=#000000]
             RenderText {TEXT} at (0,0) size 279x18
               text run at (0,0) width 279: "This text should turn green while it is active."
           RenderText {TEXT} at (0,0) size 0x0
-        RenderBlock {P} at (0,34) size 784x25 [color=#00FF00]
+        RenderBlock {P} at (0,34) size 784x21 [color=#00FF00]
           RenderBlock {BUTTON} at (0,0) size 248x21 [color=#000000] [bgcolor=#C0C0C0] [border: (2px outset #C0C0C0)]
             RenderText {TEXT} at (4,4) size 240x13
               text run at (4,4) width 240: "This text should turn green while it is active."
index e34b7d5dcf1dc2b89a591695bdf089e0cb417ea7..bb44e2662fa253633637635f77f858dd8946869f 100644 (file)
@@ -1,3 +1,29 @@
+2005-08-09  David Hyatt  <hyatt@apple.com>
+
+       Implement baseline alignment support for inline blocks.  Inline blocks are supposed to use
+       the baseline of the last line in the block as their baseline.  For marquees we still
+       bottom align, since marquees really have no discernible baseline in many cases (and this
+       retains compatibility with WinIE).
+       
+        Reviewed by cblu
+
+        Test cases added: 006.html in fast/inline-block
+
+        * khtml/rendering/render_block.cpp:
+        (khtml::RenderBlock::baselinePosition):
+        (khtml::RenderBlock::getBaselineOfLastLineBox):
+        * khtml/rendering/render_block.h:
+        * khtml/rendering/render_object.h:
+        (khtml::RenderObject::getBaselineOfLastLineBox):
+        * layout-tests/css1/box_properties/acid_test-expected.txt:
+        * layout-tests/fast/css/MarqueeLayoutTest-expected.txt:
+        * layout-tests/fast/forms/007-expected.txt:
+        * layout-tests/fast/inline-block/001-expected.txt:
+        * layout-tests/fast/inline-block/001.html:
+        * layout-tests/fast/inline-block/006-expected.txt: Added.
+        * layout-tests/fast/inline-block/006.html: Added.
+        * layout-tests/fast/selectors/064-expected.txt:
+
 2005-08-09  Vicki Murley  <vicki@apple.com>
 
         Fixed by Anders Carlsson, Reviewed by Maciej.
index 8d4844a9286693f63d0d300770384e28edd0944e..785f3dac8f58be79202f6dea1643f867926513e1 100644 (file)
@@ -3188,8 +3188,18 @@ short RenderBlock::baselinePosition(bool b, bool isRootLineBox) const
     // box, then the fact that we're an inline-block is irrelevant, and we behave
     // just like a block.
     if (isReplaced() && !isRootLineBox) {
+        // For "leaf" theme objects, let the theme decide what the baseline position is.
+        // FIXME: Might be better to have a custom CSS property instead, so that if the theme
+        // is turned off, checkboxes/radios will still have decent baselines.
         if (style()->hasAppearance() && !theme()->isControlContainer(style()->appearance()))
             return theme()->baselinePosition(this);
+            
+        // CSS2.1 states that the baseline of an inline block is the baseline of the last line box in
+        // the normal flow.  We make an exception for marquees, since their baselines are meaningless
+        // (the content inside them moves).  This matches WinIE as well, which just bottom-aligns them.
+        int baselinePos = (m_layer && m_layer->marquee()) ? -1 : getBaselineOfLastLineBox();
+        if (baselinePos != -1)
+            return marginTop() + baselinePos;
         return height() + marginTop() + marginBottom();
     }
     return RenderFlow::baselinePosition(b, isRootLineBox);
@@ -3219,6 +3229,30 @@ int RenderBlock::getBaselineOfFirstLineBox() const
     return -1;
 }
 
+int RenderBlock::getBaselineOfLastLineBox() const
+{
+    if (!isBlockFlow())
+        return RenderFlow::getBaselineOfLastLineBox();
+
+    if (childrenInline()) {
+        if (m_lastLineBox)
+            return m_lastLineBox->yPos() + m_lastLineBox->baseline();
+        else
+            return -1;
+    }
+    else {
+        for (RenderObject* curr = lastChild(); curr; curr = curr->previousSibling()) {
+            if (!curr->isFloatingOrPositioned()) {
+                int result = curr->getBaselineOfLastLineBox();
+                if (result != -1)
+                    return curr->yPos() + result; // Translate to our coordinate space.
+            }
+        }
+    }
+
+    return -1;
+}
+
 RenderBlock* RenderBlock::firstLineBlock() const
 {
     const RenderObject* firstLineBlock = this;
index 20e82c888d6cdb3cb012a07d7fafab7c6ab2ae6b..3c078140e83212e8c70fc976898eb3b3ad888081 100644 (file)
@@ -197,6 +197,7 @@ public:
     void calcBlockMinMaxWidth();
 
     virtual int getBaselineOfFirstLineBox() const;
+    virtual int getBaselineOfLastLineBox() const;
 
     RootInlineBox* firstRootBox() const { return static_cast<RootInlineBox*>(m_firstLineBox); }
     RootInlineBox* lastRootBox() const { return static_cast<RootInlineBox*>(m_lastLineBox); }
index 8d8fc7c02d9e8606f49e34f91b3ad67fc8f9a356..1f33e5332f569854ea8f68a90ff5ada5f3849a03 100644 (file)
@@ -174,6 +174,7 @@ public:
     bool hasClip() { return isPositioned() &&  style()->hasClip(); }
     
     virtual int getBaselineOfFirstLineBox() const { return -1; } 
+    virtual int getBaselineOfLastLineBox() const { return -1; } 
     
     // Obtains the nearest enclosing block (including this block) that contributes a first-line style to our inline
     // children.