Attachment #137524 for bug #81084

View Details Raw Unified Return to Bug 81084

| Differences between



2012-04-17  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::RenderReplaced::hasContainingTableWithRelativeDimensions):
        Checks whether any containing block is a table with auto/percent dimensions.

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

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

        (WebCore):
        Added declaration for newly added function hasRelativeWidthOrHeight()

2012-04-17  Mariusz Grzegorczyk  <mariusz.g@samsung.com>

        [EFL][WK2] Fix build break when CONTEXT_MENUS is disabled.



    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)
{
    ASSERT(style);
    bool hasRelativeDimensions = false;

    if (style->height().isAuto() || style->height().isPercent() || style->width().isAuto() || style->width().isPercent())
        hasRelativeDimensions = true;

    return hasRelativeDimensions;
}

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-17  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.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.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.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:
        Added expectation/skipped test for fast/replaced/width100percent-image.html.
        This needs to be rebaselined once the patch is applied.

        * platform/qt/fast/replaced/table-cell-width-auto-expected.txt: Added.
        * platform/qt/fast/replaced/table-cell-width-fixed-expected.txt: Added.
        * platform/qt/fast/replaced/table-cell-width-percent-expected.txt: Added.
        Expected results for the newly added test cases for qt port.

        * 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-17  Mario Sanchez Prada  <msanchez@igalia.com>

        Unreviewed, fix wrong paths to JS resources in GTK tests.



<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>
if (window.layoutTestController) {
    layoutTestController.dumpAsText();
}

function getComputedStyleForElement(element, cssPropertyName)
{
    if (!element) {
        return null;
    }
    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')", "'105px'");
    shouldBe("getWidth('img-width-percent')", "'100px'");
    shouldBe("getHeight('img-width-percent')", "'105px'");

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

    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')", "'105px'");
    shouldBe("getWidth('input-image-width-percent')", "'100px'");
    shouldBe("getHeight('input-image-width-percent')", "'105px'");

    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%;
}
.greenBgColor {
	background-color: green;
}
.greyBgColor {
	background-color: grey;
}
</style>

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

<!-- Canvas -->
<table width="600px"><tr><td id="canvas-height-percent"><canvas class="height100percent greenBgColor"></canvas></td><td><span class="remove">This is the second table cell</span></td><td width="100%" greyBgColor"><span class="remove">&nbsp;</span></td></tr></table>
<table width="600px"><tr><td id="canvas-width-percent"><canvas class="width100percent greenBgColor"></canvas></td><td><span class="remove">This is the second table cell</span></td><td width="100%" greyBgColor"><span class="remove">&nbsp;</span></td></tr></table>

<!-- Embed -->
<!-- Fails on Firefox -->
<table width="600px"><tr><td id="embed-height-percent"><embed class="height100percent greenBgColor"></embed></td><td><span class="remove">This is the second table cell</span></td><td width="100%" greyBgColor"><span class="remove">&nbsp;</span></td></tr></table>
<table width="600px"><tr><td id="embed-width-percent"><embed class="width100percent greenBgColor"></embed></td><td><span class="remove">This is the second table cell</span></td><td width="100%" greyBgColor"><span class="remove">&nbsp;</span></td></tr></table>

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

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

<!-- Object -->
<!-- Fails on Firefox -->
<table width="600px"><tr><td id="object-height-percent"><object class="height100percent greenBgColor"></object></td><td><span class="remove">This is the second table cell</span></td><td width="100%" greyBgColor"><span class="remove">&nbsp;</span></td></tr></table>
<table width="600px"><tr><td id="object-width-percent"><object class="width100percent greenBgColor"></object></td><td><span class="remove">This is the second table cell</span></td><td width="100%" greyBgColor"><span class="remove">&nbsp;</span></td></tr></table>

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

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

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

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

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

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

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

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



<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>
if (window.layoutTestController) {
    layoutTestController.dumpAsText();
}

function getComputedStyleForElement(element, cssPropertyName)
{
    if (!element) {
        return null;
    }
    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')", "'300px'");
    shouldBe("getHeight('canvas-td-height-fixed')", "'105px'");
    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')", "'105px'");
    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')", "'105px'");
    shouldBe("getWidth('img-td-width-fixed')", "'100px'");
    shouldBe("getHeight('img-td-width-fixed')", "'105px'");

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

    shouldBe("getWidth('object-td-height-fixed')", "'300px'");
    shouldBe("getHeight('object-td-height-fixed')", "'105px'");
    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')", "'105px'");
    shouldBe("getWidth('input-image-td-width-fixed')", "'100px'");
    shouldBe("getHeight('input-image-td-width-fixed')", "'105px'");

    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%;
}
.greenBgColor {
	background-color: green;
}
.greyBgColor {
	background-color: grey;
}
</style>

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

<!-- Canvas -->
<table width="600px"><tr><td height="100px" id="canvas-td-height-fixed"><canvas class="greenBgColor" height="100%"></canvas></td><td><span class="remove">This is the second table cell</span></td><td width="100%" class="greyBgColor"><span class="remove">&nbsp;</span></td></tr></table>
<table width="600px"><tr><td width="100px" id="canvas-td-width-fixed"><canvas class="greenBgColor height100percent"></canvas></td><td><span class="remove">This is the second table cell</span></td><td width="100%" class="greyBgColor"><span class="remove">&nbsp;</span></td></tr></table>

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

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

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

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

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

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

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

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

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

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

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

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



<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>
if (window.layoutTestController) {
    layoutTestController.dumpAsText();
}

function getComputedStyleForElement(element, cssPropertyName)
{
    if (!element) {
        return null;
    }
    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')", "'300px'");
    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')", "'300px'");
    shouldBe("getHeight('embed-td-width-percent')", "'150px'");

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

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

    shouldBe("getWidth('object-td-height-percent')", "'300px'");
    shouldBe("getHeight('object-td-height-percent')", "'150px'");
    shouldBe("getWidth('object-td-width-percent')", "'300px'");
    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')", "'105px'");
    shouldBe("getWidth('input-image-td-width-percent')", "'100px'");
    shouldBe("getHeight('input-image-td-width-percent')", "'105px'");

    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%;
}
.greenBgColor {
	background-color: green;
}
.greyBgColor {
	background-color: grey;
}
</style>

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

<!-- Canvas -->
<table width="600px"><tr><td height="100%" id="canvas-td-height-percent"><canvas class="greenBgColor height100percent"></canvas></td><td><span class="remove">This is the second table cell</span></td><td width="100%" class="greyBgColor"><span class="remove">&nbsp;</span></td></tr></table>
<table width="600px"><tr><td width="100%" id="canvas-td-width-percent"><canvas class="greenBgColor height100percent"></canvas></td><td><span class="remove">This is the second table cell</span></td><td width="100%" class="greyBgColor"><span class="remove">&nbsp;</span></td></tr></table>

<!-- Embed -->
<!-- Fails on Firefox -->
<table width="600px"><tr><td height="100%" id="embed-td-height-percent"><embed class="greenBgColor height100percent"></embed></td><td><span class="remove">This is the second table cell</span></td><td width="100%" class="greyBgColor"><span class="remove">&nbsp;</span></td></tr></table>
<table width="600px"><tr><td width="100%" id="embed-td-width-percent"><embed class="greenBgColor height100percent"></embed></td><td><span class="remove">This is the second table cell</span></td><td width="100%" class="greyBgColor"><span class="remove">&nbsp;</span></td></tr></table>

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

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

<!-- Object -->
<!-- Fails on Firefox -->
<table width="600px"><tr><td height="100%" id="object-td-height-percent"><object class="height100percent greenBgColor"></object></td><td><span class="remove">This is the second table cell</span></td><td width="100%" class="greyBgColor"><span class="remove">&nbsp;</span></td></tr></table>
<table width="600px"><tr><td width="100%" id="object-td-width-percent"><object class="height100percent greenBgColor"></object></td><td><span class="remove">This is the second table cell</span></td><td width="100%" class="greyBgColor"><span class="remove">&nbsp;</span></td></tr></table>

<!-- Button -->
<table width="600px"><tr><td height="100%" id="button-td-height-percent" ><button class="height100percent" value="Button"></button></td><td><span class="remove">This is the second table cell</span></td><td width="100%" class="greyBgColor"><span class="remove">&nbsp;</span></td></tr></table>
<table width="600px"><tr><td width="100%" id="button-td-width-percent" ><button class="height100percent" value="Button"></button></td><td><span class="remove">This is the second table cell</span></td><td width="100%" class="greyBgColor"><span class="remove">&nbsp;</span></td></tr></table>

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

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

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

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

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

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

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

Lines 3783-3785 BUGWK83909 : ietestcenter/css3/grid/grid LayoutTests/platform/chromium/test_expectations.txt_sec1
- LayoutTests/platform/chromium/test_expectations.txt +4 lines
3783	BUGWK83912 : ietestcenter/css3/grid/grid-items-002.htm = IMAGE	3783	BUGWK83912 : ietestcenter/css3/grid/grid-items-002.htm = IMAGE
3784	BUGWK83913 : ietestcenter/css3/grid/grid-items-003.htm = IMAGE	3784	BUGWK83913 : ietestcenter/css3/grid/grid-items-003.htm = IMAGE
3785		3785
		3786	// Needs rebaselining
		3787	BUGWK81084 : fast/replaced/width100percent-image.html = IMAGE+TEXT
		3788
		3789

Lines 1295-1300 fast/forms/enter-clicks-buttons.html LayoutTests/platform/efl/Skipped_sec1
- LayoutTests/platform/efl/Skipped +5 lines
1295	fast/forms/input-search-press-escape-key.html	1295	fast/forms/input-search-press-escape-key.html
1296	fast/forms/input-text-enter.html	1296	fast/forms/input-text-enter.html
1297	fast/forms/textinput-not-fired-on-enter-in-input.html	1297	fast/forms/textinput-not-fired-on-enter-in-input.html
		1298	fast/frames/iframe-window-focus.html
1298	http/tests/misc/isindex-with-no-form.html	1299	http/tests/misc/isindex-with-no-form.html
1299		1300
1300	# BUG: mouse-related bugs in the EventSender-PlatformMouseEventEfl interaction	1301	# BUG: mouse-related bugs in the EventSender-PlatformMouseEventEfl interaction
Lines 2516-2518 fast/box-shadow/shadow-buffer-partial.ht LayoutTests/platform/efl/Skipped_sec2
2516	fast/block/lineboxcontain/block-font.html	2517	fast/block/lineboxcontain/block-font.html
2517	fast/block/lineboxcontain/block-glyphs.html	2518	fast/block/lineboxcontain/block-glyphs.html
2518	fast/block/lineboxcontain/font.html	2519	fast/block/lineboxcontain/font.html
		2520
		2521	# This test should get a changed expected result
		2522	# https://bugs.webkit.org/show_bug.cgi?id=81084
		2523	fast/replaced/width100percent-image.html

Lines 1561-1566 BUGWK83907 : ietestcenter/css3/grid/grid LayoutTests/platform/gtk/test_expectations.txt_sec1
- LayoutTests/platform/gtk/test_expectations.txt +4 lines
1561	BUGWK83909 : ietestcenter/css3/grid/grid-column-003.htm = IMAGE	1561	BUGWK83909 : ietestcenter/css3/grid/grid-column-003.htm = IMAGE
1562	BUGWK83912 : ietestcenter/css3/grid/grid-items-002.htm = IMAGE	1562	BUGWK83912 : ietestcenter/css3/grid/grid-items-002.htm = IMAGE
1563	BUGWK83913 : ietestcenter/css3/grid/grid-items-003.htm = IMAGE	1563	BUGWK83913 : ietestcenter/css3/grid/grid-items-003.htm = IMAGE
		1564
		1565	// Needs rebaselining
		1566	BUGWK81084 : fast/replaced/width100percent-image.html = IMAGE+TEXT
		1567
1564	//////////////////////////////////////////////////////////////////////////////////////////	1568	//////////////////////////////////////////////////////////////////////////////////////////
1565	// End of Tests failing	1569	// End of Tests failing
1566	//////////////////////////////////////////////////////////////////////////////////////////	1570	//////////////////////////////////////////////////////////////////////////////////////////

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

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



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 '105px'
PASS getWidth('img-width-percent') is '100px'
PASS getHeight('img-width-percent') is '105px'
PASS getWidth('img-height-percent-nested') is '100px'
PASS getHeight('img-height-percent-nested') is '105px'
PASS getWidth('img-width-percent-nested') is '100px'
PASS getHeight('img-width-percent-nested') is '105px'
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 '105px'
PASS getWidth('input-image-width-percent') is '100px'
PASS getHeight('input-image-width-percent') is '105px'
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




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 '300px'
PASS getHeight('canvas-td-height-fixed') is '105px'
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 '105px'
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 '105px'
PASS getWidth('img-td-width-fixed') is '100px'
PASS getHeight('img-td-width-fixed') is '105px'
PASS getWidth('img-td-height-fixed-nested') is '100px'
PASS getHeight('img-td-height-fixed-nested') is '105px'
PASS getWidth('img-td-width-fixed-nested') is '100px'
PASS getHeight('img-td-width-fixed-nested') is '105px'
PASS getWidth('object-td-height-fixed') is '300px'
PASS getHeight('object-td-height-fixed') is '105px'
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 '105px'
PASS getWidth('input-image-td-width-fixed') is '100px'
PASS getHeight('input-image-td-width-fixed') is '105px'
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




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'
FAIL getWidth('canvas-td-width-percent') should be 300px. Was 530px.
PASS getHeight('canvas-td-width-percent') is '150px'
PASS getWidth('embed-td-height-percent') is '300px'
PASS getHeight('embed-td-height-percent') is '150px'
FAIL getWidth('embed-td-width-percent') should be 300px. Was 530px.
PASS getHeight('embed-td-width-percent') is '150px'
PASS getWidth('img-td-height-percent') is '100px'
PASS getHeight('img-td-height-percent') is '105px'
FAIL getWidth('img-td-width-percent') should be 100px. Was 530px.
PASS getHeight('img-td-width-percent') is '105px'
PASS getWidth('img-td-height-percent-nested') is '100px'
PASS getHeight('img-td-height-percent-nested') is '105px'
FAIL getWidth('img-td-width-percent-nested') should be 100px. Was 530px.
PASS getHeight('img-td-width-percent-nested') is '105px'
PASS getWidth('object-td-height-percent') is '300px'
PASS getHeight('object-td-height-percent') is '150px'
FAIL getWidth('object-td-width-percent') should be 300px. Was 530px.
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 '105px'
FAIL getWidth('input-image-td-width-percent') should be 100px. Was 530px.
PASS getHeight('input-image-td-width-percent') is '105px'
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


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 / +32 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	ASSERT(style);
		557	bool hasRelativeDimensions = false;
		558
		559	if (style->height().isAuto() \|\| style->height().isPercent() \|\| style->width().isAuto() \|\| style->width().isPercent())
		560	hasRelativeDimensions = true;
		561
		562	return hasRelativeDimensions;
		563	}
		564
		565	bool RenderReplaced::hasContainingTableWithRelativeDimensions() const
		566	{
		567	// In case containing block is a table with auto/percent dimensions, the max preferred logical width should be used.
		568	// Since table cells no longer squeeze replaced elements with relative dimensions (height), we should also ensure
		569	// that the containing table cells too are expanded to reflect the proper width.
		570	// https://bugs.webkit.org/show_bug.cgi?id=81084
		571	bool hasContainingTableWithRelativeDimensions = false;
		572
		573	for (const RenderBlock* containingBlock = this->containingBlock(); containingBlock && !containingBlock->isRenderView()
		574	&& hasRelativeWidthOrHeight(containingBlock->style()); containingBlock = containingBlock->containingBlock()) {
		575	if (containingBlock->isTable()) {
		576	hasContainingTableWithRelativeDimensions = true;
		577	break;
		578	}
		579	}
		580
		581	return hasContainingTableWithRelativeDimensions;
554	}	582	}
		583
		584	}
		585

Lines 1-3 Source/WebCore/ChangeLog_sec1
- Source/WebCore/ChangeLog +33 lines
		1	2012-04-17 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::RenderReplaced::hasContainingTableWithRelativeDimensions):
		21	Checks whether any containing block is a table with auto/percent dimensions.
		22
		23	(WebCore):
		24	(WebCore::hasRelativeWidthOrHeight):
		25	Checks whether the given style (of any renderer) has auto/percent (relative) dimensions.
		26
		27	* rendering/RenderReplaced.h:
		28	(RenderReplaced):
		29	Added declaration for newly added function hasContainingTableWithRelativeDimensions()
		30
		31	(WebCore):
		32	Added declaration for newly added function hasRelativeWidthOrHeight()
		33
1	2012-04-17 Mariusz Grzegorczyk <mariusz.g@samsung.com>	34	2012-04-17 Mariusz Grzegorczyk <mariusz.g@samsung.com>
2		35
3	[EFL][WK2] Fix build break when CONTEXT_MENUS is disabled.	36	[EFL][WK2] Fix build break when CONTEXT_MENUS is disabled.

Lines 1-3 LayoutTests/ChangeLog_sec1
- LayoutTests/ChangeLog +37 lines
		1	2012-04-17 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.html: Added.
		9	For replaced elements with relative dimensions within a table
		10	cell (with auto height/width), the table cell should get the proper width.
		11
		12	* fast/replaced/table-cell-width-fixed.html: Added.
		13	For replaced elements with relative dimensions (percent height) within a table
		14	cell (with fixed height/width), the table cell should get the proper width.
		15
		16	* fast/replaced/table-cell-width-percent.html: Added.
		17	For replaced elements with relative dimensions (percent height) within a table
		18	cell (with percent height/width), the table cell should get the proper width.
		19
		20	* platform/chromium/test_expectations.txt:
		21	* platform/efl/Skipped:
		22	* platform/gtk/test_expectations.txt:
		23	* platform/mac-wk2/Skipped:
		24	* platform/mac/Skipped:
		25	* platform/qt/Skipped:
		26	Added expectation/skipped test for fast/replaced/width100percent-image.html.
		27	This needs to be rebaselined once the patch is applied.
		28
		29	* platform/qt/fast/replaced/table-cell-width-auto-expected.txt: Added.
		30	* platform/qt/fast/replaced/table-cell-width-fixed-expected.txt: Added.
		31	* platform/qt/fast/replaced/table-cell-width-percent-expected.txt: Added.
		32	Expected results for the newly added test cases for qt port.
		33
		34	* platform/wincairo/Skipped:
		35	Added expectation/skipped test for fast/replaced/width100percent-image.html.
		36	This needs to be rebaselined once the patch is applied.
		37
1	2012-04-17 Mario Sanchez Prada <msanchez@igalia.com>	38	2012-04-17 Mario Sanchez Prada <msanchez@igalia.com>
2		39
3	Unreviewed, fix wrong paths to JS resources in GTK tests.	40	Unreviewed, fix wrong paths to JS resources in GTK tests.

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

Line 0 LayoutTests/platform/qt/fast/replaced/table-cell-width-auto-expected.txt_sec1
- LayoutTests/platform/qt/fast/replaced/table-cell-width-auto-expected.txt +57 lines
	1	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.
	2
	3	On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
	4
	5
	6	PASS getWidth('canvas-height-percent') is '300px'
	7	PASS getHeight('canvas-height-percent') is '150px'
	8	PASS getWidth('canvas-width-percent') is '300px'
	9	PASS getHeight('canvas-width-percent') is '150px'
	10	PASS getWidth('embed-height-percent') is '300px'
	11	PASS getHeight('embed-height-percent') is '150px'
	12	PASS getWidth('embed-width-percent') is '300px'
	13	PASS getHeight('embed-width-percent') is '150px'
	14	PASS getWidth('img-height-percent') is '100px'
	15	PASS getHeight('img-height-percent') is '105px'
	16	PASS getWidth('img-width-percent') is '100px'
	17	PASS getHeight('img-width-percent') is '105px'
	18	PASS getWidth('img-height-percent-nested') is '100px'
	19	PASS getHeight('img-height-percent-nested') is '105px'
	20	PASS getWidth('img-width-percent-nested') is '100px'
	21	PASS getHeight('img-width-percent-nested') is '105px'
	22	PASS getWidth('object-height-percent') is '300px'
	23	PASS getHeight('object-height-percent') is '150px'
	24	PASS getWidth('object-width-percent') is '300px'
	25	PASS getHeight('object-width-percent') is '150px'
	26	PASS getWidth('button-height-percent') != '0px' is true
	27	PASS getHeight('button-height-percent') != '0px' is true
	28	PASS getWidth('button-width-percent') != '0px' is true
	29	PASS getHeight('button-width-percent') != '0px' is true
	30	PASS getWidth('input-button-height-percent') != '0px' is true
	31	PASS getHeight('input-button-height-percent') != '0px' is true
	32	PASS getWidth('input-button-width-percent') != '0px' is true
	33	PASS getHeight('input-button-width-percent') != '0px' is true
	34	PASS getWidth('input-checkbox-height-percent') != '0px' is true
	35	PASS getHeight('input-checkbox-height-percent') != '0px' is true
	36	PASS getWidth('input-checkbox-width-percent') != '0px' is true
	37	PASS getHeight('input-checkbox-width-percent') != '0px' is true
	38	PASS getWidth('input-file-height-percent') != '0px' is true
	39	PASS getHeight('input-file-height-percent') != '0px' is true
	40	PASS getWidth('input-file-width-percent') != '0px' is true
	41	PASS getHeight('input-file-width-percent') != '0px' is true
	42	PASS getWidth('input-image-height-percent') is '100px'
	43	PASS getHeight('input-image-height-percent') is '105px'
	44	PASS getWidth('input-image-width-percent') is '100px'
	45	PASS getHeight('input-image-width-percent') is '105px'
	46	PASS getWidth('input-radio-height-percent') != '0px' is true
	47	PASS getHeight('input-radio-height-percent') != '0px' is true
	48	PASS getWidth('input-radio-width-percent') != '0px' is true
	49	PASS getHeight('input-radio-width-percent') != '0px' is true
	50	PASS getWidth('select-height-percent') != '0px' is true
	51	PASS getHeight('select-height-percent') != '0px' is true
	52	PASS getWidth('select-width-percent') != '0px' is true
	53	PASS getHeight('select-width-percent') != '0px' is true
	54	PASS successfullyParsed is true
	55
	56	TEST COMPLETE
	57