| OLD | NEW |
|---|
| (Empty) | |
| 1 <!doctype html> |
| 2 <script src="../../resources/testharness.js"></script> |
| 3 <script src="../../resources/testharnessreport.js"></script> |
| 4 <script src="../../css-parser/resources/property-parsing-test.js"></script> |
| 5 |
| 6 <style> |
| 7 #parent { width: 200px; } |
| 8 #div1 { width: calc(calc(50px)); } |
| 9 #div2 { width: calc(calc(60%) - 20px); } |
| 10 #div3 { width: calc(calc(3 * 25%)); } |
| 11 #div4 { |
| 12 --width: calc(10% + 30px); |
| 13 width: calc(2 * var(--width)); |
| 14 } |
| 15 </style> |
| 16 <div id=parent> |
| 17 <div id=div1></div> |
| 18 <div id=div2></div> |
| 19 <div id=div3></div> |
| 20 <div id=div4></div> |
| 21 </div> |
| 22 |
| 23 <script> |
| 24 // Tests using property-parsing-test.js |
| 25 assert_valid_value("left", "calc(20px + calc(80px))", "calc(100px)"); |
| 26 assert_valid_value("left", "calc(calc(100px))", "calc(100px)"); |
| 27 assert_valid_value("left", "calc(calc(2) * calc(50px)", "calc(100px)"); |
| 28 assert_valid_value("left", "calc(calc(150px*2/3)", "calc(100px)"); |
| 29 assert_valid_value("left", "calc(calc(2 * calc(calc(3)) + 4) * 10px)", "calc(100
px)"); |
| 30 assert_valid_value("left", "calc(50px + calc(40%))", "calc(50px + 40%)"); |
| 31 assert_valid_value("border", "calc(calc(10px)) solid pink", "calc(10px) solid pi
nk"); |
| 32 |
| 33 // Tests that require layout |
| 34 test(function(){ |
| 35 assert_equals(getComputedStyle(div1).width, "50px"); |
| 36 assert_equals(getComputedStyle(div2).width, "100px"); |
| 37 assert_equals(getComputedStyle(div3).width, "150px"); |
| 38 assert_equals(getComputedStyle(div4).width, "100px"); |
| 39 }, "Nested calcs should work with layout"); |
| 40 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1856633002:
Support nested calc() (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master