border-width-ref.html (930B)
1 <!DOCTYPE html> 2 <title>CSS zoom applies to border-width when specified and inherited</title> 3 <link rel="help" href="https://drafts.csswg.org/css-viewport/"> 4 5 <style> 6 body { 7 --scale: 1; 8 } 9 .box { 10 width: calc(60px * var(--scale)); 11 height: calc(60px * var(--scale)); 12 border: calc(8px * var(--scale)) solid red; 13 margin: calc(10px * var(--scale)); 14 display: inline-block; 15 font-size: calc(16px * var(--scale)); 16 } 17 .box-rem { 18 width: calc(60px * var(--scale)); 19 height: calc(60px * var(--scale)); 20 border: calc(0.5rem * var(--scale)) solid blue; 21 margin: calc(10px * var(--scale)); 22 display: inline-block; 23 font-size: calc(1rem * var(--scale)); 24 } 25 .zoom { 26 --scale: 2; 27 } 28 </style> 29 30 <div class="box">unzoomed px</div> 31 <div class="box-rem">unzoomed rem</div> 32 33 <div class="zoom"> 34 <div class="box">zoomed px</div> 35 </div> 36 37 <div class="zoom box">zoomed inherited px</div> 38 <div class="zoom box-rem">zoomed inherited rem</div>