Summary

Harness status: OK

Found 13 tests

Details

ResultTest NameMessage
Fail.flexbox 1assert_equals: <div class="flexbox" data-expected-height="50"> <div data-expected-height="50"> <div style="height: 50%" data-expected-height="25"> <div class="rect" data-expected-height="50"></div> </div> </div> </div> height expected 25 but got 50
    at assert_tolerance (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:24:9)
    at checkExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:77:9)
    at checkSubtreeExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:7:25)
    at https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:9:26
    at NodeList.forEach (<anonymous>)
Asserts run
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Fail
assert_equals(50, 25, "\n<div class=\"flexbox\" data-expected-height=\"50\">\n  <div data-expected-height=\"50\">\n    <div style=\"height: 50%\" data-expected-height=\"25\">\n      <div class=\"rect\" data-expected-height=\"50\"></div>\n    </div>\n  </div>\n</div>\nheight")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)
Fail.flexbox 2assert_equals: <div class="flexbox wrap" data-expected-height="50"> <div data-expected-height="50"> <div style="height: 50%" data-expected-height="25"> <div class="rect" data-expected-height="50"></div> </div> </div> </div> height expected 25 but got 50
    at assert_tolerance (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:24:9)
    at checkExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:77:9)
    at checkSubtreeExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:7:25)
    at https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:9:26
    at NodeList.forEach (<anonymous>)
Asserts run
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Fail
assert_equals(50, 25, "\n<div class=\"flexbox wrap\" data-expected-height=\"50\">\n  <div data-expected-height=\"50\">\n    <div style=\"height: 50%\" data-expected-height=\"25\">\n      <div class=\"rect\" data-expected-height=\"50\"></div>\n    </div>\n  </div>\n</div>\nheight")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)
Pass.flexbox 3
Asserts run
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Fail.flexbox 4assert_equals: 
<div class="flexbox" style="height: 50px;" data-expected-height="50">
  <div data-expected-height="50">
    <div style="height: 50%" data-expected-height="25">
      <div class="rect" data-expected-height="50"></div>
    </div>
  </div>
</div>
height expected 25 but got 50
    at assert_tolerance (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:24:9)
    at checkExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:77:9)
    at checkSubtreeExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:7:25)
    at https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:9:26
    at NodeList.forEach (<anonymous>)
Asserts run
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Fail
assert_equals(50, 25, "\n<div class=\"flexbox\" style=\"height: 50px;\" data-expected-height=\"50\">\n  <div data-expected-height=\"50\">\n    <div style=\"height: 50%\" data-expected-height=\"25\">\n      <div class=\"rect\" data-expected-height=\"50\"></div>\n    </div>\n  </div>\n</div>\nheight")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)
Fail.flexbox 5assert_equals: 
<div class="flexbox" style="height: 50px;" data-expected-height="50">
  <div class="flexbox" data-expected-height="50">
    <div data-expected-height="50">
      <div style="height: 50%" data-expected-height="25">
        <div class="rect" data-expected-height="50"></div>
      </div>
    </div>
  </div>
</div>
height expected 25 but got 50
    at assert_tolerance (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:24:9)
    at checkExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:77:9)
    at checkSubtreeExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:7:25)
    at https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:9:26
    at NodeList.forEach (<anonymous>)
Asserts run
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Fail
assert_equals(50, 25, "\n<div class=\"flexbox\" style=\"height: 50px;\" data-expected-height=\"50\">\n  <div class=\"flexbox\" data-expected-height=\"50\">\n    <div data-expected-height=\"50\">\n      <div style=\"height: 50%\" data-expected-height=\"25\">\n        <div class=\"rect\" data-expected-height=\"50\"></div>\n      </div>\n    </div>\n  </div>\n</div>\nheight")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)
Fail.flexbox 6assert_equals: 
<div class="flexbox" data-expected-height="50">
    <div data-expected-height="50">
      <div style="height: 50%" data-expected-height="25">
        <div class="rect" data-expected-height="50"></div>
      </div>
    </div>
  </div>
height expected 25 but got 50
    at assert_tolerance (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:24:9)
    at checkExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:77:9)
    at checkSubtreeExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:7:25)
    at https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:9:26
    at NodeList.forEach (<anonymous>)
Asserts run
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Fail
assert_equals(50, 25, "\n<div class=\"flexbox\" data-expected-height=\"50\">\n    <div data-expected-height=\"50\">\n      <div style=\"height: 50%\" data-expected-height=\"25\">\n        <div class=\"rect\" data-expected-height=\"50\"></div>\n      </div>\n    </div>\n  </div>\nheight")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)
Fail.flexbox 7assert_equals: 
<div class="flexbox" style="height: 50px;" data-expected-height="50">
  <div class="flexbox column" data-expected-height="50">
    <div class="flex-one" data-expected-height="50">
      <div style="height: 50%" data-expected-height="25">
        <div class="rect" data-expected-height="50"></div>
      </div>
    </div>
  </div>
</div>
height expected 25 but got 50
    at assert_tolerance (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:24:9)
    at checkExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:77:9)
    at checkSubtreeExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:7:25)
    at https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:9:26
    at NodeList.forEach (<anonymous>)
Asserts run
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Fail
assert_equals(50, 25, "\n<div class=\"flexbox\" style=\"height: 50px;\" data-expected-height=\"50\">\n  <div class=\"flexbox column\" data-expected-height=\"50\">\n    <div class=\"flex-one\" data-expected-height=\"50\">\n      <div style=\"height: 50%\" data-expected-height=\"25\">\n        <div class=\"rect\" data-expected-height=\"50\"></div>\n      </div>\n    </div>\n  </div>\n</div>\nheight")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)
Fail.flexbox 8assert_equals: 
<div class="flexbox column" data-expected-height="50">
    <div class="flex-one" data-expected-height="50">
      <div style="height: 50%" data-expected-height="25">
        <div class="rect" data-expected-height="50"></div>
      </div>
    </div>
  </div>
height expected 25 but got 50
    at assert_tolerance (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:24:9)
    at checkExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:77:9)
    at checkSubtreeExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:7:25)
    at https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:9:26
    at NodeList.forEach (<anonymous>)
Asserts run
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Fail
assert_equals(50, 25, "\n<div class=\"flexbox column\" data-expected-height=\"50\">\n    <div class=\"flex-one\" data-expected-height=\"50\">\n      <div style=\"height: 50%\" data-expected-height=\"25\">\n        <div class=\"rect\" data-expected-height=\"50\"></div>\n      </div>\n    </div>\n  </div>\nheight")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)
Fail.flexbox 9assert_equals: 
<div class="flexbox" style="height: 50px;" data-expected-height="50">
  <div data-expected-height="50">
    <div style="height: 50%; min-height: 30px;" data-expected-height="30">
      <div class="rect" data-expected-height="50"></div>
    </div>
  </div>
</div>
height expected 30 but got 50
    at assert_tolerance (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:24:9)
    at checkExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:77:9)
    at checkSubtreeExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:7:25)
    at https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:9:26
    at NodeList.forEach (<anonymous>)
Asserts run
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Fail
assert_equals(50, 30, "\n<div class=\"flexbox\" style=\"height: 50px;\" data-expected-height=\"50\">\n  <div data-expected-height=\"50\">\n    <div style=\"height: 50%; min-height: 30px;\" data-expected-height=\"30\">\n      <div class=\"rect\" data-expected-height=\"50\"></div>\n    </div>\n  </div>\n</div>\nheight")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)
Fail.flexbox 10assert_equals: 
<div class="flexbox" data-expected-height="50">
  <div data-expected-height="50">
    <div style="max-height: 50%" data-expected-height="25">
      <div class="rect" data-expected-height="50"></div>
    </div>
  </div>
</div>
height expected 25 but got 50
    at assert_tolerance (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:24:9)
    at checkExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:77:9)
    at checkSubtreeExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:7:25)
    at https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:9:26
    at NodeList.forEach (<anonymous>)
Asserts run
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Fail
assert_equals(50, 25, "\n<div class=\"flexbox\" data-expected-height=\"50\">\n  <div data-expected-height=\"50\">\n    <div style=\"max-height: 50%\" data-expected-height=\"25\">\n      <div class=\"rect\" data-expected-height=\"50\"></div>\n    </div>\n  </div>\n</div>\nheight")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)
Fail.flexbox 11assert_equals: 
<div class="flexbox" style="height: 10%;" data-expected-height="80">
  <div data-expected-height="80">
    <div style="height: 50%" data-expected-height="40">
      <div class="rect" data-expected-height="50"></div>
    </div>
  </div>
</div>
height expected 80 but got 50
    at assert_tolerance (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:24:9)
    at checkExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:77:9)
    at checkSubtreeExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:7:25)
    at https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:9:26
    at NodeList.forEach (<anonymous>)
Asserts run
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Fail
assert_equals(50, 80, "\n<div class=\"flexbox\" style=\"height: 10%;\" data-expected-height=\"80\">\n  <div data-expected-height=\"80\">\n    <div style=\"height: 50%\" data-expected-height=\"40\">\n      <div class=\"rect\" data-expected-height=\"50\"></div>\n    </div>\n  </div>\n</div>\nheight")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)
Fail.flexbox 12assert_equals: 
<div class="flexbox" style="height: 10%;" data-expected-height="50">
    <div data-expected-height="50">
      <div style="height: 50%" data-expected-height="25">
        <div class="rect" data-expected-height="50"></div>
      </div>
    </div>
  </div>
height expected 25 but got 50
    at assert_tolerance (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:24:9)
    at checkExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:77:9)
    at checkSubtreeExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:7:25)
    at https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:9:26
    at NodeList.forEach (<anonymous>)
Asserts run
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Fail
assert_equals(50, 25, "\n<div class=\"flexbox\" style=\"height: 10%;\" data-expected-height=\"50\">\n    <div data-expected-height=\"50\">\n      <div style=\"height: 50%\" data-expected-height=\"25\">\n        <div class=\"rect\" data-expected-height=\"50\"></div>\n      </div>\n    </div>\n  </div>\nheight")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)
Pass.flexbox 13
Asserts run
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-width is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-width is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass
assert_true(true, "data-expected-width is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)




This test verifies that we consider flex items' cross sizes to be definite
if the align value is stretch (the default)



Tests that we get a definite size in the simple case:



  

    

      

    

  





Tests that we get a definite size in a wrapping flexbox:



  

    

      

    

  





Tests that we get an indefinite size when not stretch-aligning, despite
definite size on container:



  

    

      

    

  





Tests that we get a definite size in a definite-height flexbox:



  

    

      

    

  





Tests that we get a definite size in a nested flexbox where only the outer
one has an explicit height:



  

    

      

        

      

    

  





Tests that we get a definite size in a nested flexbox where only the outer
one has an explicit height and has an opposite direction:



  

    

      

        

      

    

  





Tests that we respect min-height, on child of a flex item with percent
height that's treated as definite:



  

    

      

    

  





Tests that max-height also supports percentages:



  

    

      

    

  





Tests that percentage sizes can also be definite:



  

    

      

    

  





Tests that we use a definite size even when a percentage size is not definite



  

    

      

        

      

    

  





Tests that we don't mix up widths and heights