| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src='../../resources/js-test.js'></script> |
| <script> |
| description('Percentage margins on absolutely positioned elements are relative to the container\'s logical width'); |
| |
| function testMargins(outerProperties, innerProperties, expectedProperties) { |
| var outer = document.createElement('div'), |
| inner = document.createElement('div'), |
| property, style; |
| for (property in outerProperties) |
| outer.style.setProperty(property, outerProperties[property]); |
| for (property in innerProperties) |
| inner.style.setProperty(property, innerProperties[property]); |
| outer.appendChild(inner); |
| document.body.appendChild(outer); |
| style = getComputedStyle(inner); |
| for (property in expectedProperties) |
| shouldBe('"' + style.getPropertyValue(property) + '"', '"' + expectedProperties[property] + '"'); |
| document.body.removeChild(outer); |
| } |
| |
| var WritingModes = { |
| 'HORIZONTAL-TB': 'horizontal-tb', |
| 'VERTICAL-LR': 'vertical-lr', |
| 'VERTICAL-RL': 'vertical-rl' |
| } |
| |
| var outerProperties = { |
| position: 'relative', |
| width: '100px', |
| height: '200px', |
| }, innerProperties = { |
| position: 'absolute', |
| width: '40px', |
| height: '160px', |
| }, expectedProperties = { |
| margin: '10px 20px 30px 40px' |
| }; |
| |
| window.onload = function() { |
| for (var outerProperty in WritingModes) { |
| for (var innerProperty in WritingModes) { |
| outerProperties['-webkit-writing-mode'] = WritingModes[outerProperty]; |
| innerProperties['-webkit-writing-mode'] = WritingModes[innerProperty]; |
| innerProperties['margin'] = outerProperty === 'HORIZONTAL-TB' ? '10% 20% 30% 40%' : '5% 10% 15% 20%'; |
| testMargins(outerProperties, innerProperties, expectedProperties); |
| } |
| } |
| } |
| </script> |
| </body> |
| </html> |
