| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <title>CSSOM View —— offsetParent element test</title> |
| <link rel="author" title="neo_and_rayi" href="mailto:1988wangxiao@gmail.com"> |
| <link rel="help" href="http://www.w3.org/TR/cssom-view/#extensions-to-the-htmlelement-interface"> |
| <link rel="help" href="http://www.w3.org/TR/cssom-view/#dom-htmlelement-offsetparent"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script id="metadata_cache">/* |
| { |
| "Valid the algorithm rule of offsetParent check step 1": { "assert": "The offsetParent attribute algorithm rule checking passed!" }, |
| "Valid the algorithm rule of offsetParent check step 2": { "assert": "The offsetParent attribute algorithm rule checking passed!" } |
| } |
| */</script> |
| <style> |
| #fixed { |
| position: fixed; |
| } |
| |
| #none-element { |
| display:none; |
| } |
| |
| #relative-element { |
| position: relative; |
| } |
| |
| #absolute-element { |
| position: absolute; |
| } |
| </style> |
| |
| </head> |
| <body> |
| |
| <div id="body-element-child"></div> |
| |
| <div id="relative-element"> |
| <div id="relative-element-child"></div> |
| </div> |
| |
| <div id="absolute-element"> |
| <div id="absolute-element-child"></div> |
| </div> |
| |
| <table id="table-element"> |
| <caption> |
| <div id="caption-element-child"></div> |
| </caption> |
| |
| <tbody> |
| <tr id="table-element-tr"> |
| <td id="table-element-td"> |
| <span id="table-element-child"></span> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <div id="none-element"> |
| <a href="#" id="none-element-child-a"></a> |
| <p id="none-element-child-p"></p> |
| <video id="none-element-child-video"></video> |
| <audio id="none-element-child-audio"></audio> |
| <canvas id="none-element-child-canvas"></canvas> |
| <svg id="none-element-child-svg"></svg> |
| </div> |
| |
| <div id="fixed"> |
| </div> |
| |
| <div id="log"></div> |
| <script type="text/javascript"> |
| var getStyle = window.getComputedStyle; |
| var html = document.documentElement; |
| var body = document.body; |
| var fixed_element = document.getElementById('fixed'); |
| var none_element = document.getElementById('none-element'); |
| |
| var none_element_child_a = document.getElementById('none-element-child-a'); |
| var none_element_child_p = document.getElementById('none-element-child-p'); |
| var none_element_child_video = document.getElementById('none-element-child-video'); |
| var none_element_child_audio = document.getElementById('none-element-child-audio'); |
| var none_element_child_canvas = document.getElementById('none-element-child-canvas'); |
| var none_element_child_svg = document.getElementById('none-element-child-svg'); |
| |
| var relative_element = document.getElementById('relative-element'); |
| var absolute_element = document.getElementById('absolute-element'); |
| var td_element = document.getElementsByTagName('td')[0]; |
| |
| var body_element_child = document.getElementById('body-element-child'); |
| var relative_element_child = document.getElementById('relative-element-child'); |
| var absolute_element_child = document.getElementById('absolute-element-child'); |
| var table_element_child = document.getElementById('table-element-child'); |
| |
| var caption_element_child = document.getElementById('caption-element-child'); |
| var table_element_tr = document.getElementById('table-element-tr'); |
| var table_element = document.getElementById('table-element'); |
| |
| test(function() { |
| assert_equals(html.offsetParent,null); |
| assert_equals(body.offsetParent,null); |
| assert_equals(fixed_element.offsetParent,null); |
| assert_equals(none_element.offsetParent,null); |
| assert_equals(none_element_child_a.offsetParent,null); |
| assert_equals(none_element_child_p.offsetParent,null); |
| assert_equals(none_element_child_video.offsetParent,null); |
| assert_equals(none_element_child_audio.offsetParent,null); |
| assert_equals(none_element_child_canvas.offsetParent,null); |
| assert_equals(none_element_child_svg.offsetParent,null); |
| }, "Valid the algorithm rule of offsetParent check step 1", |
| { assert: "The offsetParent attribute algorithm rule checking passed!" } |
| ); |
| |
| test(function() { |
| assert_equals(body_element_child.offsetParent,body); |
| assert_equals(window.getComputedStyle(relative_element).position,'relative'); |
| assert_equals(relative_element_child.offsetParent,relative_element); |
| assert_equals(window.getComputedStyle(absolute_element).position,'absolute'); |
| assert_equals(absolute_element_child.offsetParent,absolute_element); |
| assert_equals(window.getComputedStyle(td_element).position,'static'); |
| assert_equals(table_element_child.offsetParent,td_element); |
| assert_equals(window.getComputedStyle(table_element_tr).position,'static'); |
| assert_equals(table_element_tr.offsetParent,table_element); |
| assert_equals(window.getComputedStyle(caption_element_child).position,'static'); |
| assert_equals(caption_element_child.offsetParent,table_element); |
| assert_equals(window.getComputedStyle(td_element).position,'static'); |
| assert_equals(td_element.offsetParent,table_element); |
| }, "Valid the algorithm rule of offsetParent check step 2", |
| { assert: "The offsetParent attribute algorithm rule checking passed!" } |
| ); |
| |
| </script> |
| |
| </body> |
| </html> |
