[Webkit-unassigned] [Bug 40621] New: Flex box and centering image

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=40621

           Summary: Flex box and centering image
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: PC
        OS/Version: Mac OS X 10.5
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: arv at chromium.org
                CC: hyatt at apple.com, hamaji at chromium.org


Given a flex box with a centered image in it. The image is centered using box-align: center and box-pack: center. The image itself has a max-width and max-height so that it gets resized when the available size is not big enough.

<div id=a>
  <img id=b src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg">
</div>

<style>

#a {
  position: absolute;
  top: 0;
  left:0;
  right:0;
  bottom: 0;
  display: -webkit-box;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  pointer-events: none;
}

#b {
  opacity: .8;
  max-width: 100%;
  max-height: 100%;
}
</style>

http://www.plexode.com/cgi-bin/eval3.py#ht=%3Cdiv%20id%3Da%3E%0A%20%20%3Cimg%20id%3Db%20src%3D%22http%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2F2%2F22%2FTurkish_Van_Cat.jpg%22%3E%0A%3C%2Fdiv%3E%0A%0A%3Cstyle%3E%0A%0A%23a%20%7B%0A%20%20position%3A%20absolute%3B%0A%20%20top%3A%200%3B%0A%20%20left%3A0%3B%0A%20%20right%3A0%3B%0A%20%20bottom%3A%200%3B%0A%20%20display%3A%20-webkit-box%3B%0A%20%20-webkit-box-align%3A%20center%3B%0A%20%20-webkit-box-pack%3A%20center%3B%0A%20%20pointer-events%3A%20none%3B%0A%7D%0A%0A%23b%20%7B%0A%20%20opacity%3A%20.8%3B%0A%20%20max-width%3A%20100%25%3B%0A%20%20max-height%3A%20100%25%3B%0A%7D%0A%3C%2Fstyle%3E&ohh=1&ohj=1&jt=&ojh=1&ojj=1&ms=100&oth=0&otj=0&cex=1


Try resizing the window and notice how the size and position of the image is incorrect.

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.