details-writing-mode.html (1363B)
1 <!DOCTYPE html> 2 <!-- Any copyright is dedicated to the Public Domain. 3 - http://creativecommons.org/publicdomain/zero/1.0/ --> 4 5 <html> 6 <style> 7 body { 8 display: grid; 9 grid-template-rows: auto; 10 grid-template-columns: repeat(3, 150px); 11 } 12 summary { 13 /* Hide the triangle for comparing with div in reftest. */ 14 list-style-type: none; 15 } 16 details { 17 border: 1px solid lightblue; 18 } 19 </style> 20 <body> 21 <details open style="writing-mode: horizontal-tb; direction: ltr;"> 22 <summary>Summary</summary> 23 <p>This is the details.</p> 24 </details> 25 <details open style="writing-mode: vertical-rl; direction: ltr;"> 26 <summary>Summary</summary> 27 <p>This is the details.</p> 28 </details> 29 <details open style="writing-mode: vertical-lr; direction: ltr;"> 30 <summary>Summary</summary> 31 <p>This is the details.</p> 32 </details> 33 <details open style="writing-mode: horizontal-tb; direction: rtl;"> 34 <summary>Summary</summary> 35 <p>This is the details.</p> 36 </details> 37 <details open style="writing-mode: vertical-rl; direction: rtl;"> 38 <summary>Summary</summary> 39 <p>This is the details.</p> 40 </details> 41 <details open style="writing-mode: vertical-lr; direction: rtl;"> 42 <summary>Summary</summary> 43 <p>This is the details.</p> 44 </details> 45 </body> 46 </html>