cssom-getBoxQuads-001.html (1957B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSSOM View - getBoxQuads() returns proper border and margin boxes for block and flex</title> 5 <link rel="help" href="https://drafts.csswg.org/cssom-view/#the-geometryutils-interface"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <style> 10 .container { 11 width: 100px; 12 height: 50px; 13 background-color: gray; 14 } 15 span { 16 display: block; 17 background: gold; 18 height: 4px; 19 width: 14px; 20 margin: auto; 21 padding: 0px; 22 border: 3px solid blue; 23 } 24 </style> 25 </head> 26 <body> 27 <div class="container"> 28 <span id="block-block"></span> 29 </div> 30 31 <div class="container" style="display:flex"> 32 <span id="flex-block"></span> 33 </div> 34 35 <script> 36 let bb = document.getElementById("block-block") 37 let fb = document.getElementById("flex-block") 38 test(function() { 39 assert_equals(bb.getBoxQuads({box: "border"})[0].getBounds().width, 20) 40 }, "Block layout border box is expected width.") 41 test(function() { 42 assert_equals(bb.getBoxQuads({box: "margin"})[0].getBounds().width, 100) 43 }, "Block layout margin box is expected width.") 44 45 // For containers that expand items to fill block-axis space, measure the box heights also. 46 test(function() { 47 assert_equals(fb.getBoxQuads({box: "border"})[0].getBounds().width, 20) 48 }, "Flex layout border box is expected width.") 49 test(function() { 50 assert_equals(fb.getBoxQuads({box: "margin"})[0].getBounds().width, 100) 51 }, "Flex layout margin box is expected width.") 52 53 test(function() { 54 assert_equals(fb.getBoxQuads({box: "border"})[0].getBounds().height, 10) 55 }, "Flex layout border box is expected height.") 56 test(function() { 57 assert_equals(fb.getBoxQuads({box: "margin"})[0].getBounds().height, 50) 58 }, "Flex layout margin box is expected height.") 59 </script> 60 </body> 61 </html>