mirror of
				https://github.com/RGBCube/serenity
				synced 2025-10-31 19:22:45 +00:00 
			
		
		
		
	 d43ef27761
			
		
	
	
		d43ef27761
		
	
	
	
	
		
			
			Layout box offset coordinates are always relative to their containing block. Therefore, the functions that convert between coordinate spaces should only visit containing blocks and apply their offsets, not *every* box in the parent chain. This fixes an issue where some floating boxes were unexpectedly far away from their containing block.
		
			
				
	
	
		
			52 lines
		
	
	
	
		
			1.1 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			52 lines
		
	
	
	
		
			1.1 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <!DOCTYPE html>
 | |
| <html>
 | |
|   <head>
 | |
|     <title>float horror show</title>
 | |
|     <style type="text/css">
 | |
| html {
 | |
|     font: 16px/1 Arial;
 | |
| }
 | |
|       .outer {
 | |
|         border: 1px solid black;
 | |
|         width: 300px;
 | |
|         height: 250px;
 | |
|       }
 | |
| 
 | |
|       .one {
 | |
|         float: left;
 | |
|         height: 50px;
 | |
|         width: 200px;
 | |
|         margin: 0;
 | |
|         border: 1px solid black;
 | |
|         background-color: #fc0;
 | |
|       }
 | |
|       .two {
 | |
|         float: right;
 | |
|         height: 50px;
 | |
|         width: 200px;
 | |
|         margin: 0;
 | |
|         border: 1px solid black;
 | |
|         background-color: pink;
 | |
|       }
 | |
|       .lefty {
 | |
|         float: left;
 | |
|         height: 50px;
 | |
|         width: 50px;
 | |
|         margin: 0;
 | |
|         border: 1px solid black;
 | |
|         background-color: lime;
 | |
|       }
 | |
|       .righty {
 | |
|         float: right;
 | |
|         height: 30px;
 | |
|         width: 30px;
 | |
|         margin: 0;
 | |
|         border: 1px solid black;
 | |
|         background-color: magenta;
 | |
|       }
 | |
| </style></head><body>
 | |
|     <div class=outer>
 | |
|         foo bar baz foo bar baz
 | |
|         <div class=lefty></div>
 | |
|         <div class=one></div>
 | |
|         <div class=two></div>
 |