Skip to content

Width on Image not being propegated to taffy #392

@AustinMReppert

Description

@AustinMReppert

I have noticed that if the width of an image is specified as an attribute, taffy will only get auto for the width. Setting it in a style block seems to work. This test does pass likely due to much of the image layout being handled directly in blitz, but taffy does not seem to receive the correct width.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right' and percentage intrinsic width</title>
        <link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
		<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 -->
        <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" />
        <link rel="match" href="absolute-replaced-width-041-ref.xht" />

        <meta name="flags" content="image" />
        <meta name="assert" content="Percentage widths are evaluated against the containing block's width." />
        <style type="text/css">
            #div1
            {
                border: solid black;
                direction: ltr;
                height: 3in;
                position: relative;
                width: 2in;
            }
            img
            {
                margin-left: auto;
                margin-right: auto;
                left: 0.5in;
                position: absolute;
                right: 0.5in;
            }
            div div
            {
                background: orange;
                height: 1in;
                margin-left: 0.5in;
                margin-right: 0.5in;
                margin-top: 1in;
                width: 1in;
            }
        </style>
    </head>
    <body>
        <p>Test passes if the blue and orange squares have the same width and are <strong>horizontally centered</strong> in an hollow black rectangle.</p>
        <div id="div1">
            <img alt="blue 15x15" src="support/blue15x15.png" width="50%" />
            <div></div>
        </div>
    </body>
</html>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions