offsetProps-001.html (1507B)
1 <!DOCTYPE html> 2 <title>offsetWidth and offsetHeight of fragmented inline</title> 3 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/cssom-view/#extensions-to-the-htmlelement-interface"> 5 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <div style="columns:3; column-fill:auto; column-gap:10px; width:320px; height:50px; font:8px/16px Ahem; orphans:1; widows:1; background:lightgray;"> 9 p<br> 10 ppp 11 <span id="outer" style="background:cyan;"> 12 <span id="middle" style="background:yellow;"> 13 <span id="inner1" style="color:blue;"> 14 pppp pppp 15 </span> 16 <span id="inner2" style="color:green;"> 17 pppp pppp 18 </span> 19 </span> 20 pppp pppp pppp pppp pppp pppp pppp pppp 21 </span> 22 </span> 23 </div> 24 <script> 25 setup({ explicit_done: true }); 26 document.fonts.ready.then(() => { 27 test(() => { 28 assert_equals(outer.offsetWidth, 292); 29 assert_equals(outer.offsetHeight, 40); 30 }, "outer"); 31 32 test(() => { 33 assert_equals(middle.offsetWidth, 150); 34 assert_equals(middle.offsetHeight, 40); 35 }, "middle"); 36 37 test(() => { 38 assert_equals(inner1.offsetWidth, 64); 39 assert_equals(inner1.offsetHeight, 24); 40 }, "inner1"); 41 42 test(() => { 43 assert_equals(inner2.offsetWidth, 110); 44 assert_equals(inner2.offsetHeight, 40); 45 }, "inner2"); 46 47 done(); 48 }); 49 </script>