cssbox-stroke-box.html (925B)
1 <!DOCTYPE html> 2 <title>transform-box: stroke-box (CSS layout)</title> 3 <link rel="match" href="./reference/cssbox-ref.html"> 4 <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> 5 <meta name="assert" content="This should display a square with a black bar at the top whose top-left corner is at 100,100."/> 6 7 <style> 8 #target { 9 width: 150px; 10 height: 200px; 11 margin-left: 300px; 12 margin-top: 100px; 13 background-color: green; 14 border-left: solid 50px black; 15 16 transform: rotate(90deg); 17 transform-origin: 0 0; 18 transform-box: stroke-box; /* alias for border-box */ 19 } 20 </style> 21 22 <div id="target"></div> 23 24 <div id="error"></div> 25 <script> 26 var refStyle = "stroke-box"; 27 var compStyle = getComputedStyle(document.getElementById('target')).transformBox; 28 if (refStyle != compStyle) 29 document.getElementById('error').textContent = "Error, got computed style " + compStyle; 30 </script>