orthogonal-parent-shrink-to-fit-001.html (8015B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Writing Modes Test: Shrink-to-fit with orthogonal children</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 with orthogonal children"> 6 <meta name="flags" content="ahem dom combo"> 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>1: Shrink-to-fit inline-block with a child of orthogonal block</h3> 53 <div class="test"> 54 <div class="inline-block"><div class="target">HH</div></div><span class="next">ZZ</span> 55 </div> 56 <h3>2: Shrink-to-fit inline-block with a child of orthogonal inline</h3> 57 <div class="test"> 58 <div class="inline-block"><span class="target">HH</span></div><span class="next">ZZ</span> 59 </div> 60 <h3>3: Shrink-to-fit inline-block with a child of orthogonal block with borders</h3> 61 <div class="test"> 62 <div class="inline-block"><div class="target border">HHH</div></div><span class="next">ZZ</span> 63 </div> 64 <h3>4: Shrink-to-fit inline-block with a child of orthogonal inline with borders</h3> 65 <div class="test"> 66 <div class="inline-block"><span class="target border">HHH</span></div><span class="next">ZZ</span> 67 </div> 68 <h3>5: Shrink-to-fit inline-block with a child of orthogonal block in inline-block</h3> 69 <div class="test"> 70 <div class="inline-block"><div class="inline-block"><div class="target">HH</div></div></div><span class="next">ZZ</span> 71 </div> 72 <h3>6: Shrink-to-fit inline-block with a child of orthogonal inline in inline-block</h3> 73 <div class="test"> 74 <div class="inline-block"><div class="inline-block"><span class="target">HH</span></div></div><span class="next">ZZ</span> 75 </div> 76 <h3>7: Shrink-to-fit inline-block with a child of orthogonal block with borders in inline-block</h3> 77 <div class="test"> 78 <div class="inline-block"><div class="inline-block"><div class="target border">HHH</div></div></div><span class="next">ZZ</span> 79 </div> 80 <h3>8: Shrink-to-fit inline-block with a child of orthogonal inline with borders in inline-block</h3> 81 <div class="test"> 82 <div class="inline-block"><div class="inline-block"><span class="target border">HHH</span></div></div><span class="next">ZZ</span> 83 </div> 84 <h3>9: Shrink-to-fit float with a child of orthogonal block</h3> 85 <div class="test"> 86 <div class="float"><div class="target">HH</div></div><span class="next">ZZ</span> 87 </div> 88 <h3>10: Shrink-to-fit float with a child of orthogonal inline</h3> 89 <div class="test"> 90 <div class="float"><span class="target">HH</span></div><span class="next">ZZ</span> 91 </div> 92 <h3>11: Shrink-to-fit float with a child of orthogonal block with borders</h3> 93 <div class="test"> 94 <div class="float"><div class="target border">HHH</div></div><span class="next">ZZ</span> 95 </div> 96 <h3>12: Shrink-to-fit float with a child of orthogonal inline with borders</h3> 97 <div class="test"> 98 <div class="float"><span class="target border">HHH</span></div><span class="next">ZZ</span> 99 </div> 100 <h3>13: Shrink-to-fit float with a child of orthogonal block in inline-block</h3> 101 <div class="test"> 102 <div class="float"><div class="inline-block"><div class="target">HH</div></div></div><span class="next">ZZ</span> 103 </div> 104 <h3>14: Shrink-to-fit float with a child of orthogonal inline in inline-block</h3> 105 <div class="test"> 106 <div class="float"><div class="inline-block"><span class="target">HH</span></div></div><span class="next">ZZ</span> 107 </div> 108 <h3>15: Shrink-to-fit float with a child of orthogonal block with borders in inline-block</h3> 109 <div class="test"> 110 <div class="float"><div class="inline-block"><div class="target border">HHH</div></div></div><span class="next">ZZ</span> 111 </div> 112 <h3>16: Shrink-to-fit float with a child of orthogonal inline with borders in inline-block</h3> 113 <div class="test"> 114 <div class="float"><div class="inline-block"><span class="target border">HHH</span></div></div><span class="next">ZZ</span> 115 </div> 116 <h3>17: Shrink-to-fit table-cell with a child of orthogonal block</h3> 117 <div class="test"> 118 <table><tr><td><div class="target">HH</div></td><td class="next">ZZ</td></tr></table> 119 </div> 120 <h3>18: Shrink-to-fit table-cell with a child of orthogonal inline</h3> 121 <div class="test"> 122 <table><tr><td><span class="target">HH</span></td><td class="next">ZZ</td></tr></table> 123 </div> 124 <h3>19: Shrink-to-fit table-cell with a child of orthogonal block with borders</h3> 125 <div class="test"> 126 <table><tr><td><div class="target border">HHH</div></td><td class="next">ZZ</td></tr></table> 127 </div> 128 <h3>20: Shrink-to-fit table-cell with a child of orthogonal inline with borders</h3> 129 <div class="test"> 130 <table><tr><td><span class="target border">HHH</span></td><td class="next">ZZ</td></tr></table> 131 </div> 132 <h3>21: Shrink-to-fit table-cell with a child of orthogonal block in inline-block</h3> 133 <div class="test"> 134 <table><tr><td><div class="inline-block"><div class="target">HH</div></div></td><td class="next">ZZ</td></tr></table> 135 </div> 136 <h3>22: Shrink-to-fit table-cell with a child of orthogonal inline in inline-block</h3> 137 <div class="test"> 138 <table><tr><td><div class="inline-block"><span class="target">HH</span></div></td><td class="next">ZZ</td></tr></table> 139 </div> 140 <h3>23: Shrink-to-fit table-cell with a child of orthogonal block with borders in inline-block</h3> 141 <div class="test"> 142 <table><tr><td><div class="inline-block"><div class="target border">HHH</div></div></td><td class="next">ZZ</td></tr></table> 143 </div> 144 <h3>24: Shrink-to-fit table-cell with a child of orthogonal inline with borders in inline-block</h3> 145 <div class="test"> 146 <table><tr><td><div class="inline-block"><span class="target border">HHH</span></div></td><td class="next">ZZ</td></tr></table> 147 </div> 148 </div> 149 <script> 150 if (window.location.search == "?wait") { 151 console.log("Sleeping 5 secs for debug"); 152 setup({explicit_done:true}); 153 window.setTimeout(run, 5000); 154 } else { 155 run(); 156 } 157 158 function run() { 159 Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) { 160 var title = node.previousElementSibling.textContent; 161 test(function () { 162 try { 163 var targetNode = node.querySelector(".target"); 164 var fontSize = parseFloat(getComputedStyle(targetNode).fontSize); 165 var targetBounds = targetNode.getBoundingClientRect(); 166 assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical") 167 var nextNode = node.querySelector(".next"); 168 var nextBounds = nextNode.getBoundingClientRect(); 169 assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box"); 170 } catch (e) { 171 node.previousElementSibling.classList.add("fail"); 172 throw e; 173 } 174 }, title); 175 }); 176 done(); 177 } 178 </script>