content-box-mutation-001.html (924B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>transform-box: content-box, box border mutated</title> 4 <link rel="match" href="reference/cssbox-ref.html"> 5 <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> 6 <script src="/common/reftest-wait.js"></script> 7 <script src="/common/rendering-utils.js"></script> 8 <meta name="assert" content="This should display a square with a black bar at the top whose top-left corner is at 100,100."/> 9 <style> 10 #target { 11 width: 150px; 12 height: 200px; 13 margin-left: 300px; 14 margin-top: 100px; 15 background-color: green; 16 border-left: solid 25px black; 17 18 transform: rotate(90deg); 19 transform-origin: -50px 0; 20 transform-box: content-box; 21 } 22 </style> 23 <div id="target"></div> 24 <script> 25 waitForAtLeastOneFrame().then(() => { 26 document.querySelector('#target').style.borderLeft = 'solid 50px black'; 27 takeScreenshot(); 28 }); 29 </script>