| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src='../../resources/js-test.js'></script> |
| <script> |
| description('Percentage margins on absolutely positioned replaced elements are relative to the container\'s logical width.'); |
| |
| window.onload = function() { |
| var inners = document.querySelectorAll('.inner'); |
| for (var i = 0; i < inners.length; i++) { |
| var inner = inners.item(i); |
| var style = getComputedStyle(inner); |
| shouldBe('"' + style.getPropertyValue('margin') + '"', '"10px 20px 30px 40px"'); |
| } |
| } |
| </script> |
| <style> |
| .outer { |
| position: relative; |
| width: 100px; |
| height: 200px; |
| } |
| .inner { |
| position: absolute; |
| width: 40px; |
| height: 160px; |
| margin: 5% 10% 15% 20%; |
| } |
| .horizontal-tb { |
| -webkit-writing-mode: horizontal-tb; |
| } |
| .horizontal-tb > .inner { |
| margin: 10% 20% 30% 40%; |
| } |
| .vertical-lr { |
| -webkit-writing-mode: vertical-lr; |
| } |
| .vertical-rl { |
| -webkit-writing-mode: vertical-rl; |
| } |
| </style> |
| </head> |
| <body> |
| <div class='outer horizontal-tb'> |
| <svg class='inner horizontal-tb'></svg> |
| </div> |
| |
| <div class='outer horizontal-tb'> |
| <svg class='inner vertical-lr'></svg> |
| </div> |
| |
| <div class='outer horizontal-tb'> |
| <svg class='inner vertical-rl'></svg> |
| </div> |
| |
| <div class='outer vertical-lr'> |
| <svg class='inner horizontal-tb'></svg> |
| </div> |
| |
| <div class='outer vertical-lr'> |
| <svg class='inner vertcial-lr'></svg> |
| </div> |
| |
| <div class='outer vertical-lr'> |
| <svg class='inner vertical-rl'></svg> |
| </div> |
| |
| <div class='outer vertical-rl'> |
| <svg class='inner horizontal-tb'></svg> |
| </div> |
| |
| <div class='outer vertical-rl'> |
| <svg class='inner vertical-lr'></svg> |
| </div> |
| |
| <div class='outer vertical-rl'> |
| <svg class='inner vertical-rl'></svg> |
| </div> |
| </body> |
| </html> |
