<!DOCTYPE html>
<html>
<head>
<script src="../../resources/check-layout.js"></script>
<style>
    body { font: 16px/1.25 monospace; }
    .box { height: 20px; border: 1px solid black; position: absolute; left: 200px; }
    .region { -webkit-flow-from: flow; }
    .reference { background-color: red; }

    #content { -webkit-flow-into: flow; background-color: green;}    

    #region1 { max-width: 1%; top: 200px; }
    #region2 { max-width: 1vw; top: 221px; }
    #region3 { max-width: 1vmin; top: 242px; }
    #region4 { max-width: 1rem; top: 263px; }
    #region5 { max-width: calc(1% + 10px); top: 284px; }
    #region6 { max-width: 1px; top: 305px; }
    
    #region7 { min-width: 50%; top: 326px; }
    #region8 { min-width: calc(50% - 100px); top: 347px; }
    #region9 { min-width: 50vw; top: 368px; }
    #region10 { min-width: 50vmin; top: 389px; }
    #region11 { min-width: 10rem; top: 410px; }
    #region12 { min-width: 200px; top: 431px; }

    #reference1 { max-width: 1%; top: 200px; }
    #reference2 { max-width: 1vw; top: 221px; }
    #reference3 { max-width: 1vmin; top: 242px; }
    #reference4 { max-width: 1rem; top: 263px; }
    #reference5 { max-width: calc(1% + 10px); top: 284px; }
    #reference6 { max-width: 1px; top: 305px; }
    
    #reference7 { min-width: 50%; top: 326px; }
    #reference8 { min-width: calc(50% - 100px); top: 347px; }
    #reference9 { min-width: 50vw; top: 368px; }
    #reference10 { min-width: 50vmin; top: 389px; }
    #reference11 { min-width: 10rem; top: 410px; }
    #reference12 { min-width: 200px; top: 431px; }
</style>
</head>
<body onload="checkLayout('.region')">
<p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=115248">[CSSRegions] Min-width and max-width for a region should support values other than length</a>.</p>
<p>On success you should see PASS below</p>
<div id="content">
region1<br>
region2<br>
region3<br>
region4<br>
region5<br>
region6<br>
region7<br>
region8<br>
region9<br>
region10<br>
region11<br>
region12
</div>
<div id="reference1" class="box reference">region1</div>
<div id="reference2" class="box reference">region2</div>
<div id="reference3" class="box reference">region3</div>
<div id="reference4" class="box reference">region4</div>
<div id="reference5" class="box reference">region5</div>
<div id="reference6" class="box reference">region6</div>
<div id="reference7" class="box reference">region7</div>
<div id="reference8" class="box reference">region8</div>
<div id="reference9" class="box reference">region9</div>
<div id="reference10" class="box reference">region10</div>
<div id="reference11" class="box reference">region11</div>
<div id="reference12" class="box reference">region12</div>
<div id="region1" class="box region"></div>
<div id="region2" class="box region"></div>
<div id="region3" class="box region"></div>
<div id="region4" class="box region"></div>
<div id="region5" class="box region"></div>
<div id="region6" class="box region"></div>
<div id="region7" class="box region"></div>
<div id="region8" class="box region"></div>
<div id="region9" class="box region"></div>
<div id="region10" class="box region"></div>
<div id="region11" class="box region"></div>
<div id="region12" class="box region"></div>
<script>
for (i = 1;i < 13;i++) 
    document.getElementById("region"+i).setAttribute("data-expected-width", document.getElementById("reference"+i).offsetWidth);
</script>
</body>
</html>