flexbox-align-self-baseline-horiz-4.xhtml 950 B

1234567891011121314151617181920212223242526272829303132333435363738
  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. <!-- Testcase for behavior of the 'baseline' value for align-items (and
  7. align-self, implicitly). This test baseline-aligns a <table>.
  8. -->
  9. <html xmlns="http://www.w3.org/1999/xhtml">
  10. <head>
  11. <style>
  12. div.flexbox {
  13. display: flex;
  14. align-items: baseline;
  15. border: 1px dashed blue;
  16. font: 14px sans-serif;
  17. }
  18. table {
  19. margin: 1px; /* to fix fuzziness from text overlapping table border */
  20. }
  21. .lime { background: lime; }
  22. .pink { background: pink; }
  23. .aqua { background: aqua; }
  24. </style>
  25. </head>
  26. <body>
  27. <div class="flexbox">
  28. <div class="lime">text</div>
  29. <table class="pink" border="1">
  30. <tr><td>tr1</td></tr>
  31. <tr><td>tr2</td></tr>
  32. </table>
  33. </div>
  34. </body>
  35. </html>