| <!DOCTYPE html> |
| <style> |
| #container { |
| display: inline-block; |
| height: 100%; |
| } |
| #middle { |
| height: 100%; |
| } |
| #stylefloat { |
| height: 100%; |
| float: left; |
| } |
| img { |
| display: block; |
| min-height: 100%; |
| } |
| </style> |
| |
| <p> |
| Tests that recalculate block width when parent changes height |
| when it has relative height and width auto. |
| </p> |
| |
| <div style="height:100px"> |
| <div id="parent1" style="height:100px"> |
| <div id="container" data-expected-width=25> |
| <img src='data:image/svg+xml;utf8,<svg height="2px" width="1px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"></svg>'> |
| </div> |
| </div> |
| </div> |
| |
| <div id="parent2" style="height:100px;"> |
| <div id="stylefloat" data-expected-width=25> |
| <div id="middle" data-expected-width=25> |
| <img src='data:image/svg+xml;utf8,<svg height="2px" width="1px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"></svg>'> |
| </div> |
| </div> |
| </div> |
| |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../../resources/check-layout-th.js"></script> |
| <script> |
| document.body.offsetTop; |
| document.getElementById("parent1").style.height = "50px"; |
| checkLayout("#container"); |
| |
| document.body.offsetTop; |
| document.getElementById("parent2").style.height = "50px"; |
| checkLayout("#stylefloat"); |
| </script> |
