Attachment #138314 for bug #81084

View Details Raw Unified Return to Bug 81084

| Differences between



2012-04-23  Arpita Bahuguna  <arpitabahuguna@gmail.com>

        Fix rendering of replaced elements with relative dimensions within a table cell.
        https://bugs.webkit.org/show_bug.cgi?id=81084

        Reviewed by NOBODY (OOPS!).

        Tests: fast/replaced/table-cell-width-auto.html
               fast/replaced/table-cell-width-fixed.html
               fast/replaced/table-cell-width-percent.html

        * rendering/RenderReplaced.cpp:
        Changes have been made for setting the proper width for table cells (auto/percent)
        containing replaced elements with relative dimensions.

        (WebCore::RenderReplaced::computePreferredLogicalWidths):
        The preferred logical width is computed based on whether the containing table has
        relative dimensions or not. An extra check has been added for the same.

        (WebCore::hasRelativeWidthOrHeight):
        Checks whether the given style (of any renderer) has auto/percent (relative) dimensions.

        (WebCore):
        (WebCore::RenderReplaced::hasContainingTableWithRelativeDimensions):
        Checks whether any containing block is a table with auto/percent dimensions.

        * rendering/RenderReplaced.h:
        (RenderReplaced):
        Added declaration for newly added function hasContainingTableWithRelativeDimensions().

2012-04-23  Pavel Feldman  <pfeldman@chromium.org>

        Web Inspector: introduce String.prototype.starts/endsWith and use it all over the place.



    if (style()->maxWidth().isFixed())
        m_maxPreferredLogicalWidth = min<LayoutUnit>(m_maxPreferredLogicalWidth, style()->maxWidth().value() + (style()->boxSizing() == CONTENT_BOX ? borderAndPadding : ZERO_LAYOUT_UNIT));

    if (hasRelativeDimensions() && !hasContainingTableWithRelativeDimensions())
        m_minPreferredLogicalWidth = 0;
    else
        m_minPreferredLogicalWidth = m_maxPreferredLogicalWidth;

    return r;
}

static bool hasRelativeWidthOrHeight(const RenderStyle* style)
{
    return style->height().isAuto() || style->height().isPercent() || style->width().isAuto() || style->width().isPercent();
}

bool RenderReplaced::hasContainingTableWithRelativeDimensions() const
{
    // In case containing block is a table with auto/percent dimensions, the max preferred logical width should be used.
    // Since table cells no longer squeeze replaced elements with relative dimensions (height), we should also ensure
    // that the containing table cells too are expanded to reflect the proper width.
    // https://bugs.webkit.org/show_bug.cgi?id=81084
    bool hasContainingTableWithRelativeDimensions = false;

    for (const RenderBlock* containingBlock = this->containingBlock(); containingBlock && !containingBlock->isRenderView()
         && hasRelativeWidthOrHeight(containingBlock->style()); containingBlock = containingBlock->containingBlock()) {
        if (containingBlock->isTable()) {
            hasContainingTableWithRelativeDimensions = true;
            break;
        }
    }

    return hasContainingTableWithRelativeDimensions;
}

}


Lines 79-84 private: Source/WebCore/rendering/RenderReplaced.h_sec1
- Source/WebCore/rendering/RenderReplaced.h +2 lines
79	virtual LayoutRect selectionRectForRepaint(RenderBoxModelObject* repaintContainer, bool clipToVisibleContent = true);	79	virtual LayoutRect selectionRectForRepaint(RenderBoxModelObject* repaintContainer, bool clipToVisibleContent = true);
80	void computeIntrinsicRatioInformationForRenderBox(RenderBox*, FloatSize& intrinsicSize, double& intrinsicRatio, bool& isPercentageIntrinsicSize) const;	80	void computeIntrinsicRatioInformationForRenderBox(RenderBox*, FloatSize& intrinsicSize, double& intrinsicRatio, bool& isPercentageIntrinsicSize) const;
81		81
		82	bool hasContainingTableWithRelativeDimensions() const;
		83
82	IntSize m_intrinsicSize;	84	IntSize m_intrinsicSize;
83	};	85	};
84		86



2012-04-23  Arpita Bahuguna  <arpitabahuguna@gmail.com>

        Fix rendering of replaced elements with relative dimensions within a table cell.
        https://bugs.webkit.org/show_bug.cgi?id=81084

        Reviewed by NOBODY (OOPS!).

        * fast/replaced/table-cell-width-auto-expected.txt: Added.
        * fast/replaced/table-cell-width-auto.html: Added.
        For replaced elements with relative dimensions within a table cell (with auto height/width),
        the table cell should get the proper width.

        * fast/replaced/table-cell-width-fixed-expected.txt: Added.
        * fast/replaced/table-cell-width-fixed.html: Added.
        For replaced elements with relative dimensions (percent height) within a table
        cell (with fixed height/width), the table cell should get the proper width.

        * fast/replaced/table-cell-width-percent-expected.txt: Added.
        * fast/replaced/table-cell-width-percent.html: Added.
        For replaced elements with relative dimensions (percent height) within a table
        cell (with percent height/width), the table cell should get the proper width.

        * platform/chromium/test_expectations.txt:
        * platform/efl/Skipped:
        * platform/gtk/test_expectations.txt:
        * platform/mac-wk2/Skipped:
        * platform/mac/Skipped:
        * platform/qt/Skipped:
        * platform/wincairo/Skipped:
        Added expectation/skipped test for fast/replaced/width100percent-image.html.
        This needs to be rebaselined once the patch is applied.

2012-04-23  Kent Tamura  <tkent@chromium.org>

        Add test function to get placeholder string



Test for Bugzilla Bug 81084: Fix rendering of replaced elements with relative dimensions within a table cell.

This test checks that with replaced elements with relative dimensions within a table cell (with auto height/width), the table cell gets the proper width.

On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".


PASS getWidth('canvas-height-percent') is '300px'
PASS getHeight('canvas-height-percent') is '150px'
PASS getWidth('canvas-width-percent') is '300px'
PASS getHeight('canvas-width-percent') is '150px'
PASS getWidth('embed-height-percent') is '300px'
PASS getHeight('embed-height-percent') is '150px'
PASS getWidth('embed-width-percent') is '300px'
PASS getHeight('embed-width-percent') is '150px'
PASS getWidth('img-height-percent') is '100px'
PASS getHeight('img-height-percent') is '100px'
PASS getWidth('img-width-percent') is '100px'
PASS getHeight('img-width-percent') is '100px'
PASS getWidth('img-height-percent-nested') is '100px'
PASS getHeight('img-height-percent-nested') is '100px'
PASS getWidth('img-width-percent-nested') is '100px'
PASS getHeight('img-width-percent-nested') is '100px'
PASS getWidth('object-height-percent') is '300px'
PASS getHeight('object-height-percent') is '150px'
PASS getWidth('object-width-percent') is '300px'
PASS getHeight('object-width-percent') is '150px'
PASS getWidth('button-height-percent') != '0px' is true
PASS getHeight('button-height-percent') != '0px' is true
PASS getWidth('button-width-percent') != '0px' is true
PASS getHeight('button-width-percent') != '0px' is true
PASS getWidth('input-button-height-percent') != '0px' is true
PASS getHeight('input-button-height-percent') != '0px' is true
PASS getWidth('input-button-width-percent') != '0px' is true
PASS getHeight('input-button-width-percent') != '0px' is true
PASS getWidth('input-checkbox-height-percent') != '0px' is true
PASS getHeight('input-checkbox-height-percent') != '0px' is true
PASS getWidth('input-checkbox-width-percent') != '0px' is true
PASS getHeight('input-checkbox-width-percent') != '0px' is true
PASS getWidth('input-file-height-percent') != '0px' is true
PASS getHeight('input-file-height-percent') != '0px' is true
PASS getWidth('input-file-width-percent') != '0px' is true
PASS getHeight('input-file-width-percent') != '0px' is true
PASS getWidth('input-image-height-percent') is '100px'
PASS getHeight('input-image-height-percent') is '100px'
PASS getWidth('input-image-width-percent') is '100px'
PASS getHeight('input-image-width-percent') is '100px'
PASS getWidth('input-radio-height-percent') != '0px' is true
PASS getHeight('input-radio-height-percent') != '0px' is true
PASS getWidth('input-radio-width-percent') != '0px' is true
PASS getHeight('input-radio-width-percent') != '0px' is true
PASS getWidth('select-height-percent') != '0px' is true
PASS getHeight('select-height-percent') != '0px' is true
PASS getWidth('select-width-percent') != '0px' is true
PASS getHeight('select-width-percent') != '0px' is true
PASS successfullyParsed is true

TEST COMPLETE




<html>
<head>
<title>Test for Buzilla Bug 81084: Fix rendering of replaced elements with relative dimensions within a table cell.</title>
<script src="../js/resources/js-test-pre.js"></script>
<script>

function getComputedStyleForElement(element, cssPropertyName)
{
    if (window.getComputedStyle) {
        return window.getComputedStyle(element, '').getPropertyValue(cssPropertyName.replace(/([A-Z])/g, "-$1").toLowerCase());
    }
    if (element.currentStyle) {
        return element.currentStyle[cssPropertyName];
    }
    return null;
}

function getWidth(id)
{
    return getComputedStyleForElement(document.getElementById(id), 'width');
}

function getHeight(id)
{
    return getComputedStyleForElement(document.getElementById(id), 'height');
}

function test()
{
    description("This test checks that with replaced elements with relative dimensions within a table cell (with auto height/width), the table cell gets the proper width.");

    shouldBe("getWidth('canvas-height-percent')", "'300px'");
    shouldBe("getHeight('canvas-height-percent')", "'150px'");
    shouldBe("getWidth('canvas-width-percent')", "'300px'");
    shouldBe("getHeight('canvas-width-percent')", "'150px'");	

    shouldBe("getWidth('embed-height-percent')", "'300px'");
    shouldBe("getHeight('embed-height-percent')", "'150px'");
    shouldBe("getWidth('embed-width-percent')", "'300px'");
    shouldBe("getHeight('embed-width-percent')", "'150px'");

    shouldBe("getWidth('img-height-percent')", "'100px'");
    shouldBe("getHeight('img-height-percent')", "'100px'");
    shouldBe("getWidth('img-width-percent')", "'100px'");
    shouldBe("getHeight('img-width-percent')", "'100px'");

    shouldBe("getWidth('img-height-percent-nested')", "'100px'");
    shouldBe("getHeight('img-height-percent-nested')", "'100px'");
    shouldBe("getWidth('img-width-percent-nested')", "'100px'");
    shouldBe("getHeight('img-width-percent-nested')", "'100px'");

    shouldBe("getWidth('object-height-percent')", "'300px'");
    shouldBe("getHeight('object-height-percent')", "'150px'");
    shouldBe("getWidth('object-width-percent')", "'300px'");
    shouldBe("getHeight('object-width-percent')", "'150px'");

    shouldBeTrue("getWidth('button-height-percent') != '0px'");
    shouldBeTrue("getHeight('button-height-percent') != '0px'");
    shouldBeTrue("getWidth('button-width-percent') != '0px'");
    shouldBeTrue("getHeight('button-width-percent') != '0px'");

    shouldBeTrue("getWidth('input-button-height-percent') != '0px'");
    shouldBeTrue("getHeight('input-button-height-percent') != '0px'");	
    shouldBeTrue("getWidth('input-button-width-percent') != '0px'");
    shouldBeTrue("getHeight('input-button-width-percent') != '0px'");		

    shouldBeTrue("getWidth('input-checkbox-height-percent') != '0px'");
    shouldBeTrue("getHeight('input-checkbox-height-percent') != '0px'");	
    shouldBeTrue("getWidth('input-checkbox-width-percent') != '0px'");
    shouldBeTrue("getHeight('input-checkbox-width-percent') != '0px'");

    shouldBeTrue("getWidth('input-file-height-percent') != '0px'");
    shouldBeTrue("getHeight('input-file-height-percent') != '0px'");	
    shouldBeTrue("getWidth('input-file-width-percent') != '0px'");
    shouldBeTrue("getHeight('input-file-width-percent') != '0px'");

    shouldBe("getWidth('input-image-height-percent')", "'100px'");
    shouldBe("getHeight('input-image-height-percent')", "'100px'");
    shouldBe("getWidth('input-image-width-percent')", "'100px'");
    shouldBe("getHeight('input-image-width-percent')", "'100px'");

    shouldBeTrue("getWidth('input-radio-height-percent') != '0px'");
    shouldBeTrue("getHeight('input-radio-height-percent') != '0px'");	
    shouldBeTrue("getWidth('input-radio-width-percent') != '0px'");
    shouldBeTrue("getHeight('input-radio-width-percent') != '0px'");

    shouldBeTrue("getWidth('select-height-percent') != '0px'");
    shouldBeTrue("getHeight('select-height-percent') != '0px'");	
    shouldBeTrue("getWidth('select-width-percent') != '0px'");
    shouldBeTrue("getHeight('select-width-percent') != '0px'");

    var elements = document.getElementsByTagName('table');
    while (elements.length > 0) {
        elements[0].parentNode.removeChild(elements[0]);
        elements = document.getElementsByTagName('table');
    }
		
    isSuccessfullyParsed();
}
</script>

<style>
.height100percent {
    height: 100%;
}
.width100percent {
    width: 100%;
}
table {
    font-family: ahem;
    width: 600px;
}
</style>

</head>
<body onload="test()">

<p>Test for Bugzilla <a href="https://bugs.webkit.org/show_bug.cgi?id=81084">Bug 81084</a>: Fix rendering of replaced elements with relative dimensions within a table cell.</p>

<!-- Canvas -->
<table><tr><td id="canvas-height-percent"><canvas class="height100percent"></canvas></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td id="canvas-width-percent"><canvas class="width100percent"></canvas></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Embed -->
<!-- Fails on Firefox -->
<table><tr><td id="embed-height-percent"><embed class="height100percent"></embed></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td id="embed-width-percent"><embed class="width100percent"></embed></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Image -->
<table><tr><td id="img-height-percent"><img src="resources/square-blue-100x100.png" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td id="img-width-percent"><img src="resources/square-blue-100x100.png" class="width100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Nested image -->
<table><tr><td id="img-height-percent-nested"><div><img src="resources/square-blue-100x100.png" class="height100percent"></div></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td id="img-width-percent-nested"><div><img src="resources/square-blue-100x100.png" class="width100percent"></div></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Object -->
<!-- Fails on Firefox -->
<table><tr><td id="object-height-percent"><object class="height100percent"></object></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td id="object-width-percent"><object class="width100percent"></object></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Button -->
<table><tr><td id="button-height-percent"><button class="height100percent" value="Button"></button></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td id="button-width-percent"><button class="width100percent" value="Button"></button></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Input Button -->
<table><tr><td id="input-button-height-percent"><input type="button" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td id="input-button-width-percent"><input type="button" class="width100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Input checkbox -->
<table><tr><td id="input-checkbox-height-percent"><input type="checkbox" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td id="input-checkbox-width-percent"><input type="checkbox" class="width100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Input file -->
<table><tr><td id="input-file-height-percent"><input type="file" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td id="input-file-width-percent"><input type="file" width="100%"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Input image -->
<table><tr><td id="input-image-height-percent"><input type="image" src="resources/square-blue-100x100.png" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td id="input-image-width-percent"><input type="image" src="resources/square-blue-100x100.png" class="width100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Input radio -->
<table><tr><td id="input-radio-height-percent"><input type="radio" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td id="input-radio-width-percent"><input type="radio" class="width100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Select -->
<table><tr><td id="select-height-percent"><select class="height100percent"><option>Option</option></select></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td id="select-width-percent"><select width="100%"><option>Option</option></select></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<p id="description"></p>
<div id="console"></div>
</body>
</html>



Test for Bugzilla Bug 81084: Fix rendering of replaced elements with relative dimensions within a table cell.

This test checks that with replaced elements with relative dimensions (percent height) within a table cell (with fixed height/width), the table cell gets the proper width.

On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".


PASS getWidth('canvas-td-height-fixed') is '200px'
PASS getHeight('canvas-td-height-fixed') is '100px'
PASS getWidth('canvas-td-width-fixed') is '300px'
PASS getHeight('canvas-td-width-fixed') is '150px'
PASS getWidth('embed-td-height-fixed') is '300px'
PASS getHeight('embed-td-height-fixed') is '100px'
PASS getWidth('embed-td-width-fixed') is '300px'
PASS getHeight('embed-td-width-fixed') is '150px'
PASS getWidth('img-td-height-fixed') is '100px'
PASS getHeight('img-td-height-fixed') is '100px'
PASS getWidth('img-td-width-fixed') is '100px'
PASS getHeight('img-td-width-fixed') is '100px'
PASS getWidth('img-td-height-fixed-nested') is '100px'
PASS getHeight('img-td-height-fixed-nested') is '100px'
PASS getWidth('img-td-width-fixed-nested') is '100px'
PASS getHeight('img-td-width-fixed-nested') is '100px'
PASS getWidth('object-td-height-fixed') is '300px'
PASS getHeight('object-td-height-fixed') is '100px'
PASS getWidth('object-td-width-fixed') is '300px'
PASS getHeight('object-td-width-fixed') is '150px'
PASS getWidth('button-td-height-fixed') != '0px' is true
PASS getHeight('button-td-height-fixed') != '0px' is true
PASS getWidth('button-td-width-fixed') != '0px' is true
PASS getHeight('button-td-width-fixed') != '0px' is true
PASS getWidth('input-button-td-height-fixed') != '0px' is true
PASS getHeight('input-button-td-height-fixed') != '0px' is true
PASS getWidth('input-button-td-width-fixed') != '0px' is true
PASS getHeight('input-button-td-width-fixed') != '0px' is true
PASS getWidth('input-checkbox-td-height-fixed') != '0px' is true
PASS getHeight('input-checkbox-td-height-fixed') != '0px' is true
PASS getWidth('input-checkbox-td-width-fixed') != '0px' is true
PASS getHeight('input-checkbox-td-width-fixed') != '0px' is true
PASS getWidth('input-file-td-height-fixed') != '0px' is true
PASS getHeight('input-file-td-height-fixed') != '0px' is true
PASS getWidth('input-file-td-width-fixed') != '0px' is true
PASS getHeight('input-file-td-width-fixed') != '0px' is true
PASS getWidth('input-image-td-height-fixed') is '100px'
PASS getHeight('input-image-td-height-fixed') is '100px'
PASS getWidth('input-image-td-width-fixed') is '100px'
PASS getHeight('input-image-td-width-fixed') is '100px'
PASS getWidth('input-radio-td-height-fixed') != '0px' is true
PASS getHeight('input-radio-td-height-fixed') != '0px' is true
PASS getWidth('input-radio-td-width-fixed') != '0px' is true
PASS getHeight('input-radio-td-width-fixed') != '0px' is true
PASS getWidth('select-td-height-fixed') != '0px' is true
PASS getHeight('select-td-height-fixed') != '0px' is true
PASS getWidth('select-td-width-fixed') != '0px' is true
PASS getHeight('select-td-width-fixed') != '0px' is true
PASS successfullyParsed is true

TEST COMPLETE




<html>
<head>
<title>Test for Buzilla Bug 81084: Fix rendering of replaced elements with relative dimensions within a table cell.</title>
<script src="../js/resources/js-test-pre.js"></script>
<script>

function getComputedStyleForElement(element, cssPropertyName)
{
    if (window.getComputedStyle) {
        return window.getComputedStyle(element, '').getPropertyValue(cssPropertyName.replace(/([A-Z])/g, "-$1").toLowerCase());
    }
    if (element.currentStyle) {
        return element.currentStyle[cssPropertyName];
    }
    return null;
}

function getWidth(id)
{
    return getComputedStyleForElement(document.getElementById(id), 'width');
}

function getHeight(id)
{
    return getComputedStyleForElement(document.getElementById(id), 'height');
}

function test()
{
    description("This test checks that with replaced elements with relative dimensions (percent height) within a table cell (with fixed height/width), the table cell gets the proper width.");

    shouldBe("getWidth('canvas-td-height-fixed')", "'200px'");
    shouldBe("getHeight('canvas-td-height-fixed')", "'100px'");
    shouldBe("getWidth('canvas-td-width-fixed')", "'300px'");
    shouldBe("getHeight('canvas-td-width-fixed')", "'150px'");	

    shouldBe("getWidth('embed-td-height-fixed')", "'300px'");
    shouldBe("getHeight('embed-td-height-fixed')", "'100px'");
    shouldBe("getWidth('embed-td-width-fixed')", "'300px'");
    shouldBe("getHeight('embed-td-width-fixed')", "'150px'");

    shouldBe("getWidth('img-td-height-fixed')", "'100px'");
    shouldBe("getHeight('img-td-height-fixed')", "'100px'");
    shouldBe("getWidth('img-td-width-fixed')", "'100px'");
    shouldBe("getHeight('img-td-width-fixed')", "'100px'");

    shouldBe("getWidth('img-td-height-fixed-nested')", "'100px'");
    shouldBe("getHeight('img-td-height-fixed-nested')", "'100px'");
    shouldBe("getWidth('img-td-width-fixed-nested')", "'100px'");
    shouldBe("getHeight('img-td-width-fixed-nested')", "'100px'");

    shouldBe("getWidth('object-td-height-fixed')", "'300px'");
    shouldBe("getHeight('object-td-height-fixed')", "'100px'");
    shouldBe("getWidth('object-td-width-fixed')", "'300px'");
    shouldBe("getHeight('object-td-width-fixed')", "'150px'");

    shouldBeTrue("getWidth('button-td-height-fixed') != '0px'");
    shouldBeTrue("getHeight('button-td-height-fixed') != '0px'");
    shouldBeTrue("getWidth('button-td-width-fixed') != '0px'");
    shouldBeTrue("getHeight('button-td-width-fixed') != '0px'");

    shouldBeTrue("getWidth('input-button-td-height-fixed') != '0px'");
    shouldBeTrue("getHeight('input-button-td-height-fixed') != '0px'");	
    shouldBeTrue("getWidth('input-button-td-width-fixed') != '0px'");
    shouldBeTrue("getHeight('input-button-td-width-fixed') != '0px'");		

    shouldBeTrue("getWidth('input-checkbox-td-height-fixed') != '0px'");
    shouldBeTrue("getHeight('input-checkbox-td-height-fixed') != '0px'");	
    shouldBeTrue("getWidth('input-checkbox-td-width-fixed') != '0px'");
    shouldBeTrue("getHeight('input-checkbox-td-width-fixed') != '0px'");

    shouldBeTrue("getWidth('input-file-td-height-fixed') != '0px'");
    shouldBeTrue("getHeight('input-file-td-height-fixed') != '0px'");	
    shouldBeTrue("getWidth('input-file-td-width-fixed') != '0px'");
    shouldBeTrue("getHeight('input-file-td-width-fixed') != '0px'");

    shouldBe("getWidth('input-image-td-height-fixed')", "'100px'");
    shouldBe("getHeight('input-image-td-height-fixed')", "'100px'");
    shouldBe("getWidth('input-image-td-width-fixed')", "'100px'");
    shouldBe("getHeight('input-image-td-width-fixed')", "'100px'");

    shouldBeTrue("getWidth('input-radio-td-height-fixed') != '0px'");
    shouldBeTrue("getHeight('input-radio-td-height-fixed') != '0px'");	
    shouldBeTrue("getWidth('input-radio-td-width-fixed') != '0px'");
    shouldBeTrue("getHeight('input-radio-td-width-fixed') != '0px'");

    shouldBeTrue("getWidth('select-td-height-fixed') != '0px'");
    shouldBeTrue("getHeight('select-td-height-fixed') != '0px'");	
    shouldBeTrue("getWidth('select-td-width-fixed') != '0px'");
    shouldBeTrue("getHeight('select-td-width-fixed') != '0px'");

    var elements = document.getElementsByTagName('table');
    while (elements.length > 0) {
        elements[0].parentNode.removeChild(elements[0]);
        elements = document.getElementsByTagName('table');
    }
		
    isSuccessfullyParsed();
}
</script>

<style>
.height100percent {
    height: 100%;
}
table {
    font-family: ahem;
    width: 600px;
}
</style>

</head>
<body onload="test()">

<p>Test for Bugzilla <a href="https://bugs.webkit.org/show_bug.cgi?id=81084">Bug 81084</a>: Fix rendering of replaced elements with relative dimensions within a table cell.</p>

<!-- Canvas -->
<table><tr><td height="100px" id="canvas-td-height-fixed"><canvas class="height100percent"></canvas></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td width="100px" id="canvas-td-width-fixed"><canvas class="height100percent"></canvas></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Embed -->
<!-- Fails on Firefox -->
<table><tr><td height="100px" id="embed-td-height-fixed"><embed class="height100percent"></embed></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td width="100px" id="embed-td-width-fixed"><embed class="height100percent"></embed></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Image -->
<table><tr><td height="100px" id="img-td-height-fixed"><img src="resources/square-blue-100x100.png" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td width="100px" id="img-td-width-fixed"><img src="resources/square-blue-100x100.png" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Nested image -->
<table><tr><td height="100px" id="img-td-height-fixed-nested"><div><img src="resources/square-blue-100x100.png" class="height100percent"></div></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td width="100px" id="img-td-width-fixed-nested"><div><img src="resources/square-blue-100x100.png" class="height100percent"></div></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Object -->
<!-- Fails on Firefox -->
<table><tr><td height="100px" id="object-td-height-fixed"><object class="height100percent"></object></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td width="100px" id="object-td-width-fixed"><object class="height100percent"></object></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Button -->
<table><tr><td height="100px" id="button-td-height-fixed"><button class="height100percent" value="Button"></button></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td width="100px" id="button-td-width-fixed"><button class="height100percent" value="Button"></button></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Input Button -->
<table><tr><td height="100px" id="input-button-td-height-fixed"><input type="button" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td width="100px" id="input-button-td-width-fixed"><input type="button" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Input checkbox -->
<table><tr><td height="100px" id="input-checkbox-td-height-fixed"><input type="checkbox" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td width="100px" id="input-checkbox-td-width-fixed"><input type="checkbox" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Input file -->
<table><tr><td height="100px" id="input-file-td-height-fixed"><input type="file" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td width="100px" id="input-file-td-width-fixed"><input type="file" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Input image -->
<table><tr><td height="100px" id="input-image-td-height-fixed"><input type="image" src="resources/square-blue-100x100.png" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td width="100px" id="input-image-td-width-fixed"><input type="image" src="resources/square-blue-100x100.png" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Input radio -->
<table><tr><td height="100px" id="input-radio-td-height-fixed"><input type="radio" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td width="100px" id="input-radio-td-width-fixed"><input type="radio" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Select -->
<table><tr><td height="100px" id="select-td-height-fixed"><select class="height100percent"><option>Option</option></select></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td width="100px" id="select-td-width-fixed"><select class="height100percent"><option>Option</option></select></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<p id="description"></p>
<div id="console"></div>
</body>
</html>



Test for Bugzilla Bug 81084: Fix rendering of replaced elements with relative dimensions within a table cell.

This test checks that with replaced elements with relative dimensions (percent height) within a table cell (with percent height/width), the table cell gets the proper width.

On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".


PASS getWidth('canvas-td-height-percent') is '300px'
PASS getHeight('canvas-td-height-percent') is '150px'
PASS getWidth('canvas-td-width-percent') is '490px'
PASS getHeight('canvas-td-width-percent') is '150px'
PASS getWidth('embed-td-height-percent') is '300px'
PASS getHeight('embed-td-height-percent') is '150px'
PASS getWidth('embed-td-width-percent') is '490px'
PASS getHeight('embed-td-width-percent') is '150px'
PASS getWidth('img-td-height-percent') is '100px'
PASS getHeight('img-td-height-percent') is '100px'
PASS getWidth('img-td-width-percent') is '490px'
PASS getHeight('img-td-width-percent') is '100px'
PASS getWidth('img-td-height-percent-nested') is '100px'
PASS getHeight('img-td-height-percent-nested') is '100px'
PASS getWidth('img-td-width-percent-nested') is '490px'
PASS getHeight('img-td-width-percent-nested') is '100px'
PASS getWidth('object-td-height-percent') is '300px'
PASS getHeight('object-td-height-percent') is '150px'
PASS getWidth('object-td-width-percent') is '490px'
PASS getHeight('object-td-width-percent') is '150px'
PASS getWidth('button-td-height-percent') != '0px' is true
PASS getHeight('button-td-height-percent') != '0px' is true
PASS getWidth('button-td-width-percent') != '0px' is true
PASS getHeight('button-td-width-percent') != '0px' is true
PASS getWidth('input-button-td-height-percent') != '0px' is true
PASS getHeight('input-button-td-height-percent') != '0px' is true
PASS getWidth('input-button-td-width-percent') != '0px' is true
PASS getHeight('input-button-td-width-percent') != '0px' is true
PASS getWidth('input-checkbox-td-height-percent') != '0px' is true
PASS getHeight('input-checkbox-td-height-percent') != '0px' is true
PASS getWidth('input-checkbox-td-width-percent') != '0px' is true
PASS getHeight('input-checkbox-td-width-percent') != '0px' is true
PASS getWidth('input-file-td-height-percent') != '0px' is true
PASS getHeight('input-file-td-height-percent') != '0px' is true
PASS getWidth('input-file-td-width-percent') != '0px' is true
PASS getHeight('input-file-td-width-percent') != '0px' is true
PASS getWidth('input-image-td-height-percent') is '100px'
PASS getHeight('input-image-td-height-percent') is '100px'
PASS getWidth('input-image-td-width-percent') is '490px'
PASS getHeight('input-image-td-width-percent') is '100px'
PASS getWidth('input-radio-td-height-percent') != '0px' is true
PASS getHeight('input-radio-td-height-percent') != '0px' is true
PASS getWidth('input-radio-td-width-percent') != '0px' is true
PASS getHeight('input-radio-td-width-percent') != '0px' is true
PASS getWidth('select-td-height-percent') != '0px' is true
PASS getHeight('select-td-height-percent') != '0px' is true
PASS getWidth('select-td-width-percent') != '0px' is true
PASS getHeight('select-td-width-percent') != '0px' is true
PASS successfullyParsed is true

TEST COMPLETE




<html>
<head>
<title>Test for Buzilla Bug 81084: Fix rendering of replaced elements with relative dimensions within a table cell.</title>
<script src="../js/resources/js-test-pre.js"></script>
<script>

function getComputedStyleForElement(element, cssPropertyName)
{
    if (window.getComputedStyle) {
        return window.getComputedStyle(element, '').getPropertyValue(cssPropertyName.replace(/([A-Z])/g, "-$1").toLowerCase());
    }
    if (element.currentStyle) {
        return element.currentStyle[cssPropertyName];
    }
    return null;
}

function getWidth(id)
{
    return getComputedStyleForElement(document.getElementById(id), 'width');
}

function getHeight(id)
{
    return getComputedStyleForElement(document.getElementById(id), 'height');
}

function test()
{
    description("This test checks that with replaced elements with relative dimensions (percent height) within a table cell (with percent height/width), the table cell gets the proper width.");

    shouldBe("getWidth('canvas-td-height-percent')", "'300px'");
    shouldBe("getHeight('canvas-td-height-percent')", "'150px'");
    shouldBe("getWidth('canvas-td-width-percent')", "'490px'");
    shouldBe("getHeight('canvas-td-width-percent')", "'150px'");	

    shouldBe("getWidth('embed-td-height-percent')", "'300px'");
    shouldBe("getHeight('embed-td-height-percent')", "'150px'");
    shouldBe("getWidth('embed-td-width-percent')", "'490px'");
    shouldBe("getHeight('embed-td-width-percent')", "'150px'");

    shouldBe("getWidth('img-td-height-percent')", "'100px'");
    shouldBe("getHeight('img-td-height-percent')", "'100px'");
    shouldBe("getWidth('img-td-width-percent')", "'490px'");
    shouldBe("getHeight('img-td-width-percent')", "'100px'");

    shouldBe("getWidth('img-td-height-percent-nested')", "'100px'");
    shouldBe("getHeight('img-td-height-percent-nested')", "'100px'");
    shouldBe("getWidth('img-td-width-percent-nested')", "'490px'");
    shouldBe("getHeight('img-td-width-percent-nested')", "'100px'");

    shouldBe("getWidth('object-td-height-percent')", "'300px'");
    shouldBe("getHeight('object-td-height-percent')", "'150px'");
    shouldBe("getWidth('object-td-width-percent')", "'490px'");
    shouldBe("getHeight('object-td-width-percent')", "'150px'");

    shouldBeTrue("getWidth('button-td-height-percent') != '0px'");
    shouldBeTrue("getHeight('button-td-height-percent') != '0px'");
    shouldBeTrue("getWidth('button-td-width-percent') != '0px'");
    shouldBeTrue("getHeight('button-td-width-percent') != '0px'");

    shouldBeTrue("getWidth('input-button-td-height-percent') != '0px'");
    shouldBeTrue("getHeight('input-button-td-height-percent') != '0px'");	
    shouldBeTrue("getWidth('input-button-td-width-percent') != '0px'");
    shouldBeTrue("getHeight('input-button-td-width-percent') != '0px'");		

    shouldBeTrue("getWidth('input-checkbox-td-height-percent') != '0px'");
    shouldBeTrue("getHeight('input-checkbox-td-height-percent') != '0px'");	
    shouldBeTrue("getWidth('input-checkbox-td-width-percent') != '0px'");
    shouldBeTrue("getHeight('input-checkbox-td-width-percent') != '0px'");

    shouldBeTrue("getWidth('input-file-td-height-percent') != '0px'");
    shouldBeTrue("getHeight('input-file-td-height-percent') != '0px'");	
    shouldBeTrue("getWidth('input-file-td-width-percent') != '0px'");
    shouldBeTrue("getHeight('input-file-td-width-percent') != '0px'");

    shouldBe("getWidth('input-image-td-height-percent')", "'100px'");
    shouldBe("getHeight('input-image-td-height-percent')", "'100px'");
    shouldBe("getWidth('input-image-td-width-percent')", "'490px'");
    shouldBe("getHeight('input-image-td-width-percent')", "'100px'");

    shouldBeTrue("getWidth('input-radio-td-height-percent') != '0px'");
    shouldBeTrue("getHeight('input-radio-td-height-percent') != '0px'");	
    shouldBeTrue("getWidth('input-radio-td-width-percent') != '0px'");
    shouldBeTrue("getHeight('input-radio-td-width-percent') != '0px'");

    shouldBeTrue("getWidth('select-td-height-percent') != '0px'");
    shouldBeTrue("getHeight('select-td-height-percent') != '0px'");	
    shouldBeTrue("getWidth('select-td-width-percent') != '0px'");
    shouldBeTrue("getHeight('select-td-width-percent') != '0px'");

    var elements = document.getElementsByTagName('table');
    while (elements.length > 0) {
        elements[0].parentNode.removeChild(elements[0]);
        elements = document.getElementsByTagName('table');
    }

    isSuccessfullyParsed();
}
</script>

<style>
.height100percent {
    height: 100%;
}
table {
    font-family: ahem;
    width: 600px;
}
</style>

</head>
<body onload="test()">

<p>Test for Bugzilla <a href="https://bugs.webkit.org/show_bug.cgi?id=81084">Bug 81084</a>: Fix rendering of replaced elements with relative dimensions within a table cell.</p>

<!-- Canvas -->
<table><tr><td height="100%" id="canvas-td-height-percent"><canvas class="height100percent"></canvas></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td width="100%" id="canvas-td-width-percent"><canvas class="height100percent"></canvas></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Embed -->
<!-- Fails on Firefox -->
<table><tr><td height="100%" id="embed-td-height-percent"><embed class="height100percent"></embed></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td width="100%" id="embed-td-width-percent"><embed class="height100percent"></embed></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Image -->
<table><tr><td height="100%" id="img-td-height-percent"><img src="resources/square-blue-100x100.png" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td width="100%" id="img-td-width-percent"><img src="resources/square-blue-100x100.png" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Nested image -->
<table><tr><td height="100%" id="img-td-height-percent-nested"><div><img src="resources/square-blue-100x100.png" class="height100percent"></div></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td width="100%" id="img-td-width-percent-nested"><div><img src="resources/square-blue-100x100.png" class="height100percent"></div></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Object -->
<!-- Fails on Firefox -->
<table><tr><td height="100%" id="object-td-height-percent"><object class="height100percent"></object></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td width="100%" id="object-td-width-percent"><object class="height100percent"></object></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Button -->
<table><tr><td height="100%" id="button-td-height-percent"><button class="height100percent" value="Button"></button></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td width="100%" id="button-td-width-percent"><button class="height100percent" value="Button"></button></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Input Button -->
<table><tr><td height="100%" id="input-button-td-height-percent"><input type="button" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td width="100%" id="input-button-td-width-percent"><input type="button" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Input checkbox -->
<table><tr><td height="100%" id="input-checkbox-td-height-percent"><input type="checkbox" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td width="100%" id="input-checkbox-td-width-percent"><input type="checkbox" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Input file -->
<table><tr><td height="100%" id="input-file-td-height-percent"><input type="file" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td width="100%" id="input-file-td-width-percent"><input type="file" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Input image -->
<table><tr><td height="100%" id="input-image-td-height-percent"><input type="image" src="resources/square-blue-100x100.png" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td width="100%" id="input-image-td-width-percent"><input type="image" src="resources/square-blue-100x100.png" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Input radio -->
<table><tr><td height="100%" id="input-radio-td-height-percent"><input type="radio" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td width="100%" id="input-radio-td-width-percent"><input type="radio" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<!-- Select -->
<table><tr><td height="100%" id="select-td-height-percent"><select class="height100percent"><option>Option</option></select></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
<table><tr><td width="100%" id="select-td-width-percent"><select class="height100percent"><option>Option</option></select></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>

<p id="description"></p>
<div id="console"></div>
</body>
</html>

Lines 3687-3692 BUGWK84125 : http/tests/websocket/tests/ LayoutTests/platform/chromium/test_expectations.txt_sec1
- LayoutTests/platform/chromium/test_expectations.txt +3 lines
3687	BUGWK84427 LINUX DEBUG : platform/chromium/editing/spelling/delete-misspelled-word.html = TIMEOUT	3687	BUGWK84427 LINUX DEBUG : platform/chromium/editing/spelling/delete-misspelled-word.html = TIMEOUT
3688	BUGWK84427 MAC WIN DEBUG : platform/chromium/editing/spelling/delete-misspelled-word.html = PASS TIMEOUT	3688	BUGWK84427 MAC WIN DEBUG : platform/chromium/editing/spelling/delete-misspelled-word.html = PASS TIMEOUT
3689		3689
		3690	// Needs rebaselining
		3691	BUGWK81084 : fast/replaced/width100percent-image.html = IMAGE+TEXT
		3692
3690	BUGWK84432 WIN : fast/filesystem/op-restricted-names.html = TEXT	3693	BUGWK84432 WIN : fast/filesystem/op-restricted-names.html = TEXT
3691	BUGWK84432 WIN : fast/filesystem/op-restricted-unicode.html = TEXT	3694	BUGWK84432 WIN : fast/filesystem/op-restricted-unicode.html = TEXT
3692	BUGWK84432 WIN : fast/filesystem/read-directory.html = TEXT	3695	BUGWK84432 WIN : fast/filesystem/read-directory.html = TEXT

Lines 2456-2458 fast/box-shadow/shadow-buffer-partial.ht LayoutTests/platform/efl/Skipped_sec1
- LayoutTests/platform/efl/Skipped +4 lines
2456	fast/block/lineboxcontain/block-font.html	2456	fast/block/lineboxcontain/block-font.html
2457	fast/block/lineboxcontain/block-glyphs.html	2457	fast/block/lineboxcontain/block-glyphs.html
2458	fast/block/lineboxcontain/font.html	2458	fast/block/lineboxcontain/font.html
		2459
		2460	# This test should get a changed expected result
		2461	# https://bugs.webkit.org/show_bug.cgi?id=81084
		2462	fast/replaced/width100percent-image.html

Lines 1544-1549 BUGWK73744 : fast/table/td-width-fifty-p LayoutTests/platform/gtk/test_expectations.txt_sec1
- LayoutTests/platform/gtk/test_expectations.txt +3 lines
1544		1544
1545	BUGWK84378 : media/track/track-cue-rendering-snap-to-lines-not-set.html = FAIL	1545	BUGWK84378 : media/track/track-cue-rendering-snap-to-lines-not-set.html = FAIL
1546		1546
		1547	// Needs rebaselining
		1548	BUGWK81084 : fast/replaced/width100percent-image.html = IMAGE+TEXT
		1549
1547	//////////////////////////////////////////////////////////////////////////////////////////	1550	//////////////////////////////////////////////////////////////////////////////////////////
1548	// End of Tests failing	1551	// End of Tests failing
1549	//////////////////////////////////////////////////////////////////////////////////////////	1552	//////////////////////////////////////////////////////////////////////////////////////////

Lines 256-261 storage/statement-success-callback-isola LayoutTests/platform/mac-wk2/Skipped_sec1
- LayoutTests/platform/mac-wk2/Skipped +4 lines
256	storage/transaction-callback-isolated-world.html	256	storage/transaction-callback-isolated-world.html
257	storage/transaction-error-callback-isolated-world.html	257	storage/transaction-error-callback-isolated-world.html
258		258
		259	# This test should get a changed expected result
		260	# https://bugs.webkit.org/show_bug.cgi?id=81084
		261	fast/replaced/width100percent-image.html
		262
259	### END OF (1) Classified failures with bug reports	263	### END OF (1) Classified failures with bug reports
260	########################################	264	########################################
261		265

Lines 793-795 fast/dom/inline-event-attributes-release LayoutTests/platform/mac/Skipped_sec1
- LayoutTests/platform/mac/Skipped +4 lines
793	# https://bugs.webkit.org/show_bug.cgi?id=84102	793	# https://bugs.webkit.org/show_bug.cgi?id=84102
794	fast/profiler/stop-profiling-after-setTimeout.html	794	fast/profiler/stop-profiling-after-setTimeout.html
795	fast/profiler/dead-time.html	795	fast/profiler/dead-time.html
		796
		797	# https://bugs.webkit.org/show_bug.cgi?id=81084
		798	fast/replaced/width100percent-image.html
		799

Lines 2003-2008 fast/xmlhttprequest/xmlhttprequest-get.x LayoutTests/platform/qt/Skipped_sec1
- LayoutTests/platform/qt/Skipped +4 lines
2003	# https://bugs.webkit.org/show_bug.cgi?id=84013	2003	# https://bugs.webkit.org/show_bug.cgi?id=84013
2004	fast/repaint/line-flow-with-floats-in-regions.html	2004	fast/repaint/line-flow-with-floats-in-regions.html
2005		2005
		2006	# This test should get a changed expected result
		2007	# https://bugs.webkit.org/show_bug.cgi?id=81084
		2008	fast/replaced/width100percent-image.html
		2009
2006	# ============================================================================= #	2010	# ============================================================================= #
2007	# failing fonts tests	2011	# failing fonts tests
2008	# ============================================================================= #	2012	# ============================================================================= #

Lines 2085-2087 batterystatus LayoutTests/platform/wincairo/Skipped_sec1
- LayoutTests/platform/wincairo/Skipped +4 lines
2085		2085
2086	# Network Information API is not supported yet. http://webkit.org/b/73528	2086	# Network Information API is not supported yet. http://webkit.org/b/73528
2087	networkinformation	2087	networkinformation
		2088
		2089	# This test should get a changed expected result
		2090	# https://bugs.webkit.org/show_bug.cgi?id=81084
		2091	fast/replaced/width100percent-image.html

Return to Bug 81084

Lines 427-433 void RenderReplaced::computePreferredLog Source/WebCore/rendering/RenderReplaced.cpp_sec1
- Source/WebCore/rendering/RenderReplaced.cpp -1 / +26 lines
427	if (style()->maxWidth().isFixed())	427	if (style()->maxWidth().isFixed())
428	m_maxPreferredLogicalWidth = min<LayoutUnit>(m_maxPreferredLogicalWidth, style()->maxWidth().value() + (style()->boxSizing() == CONTENT_BOX ? borderAndPadding : ZERO_LAYOUT_UNIT));	428	m_maxPreferredLogicalWidth = min<LayoutUnit>(m_maxPreferredLogicalWidth, style()->maxWidth().value() + (style()->boxSizing() == CONTENT_BOX ? borderAndPadding : ZERO_LAYOUT_UNIT));
429		429
430	if (hasRelativeDimensions())	430	if (hasRelativeDimensions() && !hasContainingTableWithRelativeDimensions())
431	m_minPreferredLogicalWidth = 0;	431	m_minPreferredLogicalWidth = 0;
432	else	432	else
433	m_minPreferredLogicalWidth = m_maxPreferredLogicalWidth;	433	m_minPreferredLogicalWidth = m_maxPreferredLogicalWidth;
Lines 551-554 LayoutRect RenderReplaced::clippedOverfl Source/WebCore/rendering/RenderReplaced.cpp_sec2
551	return r;	551	return r;
552	}	552	}
553		553
		554	static bool hasRelativeWidthOrHeight(const RenderStyle* style)
		555	{
		556	return style->height().isAuto() \|\| style->height().isPercent() \|\| style->width().isAuto() \|\| style->width().isPercent();
		557	}
		558
		559	bool RenderReplaced::hasContainingTableWithRelativeDimensions() const
		560	{
		561	// In case containing block is a table with auto/percent dimensions, the max preferred logical width should be used.
		562	// Since table cells no longer squeeze replaced elements with relative dimensions (height), we should also ensure
		563	// that the containing table cells too are expanded to reflect the proper width.
		564	// https://bugs.webkit.org/show_bug.cgi?id=81084
		565	bool hasContainingTableWithRelativeDimensions = false;
		566
		567	for (const RenderBlock* containingBlock = this->containingBlock(); containingBlock && !containingBlock->isRenderView()
		568	&& hasRelativeWidthOrHeight(containingBlock->style()); containingBlock = containingBlock->containingBlock()) {
		569	if (containingBlock->isTable()) {
		570	hasContainingTableWithRelativeDimensions = true;
		571	break;
		572	}
		573	}
		574
		575	return hasContainingTableWithRelativeDimensions;
554	}	576	}
		577
		578	}
		579

Lines 1-3 Source/WebCore/ChangeLog_sec1
- Source/WebCore/ChangeLog +30 lines
		1	2012-04-23 Arpita Bahuguna <arpitabahuguna@gmail.com>
		2
		3	Fix rendering of replaced elements with relative dimensions within a table cell.
		4	https://bugs.webkit.org/show_bug.cgi?id=81084
		5
		6	Reviewed by NOBODY (OOPS!).
		7
		8	Tests: fast/replaced/table-cell-width-auto.html
		9	fast/replaced/table-cell-width-fixed.html
		10	fast/replaced/table-cell-width-percent.html
		11
		12	* rendering/RenderReplaced.cpp:
		13	Changes have been made for setting the proper width for table cells (auto/percent)
		14	containing replaced elements with relative dimensions.
		15
		16	(WebCore::RenderReplaced::computePreferredLogicalWidths):
		17	The preferred logical width is computed based on whether the containing table has
		18	relative dimensions or not. An extra check has been added for the same.
		19
		20	(WebCore::hasRelativeWidthOrHeight):
		21	Checks whether the given style (of any renderer) has auto/percent (relative) dimensions.
		22
		23	(WebCore):
		24	(WebCore::RenderReplaced::hasContainingTableWithRelativeDimensions):
		25	Checks whether any containing block is a table with auto/percent dimensions.
		26
		27	* rendering/RenderReplaced.h:
		28	(RenderReplaced):
		29	Added declaration for newly added function hasContainingTableWithRelativeDimensions().
		30
1	2012-04-23 Pavel Feldman <pfeldman@chromium.org>	31	2012-04-23 Pavel Feldman <pfeldman@chromium.org>
2		32
3	Web Inspector: introduce String.prototype.starts/endsWith and use it all over the place.	33	Web Inspector: introduce String.prototype.starts/endsWith and use it all over the place.

Lines 1-3 LayoutTests/ChangeLog_sec1
- LayoutTests/ChangeLog +32 lines
		1	2012-04-23 Arpita Bahuguna <arpitabahuguna@gmail.com>
		2
		3	Fix rendering of replaced elements with relative dimensions within a table cell.
		4	https://bugs.webkit.org/show_bug.cgi?id=81084
		5
		6	Reviewed by NOBODY (OOPS!).
		7
		8	* fast/replaced/table-cell-width-auto-expected.txt: Added.
		9	* fast/replaced/table-cell-width-auto.html: Added.
		10	For replaced elements with relative dimensions within a table cell (with auto height/width),
		11	the table cell should get the proper width.
		12
		13	* fast/replaced/table-cell-width-fixed-expected.txt: Added.
		14	* fast/replaced/table-cell-width-fixed.html: Added.
		15	For replaced elements with relative dimensions (percent height) within a table
		16	cell (with fixed height/width), the table cell should get the proper width.
		17
		18	* fast/replaced/table-cell-width-percent-expected.txt: Added.
		19	* fast/replaced/table-cell-width-percent.html: Added.
		20	For replaced elements with relative dimensions (percent height) within a table
		21	cell (with percent height/width), the table cell should get the proper width.
		22
		23	* platform/chromium/test_expectations.txt:
		24	* platform/efl/Skipped:
		25	* platform/gtk/test_expectations.txt:
		26	* platform/mac-wk2/Skipped:
		27	* platform/mac/Skipped:
		28	* platform/qt/Skipped:
		29	* platform/wincairo/Skipped:
		30	Added expectation/skipped test for fast/replaced/width100percent-image.html.
		31	This needs to be rebaselined once the patch is applied.
		32
1	2012-04-23 Kent Tamura <tkent@chromium.org>	33	2012-04-23 Kent Tamura <tkent@chromium.org>
2		34
3	Add test function to get placeholder string	35	Add test function to get placeholder string

Line 0 LayoutTests/fast/replaced/table-cell-width-auto-expected.txt_sec1
- LayoutTests/fast/replaced/table-cell-width-auto-expected.txt +59 lines
	1	Test for Bugzilla Bug 81084: Fix rendering of replaced elements with relative dimensions within a table cell.
	2
	3	This test checks that with replaced elements with relative dimensions within a table cell (with auto height/width), the table cell gets the proper width.
	4
	5	On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
	6
	7
	8	PASS getWidth('canvas-height-percent') is '300px'
	9	PASS getHeight('canvas-height-percent') is '150px'
	10	PASS getWidth('canvas-width-percent') is '300px'
	11	PASS getHeight('canvas-width-percent') is '150px'
	12	PASS getWidth('embed-height-percent') is '300px'
	13	PASS getHeight('embed-height-percent') is '150px'
	14	PASS getWidth('embed-width-percent') is '300px'
	15	PASS getHeight('embed-width-percent') is '150px'
	16	PASS getWidth('img-height-percent') is '100px'
	17	PASS getHeight('img-height-percent') is '100px'
	18	PASS getWidth('img-width-percent') is '100px'
	19	PASS getHeight('img-width-percent') is '100px'
	20	PASS getWidth('img-height-percent-nested') is '100px'
	21	PASS getHeight('img-height-percent-nested') is '100px'
	22	PASS getWidth('img-width-percent-nested') is '100px'
	23	PASS getHeight('img-width-percent-nested') is '100px'
	24	PASS getWidth('object-height-percent') is '300px'
	25	PASS getHeight('object-height-percent') is '150px'
	26	PASS getWidth('object-width-percent') is '300px'
	27	PASS getHeight('object-width-percent') is '150px'
	28	PASS getWidth('button-height-percent') != '0px' is true
	29	PASS getHeight('button-height-percent') != '0px' is true
	30	PASS getWidth('button-width-percent') != '0px' is true
	31	PASS getHeight('button-width-percent') != '0px' is true
	32	PASS getWidth('input-button-height-percent') != '0px' is true
	33	PASS getHeight('input-button-height-percent') != '0px' is true
	34	PASS getWidth('input-button-width-percent') != '0px' is true
	35	PASS getHeight('input-button-width-percent') != '0px' is true
	36	PASS getWidth('input-checkbox-height-percent') != '0px' is true
	37	PASS getHeight('input-checkbox-height-percent') != '0px' is true
	38	PASS getWidth('input-checkbox-width-percent') != '0px' is true
	39	PASS getHeight('input-checkbox-width-percent') != '0px' is true
	40	PASS getWidth('input-file-height-percent') != '0px' is true
	41	PASS getHeight('input-file-height-percent') != '0px' is true
	42	PASS getWidth('input-file-width-percent') != '0px' is true
	43	PASS getHeight('input-file-width-percent') != '0px' is true
	44	PASS getWidth('input-image-height-percent') is '100px'
	45	PASS getHeight('input-image-height-percent') is '100px'
	46	PASS getWidth('input-image-width-percent') is '100px'
	47	PASS getHeight('input-image-width-percent') is '100px'
	48	PASS getWidth('input-radio-height-percent') != '0px' is true
	49	PASS getHeight('input-radio-height-percent') != '0px' is true
	50	PASS getWidth('input-radio-width-percent') != '0px' is true
	51	PASS getHeight('input-radio-width-percent') != '0px' is true
	52	PASS getWidth('select-height-percent') != '0px' is true
	53	PASS getHeight('select-height-percent') != '0px' is true
	54	PASS getWidth('select-width-percent') != '0px' is true
	55	PASS getHeight('select-width-percent') != '0px' is true
	56	PASS successfullyParsed is true
	57
	58	TEST COMPLETE
	59

Line 0 LayoutTests/fast/replaced/table-cell-width-auto.html_sec1
- LayoutTests/fast/replaced/table-cell-width-auto.html +173 lines
		1	<html>
		2	<head>
		3	<title>Test for Buzilla Bug 81084: Fix rendering of replaced elements with relative dimensions within a table cell.</title>
		4	<script src="../js/resources/js-test-pre.js"></script>
		5	<script>
		6
		7	function getComputedStyleForElement(element, cssPropertyName)
		8	{
		9	if (window.getComputedStyle) {
		10	return window.getComputedStyle(element, '').getPropertyValue(cssPropertyName.replace(/([A-Z])/g, "-$1").toLowerCase());
		11	}
		12	if (element.currentStyle) {
		13	return element.currentStyle[cssPropertyName];
		14	}
		15	return null;
		16	}
		17
		18	function getWidth(id)
		19	{
		20	return getComputedStyleForElement(document.getElementById(id), 'width');
		21	}
		22
		23	function getHeight(id)
		24	{
		25	return getComputedStyleForElement(document.getElementById(id), 'height');
		26	}
		27
		28	function test()
		29	{
		30	description("This test checks that with replaced elements with relative dimensions within a table cell (with auto height/width), the table cell gets the proper width.");
		31
		32	shouldBe("getWidth('canvas-height-percent')", "'300px'");
		33	shouldBe("getHeight('canvas-height-percent')", "'150px'");
		34	shouldBe("getWidth('canvas-width-percent')", "'300px'");
		35	shouldBe("getHeight('canvas-width-percent')", "'150px'");
		36
		37	shouldBe("getWidth('embed-height-percent')", "'300px'");
		38	shouldBe("getHeight('embed-height-percent')", "'150px'");
		39	shouldBe("getWidth('embed-width-percent')", "'300px'");
		40	shouldBe("getHeight('embed-width-percent')", "'150px'");
		41
		42	shouldBe("getWidth('img-height-percent')", "'100px'");
		43	shouldBe("getHeight('img-height-percent')", "'100px'");
		44	shouldBe("getWidth('img-width-percent')", "'100px'");
		45	shouldBe("getHeight('img-width-percent')", "'100px'");
		46
		47	shouldBe("getWidth('img-height-percent-nested')", "'100px'");
		48	shouldBe("getHeight('img-height-percent-nested')", "'100px'");
		49	shouldBe("getWidth('img-width-percent-nested')", "'100px'");
		50	shouldBe("getHeight('img-width-percent-nested')", "'100px'");
		51
		52	shouldBe("getWidth('object-height-percent')", "'300px'");
		53	shouldBe("getHeight('object-height-percent')", "'150px'");
		54	shouldBe("getWidth('object-width-percent')", "'300px'");
		55	shouldBe("getHeight('object-width-percent')", "'150px'");
		56
		57	shouldBeTrue("getWidth('button-height-percent') != '0px'");
		58	shouldBeTrue("getHeight('button-height-percent') != '0px'");
		59	shouldBeTrue("getWidth('button-width-percent') != '0px'");
		60	shouldBeTrue("getHeight('button-width-percent') != '0px'");
		61
		62	shouldBeTrue("getWidth('input-button-height-percent') != '0px'");
		63	shouldBeTrue("getHeight('input-button-height-percent') != '0px'");
		64	shouldBeTrue("getWidth('input-button-width-percent') != '0px'");
65	shouldBeTrue("getHeight('input-button-width-percent') != '0px'");
66
67	shouldBeTrue("getWidth('input-checkbox-height-percent') != '0px'");
68	shouldBeTrue("getHeight('input-checkbox-height-percent') != '0px'");
69	shouldBeTrue("getWidth('input-checkbox-width-percent') != '0px'");
70	shouldBeTrue("getHeight('input-checkbox-width-percent') != '0px'");
71
72	shouldBeTrue("getWidth('input-file-height-percent') != '0px'");
73	shouldBeTrue("getHeight('input-file-height-percent') != '0px'");
74	shouldBeTrue("getWidth('input-file-width-percent') != '0px'");
75	shouldBeTrue("getHeight('input-file-width-percent') != '0px'");
76
77	shouldBe("getWidth('input-image-height-percent')", "'100px'");
78	shouldBe("getHeight('input-image-height-percent')", "'100px'");
79	shouldBe("getWidth('input-image-width-percent')", "'100px'");
80	shouldBe("getHeight('input-image-width-percent')", "'100px'");
81
82	shouldBeTrue("getWidth('input-radio-height-percent') != '0px'");
83	shouldBeTrue("getHeight('input-radio-height-percent') != '0px'");
84	shouldBeTrue("getWidth('input-radio-width-percent') != '0px'");
85	shouldBeTrue("getHeight('input-radio-width-percent') != '0px'");
86
87	shouldBeTrue("getWidth('select-height-percent') != '0px'");
88	shouldBeTrue("getHeight('select-height-percent') != '0px'");
89	shouldBeTrue("getWidth('select-width-percent') != '0px'");
90	shouldBeTrue("getHeight('select-width-percent') != '0px'");
91
92	var elements = document.getElementsByTagName('table');
93	while (elements.length > 0) {
94	elements[0].parentNode.removeChild(elements[0]);
95	elements = document.getElementsByTagName('table');
96	}
97
98	isSuccessfullyParsed();
99	}
100	</script>
101
102	<style>
103	.height100percent {
104	height: 100%;
105	}
106	.width100percent {
107	width: 100%;
108	}
109	table {
110	font-family: ahem;
111	width: 600px;
112	}
113	</style>
114
115	</head>
116	<body onload="test()">
117
118	<p>Test for Bugzilla <a href="https://bugs.webkit.org/show_bug.cgi?id=81084">Bug 81084</a>: Fix rendering of replaced elements with relative dimensions within a table cell.</p>
119
120	<!-- Canvas -->
121	<table><tr><td id="canvas-height-percent"><canvas class="height100percent"></canvas></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
122	<table><tr><td id="canvas-width-percent"><canvas class="width100percent"></canvas></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
123
124	<!-- Embed -->
125	<!-- Fails on Firefox -->
126	<table><tr><td id="embed-height-percent"><embed class="height100percent"></embed></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
127	<table><tr><td id="embed-width-percent"><embed class="width100percent"></embed></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
128
129	<!-- Image -->
130	<table><tr><td id="img-height-percent"><img src="resources/square-blue-100x100.png" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
131	<table><tr><td id="img-width-percent"><img src="resources/square-blue-100x100.png" class="width100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
132
133	<!-- Nested image -->
134	<table><tr><td id="img-height-percent-nested"><div><img src="resources/square-blue-100x100.png" class="height100percent"></div></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
135	<table><tr><td id="img-width-percent-nested"><div><img src="resources/square-blue-100x100.png" class="width100percent"></div></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
136
137	<!-- Object -->
138	<!-- Fails on Firefox -->
139	<table><tr><td id="object-height-percent"><object class="height100percent"></object></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
140	<table><tr><td id="object-width-percent"><object class="width100percent"></object></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
141
142	<!-- Button -->
143	<table><tr><td id="button-height-percent"><button class="height100percent" value="Button"></button></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
144	<table><tr><td id="button-width-percent"><button class="width100percent" value="Button"></button></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
145
146	<!-- Input Button -->
147	<table><tr><td id="input-button-height-percent"><input type="button" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
148	<table><tr><td id="input-button-width-percent"><input type="button" class="width100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
149
150	<!-- Input checkbox -->
151	<table><tr><td id="input-checkbox-height-percent"><input type="checkbox" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
152	<table><tr><td id="input-checkbox-width-percent"><input type="checkbox" class="width100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
153
154	<!-- Input file -->
155	<table><tr><td id="input-file-height-percent"><input type="file" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
156	<table><tr><td id="input-file-width-percent"><input type="file" width="100%"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
157
158	<!-- Input image -->
159	<table><tr><td id="input-image-height-percent"><input type="image" src="resources/square-blue-100x100.png" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
160	<table><tr><td id="input-image-width-percent"><input type="image" src="resources/square-blue-100x100.png" class="width100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
161
162	<!-- Input radio -->
163	<table><tr><td id="input-radio-height-percent"><input type="radio" class="height100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
164	<table><tr><td id="input-radio-width-percent"><input type="radio" class="width100percent"></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
165
166	<!-- Select -->
167	<table><tr><td id="select-height-percent"><select class="height100percent"><option>Option</option></select></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
168	<table><tr><td id="select-width-percent"><select width="100%"><option>Option</option></select></td><td><span>This is the second table cell</span></td><td width="100%"></td></tr></table>
169
170	<p id="description"></p>
171	<div id="console"></div>
172	</body>
173	</html>