orthogonal-parent-shrink-to-fit-001w.html (3050B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Writing Modes Test: Shrink-to-fit table-cell with a child of orthogonal block with borders in inline-block</title> 4 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows"> 5 <meta name="assert" content="Shrink-to-fit table-cell with a child of orthogonal block with borders in inline-block"> 6 <meta name="flags" content="ahem dom"> 7 <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com"> 8 <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 --> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 12 <style> 13 .test { 14 border:thin solid; 15 font:20px/1 Ahem; 16 } 17 .target { 18 color:blue; 19 height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if 20 not set. We want the test to focus exclusively on shrink-to-fit algorithm. */ 21 writing-mode:vertical-rl; 22 } 23 .border { 24 border-right:blue solid .5em; 25 } 26 .next { 27 color:orange; 28 } 29 .inline-block { 30 display:inline-block; 31 } 32 .float { 33 float:left; 34 } 35 h3 { 36 clear:both; 37 } 38 h3.fail { 39 color:red; 40 } 41 table { 42 border-spacing:0px; 43 } 44 td { 45 padding:0px; 46 } 47 </style> 48 <div id="log"></div> 49 <div id="container"> 50 <p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same. 51 <p>If script is enabled, there should be one or more PASS and no FAIL. 52 <h3>23: Shrink-to-fit table-cell with a child of orthogonal block with borders in inline-block</h3> 53 <div class="test"> 54 <table><tr><td><div class="inline-block"><div class="target border">HHH</div></div></td><td class="next">ZZ</td></tr></table> 55 </div> 56 </div> 57 <script> 58 if (window.location.search == "?wait") { 59 console.log("Sleeping 5 secs for debug"); 60 setup({explicit_done:true}); 61 window.setTimeout(run, 5000); 62 } else { 63 run(); 64 } 65 66 function run() { 67 Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) { 68 var title = node.previousElementSibling.textContent; 69 test(function () { 70 try { 71 var targetNode = node.querySelector(".target"); 72 var fontSize = parseFloat(getComputedStyle(targetNode).fontSize); 73 var targetBounds = targetNode.getBoundingClientRect(); 74 assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical") 75 var nextNode = node.querySelector(".next"); 76 var nextBounds = nextNode.getBoundingClientRect(); 77 assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box"); 78 } catch (e) { 79 node.previousElementSibling.classList.add("fail"); 80 throw e; 81 } 82 }, title); 83 }); 84 done(); 85 } 86 </script>