Resolve the percentage values of inset properties against proper box.
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / cssom / getComputedStyle-sticky-pos-percent.html
1 <!DOCTYPE html>
2 <title>CSS Test: resolve top percentage value against proper box</title>
3 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3115" />
4 <link rel="help" href="https://drafts.csswg.org/css-position/#sticky-pos" />
5 <link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values" />
6 <meta name="assert" content="Test that the sticky percentage insets are
7 resolved against the right ancestor, i.e. the nearest scrollport." />
8
9 <script src="/resources/testharness.js"></script>
10 <script src="/resources/testharnessreport.js"></script>
11
12 <div style="height: 500px; background: purple; overflow: hidden;">
13   <div style="height: 400px; background: yellow;">
14     <div id="target" style="height: 100px; position: sticky; left: 0; top: 50%; background: blue;">
15     </div>
16   </div>
17 </div>
18 <script>
19 test(() => {
20   assert_equals(getComputedStyle(target).top, '250px');
21 }, "Sticky element's top property percentage value should be resolved against the div with overflow: hidden");
22 </script>