box-decoration-break-with-bidi.html 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <!DOCTYPE HTML>
  2. <!--
  3. Any copyright is dedicated to the Public Domain.
  4. http://creativecommons.org/publicdomain/zero/1.0/
  5. -->
  6. <html><head>
  7. <meta charset="utf-8">
  8. <title>Testing box-decoration-break with bidi resolution</title>
  9. <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1210877">
  10. <link rel="help" href="http://dev.w3.org/csswg/css-break/#break-decoration">
  11. <link rel="match" href="box-decoration-break-with-bidi-ref.html">
  12. <style type="text/css">
  13. .test {
  14. box-decoration-break: clone;
  15. background: black;
  16. }
  17. .p {
  18. padding:11px 3px 5px 7px;
  19. }
  20. .b {
  21. border: 1px solid blue;
  22. border-width:3px 5px 7px 11px;
  23. }
  24. .m {
  25. margin:5px 7px 11px 3px;
  26. }
  27. .direction {
  28. direction: rtl;
  29. }
  30. x {display:inline-block; width:20px; height:10px; background:lime; }
  31. y {display:inline-block; width:30px; height:1px; background:lime; }
  32. d {display:inline-block; border:10px solid red }
  33. </style>
  34. </head>
  35. <body>
  36. <div style="float:left; width: 100px;">
  37. <span class="test p"><x></x><br><y></y></span><br><br><br>
  38. <span class="test b"><x></x><br><y></y></span><br><br><br>
  39. <span class="test p b"><x></x><br><y></y></span><br><br><br>
  40. <span class="test m"><x></x><br><y></y></span><br><br><br>
  41. <span class="test p m"><x></x><br><y></y></span><br><br><br>
  42. <span class="test b m"><x></x><br><y></y></span><br><br><br>
  43. <span class="test p b m"><x></x><br><y></y></span><br><br><br>
  44. <div class="direction"></div> <!-- to trigger bidi resolution -->
  45. </div><div style="float:left; width: 100px; text-align:right">
  46. <span class="test p"><y></y><br><x></x></span><br><br><br>
  47. <span class="test b"><y></y><br><x></x></span><br><br><br>
  48. <span class="test p b"><y></y><br><x></x></span><br><br><br>
  49. <span class="test m"><y></y><br><x></x></span><br><br><br>
  50. <span class="test p m"><y></y><br><x></x></span><br><br><br>
  51. <span class="test b m"><y></y><br><x></x></span><br><br><br>
  52. <span class="test p b m"><y></y><br><x></x></span><br><br><br>
  53. <div class="direction"></div> <!-- to trigger bidi resolution -->
  54. </div>
  55. </body>
  56. </html>