clipped-elements.html (3579B)
1 <!DOCTYPE html><html> 2 <head><style> 3 html,body { 4 color:black; background-color:white; font-size:16px; padding:0; margin:0; 5 } 6 .test { 7 overflow: hidden; 8 text-overflow: ellipsis; 9 width: 50px; 10 margin-bottom:1em; 11 height: 20px; 12 white-space:nowrap; 13 /*border:1px solid red;width: 500px;*/ 14 } 15 .rel { position:relative;} 16 input,select,fieldset,textarea,hr,span { 17 border:1px solid black; 18 background: white; 19 color: black; 20 padding:0 40px; 21 } 22 iframe,img { width: 80px; height:10px; } 23 select[size="4"],iframe,textarea,hr { height:10px; margin:0; } 24 25 x {visibility:hidden;display:inline-block;margin-left:-10px;width:1000px;} 26 </style></head> 27 <body> 28 29 <div style="position:absolute; top:0; left:0;"> 30 <div class="test"><fieldset style="display:inline;"></fieldset></div> 31 <div class="test"><fieldset style="display:inline-block;"></fieldset></div> 32 <div class="test"><fieldset style="display:block;"></fieldset></div> 33 34 <div class="test"><input type="button"></div> 35 <div class="test"><input type="button" style="display:inline-block;"></div> 36 <div class="test"><input type="button" style="display:list-item;"></div> 37 <div class="test"><input type="button" style="display:block;"></div> 38 39 <div class="test"><input type="text"></div> 40 <div class="test"><input type="text" style="display:inline-block;"></div> 41 <div class="test"><input type="text" style="display:block;"></div> 42 43 <div class="test"><textarea></textarea></div> 44 <div class="test"><textarea style="display:inline-block;"></textarea></div> 45 <div class="test"><textarea style="display:block;"></textarea></div> 46 47 <div class="test"><select size="1" style=""><option> <option> </select></div> 48 <div class="test"><select size="1" style="display:block;"><option> <option> </select></div> 49 50 <div class="test"><select size="4" style=""><option> <option> </select></div> 51 <div class="test"><select size="4" style="display:block;"><option> <option> </select></div> 52 </div> 53 54 <div style="position:absolute; top:0; left:100px;"> 55 <div class="test"><iframe src="about:blank" style=""></iframe></div> 56 <div class="test"><iframe src="about:blank" style="display:block"></iframe></div> 57 58 <div class="test"> <img src="../image/big.png"></div> 59 <div class="test"> <img style="display:inline-block;" src="../image/big.png"></div> 60 <div class="test"><img style="display:block;" src="../image/big.png"></div> 61 62 <div class="test"><hr style="display:inline;background:lime;vertical-align:top;padding-top:100px;padding-bottom:100px; border-width:0"></div> 63 <div class="test"><hr style="display:inline-block;vertical-align:top"></div> 64 <div class="test"><hr style="display:block;"></div> 65 66 <div class="test"><span style="border-width:0"></span></div> 67 <div class="test"><span style="display:inline-block;"></span></div> 68 <div class="test"><span style="display:inline-table;"></span></div> 69 <div class="test"><span style="display:list-item;"></span></div> 70 <div class="test"><span style="display:block;"></span></div> 71 <div class="test rel">1<span style="position:relative;"></span></div> 72 <div class="test rel">2<span style="position:absolute"></span></div> 73 <div class="test rel">3<span style="position:absolute; left:60px"></span></div> 74 <div class="test rel">4<x></x><span style="position:absolute;">abs4</span></div> 75 <div class="test"><span style="float:left"></span></div> 76 <div class="test"><span style="float:left; margin-left:-10px"></span></div> 77 <div class="test"><span style="float:right; margin-right:-10px"></span></div> 78 </div> 79 80 </body></html>