fieldset-display-ruby.html (1430B)
1 <!doctype html> 2 <title>fieldset and CSS display (ruby)</title> 3 <script src=/resources/testharness.js></script> 4 <script src=/resources/testharnessreport.js></script> 5 <style> 6 #inline-ref { display: inline-block; } 7 </style> 8 <fieldset id="block-ref">x</fieldset> 9 <fieldset id="inline-ref">x</fieldset> 10 <fieldset id="test">x</fieldset> 11 <script> 12 const blockWidth = getComputedStyle(document.querySelector('#block-ref')).width; 13 const inlineWidth = getComputedStyle(document.querySelector('#inline-ref')).width; 14 const testElm = document.querySelector('#test'); 15 // Please only add canonical values to these lists: 16 // (Also, note that we're not testing "display:run-in" here; it's mentioned 17 // in several CSS specs, but no browser engines appear likely to support it.) 18 const blocks = ['block ruby']; 19 const inlines = ['ruby', 'ruby-base', 'ruby-text', 'ruby-base-container', 'ruby-text-container']; 20 21 function test_display(val, expectedWidth) { 22 test(() => { 23 testElm.style.removeProperty('display'); 24 testElm.style.display = val; 25 const computed = getComputedStyle(testElm); 26 assert_equals(computed.display, val, `display: ${val} is not supported`); 27 assert_equals(computed.width, expectedWidth); 28 }, `fieldset with display: ${val}`); 29 } 30 31 for (const val of blocks) { 32 test_display(val, blockWidth); 33 } 34 35 for (const val of inlines) { 36 test_display(val, inlineWidth); 37 } 38 </script>