box-decoration-break-with-bidi-ref.html (2233B)
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 <style type="text/css"> 11 12 .test { 13 box-decoration-break: slice; 14 background: black; 15 } 16 .p { 17 padding:11px 3px 5px 7px; 18 } 19 .b { 20 border: 1px solid blue; 21 border-width:3px 5px 7px 11px; 22 } 23 .m { 24 margin:5px 7px 11px 3px; 25 } 26 .direction { 27 direction: rtl; 28 } 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 37 <div style="float:left; width: 100px;"> 38 <span class="test p"><x></x></span><br> 39 <span class="test p"><y></y></span><br><br><br> 40 <span class="test b"><x></x></span><br> 41 <span class="test b"><y></y></span><br><br><br> 42 <span class="test p b"><x></x></span><br> 43 <span class="test p b"><y></y></span><br><br><br> 44 <span class="test m"><x></x></span><br> 45 <span class="test m"><y></y></span><br><br><br> 46 <span class="test p m"><x></x></span><br> 47 <span class="test p m"><y></y></span><br><br><br> 48 <span class="test b m"><x></x></span><br> 49 <span class="test b m"><y></y></span><br><br><br> 50 <span class="test p b m"><x></x></span><br> 51 <span class="test p b m"><y></y></span><br><br><br> 52 53 54 </div><div style="float:left; width: 100px; text-align:right"> 55 56 <span class="test p"><y></y></span><br> 57 <span class="test p"><x></x></span><br><br><br> 58 <span class="test b"><y></y></span><br> 59 <span class="test b"><x></x></span><br><br><br> 60 <span class="test p b"><y></y></span><br> 61 <span class="test p b"><x></x></span><br><br><br> 62 <span class="test m"><y></y></span><br> 63 <span class="test m"><x></x></span><br><br><br> 64 <span class="test p m"><y></y></span><br> 65 <span class="test p m"><x></x></span><br><br><br> 66 <span class="test b m"><y></y></span><br> 67 <span class="test b m"><x></x></span><br><br><br> 68 <span class="test p b m"><y></y></span><br> 69 <span class="test p b m"><x></x></span><br><br><br> 70 71 </div> 72 73 </body> 74 </html>