calc-nesting.html (1203B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Values and Units Test: nested calc() functions</title> 6 7 <!-- 8 9 This test is the first portion of the original test 10 11 https://chromium.googlesource.com/chromium/src/+/c825d655f6aaf73484f9d56e9012793f5b9668cc/third_party/WebKit/LayoutTests/css3/calc/calc-nesting.html 12 13 --> 14 15 <link rel="help" href="https://www.w3.org/TR/css-values-3/#calc-notation"> 16 17 <script src="/resources/testharness.js"></script> 18 <script src="/resources/testharnessreport.js"></script> 19 20 <style> 21 #parent { width: 200px; } 22 #div1 { width: calc(calc(50px)); } 23 #div2 { width: calc(calc(60%) - 20px); } 24 #div3 { width: calc(calc(3 * 25%)); } 25 #div4 { 26 --width: calc(10% + 30px); 27 width: calc(2 * var(--width)); 28 } 29 </style> 30 <div id=parent> 31 <div id=div1></div> 32 <div id=div2></div> 33 <div id=div3></div> 34 <div id=div4></div> 35 </div> 36 <script> 37 // Tests that require layout 38 test(function(){ 39 assert_equals(getComputedStyle(div1).width, "50px"); 40 assert_equals(getComputedStyle(div2).width, "100px"); 41 assert_equals(getComputedStyle(div3).width, "150px"); 42 assert_equals(getComputedStyle(div4).width, "100px"); 43 }, "Nested calcs should work with layout"); 44 </script>