| <!DOCTYPE html> |
| <title>User-agent levels style sheet defaults for iframe</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/testdriver.js"></script> |
| <script src="/resources/testdriver-vendor.js"></script> |
| <script src="../trusted-click.js"></script> |
| <style> |
| iframe { |
| border: 1px solid blue; |
| padding: 1px; |
| /* transform is also tested because of https://crbug.com/662393 */ |
| transform: scale(0.5); |
| } |
| </style> |
| <div id="log"></div> |
| <div id="ancestor"><iframe></iframe></div> |
| <script> |
| function assert_dir_properties(style, propBase, value, state) { |
| for (let dir of ["Top", "Right", "Bottom", "Left"]) { |
| let prop = propBase.replace('{}', dir); |
| assert_equals(style[prop], value, `${state} ${prop} style`); |
| } |
| } |
| |
| async_test(t => { |
| const ancestor = document.getElementById('ancestor'); |
| const iframe = ancestor.firstChild; |
| |
| const initialStyle = getComputedStyle(iframe); |
| assert_dir_properties(initialStyle, 'border{}Width', '1px', 'initial'); |
| assert_dir_properties(initialStyle, 'border{}Style', 'solid', 'initial'); |
| assert_dir_properties(initialStyle, 'border{}Color', 'rgb(0, 0, 255)', 'initial'); |
| assert_dir_properties(initialStyle, 'padding{}', '1px', 'initial'); |
| assert_equals(initialStyle.transform, 'matrix(0.5, 0, 0, 0.5, 0, 0)', 'initial transform style'); |
| |
| trusted_request(iframe); |
| |
| document.addEventListener('fullscreenchange', t.step_func_done(() => { |
| const fullscreenStyle = getComputedStyle(iframe); |
| assert_dir_properties(fullscreenStyle, 'border{}Width', '0px', 'fullscreen'); |
| assert_dir_properties(fullscreenStyle, 'border{}Style', 'none', 'fullscreen'); |
| assert_dir_properties(fullscreenStyle, 'border{}Color', 'rgb(0, 0, 0)', 'fullscreen'); |
| assert_dir_properties(fullscreenStyle, 'padding{}', '0px', 'fullscreen'); |
| assert_equals(fullscreenStyle.transform, 'none', 'fullscreen transform style'); |
| })); |
| }); |
| </script> |