third_party/WebKit/LayoutTests/css3/flexbox/display-flexbox-set-get.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <link href="resources/flexbox.css" rel="stylesheet">
   5 <script src="../../resources/js-test.js"></script>
   6 </head>
   7 <body>
   8 <div class="flexbox" id="flexbox"></div>
   9 <div class="inline-flexbox" id="flexboxInline"></div>
  10 <script>
  11 description('Test that setting and getting display: flex and inline-flex works as expected');
  12
  13 debug("Test getting |display| set through CSS");
  14 var flexboxElement = document.getElementById("flexbox");
  15 shouldBe("getComputedStyle(flexboxElement, '').getPropertyValue('display')", "'flex'");
  16 var inlineFlexboxElement = document.getElementById("flexboxInline");
  17 shouldBe("getComputedStyle(inlineFlexboxElement, '').getPropertyValue('display')", "'inline-flex'");
  18
  19 debug("");
  20 debug("Test getting and setting display through JS");
  21 var element = document.createElement("div");
  22 document.body.appendChild(element);
  23 shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'block'");
  24 element.style.display = "flex";
  25 shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'flex'");
  26
  27 element = document.createElement("div");
  28 document.body.appendChild(element);
  29 shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'block'");
  30 element.style.display = "inline-flex";
  31 shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'inline-flex'");
  32 element.style.display = "-webkit-flex";
  33 shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'flex'");
  34 element.style.display = "-webkit-inline-flex";
  35 shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'inline-flex'");
  36 </script>
  37 </body>
  38 </html>