ruby-box-model-001.html (2632B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>CSS Ruby test: no m/b/p/ effect on base/annotation containers</title> 4 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> 5 <link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-layout"> 6 <link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-style"> 7 <link rel="match" href="ruby-box-model-001-ref.html"> 8 <meta name=assert content="the content box of base (resp annotation) container boxes should be tightly rapping around their content, and stacked up without gap. Margins/Borders/Padding on the base (resp annotation) container boxes do not apply."> 9 10 <style> 11 .r { display: ruby; } 12 .rbc { display: ruby-base-container; } 13 .rb { display: ruby-base; } 14 .rtc { display: ruby-text-container; } 15 .rt { display: ruby-text; } 16 17 .pv { padding-top: 100px; padding-bottom: 100px; } 18 .ph { padding-left: 100px; padding-right: 100px; } 19 .bv, .bh { border-style: solid; border-color: transparent; } 20 .bv { border-top-width: 100px; border-bottom-width: 100px; } 21 .bh { border-left-width: 100px; border-right-width: 100px; } 22 .mv { margin-top: 100px; margin-bottom: 100px; } 23 .mh { margin-left: 100px; margin-right: 100px; } 24 25 .r { font: 50px/1 monospace; } 26 27 .rb { background: pink; } 28 .rt { background: orange; } 29 </style> 30 31 <p>Test passes if, in each of the base/annotations pairs below, there is no gap between the pink box of the base and the orange box of the annotation.</p> 32 33 <span class=r> 34 <span class="rbc pv"> 35 <span class=rb>b1</span> 36 </span> 37 <span class="rtc pv"> 38 <span class=rt>a1</span> 39 </span> 40 </span> 41 42 <span class=r> 43 <span class="rbc ph"> 44 <span class=rb>b2</span> 45 </span> 46 <span class="rtc ph"> 47 <span class=rt>a2</span> 48 </span> 49 </span> 50 51 <span class=r> 52 <span class="rbc bv"> 53 <span class=rb>b3</span> 54 </span> 55 <span class="rtc bv"> 56 <span class=rt>a3</span> 57 </span> 58 </span> 59 60 <span class=r> 61 <span class="rbc bh"> 62 <span class=rb>b4</span> 63 </span> 64 <span class="rtc bh"> 65 <span class=rt>a4</span> 66 </span> 67 </span> 68 69 <span class=r> 70 <span class="rbc mv"> 71 <span class=rb>b5</span> 72 </span> 73 <span class="rtc mv"> 74 <span class=rt>a5</span> 75 </span> 76 </span> 77 78 <span class=r> 79 <span class="rbc mh"> 80 <span class=rb>b6</span> 81 </span> 82 <span class="rtc mh"> 83 <span class=rt>a6</span> 84 </span> 85 </span> 86 87 <span class=r> 88 <span class="rbc ph pv mh mv bh bv"> 89 <span class=rb>b7</span> 90 </span> 91 <span class="rtc ph pv mh mv bh bv"> 92 <span class=rt>a7</span> 93 </span> 94 </span>