box-decoration-break-with-bidi.html (2088B)
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 14 .test { 15 box-decoration-break: clone; 16 background: black; 17 } 18 .p { 19 padding:11px 3px 5px 7px; 20 } 21 .b { 22 border: 1px solid blue; 23 border-width:3px 5px 7px 11px; 24 } 25 .m { 26 margin:5px 7px 11px 3px; 27 } 28 .direction { 29 direction: rtl; 30 } 31 32 x {display:inline-block; width:20px; height:10px; background:lime; } 33 y {display:inline-block; width:30px; height:1px; background:lime; } 34 d {display:inline-block; border:10px solid red } 35 </style> 36 </head> 37 <body> 38 39 <div style="float:left; width: 100px;"> 40 <span class="test p"><x></x><br><y></y></span><br><br><br> 41 <span class="test b"><x></x><br><y></y></span><br><br><br> 42 <span class="test p b"><x></x><br><y></y></span><br><br><br> 43 <span class="test m"><x></x><br><y></y></span><br><br><br> 44 <span class="test p m"><x></x><br><y></y></span><br><br><br> 45 <span class="test b m"><x></x><br><y></y></span><br><br><br> 46 <span class="test p b m"><x></x><br><y></y></span><br><br><br> 47 48 <div class="direction"></div> <!-- to trigger bidi resolution --> 49 50 </div><div style="float:left; width: 100px; text-align:right"> 51 52 <span class="test p"><y></y><br><x></x></span><br><br><br> 53 <span class="test b"><y></y><br><x></x></span><br><br><br> 54 <span class="test p b"><y></y><br><x></x></span><br><br><br> 55 <span class="test m"><y></y><br><x></x></span><br><br><br> 56 <span class="test p m"><y></y><br><x></x></span><br><br><br> 57 <span class="test b m"><y></y><br><x></x></span><br><br><br> 58 <span class="test p b m"><y></y><br><x></x></span><br><br><br> 59 60 <div class="direction"></div> <!-- to trigger bidi resolution --> 61 </div> 62 63 </body> 64 </html>