Status: PASS | Duration: 6ms | Subtests: 1/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi
/css/css-values/calc-max-height-block-1.html
<!DOCTYPE HTML> <html> <head> <title>CSS Test: Test for max-height:calc() on blocks</title> <link rel="author" title="L. David Baron" href="https://dbaron.org/"> <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"> <link rel="match" href="calc-max-height-block-1-ref.html"> <style type="text/css"> body { margin: 0 } body > div { float: left; height: 100px; width: 1px; } body > div > div { background: blue } /* to give the max-height something to restrict */ span { display: block; height: 300px } </style> </head> <body> <!-- tests with a fixed-height container --> <div><div style="max-height: calc(50px)"><span></span></div></div> <div><div style="max-height: calc(50%)"><span></span></div></div> <div><div style="max-height: calc(25px + 50%)"><span></span></div></div> <div><div style="max-height: calc(150% / 2 - 30px)"><span></span></div></div> <div><div style="max-height: calc(40px + 10% - 20% / 2)"><span></span></div></div> <div><div style="max-height: calc(40px - 10%)"><span></span></div></div> <!-- tests with an auto-height container --> <div><div><div style="max-height: calc(50px)"><span></span></div></div></div> <div><div><div style="max-height: calc(50%)"><span></span></div></div></div> <div><div><div style="max-height: calc(25px + 50%)"><span></span></div></div></div> <div><div><div style="max-height: calc(150% / 2 - 30px)"><span></span></div></div></div> <div><div><div style="max-height: calc(40px + 10% - 20% / 2)"><span></span></div></div></div> <div><div><div style="max-height: calc(40px - 10%)"><span></span></div></div></div> </body> </html>
/css/css-values/calc-max-height-block-1-ref.html
<!DOCTYPE HTML> <html> <head> <title>CSS Reference: Test for max-height:calc() on blocks</title> <link rel="author" title="L. David Baron" href="https://dbaron.org/"> <style type="text/css"> body { margin: 0 } body > div { float: left; width: 1px; background: blue; } </style> </head> <body> <!-- tests with a fixed-height container --> <div style="height: 50px"></div> <div style="height: 50px"></div> <div style="height: 75px"></div> <div style="height: 45px"></div> <div style="height: 40px"></div> <div style="height: 30px"></div> <!-- tests with an auto-height container --> <div style="height: 50px"></div> <div style="height: 300px"></div> <div style="height: 300px"></div> <div style="height: 300px"></div> <div style="height: 300px"></div> <div style="height: 300px"></div> </body> </html>