test/visual/vaadin-text-field/text-field-2.html

<!DOCTYPE html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="../../../../webcomponentsjs/webcomponents-loader.js"></script>
  <script>
    const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
    document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-text-field.html">`);

    window.addEventListener('WebComponentsReady', function() {
      setTimeout(function() {
        window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
        window.webComponentsAreReady = true; // Checked in gemini before capture callback
      });
    });
  </script>
  <link href="../common.html" rel="import">
</head>

<body>

  <custom-style>
    <style>
      fieldset {
        font-family: sans-serif;
        font-size: 16px;
        width: 550px;
        border: solid 1px grey;
      }

      p {
        margin: 0;
      }
    </style>
  </custom-style>

  <form>
    <fieldset id="text-field">
      <p>
      label: <vaadin-text-field label="Foo"></vaadin-text-field>
      <p>
      label and value: <vaadin-text-field label="Foo" value="Bar"></vaadin-text-field>
      <p>
      prefix and suffix:
        <vaadin-text-field label="Foo" value="Bar">
          <span slot="prefix">prefix</span>
          <span slot="suffix">suffix</span>
        </vaadin-text-field>
      <p>
      long: <vaadin-text-field label="Foo" value="Bar" style="width: 300px;"></vaadin-text-field>
      <p>
      short with prefix and suffix:
        <vaadin-text-field label="Foo" value="Bar" style="width: 100px;">
          <span slot="prefix">prefix</span>
          <span slot="suffix">suffix</span>
        </vaadin-text-field>
    </fieldset>
  </form>

</body>