layout/reftests/flexbox/flexbox-inlinecontent-horiz-2.xhtml

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!--
   3      Any copyright is dedicated to the Public Domain.
   4      http://creativecommons.org/publicdomain/zero/1.0/
   5 -->
   6 <!--
   7      This test removes a div from the middle of some inline content in a flex
   8      container. That should merge the inline content into a single flex item.
   9 -->
  10 <html xmlns="http://www.w3.org/1999/xhtml"
  11       class="reftest-wait">
  12   <head>
  13     <script>
  14       function tweak() {
  15         var removeMe = document.getElementById("removeMe");
  16         removeMe.parentNode.removeChild(removeMe);
  17         document.documentElement.removeAttribute("class");
  18       }
  19       window.addEventListener("MozReftestInvalidate", tweak, false);
  20     </script>
  21     <style>
  22       div { height: 100px; }
  23       div.flexbox {
  24         width: 200px;
  25         display: flex;
  26       }
  27       div.a {
  28         flex: 1 0 20px;
  29         background: lightgreen;
  30       }
  31       div.b {
  32         flex: 2 0 30px;
  33         background: yellow;
  34       }
  35       div.inflex {
  36         flex: 0 0 20px;
  37         background: gray;
  38       }
  39     </style>
  40   </head>
  41   <body>
  42     <div class="flexbox"
  43        ><div class="a"/>text<div class="b" id="removeMe"/><i>italic</i
  44        ><div class="inflex"/></div>
  45   </body>
  46 </html>