Problems with relative and absolute CSS-urls in template

MaPePeR commented 11 years ago

Hi,

i just tried to create a template, which contained a background-image: url(). But my image did not show up and it turned out to be related to mdv. I wrote a test case for this: (don't mind that eggs)

<head>
  <script src="mdv/mdv.js"></script><!-- notice, that i execute it mdv.js from a subfolder! -->
  <style type="text/css">
    .bgimage {
        background-image: url('egg.svg');background-size: 100%;
    }
    div {
        color: blue;
    }
  </style>
</head>
<body>
  <h1>Model-driven Views</h1>
  <div style="float: left;width: 150px; border: 1px solid black;">Outside Template:
    <!-- this shows 4 images -->
        <div style="height: 100px; width: 100px; background-image: url('egg.svg');background-size: 100%; ">relative url</div>
        <div style="height: 100px; width: 100px; background-image: url('/path/egg.svg');background-size: 100%; ">absolute url</div>
        <div style="height: 100px; width: 100px; " class="bgimage">class=bgimage</div>
        <div style="height: 100px; width: 100px; background-image: url('http://localhost/path/egg.svg');background-size: 100%; ">full-url</div>
  </div>
  <div style="float: left;width: 150px; border: 1px solid black;">Inside Template
    <!-- this does not --> 
    <template id="greeting" repeat="{{ salutations }}">
        <!-- relative url in style-attribute - does not work -->
        <div style="height: 100px; width: 100px; background-image: url('egg.svg');background-size: 100%; ">relative url</div>
        <!-- absolute url in style-attribute   - does not work -->
        <div style="height: 100px; width: 100px; background-image: url('/path/egg.svg');background-size: 100%; ">absolute url</div>
        <!-- relative url in css-class       - does work! -->
        <div style="height: 100px; width: 100px; " class="bgimage">class=bgimage</div>
        <!-- full url in style-attribute       - does work! -->
        <div style="height: 100px; width: 100px; background-image: url('http://localhost/path/egg.svg');background-size: 100%; ">full-url</div>
    </template>
  </div>
  <div style="clear: both"></div>
<script>
var t = document.getElementById('greeting');
var model = {
  salutations: [
    { what: 'Hello', who: 'World' },
  ]
};
t.model = model;
</script>
</body>

Results in Tested in Google Chrome 27.0.1453.110 on Windows

rafaelw commented 11 years ago

Closing (since this isn't specifically related to MDV)

rafaelw commented 11 years ago

Sorry. closed wrong bug. This appears to be a bug in the blink implementation of

googlearchive / TemplateBinding

Problems with relative and absolute CSS-urls in template #95