offsetParent_element_test.html (6357B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>CSSOM View —— offsetParent element test</title> 6 <meta name="viewport" content="width=device-width,initial-scale=1"> 7 <link rel="author" title="neo_and_rayi" href="mailto:1988wangxiao@gmail.com"> 8 <link rel="help" href="http://www.w3.org/TR/cssom-view/#extensions-to-the-htmlelement-interface"> 9 <link rel="help" href="http://www.w3.org/TR/cssom-view/#dom-htmlelement-offsetparent"> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <style> 13 #fixed { 14 position: fixed; 15 } 16 17 #none-element { 18 display:none; 19 } 20 21 #relative-element { 22 position: relative; 23 } 24 25 #absolute-element { 26 position: absolute; 27 } 28 29 #transform-element { 30 transform: translateX(10px); 31 } 32 33 #perspective-element { 34 perspective: 10px; 35 } 36 37 #transform-style-preserve-3d-element { 38 transform-style: preserve-3d; 39 } 40 41 #filter-element { 42 filter: opacity(25%); 43 } 44 45 #contain-paint-element { 46 contain: paint; 47 } 48 </style> 49 50 </head> 51 <body> 52 53 <div id="body-element-child"></div> 54 55 <div id="relative-element"> 56 <div id="relative-element-child"></div> 57 </div> 58 59 <div id="absolute-element"> 60 <div id="absolute-element-child"></div> 61 </div> 62 63 <div id="transform-element"> 64 <div id="transform-element-child"></div> 65 </div> 66 67 <div id="transform-style-preserve-3d-element"> 68 <div id="transform-style-preserve-3d-element-child"></div> 69 </div> 70 71 <div id="perspective-element"> 72 <div id="perspective-element-child"></div> 73 </div> 74 75 <div id="contain-paint-element"> 76 <div id="contain-paint-element-child"></div> 77 </div> 78 79 <table id="table-element"> 80 <caption> 81 <div id="caption-element-child"></div> 82 </caption> 83 84 <tbody> 85 <tr id="table-element-tr"> 86 <td id="table-element-td"> 87 <span id="table-element-child"></span> 88 </td> 89 </tr> 90 </tbody> 91 </table> 92 93 <div id="none-element"> 94 <a href="#" id="none-element-child-a"></a> 95 <p id="none-element-child-p"></p> 96 <video id="none-element-child-video"></video> 97 <audio id="none-element-child-audio"></audio> 98 <canvas id="none-element-child-canvas"></canvas> 99 <svg id="none-element-child-svg"></svg> 100 </div> 101 102 <div id="fixed"> 103 </div> 104 105 <div id="log"></div> 106 <script type="text/javascript"> 107 var getStyle = window.getComputedStyle; 108 var html = document.documentElement; 109 var body = document.body; 110 var fixed_element = document.getElementById('fixed'); 111 var none_element = document.getElementById('none-element'); 112 113 var none_element_child_a = document.getElementById('none-element-child-a'); 114 var none_element_child_p = document.getElementById('none-element-child-p'); 115 var none_element_child_video = document.getElementById('none-element-child-video'); 116 var none_element_child_audio = document.getElementById('none-element-child-audio'); 117 var none_element_child_canvas = document.getElementById('none-element-child-canvas'); 118 var none_element_child_svg = document.getElementById('none-element-child-svg'); 119 120 var relative_element = document.getElementById('relative-element'); 121 var absolute_element = document.getElementById('absolute-element'); 122 var td_element = document.getElementsByTagName('td')[0]; 123 124 var body_element_child = document.getElementById('body-element-child'); 125 var relative_element_child = document.getElementById('relative-element-child'); 126 var absolute_element_child = document.getElementById('absolute-element-child'); 127 var table_element_child = document.getElementById('table-element-child'); 128 129 var caption_element_child = document.getElementById('caption-element-child'); 130 var table_element_tr = document.getElementById('table-element-tr'); 131 var table_element = document.getElementById('table-element'); 132 133 // The offsetParent attribute algorithm rule checking passed! 134 test(function() { 135 assert_equals(html.offsetParent,null); 136 assert_equals(body.offsetParent,null); 137 assert_equals(fixed_element.offsetParent,null); 138 assert_equals(none_element.offsetParent,null); 139 assert_equals(none_element_child_a.offsetParent,null); 140 assert_equals(none_element_child_p.offsetParent,null); 141 assert_equals(none_element_child_video.offsetParent,null); 142 assert_equals(none_element_child_audio.offsetParent,null); 143 assert_equals(none_element_child_canvas.offsetParent,null); 144 assert_equals(none_element_child_svg.offsetParent,undefined); 145 }, "Valid the algorithm rule of offsetParent check step 1"); 146 147 // The offsetParent attribute algorithm rule checking passed! 148 test(function() { 149 assert_equals(body_element_child.offsetParent,body); 150 assert_equals(window.getComputedStyle(relative_element).position,'relative'); 151 assert_equals(relative_element_child.offsetParent,relative_element); 152 assert_equals(window.getComputedStyle(absolute_element).position,'absolute'); 153 assert_equals(absolute_element_child.offsetParent,absolute_element); 154 assert_equals(window.getComputedStyle(td_element).position,'static'); 155 assert_equals(table_element_child.offsetParent,td_element); 156 assert_equals(window.getComputedStyle(table_element_tr).position,'static'); 157 assert_equals(table_element_tr.offsetParent,table_element); 158 assert_equals(window.getComputedStyle(caption_element_child).position,'static'); 159 assert_equals(caption_element_child.offsetParent,table_element); 160 assert_equals(window.getComputedStyle(td_element).position,'static'); 161 assert_equals(td_element.offsetParent,table_element); 162 163 let transform_element = document.getElementById('transform-element'); 164 assert_equals(transform_element.children[0].offsetParent, transform_element); 165 166 let perspective_element = document.getElementById('perspective-element'); 167 assert_equals(perspective_element.children[0].offsetParent, perspective_element); 168 169 let transform_style_preserve_3d_element = document.getElementById('transform-style-preserve-3d-element'); 170 assert_equals(transform_style_preserve_3d_element.children[0].offsetParent, 171 transform_style_preserve_3d_element); 172 173 let contain_paint_element = document.getElementById('contain-paint-element'); 174 assert_equals(contain_paint_element.children[0].offsetParent, contain_paint_element); 175 176 177 }, "Valid the algorithm rule of offsetParent check step 2"); 178 179 </script> 180 181 </body> 182 </html>