contain-layout-005.html (990B)
1 <!doctype html> 2 <html lang=en> 3 <meta charset=utf-8> 4 <title>CSS-contain test: layout containment on ruby-text</title> 5 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> 6 <meta name=flags content="ahem"> 7 <meta name=assert content="layout containment does not apply to ruby-text"> 8 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 9 <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-layout"> 10 11 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 12 <style> 13 div { 14 position: relative; 15 background: red; 16 width: 100px; 17 height: 100px; 18 padding: 25px; 19 box-sizing: border-box; 20 } 21 rt { 22 contain: layout; 23 display: ruby-text; 24 font-family: Ahem; 25 font-size: 100px; 26 line-height: 1; 27 } 28 rt::after { 29 content: "X"; 30 color: green; 31 position: absolute; 32 top:0; left: 0; 33 } 34 </style> 35 36 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 37 <div><ruby><rt></rt></ruby></div>