<!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>