| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <link href="resources/flexbox.css" rel="stylesheet"> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| </head> |
| <body> |
| <p>Test that setting and getting display: flex and inline-flex works as expected</p> |
| <div id="log"></div> |
| <div class="flexbox" id="flexbox"></div> |
| <div class="inline-flexbox" id="flexboxInline"></div> |
| <script> |
| |
| test(function() { |
| var flexboxElement = document.getElementById("flexbox"); |
| assert_equals(getComputedStyle(flexboxElement, '').getPropertyValue('display'), 'flex'); |
| var inlineFlexboxElement = document.getElementById("flexboxInline"); |
| assert_equals(getComputedStyle(inlineFlexboxElement, '').getPropertyValue('display'), 'inline-flex'); |
| }, "Test getting |display| set through CSS"); |
| |
| test(function() { |
| var element = document.createElement("div"); |
| document.body.appendChild(element); |
| assert_equals(getComputedStyle(element, '').getPropertyValue('display'), 'block'); |
| element.style.display = "flex"; |
| assert_equals(getComputedStyle(element, '').getPropertyValue('display'), 'flex'); |
| |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| assert_equals(getComputedStyle(element, '').getPropertyValue('display'), 'block'); |
| element.style.display = "inline-flex"; |
| assert_equals(getComputedStyle(element, '').getPropertyValue('display'), 'inline-flex'); |
| element.style.display = "-webkit-flex"; |
| assert_equals(getComputedStyle(element, '').getPropertyValue('display'), 'flex'); |
| element.style.display = "-webkit-inline-flex"; |
| assert_equals(getComputedStyle(element, '').getPropertyValue('display'), 'inline-flex'); |
| |
| }, "Test getting and setting display through JS"); |
| </script> |
| </body> |
| </html> |
