| <!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true contentMode=mobile ] --> |
| <html> |
| <head> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <style> |
| body, html { |
| margin: 0; |
| } |
| |
| .no-autosizing { |
| -webkit-text-size-adjust: none; |
| } |
| |
| pre, code { |
| color: white; |
| background-color: black; |
| padding: 4px; |
| } |
| |
| .container { |
| border: 1px solid black; |
| padding: 8px 12px 12px 12px; |
| } |
| |
| #text0, #text5 { |
| font-size: 8px; |
| } |
| |
| #text1, #text6 { |
| font-size: 12px; |
| } |
| |
| #text2, #text7 { |
| font-size: 14px; |
| } |
| |
| #text3, #text8 { |
| font-size: 16px; |
| } |
| |
| #text4, #text9 { |
| font-size: 20px; |
| } |
| |
| table, td { |
| border: 1px solid gray; |
| } |
| |
| thead, tfoot { |
| background-color: tomato; |
| color: white; |
| } |
| |
| th, td { |
| padding: 4px; |
| } |
| </style> |
| <script src="../../../../resources/ui-helper.js"></script> |
| <script type="text/javascript"> |
| if (window.internals && window.testRunner) { |
| internals.settings.setTextAutosizingEnabled(true); |
| internals.settings.setTextAutosizingUsesIdempotentMode(true); |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| |
| async function dumpTextSizes(description) { |
| if (window.testRunner) |
| await UIHelper.ensurePresentationUpdate(); |
| |
| const table = document.querySelector("template#table").content.cloneNode("true").firstElementChild; |
| table.querySelector(".description").textContent = description; |
| for (let index = 0; index < 10; ++index) { |
| const computedFontSize = getComputedStyle(document.querySelector(`#text${index}`)).fontSize; |
| table.querySelector(`.text${index}`).textContent = computedFontSize; |
| } |
| |
| document.body.appendChild(table); |
| document.body.appendChild(document.createElement("br")); |
| } |
| |
| addEventListener("load", async () => { |
| const metaViewport = document.querySelector("meta"); |
| await dumpTextSizes("At initial scale 1"); |
| |
| metaViewport.content = "width=device-width, initial-scale=0.5"; |
| await dumpTextSizes("After changing initial scale to 0.5"); |
| |
| metaViewport.content = "width=device-width, initial-scale=0.75"; |
| await dumpTextSizes("After changing initial scale to 0.75"); |
| |
| metaViewport.content = "width=device-width, initial-scale=1.0"; |
| await dumpTextSizes("After changing initial scale back to 1"); |
| |
| metaViewport.content = "width=device-width, initial-scale=1.25"; |
| await dumpTextSizes("After changing initial scale to 1.25"); |
| |
| document.querySelector(".text-containers").remove(); |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }); |
| </script> |
| </head> |
| <body> |
| <template id="table"> |
| <table> |
| <thead> |
| <tr> |
| <th colspan="2" class="description"></th> |
| </tr> |
| <tr> |
| <th>none</th> |
| <th>auto</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td class="text0"></td> |
| <td class="text5"></td> |
| </tr> |
| <tr> |
| <td class="text1"></td> |
| <td class="text6"></td> |
| </tr> |
| <tr> |
| <td class="text2"></td> |
| <td class="text7"></td> |
| </tr> |
| <tr> |
| <td class="text3"></td> |
| <td class="text8"></td> |
| </tr> |
| <tr> |
| <td class="text4"></td> |
| <td class="text9"></td> |
| </tr> |
| </tbody> |
| </table> |
| </template> |
| <div class="text-containers"> |
| <div class="container no-autosizing"> |
| <p id="text0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet nisi felis, eu scelerisque dolor imperdiet in.</p> |
| <p id="text1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet nisi felis, eu scelerisque dolor imperdiet in.</p> |
| <p id="text2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet nisi felis, eu scelerisque dolor imperdiet in.</p> |
| <p id="text3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet nisi felis, eu scelerisque dolor imperdiet in.</p> |
| <p id="text4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet nisi felis, eu scelerisque dolor imperdiet in.</p> |
| </div> |
| <div class="container"> |
| <p id="text5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet nisi felis, eu scelerisque dolor imperdiet in.</p> |
| <p id="text6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet nisi felis, eu scelerisque dolor imperdiet in.</p> |
| <p id="text7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet nisi felis, eu scelerisque dolor imperdiet in.</p> |
| <p id="text8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet nisi felis, eu scelerisque dolor imperdiet in.</p> |
| <p id="text9">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet nisi felis, eu scelerisque dolor imperdiet in.</p> |
| </div> |
| </div> |
| </body> |
| </html> |
