| <!-- webkit-test-runner [ BlocksInInlineLayoutEnabled=true ] --> |
| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <style> |
| .outline-container { |
| margin: 10px 0px; |
| width: 10px; |
| height: 10px; |
| outline: auto; |
| font: 10px/1 Ahem; |
| } |
| |
| .outline-container > span > div { |
| color: lime; |
| } |
| |
| .inline-block-text > .outline-container > span > div { |
| display: inline-block; |
| } |
| |
| .inline-text > .outline-container > span > div { |
| display: inline; |
| } |
| </style> |
| <p>Test passes if the outline is wrapping all the green boxes.</p> |
| <div style="display: grid; grid-template-columns: repeat(6, 100px);"> |
| <div> |
| <div class="outline-container" style="padding-left: 5px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding-right: 5px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding-top: 5px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding-bottom: 5px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding: 0px 5px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding: 5px 0px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding: 5px;"> |
| <span><div>XX</div></span> |
| </div> |
| </div> |
| <div> |
| <div class="outline-container" style="padding-left: 20px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding-right: 20px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding-top: 20px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding-bottom: 20px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding: 0px 20px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding: 20px 0px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding: 20px;"> |
| <span><div>XX</div></span> |
| </div> |
| </div> |
| <div class="inline-block-text"> |
| <div class="outline-container" style="padding-left: 5px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding-right: 5px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding-top: 5px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding-bottom: 5px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding: 0px 5px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding: 5px 0px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding: 5px;"> |
| <span><div>XX</div></span> |
| </div> |
| </div> |
| <div class="inline-block-text"> |
| <div class="outline-container" style="padding-left: 20px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding-right: 20px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding-top: 20px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding-bottom: 20px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding: 0px 20px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding: 20px 0px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding: 20px;"> |
| <span><div>XX</div></span> |
| </div> |
| </div> |
| <div class="inline-text"> |
| <div class="outline-container" style="padding-left: 5px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding-right: 5px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding-top: 5px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding-bottom: 5px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding: 0px 5px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding: 5px 0px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding: 5px;"> |
| <span><div>XX</div></span> |
| </div> |
| </div> |
| <div class="inline-text"> |
| <div class="outline-container" style="padding-left: 20px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding-right: 20px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding-top: 20px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding-bottom: 20px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding: 0px 20px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding: 20px 0px;"> |
| <span><div>XX</div></span> |
| </div> |
| <div class="outline-container" style="padding: 20px;"> |
| <span><div>XX</div></span> |
| </div> |
| </div> |
| </div> |
